Archive에서 카테고리 이름, 날짜 보이게하기!

글 목록을 보고 있자면 뭔가…뭔가 굉장히 밋밋하다.

네이버 블로그를 운영하다가 와서 그런가 막 게시글마다 작성일, 댓글 수, 카테고리가 안보이는게 너무 어색하다.

어색하면 뭐 어때, 직접 만들어서 넣으면 되는거지!

이 그림을 목표로 하고 달려보겠다!

이 글에서는 작성일과, 카테고리만 일단 넣어보고, 다음에 댓글 수도 연동해보겠다._{어차피 댓글 없자너…ㅜ}

시작하기 전, 이 글은 minimal-mistakes를 기준으로 작성되었다.

현재 내 블로그의 아카이브 설정이 궁금하다면 여기를 참고하면 된다.

게시글 마다 날짜, 카테고리 명 넣기

☝ /_includes/archive-single.html 찾기

Find File 기능을 사용하여 저 파일을 찾아서, 열어주자!

	<h2 class="archive__item-title" itemprop="headline">
      {★% if post.link %}
          <a href="">{★{ title }}</a> <a href="" rel="permalink"><i class="fas fa-link" aria-hidden="true" title="permalink"></i><span class="sr-only">Permalink</span></a>
      {★% else %}
          <a href="" rel="permalink">{★{ title }}</a>
      {★% endif %}
    </h2>
    <!-- 이 곳에 텍스트 입력 -->
    {★% if post.read_time %}
      <p class="page__meta"><i class="far fa-clock" aria-hidden="true"></i> {★% include read-time.html %}</p>
    {★% endif %}
    {★% if post.excerpt %}<p class="archive__item-excerpt" itemprop="description">{★{ post.excerpt | markdownify | strip_html | truncate: 160 }}</p>{★% endif %}

내 코드 기준으로는 26번째 줄 부터이다.

★들은 없는게 정상이다!

자꾸 인터프리터들이 강제로 작동되어서 코드를 망쳐버리기 위해 넣은 특수문자다..

아직 마크다운 문법에 초보라서 인터프리터가 작동 안하도록 특수문자를 넣는 방법을 모르겠다…ㅠ 알면 제보부탁해용

사람마다 다를테니 맹신하지 말고, h2 태그가 끝나는 부분을 찾아보자!

저기에 이 곳에 텍스트 입력은 없는게 정상이니, 없다고 걱정하지는 말자. 3

🤞 카테고리, 날짜 코드 넣기

이 이후에 나오는 코드에서 ★을 없애고, 이 곳에 텍스트 입력에 넣으면 간단히 작업 끝이다.

	{★% if post.categories[0] != null %}
		<p class="archive__item-excerpt"><i class="far fa-calendar-alt"></i> {★{ post.date | date: "%m/%d/%Y" }} &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: "%m/%d/%Y" }}
	{★% endif %}

간단히 코드를 설명하자면, 포스트에 카테고리가 있으면 날짜+카테고리를 보여주고, 카테고리가 없다면 날짜만 보여주는 형식이다.

만약 나는 카테고리만 보여주고 싶다면 아래 코드를 사용하면 된다.

	{★% if post.categories[0] != null %}
		<p class="archive__item-excerpt"><i class="far fa-folder-open"></i> {★{ post.categories }}</p>
	{★% endif %}
<!-- 카테고리만 보여주는 코드 -->

반대로, 나는 날짜만 보여주고 싶다면 아래 코드를 사용하자.

	<p class="archive__item-excerpt"><i class="far fa-calendar-alt"></i> {★{ post.date | date: "%m/%d/%Y" }} </p>
<!-- 날짜만 보여주는 코드 -->

나는 카테고리를 2개 이상은 넣지 않아서 2개가 넘게 들어가면 어떤 식으로 출력할지는 잘 모르겠다.

아무튼 위의 코드를 제대로 된 위치에 잘 넣었다면 아래와 같이 내 블로그가 변경되었을 것이다!

짠! 원하는 그림대로 변했다.

태그도 넣을까 했으나 태그가 많아지면 너무 복잡할까봐 나는 넣지 않았다.

위의 코드를 이해했다면 마찬가지로 아래와 같이 하면 되지 않을까?

	{★% if post.tags[0] != null %}
		<p class="archive__item-excerpt"><i class="far fa-tags"></i> {★{ post.tags }} </p>
	{★% endif %}
<!-- 태그를 보여줄지 안보여줄지 잘 모르겠는 코드 -->

대충 이 코드 넣으면 되지 않을까…? 해보진 않아서 장담은 못하겠다 ㅎㅎ;

해보신 분 계시면 제보 부탁드립니당ㅎㅎ

🤟 마치며

이게 진짜 내가 만들고 싶은 목표만 확실하게 있다면, 내가 만들고 싶은 그림대로 하나씩 그려나가는 재미가 있는 것 같다.

시간은 많이 들어가긴 하는데, 연구해두고 올려두면 누군가 필요한 사람은 쓰겠지 하는 재미도 있고!

아무튼 다음에 댓글이 더 많이 달리는 때가 되면 댓글 연동하는 방법도 포스트하겠다!

그 날이 오긴 할지는 잘 모르겠지만;;