Helpers

Helper는 템플릿에 정보(snippet)를 쉽게 삽입할 수 있도록 도와줍니다. 소스 파일에서는 Helper를 사용할 수 없습니다.

You could easily write your own custom helper or use our ready-made helpers.

URL

url_for

루트 경로를 포함한 url을 반환합니다. Output is encoded automatically.

<%- url_for(path) %>
Option Description Default
relative Output relative link Value of config.relative_link

Examples:

_config.yml
root: /blog/ # example
<%- url_for('/a/path') %>
// /blog/a/path

Relative link, follows relative_link option by default e.g. post/page path is ‘/foo/bar/index.html’

_config.yml
relative_link: true
<%- url_for('/css/style.css') %>
// ../../css/style.css

/* Override option
 * you could also disable it to output a non-relative link,
 * even when `relative_link` is enabled and vice versa.
 */
<%- url_for('/css/style.css', {relative: false}) %>
// /css/style.css

relative_url

from부터 to까지의 상대 경로를 반환합니다.

<%- relative_url(from, to) %>

Examples:

<%- relative_url('foo/bar/', 'css/style.css') %>
// ../../css/style.css

full_url_for

Returns a URL with the config.url prefixed. Output is encoded automatically.

<%- full_url_for(path) %>

Examples:

_config.yml
url: https://example.com/blog # example
<%- full_url_for('/a/path') %>
// https://example.com/blog/a/path

gravatar

Returns the gravatar image URL from an email.

[options] 파라미터를 지정하지 않은 경우, 기본 값이 적용됩니다. [options] 파라미터를 지정할 경우 숫자로 크기를 지정하여 Gravatar에 전달할 수 있습니다. 또 다른 방법으로, object를 설정할 경우 Gravatar를 위한 query string으로 변환됩니다.

<%- gravatar(email, [options]) %>
Option Description Default
s 이미지의 세로 크기 40
d 기본 값
f 기본 값
r Rating

More info: Gravatar

Examples:

<%- gravatar('a@abc.com') %>
// https://www.gravatar.com/avatar/b9b00e66c6b8a70f88c73cb6bdb06787

<%- gravatar('a@abc.com', 40) %>
// https://www.gravatar.com/avatar/b9b00e66c6b8a70f88c73cb6bdb06787?s=40

<%- gravatar('a@abc.com' {s: 40, d: 'https://via.placeholder.com/150'}) %>
// https://www.gravatar.com/avatar/b9b00e66c6b8a70f88c73cb6bdb06787?s=40&d=https%3A%2F%2Fvia.placeholder.com%2F150

HTML Tags

css

CSS 파일들을 불러옵니다. 만약 path가 / 또는 프로토콜명으로 시작하지 않는다면, 루트 URL이 접두어로 붙습니다. path 뒤에 .css 파일을 기입하지 않으면 자동으로 추가합니다. Use object type for custom attributes.

<%- css(path, ...) %>

Examples:

<%- css('style.css') %>
// <link rel="stylesheet" href="/style.css">

<%- css(['style.css', 'screen.css']) %>
// <link rel="stylesheet" href="/style.css">
// <link rel="stylesheet" href="/screen.css">

<%- css({ href: 'style.css', integrity: 'foo' }) %>
// <link rel="stylesheet" href="/style.css" integrity="foo">

<%- css([{ href: 'style.css', integrity: 'foo' }, { href: 'screen.css', integrity: 'bar' }]) %>
// <link rel="stylesheet" href="/style.css" integrity="foo">
// <link rel="stylesheet" href="/screen.css" integrity="bar">

js

JavaScript 파일들을 불러옵니다. path에는 문자열(string) 또는 배열(array)을 사용할 수 있습니다. path 뒤에 .js 파일을 기입하지 않으면 자동으로 추가합니다. Use object type for custom attributes.

<%- js(path, ...) %>

Examples:

<%- js('script.js') %>
// <script src="/script.js"></script>

