꿈꾸는 개발자, Front-end Developer

Trust that the dots will connect in your future.

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

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


이번 포스팅에서는 블로그를 이전하면서 GitHub page 테마를 만드는데 참고한 좋은 글이 있어 공유하고자 합니다.

Github page를 시작하게 되면 페이지의 기본 외관인 테마를 선택하게 되는데 타인이 만들어 놓은 것이 아닌,

자신만의 테마를 만들고 싶으신 분(웹 개발 기술들을 뽐내보실 분)들은 참고하시면 좋을 것 같습니다.

싱가폴의 개발자 Jonathan Klughertz의 블로그( http://www.codeblocq.com/ )를 참고 하였으며,

Klughertz 본인 허락 하에 이 글을 게시합니다.

부족한 영어 실력이라 오역이 있을 수 있습니다. 아니, 있을겁니다… 혼란을 방지하기 위해 본문을 함께 올립니다.

(제가 개인적으로 추가한 문구는 “쌍따옴표” 안에 포함하였습니다.)

본문 확인을 원하시는 분은 이 곳에서 확인하시면 됩니다.


자 그럼

부릉부릉~ 시동을 걸어 봅시다!


이 번 포스팅은 3개의 글로 나누어져 있습니다.

이 글들을 통해 여러분은 Hexo 테마 만드는 법을 처음부터 차근차근 배우게 될 것 입니다.

저는 Hexo를 정말 좋아하고 매일 사용하고 있지만 안타깝게도,

현재 Hexo 개발 문서의 [테마 만들기]에 대한 부분은 내용이 충분하지 않은 상태입니다.

따라서 아래의 글은 공식 가이드 문서의 모자란 부분을 채우기 위해 제가 시도한 내용들입니다.

In this multi part tutorial, you will learn how to create an Hexo Theme from scratch. I really love Hexo and use it everyday; unfortunately, as of today, the documentation for theme creation is pretty slim. Here is my attempt at fixing that.


다른 파트 글 링크


미리 준비하시면 좋을 것들

  • The very basics of blogging with hexo. If you are completely new, check the getting started guide on hexo.io.
  • Some knowledge of Bootstrap
  • Some knowledge of a JavaScript templating engine (we will use EJS)


프로젝트 소개

이 프로젝트는 Hexo 테마를 만드는 법과 Hexo가 어떻게 구성되어 작동하는지에 대한 세부적인 부분을 다룹니다.

HTML과 CSS에 너무 많은 시간을 할애하지 않도록 http://getbootstrap.com/exmaples.blog/ 에 게시된 테마를

재구성할 것입니다. 위 테마는 Boostrap 공식 문서 Getting Started Template Examples 부분에 소개된 표준 테마 중 하나이며,

앞으로 이 테마의 CSS와 HTML을 쪼개서 필요한 부분들을 가져와 하나 하나 원하는 모습으로 맞춰나갈 것입니다.

만약 막히는 부분이 있으시거나 코드에 관심이 더 있으시면, 원문 필자의 github을 참고해 주세요.

This project is all about creating a theme for Hexo and understanding in details how the Hexo engine.

Since I don’t want to lose too much time on the HTML and CSS parts we are going to recreate the following theme in Hexo: http://getbootstrap.com/examples/blog/. It is one of the standard Getting Started Template Examples in the Boostrap documentation.

We are going to reuse the CSS and copy paste the HTML, piece by piece, until we have achieved what we want.

If you get lost or are only interested in the code, it is on github.


프로젝트 설정


새로운 Hexo 블로그 만들기

“잠깐, Node.js, Git, Hexo 설치하신 후에 진행해 주세요”

그럼 이제 새 Hexo 프로젝트를 만드는 것으로 시작해 봅시다.

Let’s get started with a brand new hexo installation.

# 새 폴더 만들기
mkdir hexo-theme-creation
cd hexo-theme-creation
# Hexo 프로젝트 시작하기
hexo init

테마 폴더 만들기

# 테마 폴더로 이동
cd themes
# 원하는 테마 이름을 정하시고 해당 테마 이름을 가진 폴더를 만들기
# 본 글에서는 bootstrap-blog-hexo로 정했습니다.
mkdir bootstrap-blog-hexo

Note: 만약 테마만을(전체 블로그가 아닌) git에 저장하고 싶다면 git을 themes/bootstrap-blog-hexo/에서 초기화 해주세요.

Note: If you want to save the theme to git (as you should), initialise git inside /themes/bootstrap-blog-hexo/.


폴더 구조

시작할 때 필요한 폴더와 파일들입니다.

Here are the files and folders we will need to get started:

|-- layout // .ejs templates
|-- source // source files (CSS, scripts)
|-- _config.yml

layoutsource 폴더와 _config.yml 파일을 만드세요.

  • /layout/은 모든 EJS 템플릿을 담습니다.
  • /source/asset(CSS, 폰트, 외부 script, library 등)을 담습니다.
  • _config.yml테마 설정 내용을 담는 파일입니다. 일단은 비어있는 채로 둡시다.

Create these 2 folders and the _config.yml file.

  • /layout/ will contain all our EJS templates
  • /source/ will contain our assets (CSS files, external scripts and libraries)
  • _config.yml contains our theme configuration. Leave it empty for now.

Bootstrap blog의 assets 복사해오기

source폴더에 bootstrap blog template의 assets을 복사해 옵시다.

웹 브라우저의 소스보기를 통해 모두 복사하기를 하셔도 되고,

패키지 파일을 다운받으셔서 source폴더에 압축을 푸셔도 됩니다.

“그것도 아니라면 여러분이 개인 CSS, Script 파일을 작성하여 사용하시면 됩니다.”

In our source folder, copy all the assets we need from the bootstrap blog template. View source from your browser and copy everything over or download this packageand extract it in your source folder.

|-- layout
|-- source
| |-- bootstrap // 여기에 boostrap library 파일들을 복사하세요.
| |-- css // 블로그 CSS 파일
| |-- favicon
| |-- favicon.ico // favicon 파일이 있다면 이곳에
| |-- js // 블로그 JavaScript 파일
|
|-- _config.yml


Hexo 기본 정보

첫 템플릿을 작성하기 전에 Hexo 블로그의 기본 정보를 살펴보고 갑시다.

Before we write our first template file, let’s look at the basic of Hexo blog generation.


Page 종류

테마 안에서 지정할 수 있는 페이지의 종류는 6가지가 있습니다.

그리고 각 페이지를 위한 템플릿의 파일 이름은 아래 표의 내용과 일치해야하며,

public폴더에 생성되는 각각의 HTML 문서는 이 템플릿들을 바탕으로 만들어집니다.

Corresponds to the 6 types of pages we can define in our theme, every singe HTML page generated in the public folder belongs to one of these templates:

  • index : 블로그의 첫 페이지이자 메인 페이지입니다. 이곳에 미리 보기와 함께 글 목록을 표시할 것입니다.
  • post : 게시글들의 세부 사항을 표현하는 페이지입니다. 게시글 하나의 전체 내용과 리플 기능을 덧붙일 것입니다
  • page : 여러 페이지들의 세부 사항을 표현하는 페이지입니다. 페이지 종류에 관한 페이지라는 것만 빼면 기본적으로 Post 페이지와 비슷합니다.
  • archive : Archive page입니다. 모든 블로그 글의 목록을 제목으로 보여주고 제목에는 해당 글의 링크를 걸어둘 것입니다.
  • category : Category page입니다. Archive page랑 비슷하지만 글의 목록이 지정한 카테고리로 분류되어 있습니다.
  • tag : Tag page입니다.Archive page랑 비슷하지만 글의 목록이 지정한 Tag로 분류되어 있습니다.

이번 파트 1에서는 index부분을 만들 것 입니다.

index 페이지를 생성할 때 Hexo는 index.ejs, post.ejs, page.ejs 등의 파일을 참고합니다.

이 템플릿 파일들은 이후에 정적 HTML 페이지로 렌더링 됩니다.

In this part of the tutorial we will build the index.

During the generation is Hexo will look for files named index.ejs, post.ejs, page.ejs and so on. These templates are then rendered to create the static HTML pages.


전체 레이아웃

Hexo는 위에 소개한 모든 템플릿이 공통으로 사용할 수 있는 layout 파일을 제공합니다.

이 파일은 다른 템플릿들이 렌더링한 페이지들을 담는 전체 틀 역할을 하며, 이름은 반드시 layout.ejs이어야 합니다.

우리 테마에서는 layout<html>, <head> 태그와 Header, Menu, Footer, Sidebar 등의 요소들을 담습니다.

기본적으로 이 요소들은 다른 모든 페이지에 동일하게 표현됩니다.

다른 페이지의 템플릿은 오직 Main container 부분에 표시할 내용의 정보만을 담으면 됩니다.

Hexo supports the use of a common layout file that will be used by all the templates above.

This file has to be named layout.ejs. It acts as a wrapper around the content rendered by the different page type templates above.

In our theme, the layout will contain: the <html> and <head> tags, the header and menu as well as the footer and the sidebar. Basically all the elements that are common to all pages.

The different page templates will only be responsible for creating the actual content, that will be placed inside our main container.


변수

모든 템플릿 안에서 Hexo engine이 제공하는 변수에 접근할 수 있습니다.

아래에 대표적인 변수들을 소개합니다.

Inside all our templates, we have access to some variables that are injected by the hexo engine. Here are some of them:

- Site 변수

Site 변수는 광범위한 site 정보를 담고 있습니다. 예컨대, site.posts를 통해 블로그의 모든 게시물에 접근할 수 있습니다.

만약 위젯을 이용해 통계수치 등을 표시하려고 한다면 유용하게 쓰일 것입니다.

site contains site wide information. For example, with site.posts we can access all the posts in the blog. Useful if we want to display statistics in a widget for example.

- Page 변수

Page 변수는 메인 변수이고 현재 페이지에 대하여 글 제목, 작성일, 내용 등과 같은 많은 정보를 담고 있습니다.

각 객체의 속성 값은 어떤 페이지 템플릿에 위치하고 있느냐에 따라 달라집니다.

사용 가능한 모든 변수 목록은 여기에서 확인하실 수 있으며, 앞으로 진행하면서 하나씩 살펴 보도록 하겠습니다.

page is the main variable and contains a lot of information related to the current page, including all the post titles, dates, content and so on.

The properties of that object depend on which page template (index, post, archives) we are on. The full list is available here; but let’s look at them as we go.

- Config 변수

블로그의 메인 설정 파일인 _config.yml 안에 표시된 JavaScript 객체 변수입니다. “최상단 폴더 안에 저장되어 있습니다.”

config is a JavaScript object representation of the main _config.yml of the blog.

- Theme 변수

_config.yml에 저장된 테마의 JavaScript 객체 정보를 담고 있습니다.

“테마 폴더 안에 _config.yml 파일로 저장되어 있습니다.”

theme is a JavaScript object representation of the theme’s _config.yml.



테마 Layout 만들기

이제 위에서 설명한 /layout/layout.ejs 파일을 만들어 보겠습니다.

We will start by creating the /layout/layout.ejs file discussed above.


Head 부분

layout.ejs 파일을 만들고 그 안에 <html></html> 태그를 담습니다.

Let’s start by creating a layout.ejs file and inserting the <html></html>

layout/layout.ejs
<html>
<!-- Head tag -->
<%- partial('_partial/head') %>
</html>

<head> 안에 담을 내용들은 모두 Partial view에 구분지어 담아서 유지보수를 용이하게 합시다.

사용은 partial('path', [arguments]) 문법을 이용하시면 됩니다.

layout/_partial/head.ejs 파일을 만드신 후에 Bootstrap 코드에서 head 부분을 복사해 옵시다.

Here we are extracting all the <head> code into a partial view. Partial views promote separation of concern and reusability in our code.

The syntax is partial('path', [arguments])

After creating that layout/_partial/head.ejs file, we are going to copy the head code from the bootstrap source code:

layout/_partial/head.ejs
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favicon/favicon.ico">
<title>Blog Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<%- css('bootstrap/css/bootstrap.min.css') %>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<%- css('css/ie10-viewport-bug-workaround.css') %>
<!-- Custom styles for this template -->
<%- css('css/blog.css') %>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>

별거 아닙니다.간단하쥬? CSS helper (<%- css(path, ...) %>)를 이용해서 Style sheets를 삽입한게 전부입니다.

source 폴더는 차후에 블로그 사이트가 생성될 때 사이트 최상단 폴더에 똑같이 source폴더로 생성됩니다.

따라서 source 폴더 안에 위치한 파일의 경로를 설정하실 때 source/를 빼고 설정하셔야 합니다.

이후에 <title>과 메타 태그 등을 입력할 것이지만, 일단 지금은 이대로 남겨둡시다.

Pretty straightforward. All we have done is use a CSS helper to insert our style sheets.

The files in our source folder will be copied at the root of our generated site, so source/ should not be included in the paths.

We will make the <title> and meta tags dynamic down the line but let’s leave it like so for now.


After footer 부분은 <body> 맨 끝 부분에 들어갈 것입니다. 여기서는 Script 내용을 입력하겠습니다.

layout.ejs 파일을 수정해 봅시다.

The after footer section will be included just before the end of our <body> section. In that partial view, we will include all our scripts.

Let’s modify the layout:

layout/layout.ejs
<html>
<!-- Head tag -->
<%- partial('_partial/head') %>
<body>
<!-- After footer scripts -->
<%- partial('_partial/after-footer') %>
</body>
</html>

이어서 본문의 새로운 조각 layout/_partial/after-footer.ejs 파일을 만듭니다.

And create the content of the new layout/_partial/after-footer.ejs partial:

layout/_partial/after-footer.ejs
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<%- js('bootstrap/js/bootstrap.min.js') %>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<%- js('js/ie10-viewport-bug-workaround.js') %>

“위에 CSS 파일을 CSS helper를 이용해서 본문에 삽입했듯이”

JS 파일 삽입을 위해 a JS helper function 사용법도 확인해 보세요.

Notice the use of a JS helper function for our local js files.


Top Menu

같은 방법으로 <body>태그 바로 다음에 올 상단 메뉴를 만들어 봅시다.

In a similar fashion, let’s create the top menu just after the opening <body> tag.

layout/layout.ejs
// [...]
<body>
<!-- Menu -->
<%- partial('_partial/menu') %>
// [...]

layout/_partial/menu.ejs 파일 내용:

layout/_partial/menu.ejs partial content:

layout/_partial/menu.ejs
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<% for (var i in theme.menu){ %>
<a
class="blog-nav-item"
href="<%- url_for(theme.menu[i]) %>"><%= i %>
</a>
<% } %>
</nav>
</div>
</div>

theme 전역 변수의 사용법을 확인해 보세요. theme변수는 테마 폴더의 _config.yml에 저장된 정보를 불러옵니다.

테마 설정에서 메뉴에 관한 값을 작성하여 봅시다.

위의 함수와 변수들이 동작하게 하기 위해서는 반드시 _config.yml에 상응하는 변수 정보를 입력해줘야 합니다.

Note the use of the theme global variable. theme is the JS equivalent to the theme’s _config.yml.

Here we are making the menu configurable in the theme’s configuration.

For this to work we will then need to add the config in _config.yml:

_config.yml
# Header
menu:
Home: /
Archives: /archives

menu.ejs 파일은 _config.yml에 저장된 메뉴 변수 값들을 순서대로 불러와 하나 하나 그에 맞는 링크를 만들어 냅니다.

In menu.ejs we enumerate through all the menu items in the config and create the corresponding links.


Header 부분은 Menu 바로 밑에 위치 시키고 그 안에는 블로그 제목과 부제목을 담아 봅시다.

The header will be placed just below the menu and contain the blog title and subtitle:

layout/_partial/header.ejs
<div class="blog-header">
<h1 class="blog-title"><%= config.title %></h1>
<p class="lead blog-description"><% if (config.subtitle){ %><%= config.subtitle %><% } %></p>
</div>

여기서는 config 변수를 사용했습니다.

이 변수는 위에 theme 변수와는 달리 블로그 메인 _config.yml에 담긴 변수들을 사용합니다.

따라서 블로그 최상단 폴더에 저장된 _config.yml 파일은 블로그 제목과 부제목에 관한 정보를 담고 있어야 합니다.

Layout에 Header 부분을 포함 시킬 때 <div class="container"></div> 태그 안에 포함시키는 것을 잊지마세요.

In here, we make use of the config variable which corresponds to the main _config.yml of the blog. It should have a title and subtitle properties configured.

When inserting the header in the layout, beware of the <div class="container"></div>wrapper:

layout/layout.ejs
<html>
<!-- Head tag -->
<%- partial('_partial/head') %>
<body>
<!-- Menu -->
<%- partial('_partial/menu') %>
<div class="container">
<!-- Blog Header: title and subtitle -->
<%- partial('_partial/header') %>
</div>
// [...]

Footer 부분은 일단은 크게 건드릴 것이 없고 아래와 같이 작성하시면 됩니다.

“아래를 참고하시되, 입맛에 따라 수정하시면 됩니다. :)”

