강인규 블로그

0%

Hueman 테마에 부제목 추가하기

작성일 Edited on In , Disqus:

# 부제목 or 부제 SubTitle

부제(副題). 제목에 덧붙여 그 작품의 내용을 설명하고 본 제목을 보충하는 타이틀. 모든 작품에 반드시 붙지는 않는다. 영어로는 subtitle이라고 하지만 이 단어는 자막이라는 뜻으로 쓰일 때가 더 많다.

[나무위키](https://namu.wiki/w/%EB%B6%80%EC%A0%9C)

# 우선 이야기하기

필자는 ‘마크다운‘이라는 언어를 최근에 알게 되고 다른 언어적 지식이 없는 관계로 무식하고 단순한 방법으로 하다보니 발견하게 된 것으로 이 더이상 지식은 없습니다. 이것에 대하여 물어 보시거나 혹은 더 좋은 방법이 있으신 분들은 기탄없이 저에게 연락 주시길 바랍니다.

# 1. YAML Front Matter 추가하기 (YAML 헤더)

제목은 이렇게 적었지만 실제로는 title 밑에 글한줄 더 적은것 뿐입니다.

붉은 박스 부분이 부제목입니다.
1
2
3
4
5
6
7
8
9
10
---
title: 타이틀
subposttitle: 부제목 타이틀
date: 날짜
categories:
- 카테고리
- 서브카테고리
tags: [테그1, 테그2, ...]
thumbnail: 썸네일 주소
---

위에 보여지는 것처럼 subposttitle이 이포스트에서 다룰 YAML 헤더의 메타데이터(?)입니다. 특별이 명칭을 몰라 메타데이터라고 했습니다. 양해를 :)

이제 이 subposttitle이 메타데이터를 가지고 2군데를 추가 하시면 됩니다.
먼저 list부분 과 post 에 들어가는 title.ejs 파일입니다.
title.ejs파일은 각각 2군데 모두 호출되어 제목과 썸네일등을 보여주는 파일입니다. 그리고 css파일을 한개 만들어 추가하고 head.ejs파일에 불러오면 됩니다.

list부분 입니다. 붉은 부분이 부제목입니다

Post부분 입니다. 붉은 부분이 부제목입니다.

# 2. 테마 수정하기 title.ejs

위치는 테마 폴더 안에… theman/hueman/layout/common/post/title.ejs

theman/hueman/layout/common/post/title.ejs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<% if (post.link) { %>
    <h1 itemprop="name">
        <a class="<%= class_name %>" href="<%- url_for(post.link) %>" target="_blank" itemprop="url"><%= post.title %></a>
    </h1>
<% } else if (post.title) { %>
    <% if (typeof(linkable) !== 'undefined' && linkable) { %>
        <h1 class="<%= class_name %>" itemprop="name">
        <a href="<%- url_for(post.path) %>"><%= post.title %></a>
        </h1>
        <!-- 여기에 들어갈 자리 -->
    <% } else { %>
        <h1 class="<%= class_name %>" itemprop="name">
        <%= post.title %>
        </h1>
        <!-- 여기에 들어갈 자리 -->
    <% } %>
<% } %>
1
<% if(post.subposttitle) { %> <div class="article-subposttitle"> &nbsp# <%-post.subposttitle %> </div> <% } %>

위에 보이는 것과 같이 title.ejs을 열어 <!-- 여기 들어갈 자리 -->부분에 밑의 한 줄을 복사해서 넣습니다. 이때 저는 css > class_name 을 article-subposttitle으로 했습니다. 다른이름 으로 해도 무방합니다.

# 3. 스타일시트 추가하기 etc.css

이제 CSS 파일을 하나 만듭니다. blog의 루트폴더에 source폴더안에 css폴더를 만들고 그 안에 etc.css파일을 만듭니다. 벌써 만들었다면 그 안에 추가 하셔도 됩니다. 즉 어느 파일이나 css파일이면 그 안에 넣으시면 됩니다.

source/css/etc.css
1
2
3
4
5
6
7
8
9
10
/* 부제목 색변경 */
.article-subposttitle {font-size: 12px;
    text-decoration: none;
    line-height: 14px;
    color: #3e3f43;
    background-color: #e7e8ec;
    margin-bottom: 5px;
    padding: 5px 10px;
    border-radius: 4px;
  }

위에 것을 추가하고 저장을 합니다.

# 4. 적용하기 head.ejs

그리고 head파일을 열어 위에 만들어 놓은 css파일을 추가합니다.

theman/hueman/layout/common/post/head.ejs
1
2
3
...
<!-- 여기에 넣습니다. -->
</head>

head.ejs파일에 마지막 부분인 </head>위에 밑의 css추가를 합니다.

1
<%- css('css/etc') %>

지금까지 hueman 테마에 적용하는 부제목 추가하기였습니다. 모바일이나 PC에도 잘 보이고 제목에서 쓰지 못한 기타사항을 쓸려고 했다가 이렇게 부제목까지 만들었네요. 나름 힘들게 삽질하면서 만들었습니다. 저는 좋게 잘 쓰고 있지만, 이것보다 내가 더 잘하시는 분은 주저 말고 지적해 주시길 바랍니다.

# 관련 문서 바로가기