<%- js(['script.js', 'gallery.js']) %>
// <script src="/script.js"></script>
// <script src="/gallery.js"></script>

<%- js({ src: 'script.js', integrity: 'foo', async: true }) %>
// <script src="/script.js" integrity="foo" async></script>

<%- js([{ src: 'script.js', integrity: 'foo' }, { src: 'gallery.js', integrity: 'bar' }]) %>
// <script src="/script.js" integrity="foo"></script>
// <script src="/gallery.js" integrity="bar"></script>

link_to

링크를 삽입합니다.

<%- link_to(path, [text], [options]) %>
Option Description Default
external 링크를 새 탭에 엽니다. false
class Class명
id ID

Examples:

<%- link_to('http://www.google.com') %>
// <a href="http://www.google.com" title="http://www.google.com">http://www.google.com</a>

<%- link_to('http://www.google.com', 'Google') %>
// <a href="http://www.google.com" title="Google">Google</a>

<%- link_to('http://www.google.com', 'Google', {external: true}) %>
// <a href="http://www.google.com" title="Google" target="_blank" rel="noopener">Google</a>

mail_to

메일 링크를 삽입합니다.

<%- mail_to(path, [text], [options]) %>
Option Description
class Class명
id ID
subject 메일 제목
cc CC
bcc BCC
body 메일 내용

Examples:

<%- mail_to('a@abc.com') %>
// <a href="mailto:a@abc.com" title="a@abc.com">a@abc.com</a>

<%- mail_to('a@abc.com', 'Email') %>
// <a href="mailto:a@abc.com" title="Email">Email</a>

image_tag

이미지를 삽입합니다.

<%- image_tag(path, [options]) %>
Option Description
alt 이미지 대신 표시할 텍스트
class Class명
id ID
width 이미지의 가로 크기
height 기본 값

favicon_tag

Inserts a favicon.

<%- favicon_tag(path) %>

feed_tag

Feed 링크를 삽입합니다.

<%- feed_tag(path, [options]) %>
Option Description Default
title Feed 제목 config.title
type Feed 형식

Examples:

<%- feed_tag('atom.xml') %>
// <link rel="alternate" href="/atom.xml" title="Hexo" type="application/atom+xml">

<%- feed_tag('rss.xml', { title: 'RSS Feed', type: 'rss' }) %>
// <link rel="alternate" href="/atom.xml" title="RSS Feed" type="application/rss+xml">

/* Defaults to hexo-generator-feed's config if no argument */
<%- feed_tag() %>
// <link rel="alternate" href="/atom.xml" title="Hexo" type="application/atom+xml">

조건 태그

is_current

path가 현재 페이지의 URL과 동일한지 체크합니다. strict 옵션을 사용하면 제한적인 매칭을 활성화 합니다.

<%- is_current(path, [strict]) %>

is_home

현재 페이지가 home 페이지인지 체크합니다.

<%- is_home() %>

is_home_first_page (+6.3.0)

기본 값

<%- is_home_first_page() %>

is_post

현재 페이지가 포스트인지 체크합니다.

<%- is_post() %>

is_page

Paginator를 삽입합니다.

<%- is_page() %>

is_archive

현재 페이지가 아카이브 페이지인지 체크합니다.

<%- is_archive() %>

is_year

현재 페이지가 연간 아카이브 페이지인지 체크합니다.

<%- is_year() %>

is_month

현재 페이지가 월간 아카이브 페이지인지 체크합니다.

<%- is_month() %>

is_category

현재 페이지가 카테고리 페이지인지 체크합니다. 파라미터에 문자열을 넣으면, 현재 페이지가 해당 문자열의 카테고리에 속해있는지 체크합니다.

<%- is_category() %>
<%- is_category('hobby') %>

is_tag

현재 페이지가 태그 페이지인지 체크합니다. 파라미터에 문자열을 넣으면, 현재 페이지가 해당 문자열의 태그에 속해있는지 체크합니다.

<%- is_tag() %>
<%- is_tag('hobby') %>

문자열 조작

trim