The footer is all static for now, here is the content of the partial view:

layout/_partial/footer.ejs
<footer class="blog-footer">
<p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
<p>Adapted to Hexo by <a href="http://www.codeblocq.com/">klugjo</a>.</p>
<p><a href="#">Back to top</a></p>
</footer>

Main content and sidebar

여기서는 조각들을 하나로 묶고, 메인 부분과 sidebar를 추가하기 위한 준비 작업을 하겠습니다.

아래는 layout.ejs 파일의 완성된 코드입니다.

At this point, we are ready to wrap things up and add the main content as well as the sidebar.

Here is the final layout.ejs:

layout/layout.ejs
<html>
<!-- Head tag -->
<%- partial('_partial/head') %>
<body>
<!-- Menu -->
<%- partial('_partial/menu') %>
<div class="container">
<!-- Blog Header: title and subtitle -->
<%- partial('_partial/header') %>
<div class="row">
<!-- Main Content -->
<div class="col-sm-8 blog-main">
<%- body %>
</div>
<!-- Sidebar -->
<div class="col-sm-3 col-sm-offset-1 blog-sidebar">
<%- partial('_partial/sidebar') %>
</div>
</div>
</div>
<!-- Footer -->
<%- partial('_partial/footer') %>
<!-- After footer scripts -->
<%- partial('_partial/after-footer') %>
</body>
</html>

