Hexo

Hexo 태그 플러그인 (Tag plugins) 살펴보기

🗓 ⏰ 소요시간 22 분

Hexo 는 마크다운 외에 포스트를 작성하기 위한 자체적인 문법을 지원합니다. 그것을 태그 플러그인 이라고 합니다. 처음에는 마크다운이면 충분하지 않을까 싶어서 사용하지 않았었는데 유용한 기능들이 꽤 있더군요. 익숙해지시면 편하게 사용할 수 있는 태그 플러그인을 살펴보겠습니다.

인용 구문 (Block Quote)

일반 마크다운 인용과는 다르게 작성자, 제목 등 여러가지 정보를 추가할 수 있습니다.

1
2
3
{% blockquote [author[, source]] [link] [source_link_title] %}
content
{% endblockquote %}

일반 인용 (내용만)

마크다운 문법의 > 에 해당하는 형식입니다. 아무것도 쓰지 않을 때는 그냥 > 를 쓰면 되겠습니다. 이 태그를 기반으로 작성자, 링크, 소스 타이틀 등 옵션을 추가할 수 있습니다.

Example

1
2
3
{% blockquote %}
마크다운 문법의 `>` 에 해당하는 형식입니다. 아무것도 쓰지 않을 때는 그냥 `>` 를 쓰면 되겠습니다. 이 태그를 기반으로 작성자, 링크, 소스 타이틀 등 옵션을 추가할 수 있습니다.
{% endblockquote %}

Result

마크다운 문법의 > 에 해당하는 형식입니다. 아무것도 쓰지 않을 때는 그냥 > 를 쓰면 되겠습니다. 이 태그를 기반으로 작성자, 링크, 소스 타이틀 등 옵션을 추가할 수 있습니다.

책 인용 (저자 + 출처 제목)

저자와 인용한 출처 두 가지만 적은 예시입니다. 책을 인용하는 경우가 이에 해당하겠습니다. 저자와 출처 사이에 구분할 수 있게 콤마 (,)를 넣어줘야 합니다.

Example

