티스토리의 태그 페이지에서 모든 태그 리스트를 출력할 때, 단순히 단어들을 나열하는 대신 빈도수에 따라 다르게 출력하는 방법에 대해 알아보겠습니다.
목차
들어가기 앞서
CSS 파일에서 태그 클래스마다 다른 스타일을 설정하는 방법
외부 라이브러리 jQCloud를 이용한 태그 클라우드
- jQCloud 다운로드
- 티스토리 스킨에 jQCloud 파일 추가하기
- jQCloud 사용 방법: 간단한 예시
- jQCloud 사용 방법: 블로그의 태그 페이지에 추가하기
레퍼런스
** 모바일에서는 출력 예시가 보이지 않을 수 있습니다.
들어가기 앞서: 티스토리 치환자 태그 클래스 (_tag_class_)
티스토리 치환자 중 _tag_class_라는 것이 있습니다. 각 태그는 _tag_class_의 값으로 cloud1, cloud2, cloud3, cloud4, cloud5 중 하나를 가지게 됩니다. 가장 빈도수가 높은 태그는 cloud1, 낮은 태그는 cloud5로 분류됩니다.
CSS 파일에서 태그 클래스마다 다른 스타일을 설정하는 방법
제가 현재 사용하고 있는 티스토리에서 기본 제공되는 Poster 스킨의 경우, 다음과 같이 "skin.html" 파일에서 <s_tag>... </s_tag>에 태그 페이지에서 출력되는 내용이 포함되어 있습니다.
/* skin.html 수정 전 */
<s_tag>
<div class="hgroup">
<h1>태그</h1>
</div>
<div class="tags">
<div class="items">
<s_tag_rep>
<a href=""></a>
</s_tag_rep>
</div>
</div>
</s_tag>
하나의 태그가 출력되는 부분은 <s_tag_rep> ... </s_tag_rep>에 해당합니다. 기본 템플릿의 html 코드에 따르면 태그의 이름(_tag_name_)만 출력하고 있고 각 태그마다 하이퍼링크(href) 값으로 태그 링크(_tag_link_)가 주어져 있습니다. 즉, 태그 페이지 화면에 출력된 각 태그의 이름을 클릭하면 태그 링크로 이동하게 됩니다.
각 태그의 클래스(_tag_class_)마다 출력하는 방법을 달리 하기 위해서 우선 <s_tag_rep> ... </s_tag_rep> 안에 포함된 <a> ... </a> 부분에 다음과 같이 클래스를 추가합니다.
/* skin.html 수정 후 */
<s_tag>
<div class="hgroup">
<h1>태그</h1>
</div>
<div class="tags">
<div class="items">
<s_tag_rep>
<a href="" class=""></a>
</s_tag_rep>
</div>
</div>
</s_tag>
이제 이 태그를 화면에 출력할 때 폰트 크기, 색상, 정렬 등과 같은 설정을 해주는 "style.css"의 코드를 확인해보겠습니다. 기본 Poster 템플릿과 거의 비슷하지만 약간 변경된 부분이 있음을 알려드립니다.
.tags {
position: relative;
overflow: hidden;
max-width: 860px;
margin: 53px auto;
padding: 27px 27px 28px 27px;
color: #999;
box-sizing: border-box;
}
.tags h2 {
float: left;
width: 47px;
margin-left: -10px;
font-weight: 400;
font-size: 1em;
color: #000;
font-family: 'Poor Story', cursive;
}
.tags .items a {
display:inline-block;
text-decoration:none;
font-size: 0.8125em;
line-height: 1.8;
color: #999;
min-width: 14px;
padding: 0 10px;
border: 1px solid #ddd;
border-radius: 28px;
text-align: center;
}
.tags .items a:hover {
color: #7a583a;
}
.tags .items a:before {
content: "#";
}
가장 간단한 방법으로, 빈번한 태그는 크게, 자주 사용되지 않은 태그는 작게 출력할 수 있습니다. 다음과 같은 코드를 "style.css" 파일에 추가해주면 됩니다.
.tags .items .cloud1 {
font-size: 2.5em;
}
.tags .items .cloud2 {
font-size: 2.0em;
}
.tags .items .cloud3 {
font-size: 1.6em;
}
.tags .items .cloud4 {
font-size: 1.2em;
}
.tags .items .cloud5 {
font-size: 0.8125em;
}
출력 예시
외부 라이브러리 jQCloud를 이용한 태그 클라우드
단순히 텍스트 스타일을 바꾸는 방법 대신, 모든 태그들을 이용해서 좀 더 제대로 된(?) 워드 클라우드(word cloud)를 만들어 보겠습니다. 다양한 외부 라이브러리들이 있는데 그 중에서 jQCloud라는 것을 소개하겠습니다.
jQCloud 다운로드
제가 사용한 버전은 v2.0.3입니다. 다양한 버전에 관한 정보는 해당 github 페이지에서 얻을 수 있으니 참고바랍니다. 두 가지 다운로드 방법을 소개합니다. 둘 중 하나의 방법으로 다운로드 하면 됩니다.
- 터미널을 이용한 방법 (참고로 저는 MacOS 사용자 입니다.)
git clone https://github.com/mistic100/jQCloud.git git checkout v2.0.3 #원하는 버전 선택 - github 페이지에서 직접 다운로드하는 방법
- https://github.com/mistic100/jQCloud에 접속.
- 왼쪽 상단 부근에 "master"로 나타나 있는 드롭다운 메뉴를 클릭.
- Tags를 클릭 후 원하는 버전을 선택.
- 우측에 초록색 "Code" 다운로드 버튼을 클릭 한 뒤, 하단의 "Download ZIP"을 클릭.
- 다운로드 된 압축파일을 unzip 하기.
티스토리 스킨에 jQCloud 파일 추가하기
jQCloud/dist 로 가면 다음과 같은 파일이 있습니다.
jqcloud.css
jqcloud.js
jqcloud.min.css
jqcloud.min.js"min"으로 표시된 파일들은 공백없이 코드가 저장되어 있어서 용량이 더 작은 파일들입니다. 둘 중 아무것이나 사용가능하며, 저는 "min"으로 된 파일들을 사용하였습니다. 티스토리 계정에 로그인 한 후, [관리] - [꾸미기] - [스킨 편집] - [html 편집] - [파일 업로드]에 들어가 이 파일들을 업로드 해 줍니다.
jQCloud 사용 방법: 간단한 예시
먼저, "tag1", "tag2", "tag3", "tag4", "tag5" 다섯 개의 태그로 간단한 예시를 살펴보겠습니다.
<script src="//t1.daumcdn.net/tistory_admin/lib/jquery/jquery-1.12.4.min.js"></script>
<script src="./images/jqcloud-2.0.3.min.js"></script>
<link rel="stylesheet" href="./images/jqcloud-2.0.3.min.css">첫 줄의 코드는 기본 Poster 템플릿의 경우에 head에 이미 추가되어 있던 jQuery 파일입니다. 이미 jQuery 파일이 포함되어 있는 경우에는 생략하시면 됩니다. 다음 두 줄의 코드는 사용 용도에 따라 <head> ... </head>에 추가해도 되고 <body> ... </body>에 추가해도 됩니다.
<script>
var word_array = [
{text: "tag1", weight: 5, link: "#tag1"},
{text: "tag2", weight: 4, link: "#tag2"},
{text: "tag3", weight: 3, link: "#tag3"},
{text: "tag4", weight: 2, link: "#tag4"},
{text: "tag5", weight: 1, link: "#tag5"},
];
$(function() {
$("#tagcloud").jQCloud(word_array);
});
</script>
<div id="tagcloud" style="width: auto; height: 100px; border: 1px dashed #ccc;">
</div>다음으로는 태그 클라우드 출력을 원하는 부분에 위 코드에서 <div id="tagcloud"> ... </div> 부분의 코드를 추가해주시면 됩니다. 단, <script> ... </script>가 미리 포함되어 있어야 하는데, 저의 경우에는 그냥 <body> ... </body> 안에 출력을 원하는 부분에 위의 코드를 그냥 나란히 입력하였습니다. 위의 코드를 본 포스트에 붙여 넣어 출력한 예시는 다음과 같습니다.
출력 예시
jQCloud 사용 방법: 블로그의 태그 페이지에 추가하기
제 블로그의 태그 페이지를 보시면 태그 클라우드가 추가되어 있습니다. 태그 클라우드를 블로그 태그 페이지에 추가한 방법을 소개하겠습니다. 티스토리에서 기본 제공하는 Poster 템플릿을 기준으로 작성한 것이며 다른 템플릿은 확인해보지 않은 점 참고바랍니다. 템플릿이 다르더라도 티스토리에서 제공하는 기본 치환자가 동일하기 때문에 비슷한 방법으로 사용하시면 될 것 같습니다.
먼저 기본 템플릿의 skin.html 파일을 보면 <s_tag> ... </s_tag>의 부분을 찾을 수 있습니다. 이 부분은 블로그의 태그 페이지를 클릭했을 때 출력할 내용을 포함하고 있습니다. 상단의 <div class="hgroup"> ... </div> 에서는 "태그"라는 타이틀을 출력합니다. 이후의 부분에서는 블로그의 모든 태그 리스트 데이터를 가져와 출력하게 됩니다. <s_tag_rep> ... </s_tag_rep>에서 개별 태그가 어떤식으로 출력되는지를 정의합니다. 아래 코드에서 은 개별 태그를 나타내는 치환자이고, 는 태그를 클릭했을 때 다이렉트 될 페이지의 링크를, 는 앞서 설명한 "cloud1-5" 다섯 개 중 하나의 클래스를 나타내는 치환자입니다. 예를 들어:
- _tag_name_: 가상현실
- _tag_link_: https://dumbofphilosophy.tistory.com/tag/가상현실
- _tag_class_: cloud1
이런식의 값들을 각 태그 마다 가지고 있습니다.
<!-- Poster 템플릿의 skin.html에서 s_tag 부분 -->
<s_tag>
<div class="hgroup">
<h1>태그</h1>
</div>
<div class="tags">
<div class="items">
<s_tag_rep>
<a href="" class=""></a>
</s_tag_rep>
</div>
</div>
</s_tag>
이전 섹션에서 jQCloud 기본 사용법을 설명하면서 word_array라는 리스트를 만들어 모든 태그에 대한 데이터를 저장하였습니다. 동일한 방법을 사용하기 위해서, 우선 모든 태그들을 for loop 안에서 한 번씩 확인하면서 word_array에 필요한 내용들을 추가합니다.
아래 코드 중간 쯤에서 for (i = 0; ...) 부분을 부면 word_array에 개별 태그마다 필요한 정보를 추가하는 부분이 있습니다. 우선, text는 출력할 단어, 즉, _tag_name_이 되어야 하고, weight는 중요도(빈도수)를 수치화한 값입니다. weight가 클수록 크게 출력되며, 자동으로 코드 실행 시 1-10 사이의 숫자로 스케일되어서 반영됩니다. link는 태그를 클릭했을 때 연결되는 페이지의 주소입니다. 제 블로그와 같이 주소에 한글이 포함되어 있는 경우에는 decodeURI()를 해주어야 합니다.
나머지 코드는 이전 섹션의 예시에서 스타일만 일부 변경되었고 동일합니다.
<!-- jQCloud 기반의 tagcloud를 추가한 skin.html -->
<s_tag>
<div class="hgroup">
<h1>태그</h1>
</div>
<div class="tags">
<div class="items-hidden">
<!-- invisible but still remains a part of the DOM-->
<s_tag_rep>
<a href="" class="" id=""></a>
</s_tag_rep>
</div>
</div>
<!-- begin tagcloud -->
<script type="text/javascript">
const elements_tags = document.getElementsByClassName("tags");
const elements_a = elements_tags[0].getElementsByTagName("a");
var word_array = [];
var i;
for (i = 0; i < elements_a.length; ++i) {
word_array.push({
text: elements_a[i].id,
weight: - parseInt(elements_a[i].className.substr(5)), // will be linearly mapped to a discrete scale from 1 to 10
link: decodeURI(elements_a[i].href)
});
}
$(function() {
$("#tagcloud").jQCloud(word_array, {autoResize: true});
});
</script>
<div class="tags">
<div id="tagcloud" style="width: auto; height:500px; marginTop: 0; paddingTop: 0;">
</div>
</div>
<!-- end tagcloud -->
</s_tag>
한가지 추가로 바꿔줘야 할 부분은 바로, 기존의 태그를 출력하는 부분입니다. 저의 경우에는 기존의 태그 출력 방식을 아예 사용하지 않고 태그 클라우드로 대체하였기 때문에, 기존 코드에서 _tag_name_ 을 출력하는 부분은 변경해주었습니다. 자세히 비교해보면:
<!-- Before -->
<div class="items">
<s_tag_rep>
<a href="" class=""></a>
</s_tag_rep>
</div>
<!-- After -->
<div class="items-hidden">
<!-- invisible but still remains a part of the DOM-->
<s_tag_rep>
<a href="" class="" id=""></a>
</s_tag_rep>
</div>
을 출력하는 대신 이를 id로 추가해주었습니다. 왜냐하면, word_array에 태그 정보를 추가할 때 태그의 이름이 필요하기 때문입니다. 그리고 이 부분을 출력하지 않기 위해서 다음과 같이 style.css 파일에 .items를 대체할 수 있는 .items-hidden을 추가로 정의하였습니다.
.tags .items-hidden a {
opacity: 0.0;
}
출력 결과는 제 블로그의 태그 페이지를 확인해주세요.
참고로, 저는 웹 개발 전문가가 아니기 때문에 제가 사용한 방법이 최적의 방법은 아닐 수도 있습니다. 혹시 문제점이나 보완할 수 있는 방법을 아시는 분은 댓글로 공유해주세요.
이 외에도 다양한 jQuery 기반 워드 클라우드가 궁금하신 분들은 jqueryscript.net의 Free jQuery Tag Cloud Plugins의 예시들을 참조하셔도 좋을 것 같습니다.
레퍼런스
- 티스토리 치환자 - 태그, https://tistory.github.io/document-tistory-skin/contents/tag.html
- Word Clouds with JQuery - jQCloud v2.0.3, https://mistic100.github.io/jQCloud/
'공부하는 삶 > 티스토리 관련' 카테고리의 다른 글
| 티스토리에 트위터 트윗 첨부하는 방법 (12) | 2021.07.08 |
|---|---|
| 티스토리 블로그 초보 필수 홍보 팁 (7) | 2021.06.13 |
