📚 [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
  • 백업차원의 글
  • 아쉽게도 한글의 띄어쓰기는 잘 안된다. ㅠ_ㅠ 개발자가 아니므로 포기 ㅋ
  • 🏷️ Tags
  • #jekyll  
  • #tag