GitHub Pages 블로그 - 카테고리, 태그

GitHub Pages에서 카테고리와 태그를 생성하고 포스트에서 등록하기, 카테고리의 목록 스타일 변경하기

categories 페이지 등록하기

_pages/에 category-archive.md를 다음과 같이 생성한다.

category-archive.md를 정해진 위치에 생성하지 않으면 포스트 밑에 카테고리를 클릭했을 때 작동이 안되는 등 여러 문제가 발생할 수 있으니 웬만하면 이대로 하길 바란다.

---
title: "Posts by Category"
layout: categories
permalink: /categories/
author_profile: true
---

layout,permalink는 건들지 않는 것이 좋다.

categories 레이아웃은 모든 카테고리 별로 글을 보여주는 레이아웃 설정이다. permalink가 /categories/이기 때문에 https://arduriz.github.io/categories에 접속하면 카테고리별로 모든 포스트를 볼 수 있다.

tags 페이지 등록하기

categories 페이지와 비슷하다.

---
title: "Posts by Tag"
permalink: /tags/
layout: tags
author_profile: true
---

https://arduriz.github.io/tags

category 등록하기

tag는 등록할 필요가 없지만 category는 꼭 등록해야 한다.
참고로 Minimal Mistakes 테마에선 카테고리1안에 하위 카테고리로 카테고리2를 넣는 것은 안된다. 실제로는 하위 카테고리가 아니지만 아래의 방법처럼 유사하게 사용할 수는 있다.

categories 페이지는 모든 카테고리 항목을 함께 보여준다. 이에 반해 category 페이지는 특정 지어진 1개의 카테고리 글들만 보여준다.

_pages/category/blog.md

---
title: "Blog"
permalink: /blog/
layout: category
author_profile: true
toc: true
toc_sticky: true
---

**Things studying** or **Things want to share**

<span  style="
font-family: 'GyeonggiTitleM';
font-size: 1.3em;
">
[Embedded]
</span>  <br>
<span  style="
font-family: 'GyeonggiTitleM';
font-size: 1.3em;
">
[Circuit]
</span>  <br>
<span  style="
font-family: 'GyeonggiTitleM';
font-size: 1.3em;
">
[Programming]
</span>  <br>
<span  style="
font-family: 'GyeonggiTitleM';
font-size: 1.3em;
">
[Other Things]
</span>  <br>

[Embedded]: /embedded/
[Circuit]: /circuit/
[Programming]: /programming/
[Other Things]: /otherthings/

_pages/category/에 blog.md를 생성했다. 하위 카테고리처럼 만들어보기도 했다.
여기는 자유롭게 변경해도 된다. layout을 다른 걸로 해도 그럭저럭 작동이 된다. author_profile, toc를 false로 하면 숨기는 것도 가능하다. (toc_sticky는 추후 다룰 예정)

위의 코드에 아래 코드를 추가하면 카테고리에서 카테고리 내의 포스트가 보여지게 된다.

_pages/category/blog.md

{% assign posts = site.categories.blog %}
{% assign posts = site.categories.embedded %}
{% assign posts = site.categories.circuit %}
{% assign posts = site.categories.programming %}
{% assign posts = site.categories.otherthings %}

{% for post in posts %} {% include archive-single.html type=page.entries_layout %} {% endfor %}

