Jekyll 블로그에 태그 클라우드 설치
jekyll 블로그 기본 테마가 심심하게 생겨서 혼자 만들려다가
카테고리 리스트나 태그 등 기능적으로 부족한 부분이 많아서
그것까지 다 만들기에 시간이 너무 많이 허비될 것 같아
이미 훌륭하게 만들어져 있는 Yat 테마를 적용했다.
내가 원하는 카테고리 리스트, 태그 리스트 기능이 모두 들어가 있어 좋았는데
다만 카테고리 리스트 페이지와 태그 리스트 페이지 디자인이 똑같아서 너무 심심해 보였다.
그래서 태그 리스트 페이지를 수정해 보기로 했다.
나는 태그를 클라우드로 보여지게 하고,
태그를 클릭하면 해당 태그의 게시물 리스트를 출력하고 싶었다.
먼저 태그클라우드 적용을 위해 jQCloud 라이브러리를 사용했다.
자바스크립트를 배우는 와중에 제이쿼리로 만들어진 라이브러리를 쓰는게 딱히 자랑스럽지는 않지만
그렇다고 내가 만들어 내기도 어렵고 다른걸 못찾아서 그냥 썼다.
라이브러리 적용
jqcloud.min.css와 jqcloud.min.js를 받아와서 내 블로그에 적용해야 한다.
- jqcloud.min.css는 /_sass/ 에 scss로 넣어놓고 assets/main.scss 파일에서 불러왔다.
// /assets/main.scss 파일 최하단
@import "jqcloud.min";
- jqcloud.min.js는 /assets/ 경로에 넣었다.
리스트 파일 생성
기존에 태그 리스트는 카테고리 리스트와 view파일을 공유하고 있었으므로 새 파일을 생성해서 연결한다.
- /_layouts/tags.html을 열어 코드를 수정한다.
{%- include views/tagcloud.html -%}
<!-- 기존 : {%- include views/segments.html -%} -->
- /_includes/views/ 안에 tagcloud.html 파일을 생성해 아래 코드를 추가한다.
기존 실행 코드에서 살짝 수정한 부분이 있다.
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<!-- 제이쿼리 불러오기 -->
<script>
$(document).ready(function() {
let tags = [];
{% for tag in tags %}
tags.push(['{{ tag[0] | replace:'-', ' ' }}', {{ tag | last | size }}]);
// 태그 이름과 사이즈를 불러와 tags 배열로 저장
{% endfor %}
let tagCloudWords = tags.map(w => {
return {
text: w[0], weight: w[1], link: updateQueryString(w[0])
// **text : 텍스트, weight : 사이즈, link : 클릭 시 이동 링크**
};
}).sort((a, b) => {
return a.weight < b.weight ? 1 : -1;
});
$('#jqcloud').jQCloud(tagCloudWords,
{
height: 400,
autoResize: true,
fontSize: { from: 0.09, to: 0.02 }
}
);
let currentTag;
function updateQueryString(tagName) { // 클릭 시 링크 경로
const path = `${location.protocol}//${location.host}${location.pathname}?tag=${tagName}`;
return path;
}
if (!currentTag) {
const queryTag = getQuery().tag; // 현재 경로에서 쿼리 파라미터 가져오기
if (queryTag) {
currentTag = queryTag;
filterByTagName(currentTag); // 현재 쿼리 파라미터의 태그로 게시물 리스트 필터링
}
}
function getQuery(){
let params = {};
window.location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi,
function(str, key, value) {
params[key] = value;
}
);
return params;
}
function filterByTagName(tagName) {
$('.selected').removeClass('selected');
// 이미 필터링되어 나와있는 리스트 있으면 지우기
$('.page-segments-list').each((index, elem) => {
if (elem.hasAttribute(`data-${tagName}`)) {
$(elem).addClass('selected');
// 페이지 리스트 안에 선택된 태그 속성을 가진 요소에 selected 클래스 추가
}
});
}
});
</script>
<div class="tags">
<div id="jqcloud"></div> <!-- 태그클라우드 출력 위치 -->
<div class="page-segments"> <!-- 게시물 리스트 -->
{% for key in keys %}
<div class="page-segments-list" data-{{ key }}> <!-- 태그명 속성으로 추가 -->
<hr/>
<ul>
<h2 id="{{ key }}" class="segment-name">{{ key }}</h2>
{% assign items = site.posts | where: field, key %}
{% for item in items %}
{% if item != nil %}
<li> {% include views/post-item.html %} </li>
{% endif %}
{% endfor %}
<a href="#top" class="btn btn-default">
<i class="fa fa-refresh" aria-hidden="true"></i> Go back to the top
</a>
</ul>
</div>
{% endfor %}
</div>
</div>
<script src="/assets/js/jqcloud.min.js" charset="utf-8"></script>
<!-- 라이브러리 실행 -->
CSS수정
내가 원하는 쿼리 파라미터를 불러와서 해당 게시물만 필터링되는 기능은
태그 클라우드 라이브러리와 상관 없이 별도로 추가해 준 부분이라서 jqcloud.min.css도 추가해 주어야 한다.
$jqcloud-font: 10px "Helvetica", "Arial", sans-serif;
$jqcloud-link-hover-color: #454545; // 태그 hover 시 컬러
$jqcloud-words: ( // 게시물 갯수 단계별 스타일 지정
w1: (100%, #ffede5),
w2: (150%, #ffdccc),
w3: (200%, #ffcab2),
w4: (250%, #ffb999),
w5: (300%, #ffa87f),
w6: (350%, #ff9666),
w7: (400%, #ff854c),
w8: (450%, #ff7332),
w9: (500%, #ff6219),
w10: (550%, #ff5100)
) !default;
.jqcloud {
font: $jqcloud-font;
line-height: normal;
overflow: hidden;
position: relative;
}
.jqcloud-word {
margin: 0;
padding: 0;
@each $word, $config in $jqcloud-words {
&.#{$word} {
color: nth($config, 2);
font-size: nth($config, 1);
}
}
a {
color: inherit;
font-size: inherit;
text-decoration: none;
&:hover {
color: $jqcloud-link-hover-color;
text-decoration: underline;
}
}
}
hr{ // 태그 클라우드와 게시물 리스트 경계 라인
border-top: 1px solid #eee;
width: 100%;
height: 0;
margin: 50px 0;
}
.tags .page-segments-list{ // 처음에는 리스트 다 안보이게
display: none;
}
.tags .selected{ // 선택된 리스트만 보이게
display: block;
}
.tags .page-segments-list a.btn{ // top버튼
display: block;
margin-top: 30px;
}
이렇게 추가하면 끝~
이제 태그 리스트가 클라우드 형식으로 출력이된다.
컬러는 하나하나 고르기 힘들어서 Color-hex에서 뽑았다.