1
2
3
{% blockquote Amelie Nothomb, le voyage d'hiver %}
사랑에는 실패가 없다.
{% endblockquote %}

Result

사랑에는 실패가 없다.

Amelie Nothomble voyage d'hiver

트위터 인용 (저자 + 출처 링크)

저자와 출처의 링크 두 가지를 넣은 경우입니다. 출처에 링크가 걸려서 표시됩니다. 트위터에서 인용한 예시입니다. 트위터 내용은 @npmdaily 가 올린 npm package 중 하나로 Hexo 의 Keycap 추가하는 플러그인입니다.

Example

1
2
3
{% blockquote @npmdaily https://twitter.com/npmdaily/status/743858563299311616 %}
hexo-tag-kbd - Displays the keycaps in your hexo post/page. http://npmdaily.com/pkg/hexo-tag-kbd …  #npm #javascript #nodejs
{% endblockquote %}

Result

hexo-tag-kbd - Displays the keycaps in your hexo post/page. http://npmdaily.com/pkg/hexo-tag-kbd … #npm #javascript #nodejs

웹 페이지 인용 (저자 + 출처 링크 + 출처 제목)

저자와 출처 링크, 출처 제목까지 명시한 경우에는 링크가 출처 제목으로 표시됩니다. 웹 페이지를 인용할 경우 이런식으로 되겠습니다.

Example

1
2
3
{% blockquote Eric Han http://futurecreator.github.io/2016/06/14/get-started-with-hexo/ 워드프레스보다 쉬운 Hexo 블로그 시작하기%}
Hexo는 github pages를 이용한 블로그입니다. Github Pages 는 github 유저와 프로젝트의 정적인(static) 홈페이지를 자동으로 만들어주고 github.io 도메인으로 호스팅해주는 서비스입니다. 즉, 서버의 내용을 github 에 push만 하면 실시간 적용됩니다. 아주 간단하죠?
{% endblockquote %}

Result

Hexo는 github pages를 이용한 블로그입니다. Github Pages 는 github 유저와 프로젝트의 정적인(static) 홈페이지를 자동으로 만들어주고 github.io 도메인으로 호스팅해주는 서비스입니다. 즉, 서버의 내용을 github 에 push만 하면 실시간 적용됩니다. 아주 간단하죠?

코드 삽입

아무래도 IT 블로그를 하다보면 소스코드를 많이 추가하게 됩니다. Hexo 에서는 여러가지 기능을 제공합니다. 소스의 제목, 언어, url, 링크 제목을 옵션으로 표시할 수 있습니다. 그리고 Hexo 는 highlight.js 를 사용해서 소스코드를 표시하기 때문에 highlight.js 를 이용하면 다양한 커스터마이징도 가능합니다.

1
2
3
{% codeblock [title] [lang:language] [url] [link text] %}
code snippet
{% endcodeblock %}

일반 코드

가장 기본적인 포맷이고 여기에 옵션이 추가됩니다.

Example

1
2
3
{% codeblock %}
alert('Hello World!');
{% endcodeblock %}

Result

1
alert('Hello World!');

언어 명시하기

언어를 명시하는 경우입니다. 예시는 Objective-C 입니다. highlight.js 에서 지원하는 언어만 가능합니다. 지원가능한 언어는 155가지나 된다고 하네요. 자세한 내용은 highlightjs.org 에서 확인하세요.

Example

1
2
3
{% codeblock lang:objc %}
[rectangle setX: 10 y: 10 width: 20 height: 20];
{% endcodeblock %}

Result

1
[rectangle setX: 10 y: 10 width: 20 height: 20];

캡션 추가하기

예시처럼 파일명을 명시할 수 있겠네요.

Example

1
2
3
{% codeblock Array.map %}
array.map(callback[, thisArg])
{% endcodeblock %}

Result

Array.map
1
array.map(callback[, thisArg])

캡션과 URL 추가하기

Example

1
2
3
4
{% codeblock _.compact http://underscorejs.org/#compact Underscore.js %}
_.compact([0, 1, false, 2, '', 3]);
=> [1, 2, 3]
{% endcodeblock %}

Result

_.compactUnderscore.js
1
2
_.compact([0, 1, false, 2, '', 3]);
=> [1, 2, 3]

마크다운 형식의 코드 블락

마크다운 형식의 코드 블락 했을 때도 제목이나 링크 지정할 수 있었군요. 이렇게 쓰는게 제일 낫겠습니다.

1
``` [language] [title] [url] [link text] code snippet ```

Example

1
2
3
4
```java test.java
String s = "abc";
System.out.println(s);
```

Result

test.java
1
2
String s = "abc";
System.out.println(s);

jsFiddle

jsFiddle 은 온라인 상에서 HTML, CSS, javaScript 를 작성하고 테스트할 수 있는 서비스입니다.

1
{% jsfiddle shorttag [tabs] [skin] [width] [height] %}
  • shorttag: jsFiddle 에서 코드를 저장하면 대시보드에서 확인할 수 있는 코드 이름입니다. 그걸 입력하시면 알아서 불러옵니다.
  • skin: theme 가 아니고 skin 입니다. 보시면 js, html, css, result 이렇게 네 가지 탭이 있는데 표시하고 싶은 것만 순서대로 나열하면 됩니다.

Example

1
{% jsfiddle pgtkkLsc html,result %}

Result

Gist

Gist 는 Github 에서 제공하는 서비스 중 하나로, 간단한 코드를 작성해서 공유할 수 있는 서비스입니다. 파일 이름, 코드, 코드 설명만 작성하면 바로 파일이 만들어지고 공유할 수 있습니다.

1
{% gist gist_id [filename] %}
  • gist_id: Gist 에서 코드를 생성한 후에 공유를 누르면 나오는 url 의 아이디 부분을 복사해서 넣으면 됩니다.

Example

1
{% gist 9a4aded78853db541ca2510d8d41e17f %}

Result

iframe

아이프레임 (iframe) <iframe> 은 내부 프레임(inline frame) 으로 HTML 문서 내에서 다른 HTML 을 표시하는 태그입니다.

1
{% iframe url [width] [height] %}

내장 코드 삽입

source/downloads/code 폴더 상에 있는 코드를 포스트에 삽입할 수 있습니다.

1
{% include_code [title] [lang:language] path/to/file %}

유튜브 (YouTube)

유튜브 비디오를 비디오 아이디만 있으면 바로 삽입 가능합니다.

1
{% youtube video_id %}
  • video_id: 유튜브에서 비디오 공유를 눌러서 나오는 url 의 뒷 부분이 해당 비디오의 고유한 아이디입니다.

Example

1
{% youtube c7rCyll5AeY %}

Result

Vimeo

비메오 (Vimeo) 도 유튜브와 동일하게 삽입 가능합니다.

1
{% vimeo video_id %}
  • video_id: 비메오에서 비디오 공유를 눌러서 나오는 url 의 뒷 부분이 해당 비디오의 고유한 아이디입니다.

Example

1
{% vimeo 167976188 %}

Result

포스트 삽입

해당 블로그 내에 있는 포스트를 첨부할 수 있습니다. 굉장히 유용한 기능이네요! 따로 주소 복사해서 링크 만들지 않아도 됩니다.

1
2
{% post_path slug %}
{% post_link slug [title] %}
  • slug: slug 는 포스트의 제목을 말합니다. Hexo 에서는 파일 제목이 url 이 되므로 포스트 파일 만들 때 사용한 파일명을 입력하면 됩니다.
  • post_path: 포스트 제목을 입력하면 해당 포스트의 경로가 표시됩니다.
  • post_link: 포스트 제목을 입력하면 해당 포스트의 링크가 생성됩니다.

Example

1
{% post_link get-started-with-hexo %}

Result

워드프레스보다 쉬운 Hexo 블로그 시작하기

자원 (Asset) 삽입

자원을 삽입하는 방법입니다. 이건 자원 폴더 (Asset folder) 와 관련이 있습니다. 해당 내용은 다음 포스트에서 다루도록 하겠습니다.

Hexo 기본 사용법 
1
2
3
{% asset_path slug %}
{% asset_img slug [title] %}
{% asset_link slug [title] %}

나중에 필요할 때 찾아쓰시면 좋을 것 같네요. 다음 포스팅에서는 테마를 제작하고 커스터마이징할 때 필요한 변수와 Helper 를 알아보겠습니다.

Share