문자열에서 공백을 제거합니다.

<%- trim(string) %>

strip_html

문자열에서 모든 HTML 태그를 제거합니다.

<%- strip_html(string) %>

Examples:

<%- strip_html('It\'s not <b>important</b> anymore!') %>
// It's not important anymore!

titlecase

문자열을 적절한 타이틀 케이스(소문자/대문자)에 맞게 변환합니다.

<%- titlecase(string) %>

Examples:

<%- titlecase('this is an apple') %>
# This is an Apple

markdown

Markdown에 맞게 문자열을 렌더링합니다.

<%- markdown(str) %>

Examples:

<%- markdown('make me **strong**') %>
// make me <strong>strong</strong>

render

문자열을 렌더링합니다.

<%- render(str, engine, [options]) %>

Examples:

<%- render('p(class="example") Test', 'pug'); %>
// <p class="example">Test</p>

See Rendering for more details.

word_wrap

주어진 length에 맞게 문자열을 포장합니다. length의 기본값은 80 입니다.

<%- word_wrap(str, [length]) %>

Examples:

<%- word_wrap('Once upon a time', 8) %>
// Once upon\n a time

truncate

length 이후의 문자들을 잘라냅니다. 기본 값은 30 입니다.

<%- truncate(text, [options]) %>

Examples:

<%- truncate('Once upon a time in a world far far away', {length: 17}) %>
// Once upon a ti...

<%- truncate('Once upon a time in a world far far away', {length: 17, separator: ' '}) %>
// Once upon a...

<%- truncate('And they found that many people were sleeping better.', {length: 25, omission: '... (continued)'}) %>
// And they f... (continued)

escape_html

Escapes HTML entities in a string.

<%- escape_html(str) %>

Examples:

<%- escape_html('<p>Hello "world".</p>') %>
// &lt;p&gt;Hello &quot;world&quot;.&lt;&#x2F;p&gt;

템플릿

partial

다른 템플릿 파일을 불러옵니다. 지역 변수인 locals에 정의할 수 있습니다.

<%- partial(layout, [locals], [options]) %>
Option Description Default
cache (Fragment cache 사용) false
only 지역 변수에 한정합니다. 템플릿에서 locals 변수만 설정할 수 있습니다. false

fragment_cache

Fragment에 컨텐츠를 캐싱합니다. 컨텐츠를 fragment단위로 저장하고 다음 요청이 들어오면 캐시를 제공합니다.

<%- fragment_cache(id, fn);

Examples:

<%- fragment_cache('header', function(){
  return '<header></header>';
}) %>

날짜와 시간

date

형식이 정의된 날짜를 삽입합니다. date는 unix time, ISO string, date object, Moment.js 객체를 사용할 수 있습니다. format은 기본 값으로 정의된 date_format를 사용합니다.

<%- date(date, [format]) %>

Examples:

<%- date(Date.now()) %>
// 2013-01-01

<%- date(Date.now(), 'YYYY/M/D') %>
// Jan 1 2013

date_xml

XML 형식의 날짜를 삽입합니다. date는 unix time, ISO string, date object, Moment.js 객체를 사용할 수 있습니다.

<%- date_xml(date) %>

Examples:

<%- date_xml(Date.now()) %>
// 2013-01-01T00:00:00.000Z

time

형식이 정의된 시간을 사입합니다. date는 unix time, ISO string, date object, Moment.js 객체를 사용할 수 있습니다. format은 기본 값으로 정의된 time_format를 사용합니다.

<%- time(date, [format]) %>

Examples:

<%- time(Date.now()) %>
// 13:05:12

<%- time(Date.now(), 'h:mm:ss a') %>
// 1:05:12 pm

full_date

형식이 정의된 날짜와 시간을 삽입합니다. date는 unix time, ISO string, date object, Moment.js 객체를 사용할 수 있습니다. format은 기본 값으로 정의된 date_format + time_format를 사용합니다.

<%- full_date(date, [format]) %>

Examples:

