github 블로그에 tag cloud 만들기

Tag Cloud란 태그의 종류와 개수를 시각적으로 알 수 있도록 wordcloud 형태로 만든 것

우연히 futrecreator 블로그에서 tag cloud라는 것을 보았다.

하지만, 이 블로그는 hexo라는 Template을 사용하여 jekyll Template과 구조가 달라보여 구글에 검색해 보았다.

Jekyll 블로그 태그 기능 붙이기 이 블로그를 기반으로 tag cloud를 만들었다.

원하는 위치에 이 코드 하나면 구현이 가능하다.

# {} 양 옆 ""는 지워야 코드가 완성된다.
# a 태그는 href 속성만 손보면 된다. 아직 구현하지 않았다.
<section class="tag-cloud">
<h3 class="title">TAG Cloud</h3>     
"{"% for tag in site.tags %"}"
    "{"% assign tag_word = tag | first %"}"
    # 태그 수를 조절하기 위해 태그 수가 2개 이상부터 나오도록 설정했다.
    "{"% if site.tags[tag_word].size > 1 %"}"
        <span style='font-size: "{""{" tag | last | size | times: 100 | 
            divided_by: site.tags.size | plus: 70  "}""}"%'>
        <a href="#">"{""{" tag_word "}""}"</a> &nbsp;
        </span>
    "{"% endif %"}"
"{"% endfor %"}"
</section>

주요 키워드

tag | first : 해당 태그 이름 (여기서는 tag_word라는 변수로 정의)

site.tags[tag_word].size : 해당 태그의 총 개수

site.tags : site.tags는 태그를 설정한 모든 게시물 객체

tag (in site.tags) : 여기서 tag는 한 태그의 모든 게시물 객체를 의미하는 듯하다.

site.tags.size : 모든 태그의 개수

tag | last : 해당 태그의 모든 POST(게시글) - 코드에 입력하면 모든 게시물이 나온다.

tag | last | size : 해당 태그의 개수

tag | first | size : 해당 태그 이름의 글자 수(참고용)

각 태그의 개수의 100을 곱하고 총 태그의 수를 나누고 70을 더하는 비율을 만들어 태그마다 weight를 부여한다.