꿈꾸는 개발자, Front-end Developer

Trust that the dots will connect in your future.

#CSS #Dev #EJS #HTML #Hexo #JavaScript #dev #jQuery #smallTalk #번역 #삽질 #신세계 #이론 #정보처리기사

Hexo 테마 만들기 [번역] - Part 2


원문 글을 참고하며 첫 테마를 만들 때는 ‘어떻게든 결과를 만들어 내겠다’는 마음에 급급하여

막혔거나 이해가 잘 안 됐던 부분에 대한 정리나 기록을 남기지 못했습니다.

이에 대한 아쉬움 때문에 정리도 할겸, 영어 공부도 할겸, 핑계 삼아 ‘번역’을 시도한 것인데, 세상에나… 쉬운 일이 아니더군요.

발 번역이라 송구스럽지만, 그래도 마무리는 지어야지요.

Part 2와 3은 훨씬 짧습니다. Part 1을 잘 해결하셨다면 조금만 더 힘내시지요~

다 왔습니다. ‘여러분만의 테마’ 완성까지 말이죠~~


그럼

시작합니다 :)



지난 Part 1에서는 프로젝트 설정과 첫 페이지를 만들어 보았습니다.

이번 파트에서는 우리가 배운 것들을 바탕으로 나머지 페이지들을 완성해 나갈 겁니다.

In Part 1, we have setup the project and the Home Page.

In this section, we are going to build on what we have learnt to finish up all the remaining pages.


다른 파트 글 링크



게시물 본문 페이지

지난 시간까지 했던 부분에 이어서 게시물 본문이 보여질 페이지를 만들어 봅시다.

앞에서 살펴보았듯이, 게시물의 세부 페이지를 렌더링하기 위해 Hexo는 /layout/폴더에서 post.ejs파일을 찾습니다.

아래 코드는 제가 작성한 post.ejs파일 코드 입니다.

Let’s continue where we left off in part 1 and create the post detail page.

As we have seen, to render the detail page, Hexo will look for a post.ejs file in our /layout/folder.

Here is my post.ejs:

layout/post.ejs
<%- partial('_partial/article-full', {item: page}) %>

코드들이 잘 정돈된 상태로 두기 위해서 실제 코드는 지금부터 만들 partial/article-full.ejs파일로 미루어 둡시다.

To keep the code organised, the actual code is deferred to a _partial/article-full.ejs that we are going to create now:

layout/_partial/article-full.ejs
<div class="blog-post">
<!-- Title -->
<h2 class="blog-post-title">
<a href="<%- config.root %><%- item.path %>">
<%- item.title || item.link%>
</a>
</h2>
<!-- Date and Author -->
<p class="blog-post-meta">
<%= item.date.format(config.date_format) %>
<% if(item.author) { %>
by <%- item.author %>
<% } %>
</p>
<!-- Content -->
<%- item.content %>
<hr />
<!-- Tags and Categories links -->
<%- partial('article-tags', {item: item}) %>
<%- partial('article-categories', {item: item}) %>
</div>

이 템플릿은 아래에 명시한 두 부분을 제외하면 _partial/article-excerpt.ejs파일과 거의 동일합니다.

  • <%- item.content %>코드를 통해 미리 보기가 아닌 글의 전체 내용을 보여줄 것입니다.
  • 코드 끝 부분에 조각 파일 2개를 불러오는 추가 코드가 있습니다. 그 중 하나는 tag, 나머지 하나는 category를 위한 코드입니다.

그럼 지금 바로 이 두 페이지를 만들어 보도록 하죠.

This template is almost the same as _partial/article-excerpt.ejs, except that:

  • We are displaying the full content with <%- item.content %> and not the excerpt.

  • There are two additional partial views at the bottom, one for tags and one for categories.

    We will jump into these right now.


태그 Tag

그렇다면 이제 게시물의 Tag 목록을 렌더링할 조각 파일인 layout/_partial/article-tags.ejs파일을 만들어 봅시다.