body 변수에는 위에서 작업한 페이지와 같이 다른 여러 종류의 페이지들이 최종적으로 렌더링 된 페이지가 구현될 것입니다.

Sidebar 부분은 일단 임시로 bootstrap template code를 집어넣어 모양만 만들어 놓겠습니다.

The body variable corresponds to the content rendered from the different page type templates (cf above).

For the sidebar partial, we are simply going to hardcode the bootstrap template code for now:

layout/_partial/sidebar.ejs
<div class="sidebar-module sidebar-module-inset">
<h4>About</h4>
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
<div class="sidebar-module">
<h4>Archives</h4>
<ol class="list-unstyled">
<li><a href="#">March 2014</a></li>
<li><a href="#">February 2014</a></li>
<li><a href="#">January 2014</a></li>
<li><a href="#">December 2013</a></li>
<li><a href="#">November 2013</a></li>
</ol>
</div>
<div class="sidebar-module">
<h4>Elsewhere</h4>
<ol class="list-unstyled">
<li><a href="#">GitHub</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ol>
</div>


Index 파일

Layout이 어느정도 자리를 잡았으니 이제 첫 번째 page 종류인 index.ejs를 작성할 차례입니다.

시험삼아 아래 코드를 작성해 봅시다.

Now that our layout is in place, we are ready to create the first page type template: index.ejs.