<%- full_date(new Date()) %>
// Jan 1, 2013 0:00:00

<%- full_date(new Date(), 'dddd, MMMM Do YYYY, h:mm:ss a') %>
// Tuesday, January 1st 2013, 12:00:00 am

relative_date

Inserts relative time from now. date can be unix time, ISO string, date object, or Moment.js object.

<%- relative_date(date) %>

Examples:

<%- relative_date(new Date()) %>
// a few seconds ago

<%- relative_date(new Date(1000000000000)) %>
// 22 years ago

time_tag

Inserts time tag. date can be unix time, ISO string, date object, or Moment.js object. format is date_format setting by default.

<%- time_tag(date, [format]) %>

Examples:

<%- time_tag(new Date()) %>
// <time datetime="2024-01-22T06:35:31.108Z">2024-01-22</time>

<%- time_tag(new Date(), 'MMM-D-YYYY') %>
// <time datetime="2024-01-22T06:35:31.108Z">Jan-22-2024</time>

moment

Moment.js 라이브러리 입니다.

List

list_categories

모든 카테고리의 목록을 삽입합니다.

<%- list_categories([options]) %>
Option Description Default
orderby 태그의 정렬 기준 name
order 정렬 방식. 1, asc은 오름차순; -1, desc은 내림차순 1
show_count 각 카테고리 별 포스트의 번호를 표시합니다. true
style 카테고리 목록 표시의 스타일. list는 카테고리 목록을 순서없이 표시합니다. Use false or any other value to disable it. list
separator 카테고리 별 구분자. (style이 list가 아닐 때만 동작합니다.) ,
depth 카테고리의 계층을 표시합니다. 0은 모든 카테고리 및 하위 카테고리를 표시합니다.; -1은 0과 비슷하지만 flat하게 표시합니다.; 1은 최상위 계층의 카테고리들만 표시합니다. 0
class 카테고리 목록의 Class명. category
transform 카테고리 이름의 표시 방식을 변경하는 기능.
suffix 링크에 접미사를 붙입니다. None

Examples:

<%- list_categories(post.categories, {
  class: 'post-category',
  transform(str) {
    return titlecase(str);
  }
}) %>

<%- list_categories(post.categories, {
  class: 'post-category',
  transform(str) {
    return str.toUpperCase();
  }
}) %>

list_tags

모든 태그의 목록을 삽입합니다.

<%- list_tags([options]) %>
Option Description Default
orderby 카테고리 정렬 기준 name
order 정렬 방식. 1, asc은 오름차순; -1, desc은 내림차순 1
show_count 각 아카이브에 대한 포스트의 개수를 표시합니다. true
style 태그 목록 표시의 스타일. list는 태그 목록을 순서없이 표시합니다. Use false or any other value to disable it. list
separator 포스트 간 구분자. (style이 list각 아닐 때만 동작하빈다.) ,
class Class name of tag list (string) or customize each tag’s class (object, see below). tag
transform The function that changes the display of tag name. See examples in list_categories.
amount 표시되는 태그의 개수. (0 = 무한대) 0
suffix 링크에 접미사를 붙입니다. None

Class advanced customization:

Option Description Default
class.ul <ul> class name (only for style list) tag-list (list style)
class.li <li> class name (only for style list) tag-list-item (list style)
class.a <a> class name tag-list-link (list style) tag-link (normal style)
class.label <span> class name where the tag label is stored (only for normal style, when class.label is set the label is put in a <span>) tag-label (normal style)
class.count <span> class name where the tag counter is stored (only when show_count is true) tag-list-count (list style) tag-count (normal style)

Examples:

<%- list_tags(site.tags, {class: 'classtest', style: false, separator: ' | '}) %>
<%- list_tags(site.tags, {class: 'classtest', style: 'list'}) %>
<%- list_tags(site.tags, {class: {ul: 'ululul', li: 'lilili', a: 'aaa', count: 'ccc'}, style: false, separator: ' | '}) %>
<%- list_tags(site.tags, {class: {ul: 'ululul', li: 'lilili', a: 'aaa', count: 'ccc'}, style: 'list'}) %>

