Hexo 태그 플러그인(Tag plugin) 사용법

태그플러그인(Tag Plugin)

Hexo 를 이용해서 글을 작성할 때 Markdown 문법만으로 글을 작성하는데는
컨텐츠를 표현하는 데 한계가 있습니다.
예) 유튜브 동영상, jsFiddle, gist 문서 넣기 등

이를 보완해주기 위해서 Hexo 에서 Tag Plugins을 제공해주고 있습니다

단점

VSCode 의 Markdown Preview 에서 Preview 가 안됩니다
npm run server 로 로컬 서버에서 확인해야 합니다

장점

마크다운으로 표현하기 어려운 내용을 작성할 수 있습니다

유용한 표현이 몇개 있어서 사용하면 글 내용이 풍성해집니다

태그 플러그인(Tag Plugin) 종류

인용구 (Block Quote, Quote)

인용구를 표현할 때 사용하면 좋습니다
마크다운 보다 좋은 건 저자, 소스, 링크, 타이틀을 추가해서 넣을 수 있습니다

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

또는

{% quote [author[, source]] [link] [source_link_title] %}
content
{% endquote %}

이렇게 사용합니다

인용구 사용예제

{% blockquote 이승호 기자, 중앙일보 http://news.naver.com/main/read.nhn?mode=LSD&mid=sec&sid1=001&oid=025&aid=0003091247 비트코인 끌고 이더리움 밀고…암호화폐 시총 2257조 돌파 %}
비트코인과 이더리움 모두 올해 초와 비교하면 가격이 약 2배 올랐다. 블룸버그는 “저금리 시대에 높은 수익률을 기대하고 암호화폐에 손을 대는 기관투자자들이 늘어나고 있기 때문”이라고 분석했다. 월가 최대 투자은행인 골드만삭스는 지난달 31일 올해 2분기 중 비트코인을 투자 상품으로 내놓겠다고 밝혔다.
{% endblockquote %}

{% blockquote 이승호 기자, 중앙일보 http://news.naver.com/main/read.nhn?mode=LSD&mid=sec&sid1=001&oid=025&aid=0003091247 비트코인 끌고 이더리움 밀고…암호화폐 시총 2257조 돌파 %}
비트코인과 이더리움 모두 올해 초와 비교하면 가격이 약 2배 올랐다. 블룸버그는 “저금리 시대에 높은 수익률을 기대하고 암호화폐에 손을 대는 기관투자자들이 늘어나고 있기 때문”이라고 분석했다. 월가 최대 투자은행인 골드만삭스는 지난달 31일 올해 2분기 중 비트코인을 투자 상품으로 내놓겠다고 밝혔다.
{% endblockquote %}

저자, 소스, 링크, 타이틀은 옵션으로 생략해도 됩니다

코드 (Code Block)

코드 사용법

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

또는 

{% code [title] [lang:language] [url] [link text] [additional options] %}
code snippet
{% endcode %}

또는 

backtick 3개(`) 를 사용해서 표현하는게 제일 편합니다

코드 사용예제

codeblock luxon_test.js javascript https://skyksit.com/labs/ luxon_test.js line_number:true mark:5
'use strict';
var { DateTime } = require('luxon');
let daytime = DateTime.now().toFormat('yyyy-MM-dd HH:mm:ss');
console.log (${daytime});
endcodeblock

{% codeblock luxon_test.js javascript https://skyksit.com/labs/ luxon_test.js line_number:true mark:5 %}
'use strict';
var { DateTime } = require('luxon');
let daytime = DateTime.now().toFormat('yyyy-MM-dd HH:mm:ss');
console.log (${daytime});
{% endcodeblock %}

Backtick Code Block

backtick(`) 3개를 이용해서 codeblock 을 작성할 수 있는데
옵션과 title 순서가 codeblock 과 틀립니다

Backtick Code Block 사용법

backtick() 3개 [language] [title] [url] [link text] code snippet backtick() 3개

인용구 (Pull Quote)

사용방법

{% pullquote [class] %}
잘 사용해보지 않은 pullquote 태그 플러그인 입니다
{% endpullquote %}

class 는 html 의 class 속성을 지정해줄 수 있는 것 같습니다
hexo css 를 수정해서 사용할 수 있을 것 같지만 번거로울 것 같습니다
이거 보다는 blockquote 쓰는 게 더 편리합니다

사용예제

{% pullquote %}
pullquote 보다는
blockquote 가 더 편리합니다
{% endpullquote %}

jsFiddle

jsFiddle 에 작성한 코드를 embed 시킬 때 사용합니다
많이 사용하는 태그 플러그인 입니다

사용방법

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

shorttag 가 중요한 key 입니다.
jsfiddle 의 URL 중에서 https://jsfiddle.net/skyksit/1ot8h524/
해당 아이디 뒤의 tag 가 shorttag 입니다

사용예제

{% jsfiddle 1ot8h524 %}

Gist

Gist 의 코드를 embed 시킬 때 사용합니다
위에 jsFiddle 과 사용법은 동일 합니다

사용방법

{% gist gist_id [filename] %}

gist 의 URL 중에서 https://gist.github.com/skyksit/ 726885d865356b880c5a0c263773453b
해당 부분이 gist_id 입니다

사용예제

{% gist 726885d865356b880c5a0c263773453b authorize.js %}

iframe

markdown 문법에서는 iframe 이 없어서 불편했는데 tag plugin 으로 사용 가능합니다

사용방법

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

url : iframe 에 넣고 싶은 url 주소
width : 100% 로 넣으세요
height : 적당한 숫자 넣으세요

image

markdown 문법에서는 이미지 사이즈 설정이 없었는데 tag plugin 으로 설정 가능합니다

사용방법

image 의 class 속성을 정할 수 있고 width 와 height 설정이 가능합니다
이미지의 title 명과 마우스 오버시에 나오는 alt 도 설정 가능합니다

단지 VSCode 의 Markdown Preview 에서 볼 수 없는 최대 단점이 있어서 번거롭습니다

{% img [class names] /path/to/image [width] [height] '"title text" "alt text"' %}

Link

링크를 새창으로 띄울수 있습니다.

{% link text url [external] [title] %}

external : true 또는 false

사용예제

{% link 🕹️게임하기 https://html5.gamemonetize.com/f2ky1vql4oq9zy47lxiuitbi2pl95gal/ true Fullscreen %} 

{% link 🕹️게임하기 https://html5.gamemonetize.com/f2ky1vql4oq9zy47lxiuitbi2pl95gal/ true Fullscreen %}

Include Code

source/downloads/code 폴더에 있는 코드를 embed 시킬 수 있습니다

gist 와 fiddle 이 있어서 잘 사용하지는 않습니다

사용방법

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

Youtube

youtube 영상을 embed 시킬 수 있습니다

사용방법

{% youtube video_id [type] [cookie] %}

사용예제

{% youtube 8xe2jdNUtRI 'playlist' false %}

{% youtube 8xe2jdNUtRI %}

Vimeo

Vimeo 영상을 embed 시킬 수 있습니다

사용방법

{% vimeo video_id [width] [height] %}

사용예제

{% vimeo 304963517 %}

{% vimeo 304963517 %}

Include Posts

중요 : 작성한 post 를 연결 할 수 있어요

작성하다보면 연관글로 등록하고 싶은 글이 있을 때 사용합니다

만약에 markdown 문법 관련 글을 연관글로 등록하고 싶을 때

사용방법

{% post_path filename %}
{% post_link filename [title] [escape] %}

# post 가 많아서 folder 로 구분했으면
{% post_link folder/filename %}

사용예제

{% post_link hexo/markdown '<b>마크다운</b>문법' true %}

{% post_link hexo/markdown '마크다운문법' true %}

Include Assets

markdown 파일명과 동일한 Asset 폴더를 만들어서 해당 폴더에 image 파일을 넣고
링크로 사용할 수 있습니다.
이미지 자료들이 많을 때 사용하거나 구글 검색 같은 곳에서 이미지 탭에 나오게 하고 싶을 때 사용합니다.

사용방법

_config.yml 에서 asset 폴더를 사용하도록 설정합니다.

post_asset_folder: true

설정 후에 hexo new post 로 post 생성시에 동일한 명칭의 폴더도 생성됩니다
생성된 폴더에 파일을 넣어야 합니다

{% asset_path filename %}
{% asset_img [class names] slug [width] [height] [title text [alt text]] %}
{% asset_link filename [title] [escape] %}

사용예제

스크린샷 같은 이미지 파일을 asset_img 로 많이 사용합니다.

{% asset_img image_name.jpg %}

참조문서

• Hexo Tag Plugins