[Github] 블로그 커스터마이징-3 포토폴리오 탭 추가

수정 목표

저번에 사이드 바 Archives 기능에 필터 기능을 추가해서 Project 탭을 생성 했습니다.

곱씹어 보니 about 탭에 소개와 Project 페이지를 굳이 분리 할 필요가 있나..? 해서 두 탭을 하나로 묶어서 portfolio 탭을 생성 하기로 했습니다.

구조 분석

_tabs/.md → sidebar 목록, 각 마크다운 파일이 각 하나의 탭으로 적용 됨 _layouts/.html → 마크다운 파일에 설정 될 template.html

---

코드 수정

_tabs/portfolio.md

projct 탭을 생성할 때와 동일하게 신규 마크다운 파일을 하나 생성했습니다.

양식도 동일하게 아이콘은 묘에 사람의 히스토리를 볼 수 있는 뜻으로 해골 모양으로 했습니다.

---
layout: portfolio
icon: fa-solid fa-skull
order: 5
---

_layouts/archives_project.html

abot과 portfolio 마크다운의 차이는 loyout을 지정 하느냐 차이입니다. 기존 abot의 경우는 default 값을 사용 하기에 page.html 사용하게 됩니다.

page.html, archives_project.html 코드를 병합하여 portfolio.html 생성합니다.

---
layout: page
---

{% include lang.html %}
{% assign df_strftime_m = site.data.locales[lang].df.archives.strftime | default: '/ %m' %}
{% assign df_dayjs_m = site.data.locales[lang].df.archives.dayjs | default: '/ MM' %}


<article class="px-1">
  {% if page.layout == 'page' or page.collection == 'tabs' %}
    {% assign tab_key = page.title | downcase %}
    {% assign title = site.data.locales[lang].tabs[tab_key] | default: page.title %}
    <div class="content">
      {{ content }}
    </div>
  {% else %}
    {{ content }}
  {% endif %}
  
  <div id="archives" class="pl-xl-3">
    {% for post in site.posts %}
      {% if post.categories contains 'Project' %} <!-- 필터링 -->
        {% assign cur_year = post.date | date: '%Y' %}
  
        {% if cur_year != last_year %}
          {% unless forloop.first %}</ul>{% endunless %}
  
          <time class="year lead d-block">{{ cur_year }}</time>
          {{ '<ul class="list-unstyled">' }}
  
          {% assign last_year = cur_year %}
        {% endif %}
  
        <li>
          {% assign ts = post.date | date: '%s' %}
          <span class="date day" data-ts="{{ ts }}" data-df="DD">{{ post.date | date: '%d' }}</span>
          <span class="date month small text-muted ms-1" data-ts="{{ ts }}" data-df="{{ df_dayjs_m }}">
            {{ post.date | date: df_strftime_m }}
          </span>
          <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
        </li>
  
        {% if forloop.last %}</ul>{% endif %}
      {% endif %}
    {% endfor %}
  </div>
</article>

삽질 후기

한번 해본 작업이라 생각보다 금방 작업했습니다. 역시 삽질은 위대합니다.