list_archives

아카이브 목록을 삽입합니다.

<%- list_archives([options]) %>
Option Description Default
type 형식. 이 값은 yearly 또는 monthly입니다. monthly
order 정렬 방식. 1, asc은 오름차순; -1, desc은 내림차순 1
show_count Display the number of posts for each archive true
format 날짜 형태 MMMM YYYY
style 아카이브 목록 표시의 스타일. list는 아카이브 목록을 순서없이 표시합니다. Use false or any other value to disable it. list
separator 아카이브 간 구분자. (style이 list가 아닐 때만 동작합니다.) ,
class 아카이브 목록의 Class명. archive
transform The function that changes the display of archive name. See examples in list_categories.

list_posts

포스트의 목록을 삽입합니다.

<%- list_posts([options]) %>
Option Description Default
orderby 포스트 정렬 기준 date
order 정렬 방식. 1, asc은 오름차순; -1, desc은 내림차순 1
style 포스트 목록 표시의 스타일. list는 포스트 목록을 순서없이 표시합니다. Use false or any other value to disable it. list
separator 태그 별 구분자. (style이 list가 아닐 때만 동작합니다.) ,
class 포스트 목록의 Class명. post
amount 표시되는 포스트의 개수. (0 = 무한대) 6
transform The function that changes the display of post name. See examples in list_categories.

tagcloud

태그 클라우드를 삽입합니다.