Here is a trivial first version:

layout/index.ejs
<span>Content</span>

괜한 일 뻘짓 같으신가요? 그래도 위 코드와 아래의 명령을 이용해 브라우저에 우리 테마를 테스트 해 볼 수 있습니다.

Useless ? Well, this allows us to test out theme in browser:

_config.yml
# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: bootstrap-blog-hexo

“최상단 폴더의 _config.yml 파일을 열어 theme 변수에 테마 이름을 입력하세요”

# Verify that everything is alright
hexo generate
# Start hexo server
hexo server

그리고 웹브라우저를 여시고 주소창에 http://localhost:4000 을 입력하면, 짜잔!

블로그 설정 파일 _config.yml의 theme 변수 값을 본인의 테마 이름으로 바꾸는 걸 잊지마세요!

And open your browser at http://localhost:4000. Tada !

Note: Don’t forget to update the theme in your blog’s config:



블로그 글 순서대로 나열하기

첫 페이지에서 게시물의 미리 보기가 보이도록 하기 위해 index.ejs 파일에서 미리 보기 글을 순서대로 불러 오도록 합시다.

On the home page we want to display post excerpts.

First of all, let’s enumerate through the posts in our index.ejs:

layout.index.ejs
<% page.posts.each(function(item){ %>
<%- partial('_partial/article-excerpt', {item: item}) %>
<% }); %>
  • page.posts를 이용해 게시물 목록을 얻습니다.
  • 얻어낸 값을 <%- partial('name', args) %>의 인자 값으로 전달하여 주입합니다.
  • Get a list of posts for that page with page.posts
  • Pass an argument in a partial by using <%- partial('name', args) %>


