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

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

인용 구문 (Block Quote)

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

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

일반 인용 (내용만)

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

Example

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

Result

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

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

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

Example

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

Result

사랑에는 실패가 없다.

Amelie Nothomble voyage d’hiver

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

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

Example

{% 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

@npmdailytwitter.com/npmdaily/status/743858563299311616

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

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

Example

{% 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만 하면 실시간 적용됩니다. 아주 간단하죠?

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

코드 삽입

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

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

일반 코드

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

Example

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

Result

alert('Hello World!');

언어 명시하기

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

Example

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

Result

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

캡션 추가하기

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

Example

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

Result

Array.map

array.map(callback[, thisArg])

캡션과 URL 추가하기

Example

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

Result

_.compactUnderscore.js

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

마크다운 형식의 코드 블락

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

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

Example

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

Result

test.java

String s = "abc";
System.out.println(s);

jsFiddle

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

{% jsfiddle shorttag [tabs] [skin] [width] [height] %}

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

Example

{% jsfiddle pgtkkLsc html,result %}

Result

(플러그인 폐기로 jsfiddle 임베드를 표시할 수 없습니다)

Gist

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

{% gist gist_id [filename] %}

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

Example

{% gist 9a4aded78853db541ca2510d8d41e17f %}

Result

(플러그인 폐기로 gist 임베드를 표시할 수 없습니다)

iframe

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

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

내장 코드 삽입

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

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

유튜브 (YouTube)

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

[YouTube: video_id]

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

Example

[YouTube: c7rCyll5AeY]

Result

[YouTube: c7rCyll5AeY]

Vimeo

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

[Vimeo: video_id]

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

Example

[Vimeo: 167976188]

Result

[Vimeo: 167976188]

포스트 삽입

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

{% post_path slug %}
[slug [title]]

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

Example

[get-started-with-hexo]

Result

[get-started-with-hexo]

자원 (Asset) 삽입

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

[hexo-basic-usage]

{% asset_path slug %}
{% asset_img slug [title] %}
{% asset_link slug [title] %}

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

Related Posts

• [get-started-with-hexo]
• [hexo-apply-hueman-theme]
• [hexo-basic-usage]
• [hexo-tag-plugins]
• [add-github-card-to-hexo]
• [add-github-repository-timeline-badge-to-hexo]
• [hexo-google-site-search-console-analytics]
• [hexo-naver-search-webmaster]
• [add-google-adsense-to-hexo]
• [opengraph-social-meta-tag]
• [google-search-how-to-work]
• [search-engine-optimization-hexo-plugins]