{% assign posts = site.categories.뒤에 표시하고 싶은 카테고리의 이름(permalink 상의)을 적는다.
나처럼 blog 안에 하위 카테고리처럼 embedded등을 넣고 blog카테고리에서 모두 보였으면 하면 모두 추가해줘야 한다.

archive-single.html를 변경하면 목록의 스타일을 바꿀 수 있다.
자세한 내용은 밑에서다룬다.

포스트 밑의 카테고리를 클릭하면 category_archive(@ _config.yml) 맨 아래 있는 애로 가게 되어서 _pages/categories/에 카테고리명.md를 생성하는 것이 좋다.

포스트 글에 category와 tag 등록하기

---
title: GitHub Pages 블로그 생성
excerpt: GitHub Pages와 Jekyll을 이용한 블로그 생성
  
categories:
	- githubpages
tag:
	- blog
---

위의 코드처럼 YFM을 설정하면 자동으로 등록이 되고 포스트 밑에도 알아서 뜬다. 카테고리나 태그를 설정하기 싫다면 NULL을 그 자리에 쓰면 된다.

목록 스타일 변경

기본적으로 category의 목록 스타일은 archive-single.html다.

archive-single.html 적용

archive-single.html + 카테고리, 태그

여기서 포스팅 날짜 말고도 카테고리와 태그도 표시하고 싶다면 아래와 같이 archive-single-custom-home.html을 만들고 위에서 설명한 대로 카테고리명.md의 밑부분을 아래 코드처럼 수정해서 적용하면 된다.

archive-single-custom-home.html

{% if post.header.teaser %}
	{% capture teaser %}{{ post.header.teaser }}{% endcapture %}
{% else %}
	{% assign teaser = site.teaser %}
{% endif %}

{% if post.id %}
	{% assign title = post.title | markdownify | remove: "<p>" | remove: "</p>" %}
{% else %}
	{% assign title = post.title %}
{% endif %}

<div  class="{{ include.type | default: 'list' }}__item">
	<article  class="archive__item"  itemscope itemtype="https://schema.org/CreativeWork">
		{% if include.type == "grid" and teaser %}
			<div  class="archive__item-teaser">
				<img  src="{{ teaser | relative_url }}"  alt="">
			</div>
		{% endif %}
		<h2  class="archive__item-title no_toc"  itemprop="headline">
			{% if post.link %}
				<span  style="
				font-family: 'GyeonggiTitleM';
				">
					<a  href="{{ post.link }}">{{ title }}</a>  <a  href="{{ post.url | relative_url }}"  rel="permalink"><i  class="fas fa-link"  aria-hidden="true"  title="permalink"></i><span  class="sr-only">Permalink</span></a>
				</span>
			{% else %}
				<span  style="
				font-family: 'GyeonggiTitleM';
				">
					<a  href="{{ post.url | relative_url }}"  rel="permalink">{{ title }}</a>
				</span>
			{% endif %}
		</h2>
		<!-- {% include page__meta.html type=include.type %} -->
		<!--위의 줄을 활성화하면 읽는 시간 나옴-->
		<!--메인 수정부분-->
		{% if post.tags[0] != null %}
			<p  class="archive__item-excerpt"><i  class="far fa-calendar-alt"></i> {{ post.date | date: "%Y. %m. %d." }} &nbsp;  <i  class="far fa-folder-open"></i> {{ post.categories }} &nbsp; # {{ post.tags }} </p>
			{% else %}
			{% if post.categories[0] != null %}
				<p  class="archive__item-excerpt"><i  class="far fa-calendar-alt"></i> {{ post.date | date: "%Y. %m. %d." }} &nbsp;  <i  class="far fa-folder-open"></i> {{ post.categories }} </p>
				{% else %}
					<p  class="archive__item-excerpt"><i  class="far fa-calendar-alt"></i> {{ post.date | date: "%Y. %m. %d." }}
			{% endif %}
		{% endif %}
		<!--/메인 수정부분-->
		{% if post.excerpt %}<p  class="archive__item-excerpt"  itemprop="description">{{ post.excerpt | markdownify | strip_html | truncate: 160 }}</p>{% endif %}
	</article>
</div>

메인 수정부분이 바뀐 부분의 핵심이다. 조건절을 이용하여 태그-카테고리-날짜 순으로 없으면 그냥 있는 것만 표시하도록 했다.
표시하고 싶지 않은 것이 있다면 조건절을 빼면서 조정하면 된다.
아이콘은 far아이콘을 사용해도 되고 그냥 문자를 써도 된다.

archive-single-custom-home.html 적용

excerpt와 카테고리 없는 목록

archive-single-custom.html을 아래와 같이 만들고 같은 방식으로 적용시키면 된다.

archive-single-custom.html

{% if post.header.teaser %}
  {% capture teaser %}{{ post.header.teaser }}{% endcapture %}
{% else %}
  {% assign teaser = site.teaser %}
{% endif %}

{% if post.id %}
  {% assign title = post.title | markdownify | remove: "<p>" | remove: "</p>" %}
{% else %}
  {% assign title = post.title %}
{% endif %}


<div class="{{ include.type | default: "list" }}__item">
    <article class="archive-item">
        <div>
            <span style="
            font-family: 'GyeonggiTitleM';
            ">
              <a href="{{ post.url }}">{{post.title}}</a>
            </span>  
            <small> 
                <i class="fas fa-fw fa-calendar-alt" aria-hidden="true"> </i>{{ post.date | date: " %Y. %m. %d." }}
              {% if site.tag_archive.type and post.tags[0] %}
                # {%- include post__taxonomy.html -%}
              {% endif %}
            </small>
        </div>
      </article>
</div>

archive-single-custom.html 적용

적용

카테고리에서

카테고리명.md의 밑부분을 아래 코드처럼 수정해서 적용하면 된다.

카테고리명.md

{% for post in posts %} {% include archive-single-custom-home.html type=page.entries_layout %} {% endfor %}

html에서

_layouts의 html들이나 기타 html 안에서도 markdown에서 변경하는 것처럼 변경할 수 있다.

{% include archive-single.html type=page.entries_layout %}부분을 찾아서 수정하면 된다.

---

나는 categories.html의 스타일을 archive-single-custom.html로, index.html(블로그 제목 눌렀을 때)을 archive-single-custom-home.html로 바꿨다.