📚 [Jekyll] 태그 보여주기
Category: Jekyll | 📅 December 31, 2021
Tag 생성하기
---
tags: ["태그 보여주기", jekyll , "지킬 블로그 태그 보여주기"]
---
포스트의 최상단 Formatter에 써주면 됨.
Tag 리스트 출력하기
(언제쩍에 쓰던건지 잘 모르겠음 ㅠㅠ )
전체 Tag 보여주기
디렉토리 내에 tag.md 파일을 생성 후, 한 파일에 다 써도 되고, tag.md 에 formatter 만 등록한 후, include 디렉토리에 html을 써줘도 됨.
여기서는 한 파일에 다 쓰는 방법으로..
<div id="tagbox">
<ul>
{% for tag in site.tags %}
<!-- tag_name 변수 지정: 태그명은 소문자화(slugize) 한다 -->
{% capture tag_name %}{{tag|first|slugize}}{% endcapture %}
<!-- font_size 변수 지정: 태그숫자/전체태그숫자 * 100 + 50 -->
{% capture font_size %}{{tag|last|size| times:100 | divided_by:site.tags.size | plus: 50 }}%{% endcapture %}
<!-- tag_size 변수 지정-->
{% capture tag_size %}{{tag|last|size}}{% endcapture %}
<li>
<a href="#{{tag_name }}" onclick="showTag('#{{tag_name}}')">
{{tag_name}} ({{tag_size}})
</a>
</li>
{% endfor %}
</ul>
</div>
클릭한 태그만 보여주기
클릭한 태그를 알기 위해 Jquery를 사용함.
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function init() {
var url = window.location.href;
var req = /#([^\s]+)$/.exec(url);
if (!Array.isArray(req)) {
return false;
}
var selector = '#' + req.pop();
showTag(selector);
});
function showTag(selector) {
$('.archive-group').hide();
$(selector).show();
}
</script>
<div id="tagarchives">
{% for tag in site.tags %}
{% capture tag_name %}{{tag|first|slugize}}{% endcapture %}
<div class="archive-group" style="display:none" id="{{tag_name}}">
<h3 id="{{tag_name}}">{{ tag_name }}</h3>
{% for post in site.tags[tag_name] %}
<article class="archive-item">
<h4>
<a href="{{ root_url }}{{ post.url }}">{{post.title}}</a>
</h4>
</article>
{% endfor %}
</div>
{% endfor %}
</div>
💭 Reviews
백업차원의 글
아쉽게도 한글의 띄어쓰기는 잘 안된다. ㅠ_ㅠ 개발자가 아니므로 포기 ㅋ