게시물 layout

article-excerpt.ejs 파일을 만들고 코드를 테마에 적용해 봅시다.

아래는 제가 떠올린 코드입니다.

Let’s create the article-excerpt.ejs partial and adapt the code to our theme. Here is what I came up with:

layout/_partial/article-excerpt.ejs
<div class="blog-post">
<!-- Title -->
<h2 class="blog-post-title">
<a href="<%- config.root %><%- item.path %>">
<%- item.title %>
</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.excerpt || item.content %>
<!-- Only display the Read More link if we are displaying an excerpt -->
<% if(item.excerpt) { %>
<p>
<a href="<%- config.root %><%- item.path %>">
<%= theme.excerpt_link %>
</a>
</p>
<% } %>
</div>

- 전체 글로 링크 걸기:

전체 글로 링크를 걸기 위해서는 config.root에 저장된 경로 값과 item.path의 경로 값을 정확하게 이어 붙여야 합니다.

“블로그 설정 파일 _config.yml의 root 값이 /로 설정되어 있는지 확인해 주세요”

The link to the full post is created by concatenating config.root (config option which really shoud be equal to /) and item.path which is the relative path or link to the full post.


- 작성자

기본 설정 상태에서 Hexo는 post 변수로 글 작성자의 정보를 저장하지 않습니다.