우리가 원하는 것은 특정 Tag를 포함하는 모든 글의 목록을 해당 Tag와 함께 보여주는 ‘Tag page’가 있고,

그 ‘Tag page’로의 링크를 포함하고 있는 Tag 목록입니다.

Let’s create the partial that will render the list of tags for a post: layout/_partial/article-tags.ejs.

What we want is a list of #tags with links to the corresponding ‘tag page’ which will display all the posts with that tag.

layout/_partial/article-tags.ejs
<% if (item.tags && item.tags.length){ %>
<%
var tags = [];
item.tags.forEach(function(tag){
tags.push('<a href="' + config.root + tag.path + '">#' + tag.name + '</a>');
});
%>
<div class="blog-tags-container">
<span class="glyphicon glyphicon-tags"></span>
<%- tags.join(' ') %>
</div>
<% } %>

어렵지 않을 겁니다. 그저 post.tags에 담겨있는 Tag들을 하나씩 꺼내서 차례대로 보여주는 것 뿐이니까요.

저는 해시#태그를 각 태그 앞에 덤으로 붙여 주었습니다.

Nothing complicated, we are enumerating through all the tags in post.tags and displaying them one after the other.

I have added a hashtag before each tag and an icon before the list for good measure.


카테고리 Category

layout/_partial/article-categories.ejs도 비슷합니다.

The layout/_partial/article-categories.ejs partial is very similar:

layout/_partial/article-categories.ejs
<% if (item.categories && item.categories.length){ %>
<%
var categories = [];
item.categories.forEach(function(category){
categories.push('<a href="' + config.root + category.path + '">' + category.name + '</a>');
});
%>
<div class="blog-categories-container">
<span class="glyphicon glyphicon-folder-open"></span>
<%- categories.join(' / ') %>
</div>
<% } %>

다른 설명 필요 없겠쥬?

No explanation required.


게시물 CSS

눈치채셨겠지만 CSS에는 각각 Tag, Category를 위한 2가지 클래스가 있습니다. blog.css에 아래 코드를 추가해 주세요.

As you may have noticed, there are 2 new CSS classes used for tags and categories styling.

Here is the code for it, added to blog.css:

source/css/blog.css
.blog-tags-container, .blog-categories-container {
margin-top: 30px;
font-size: 20px;
}
.blog-tags-container span.glyphicon, .blog-categories-container span.glyphicon {
margin-right: 20px;
}

‘Page 타입’ 페이지의 내용물

“말이 좀 이상하죠? Hexo 페이지의 종류 6가지 중에 하나인 Page, 그 Page 타입의 페이지들에 표시할 내용을 설정하는 것입니다.”

간단한 코드입니다. ‘Page 타입’의 페이지들은 ‘Post 타입’의 페이지들과 내용이 같을 겁니다.

연습 삼아 코드를 이것저것 여러 가지로 바꿔보시되, 아래 제 코드를 참고하세요.

This is an easy one. The ‘page type’ pages will be the same as ‘post type’ pages.

Feel free to customise it as an exercise, but here is mine:

layout/page.ejs
<%- partial('_partial/article-full', {item: page}) %>


Archive 페이지

Archive 페이지에서는 Index 페이지보다 더 집중적으로 게시물 목록을 보여줄 것입니다.

물론 기본은 index 페이지와 같습니다.

The archive page will display a list of posts in a more condensed way than the index page.

The base will be the same as the index though:

layout/archive.ejs
<% page.posts.each(function(item){ %>
<%- partial('_partial/article-archive', {item: item}) %>
<% }); %>
<%- partial('_partial/pagination') %>

Article-archive 조각 파일

이전과 마찬가지로 진짜 코드는 조각 파일에 담겨 있죠.

Part 1에서 작성한 article-excerpt.ejs파일의 코드에서 제목, 날짜, 작성자 부분만 따로 가져와서 사용했습니다.

As always, the actual work is in the partial view.