<%- tagcloud([tags], [options]) %>
Option Description Default
min_font 최소 폰트 크기 10
max_font 최대 폰트 크기 20
unit 폰트 크기의 단위 px
amount 태그의 총 개수 unlimited
orderby 태그 정렬 기준 name
order 정렬 방식. 1, asc은 오름차순; -1, desc은 내림차순 1
color 태그 클라우드에 색상을 입힙니다. false
start_color 시작 색상. 16진수 색상 (#b700ff), rgba (rgba(183, 0, 255, 1)), hsla (hsla(283, 100%, 50%, 1)), color keywords을 사용할 수 있습니다. 이 옵션은 color가 true일 때만 동작합니다.
end_color 종료 색상. 16진수 색상 (#b700ff), rgba (rgba(183, 0, 255, 1)), hsla (hsla(283, 100%, 50%, 1)), color keywords. 이 옵션은 color가 true일 때만 동작합니다.
class Class name prefix of tags
level The number of different class names. This option only works when class is set. 10
show_count (+6.3.0) 각 태그 별 포스트의 번호를 표시합니다. false
count_class (+6.3.0) 태그 이름의 표시 방식을 변경하는 기능. count

Examples:

// Default options
<%- tagcloud() %>

// Limit number of tags to 30
<%- tagcloud({amount: 30}) %>

Miscellaneous

paginator

파비콘을 삽입합니다.

<%- paginator(options) %>
Option Description Default
base 기준 URL /
format URL 형식 page/%d/
total 페이지의 총 개수 1
current 현재 페이지의 번호 0
prev_text 이전 페이지의 링크 텍스트. prev_next가 true일 때만 동작합니다. Prev
next_text 다음 페이지의 링크 텍스트. prev_next가 true일 때만 동작합니다. Next
space 빈 공간을 나타내는 텍스트 &hellp;
prev_next 이전, 다음 링크를 표시합니다. true
end_size 시작/종료 측에 페이지의 개수를 표시합니다. 1
mid_size 분수와 정수의 구분자. 2
show_all 모든 페이지를 표시합니다. true로 설정되어있다면, end_size와 mid_size는 동작하지 않습니다. false
escape Escape HTML tags true
기본 값 옵션 옵션
current_class (+6.3.0) 옵션 current
space_class (+6.3.0) 옵션 space
prev_class (+6.3.0) 옵션 extend prev
next_class (+6.3.0) Next page class name extend next
force_prev_next (+6.3.0) 아카이브 이름의 표시 방식을 변경하는 기능. false

Examples:

<%- paginator({
  prev_text: '<',
  next_text: '>'
}) %>
<!-- Rendered as -->
<a href="/1/">&lt;</a>
<a href="/1/">1</a>
2
<a href="/3/">3</a>
<a href="/3/">&gt;</a>
<%- paginator({
  prev_text: '<i class="fa fa-angle-left"></i>',
  next_text: '<i class="fa fa-angle-right"></i>',
  escape: false
}) %>
<!-- Rendered as -->
<a href="/1/"><i class="fa fa-angle-left"></i></a>
<a href="/1/">1</a>
2
<a href="/3/">3</a>
<a href="/3/"><i class="fa fa-angle-right"></i></a>

search_form

Google 검색 form을 삽입합니다.

<%- search_form(options) %>
Option Description Default
class Form의 Class명 search-form
text 검색의 hint에 들어갈 문장 Search
button 검색 버튼을 표시합니다. boolean 또는 string 값을 가질 수 있습니다. 이 값이 string이면 해당 문자열은 버튼에 표시됩니다. false

number_format

숫자의 형식을 지정합니다.

<%- number_format(number, [options]) %>
Option Description Default
precision 수의 정밀도. false 또는 음수가 아닌 정수 값을 가집니다. false
delimiter 1000 단위의 구분자. ,
separator The separator between the fractional and integer digits. .

Examples:

<%- number_format(12345.67, {precision: 1}) %>
// 12,345.68

<%- number_format(12345.67, {precision: 4}) %>
// 12,345.6700

<%- number_format(12345.67, {precision: 0}) %>
// 12,345

<%- number_format(12345.67, {delimiter: ''}) %>
// 12345.67

<%- number_format(12345.67, {separator: '/'}) %>
// 12,345/67

meta_generator

Inserts generator tag.

<%- meta_generator() %>

Examples:

<%- meta_generator() %>
// <meta name="generator" content="Hexo 4.0.0">

open_graph

Open Graph 데이터를 삽입합니다.

<%- open_graph([options]) %>
Option Description Default
title 페이지 제목 (og:title) page.title
type 페이지 형태 (og:type) article(post page)
website(non-post page)
url 페이지 URL (og:url) url
image 페이지 커버 (og:image) All images in the content
author Article author (og:article:author) config.author
date Article published time (og:article:published_time) Page published time
updated Article modified time (og:article:modified_time) Page modified time
language Article language (og:locale) page.lang || page.language || config.language
site_name 사이트 이름 (og:site_name) config.title
description 페이지 설명 (og:description) Page excerpt or first 200 characters of the content
twitter_card Twitter card type (twitter:card) summary
twitter_id Twitter ID (twitter:creator)
twitter_site Twitter Site (twitter:site)
twitter_image 예시:
google_plus Google+ profile link
fb_admins Facebook admin ID
fb_app_id Facebook App ID

toc

헤딩 태그(h1~h6)를 파싱하여 목차(Table of Content)를 삽입합니다.

<%- toc(str, [options]) %>
Option Description Default
class Class명 toc
class_item (+6.3.0) 옵션 ${class}-item
class_link (+6.3.0) 참조 ${class}-link
class_text (+6.3.0) 포스트 이름의 표시 방식을 변경하는 기능. ${class}-text
class_child (+6.3.0) 기본 값 ${class}-child
class_number (+6.3.0) 기본 값 ${class}-number
class_level (+6.3.0) 기본 값 ${class}-level
list_number 목록 번호를 표시합니다. true
max_depth Maximum heading depth of generated toc 6
min_depth Minimum heading depth of generated toc 1
max_items (+7.3.0) Maximum number of items in generated toc Infinity

Examples:

<%- toc(page.content) %>

data-toc-unnumbered (+6.1.0)

Headings with attribute data-toc-unnumbered="true" will be marked as unnumbered (list number will not be display).

Warning!

For using data-toc-unnumbered="true", the renderer must have the option to add CSS classes.

Please see below PRs.