그러나 front matter를 이용해서 어떠한 변수든지 간에 원하는 변수를 추가할 수 있습니다.

만약 글에 작성자 이름이 표시되기를 원한다면, 게시물 front matter 부분에 다음과 같이 작성하시면 됩니다.

By default, Hexo does not have any author property in it’s post variable. But we can add whatever variable we want to the front matter. If you want an author name to be displayed for a post, the front matter for your post should look something like

title: Hello World
author: Klughertz Jonathan
---

- 미리 보기와 본문

Hexo를 이용해 글을 작성할 때 <!-- more -->태그를 사용하여 미리 보기 부분과 본문 부분을 구분지을 수 있습니다.

<!-- more--> 태그 윗 부분 내용이 미리 보여집니다.”

우리 테마에서는 글 목록에서 미리 보기 부분을 보여주고 사용자가 글의 제목이나 read more 링크를 클릭하여 본문으로 넘어갈 수 있도록 할 것입니다.

When writing a post with Hexo, you can use a <!-- more --> tag to delimit the excerpt from the content. In our case, we are displaying the excerpt since this is a list of posts. The user then has the possibility to click on a post’s title or on the read more link to view the entire post.


- Read More 문구

테마 설정 파일에 새 속성을 추가했습니다. 여러분도 잊지말고 추가해 주세요.