I used article-excerpt as the base and stripped it down to just the title, date and author:

layout/_partial/article-archive.ejs
<div class="blog-post">
<!-- Title -->
<h2 class="blog-post-title-archive">
<a href="<%- config.root %><%- item.path %>">
<%- item.title || item.link%>
</a>
</h2>
<!-- Date and Author -->
<p class="blog-post-meta">
<%= item.date.format(config.date_format) %>
<% if(item.author) { %>
by <%- item.author %>
<% } %>
</p>
</div>

source/css/blog.css
.blog-post-title-archive {
margin-bottom: 5px;
font-size: 25px;
}

자세히 보신 분들은 알아차리셨겠지만 Archive 제목을 꾸미기 위한 새 CSS 클래스를 추가했습니다.

(글씨가 제 취향보다는 많이 크네요)

Careful eyes will have noticed the new CSS class that I have created for archive titles

(they were too big for my liking):



Tag, Category 페이지

마지막으로 남은 이 두 페이지는 각 Tag와 Category에 맞는 게시물들의 목록을 만들기 위한 것입니다.

기억하고 계시지요?

The last two pages we need to work are for the list of posts that correspond to a tag and a category. Now if you remember well:

  • archive : Archive page입니다. 모든 블로그 글의 목록을 제목으로 보여주고 제목에는 해당 글의 링크를 걸어둘 것입니다.
  • category : Category page입니다. Archive page랑 비슷하지만 글의 목록이 지정한 카테고리로 분류되어 있습니다.
  • tag : Tag page입니다.Archive page랑 비슷하지만 글의 목록이 지정한 Tag로 분류되어 있습니다.

tag.ejscategory.ejs의 페이지들은 archive.ejs파일 페이지가 대신할 수 있습니다.

이 세 페이지들 사이에는 크거나 혹은 중요한 차이점이 없기 때문에 archive.ejs파일을 대안 페이지(fallback page)로 사용하도록 하겠습니다. 코드를 줄일 수록 중복 되는 코드가 적어지고, 이는 유지보수의 편의로 이어집니다.

하지만 위 세 페이지를 구분짓기 위해서 Archive 페이지에 제목을 추가하겠습니다.

The fallback page for our tag.ejs and category.ejs is archive.ejs.

Because I don’t see any major difference in between these 3 pages, we are just going to use the fallback to archive.ejs. Less code to write, less duplicate code, easier to maintain.

But in order to differentiate our 3 pages, we are going to add a title to the archive page:

layout/archive.ejs
<%
var title = '';
if (page.category) title = page.category;
if (page.tag) title = page.tag;
if (page.archive){
if (page.year) title = page.year + (page.month ? '/' + page.month : '');
else title = "Archives";
}
%>
<% if(title) { %>
<h2 class="blog-archive-title"><%- title %></h2>
<% } %>
<% page.posts.each(function(item){ %>
<%- partial('_partial/article-archive', {item: item}) %>
<% }); %>
<%- partial('_partial/pagination') %>

자 이제 Archive page의 역할이 잘 담겨있는 제목을 얻었습니다.

아래는 이와 함께할 CSS 코드입니다.

Now we have a nice title that describes what our archive page is for.

And here is the CSS that goes with it:

source/css/blog.css
.blog-archive-title {
margin-bottom: 50px;
}

이번 파트는 지난 Part 1에서 설명한 개념들을 바탕으로한 실습들이라 그렇게 복잡하지는 않았을 겁니다.

This section of the tutorial was pretty straightforward, simply building up on concepts defined in Part 1. I encourage to play around with the theme and hack it to your tastes.

다음 Part 3에서는 리플, 통계 분석, 위젯 기능을 추가해 더 멋진 테마로 만들어 봅시다. 그럼 이만!

In Part 3, we will add a comment section, analytics, widgets and polishing things up. See you there !

“수고하셨습니다!”


#Hexo #dev #번역 #JavaScript #EJS

#EJS #Hexo #JavaScript #dev #번역