I have added a new property to my theme’s config, do not forget to add it to yours:

_config.yml
# Read More text
excerpt_link: Read More

다행히도 이제 남은 코드는 쉽기 때문에 이쯤에서 연습용 게시물을 이것 저것 작성하시고 그 결과를 확인해 보시길 것을 권합니다.

Hopefully the rest of the code is easy enough to understand. At this point, I suggest you write a few additional posts than the default Hello World and play around with the results.


- 목록 페이지

이제 마지막으로 건드려 볼 것은 첫 페이지의 쪽 매기기 입니다.

“게시글이 많아졌을 때 게시글 목록에 쪽 매기기를 하도록 하는 기능입니다. “

index.ejs에 삽입될 나머지 조각을 포함시키면서 시작해 봅시다.

The last thing we are going to tackle in this section is the pagination for the home page.

Let’s start by including yet another partial to our index.ejs:

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

그리고 해당 쪽 매기기 조각 파일인 layout/_partial/pagination.ejs를 작성하여 마무리를 지읍시다.

And finish by writing our pagination partial view, layout/_partial/pagination.ejs:

layout/_partial/pagination.ejs
<nav>
<ul class="pager">
<% if (page.prev){ %>
<li><a href="<%- config.root %><%- page.prev_link %>">Previous</a></li>
<% } %>
<% if (page.next){ %>
<li><a href="<%- config.root %><%- page.next_link %>">Next</a></li>
<% } %>
</ul>
</nav>
  • page.prev : 이전 페이지 숫자. 만약 현재 페이지가 첫 페이지라면 0이 됩니다.
  • page.next : 다음 페이지 숫자. 만약 현재 페이지가 마지막 페이지라면 0이 됩니다.
  • page.next_linkpage.prev_link는 말씀 안드려도 아시겠지요?

만약 쪽 매기기를 할만큼 많은 글이 없으시다면 블로그 설정 파일에서 per_page 속성 값을 변경하여 쪽 매기기할 페이지 수를 조절하실 수 있습니다.

  • page.prev: Previous page number. 0 if the current page is the first.
  • page.next: Next page number. 0 if the current page is the last.
  • page.next_link and page.prev_link are self explanatory.

You can adjust the post per page in the main config (per_page property) if you don’t have enough posts to see the pagination in action.



네, 여기까지 입니다. 다음 파트에서는 남아있는 페이지들을 마무리 짓도록 하겠습니다.

That’s it for today, in the next section of this tutorial, we will finish all the remaining pages of the blog.

“수고 많으셨습니다!”


#Hexo #dev #번역 #JavaScript #EJS

#EJS #Hexo #JavaScript #dev #번역