HEXO 사이트 작성시 태그 플러그인(Tag plugin) 잘 사용하는 방법

Posted on Edited on In Word count in article: 876 Reading time ≈ 3 mins.

Hexo 에는 태그 플러그인이 있다

Hexo 를 이용해서 글을 작성할 때 Markdown 문법만으로 글을 작성하다 보니
내용을 표현하는 데 한계가 있다

Markdown 을 이용해서 문서작성하는 건 Hexo 를 사용하면서 감수해야 하는 단점이다

그나마, Tag Plugins 이라는 게 나와서 Markdown 문법을 보완해주고 있다

태그 플러그인(Tag Plugin) 이란?

Hexo 의 추가적인 글 작성 태그 다 (Markdown 과 다르다)

태그 플러그인(Tag Plugin) 단점?

VSCode 의 Markdown Preview 에서 Preview 가 안된다

어떻게 표현되는 지 미리 볼 수 없으니 잘 작성해야 한다

태그 플러그인(Tag Plugin) 장점?

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

유용한 표현이 몇개 있으니 사용하면 글 내용이 풍성해진다

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

인용구 (Block Quote, Quote)

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

1
2
3
4
5
6
7
8
9
10
11
{% blockquote [author[, source]] [link] [source_link_title] %}
content
{% endblockquote %}

또는

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

이렇게 사용한다

인용구 사용예제

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

비트코인과 이더리움 모두 올해 초와 비교하면 가격이 약 2배 올랐다. 블룸버그는 “저금리 시대에 높은 수익률을 기대하고 암호화폐에 손을 대는 기관투자자들이 늘어나고 있기 때문”이라고 분석했다. 월가 최대 투자은행인 골드만삭스는 지난달 31일 올해 2분기 중 비트코인을 투자 상품으로 내놓겠다고 밝혔다.

이승호 기자, 중앙일보비트코인 끌고 이더리움 밀고…암호화폐 시총 2257조 돌파

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

코드 (Code Block)

코드 사용법

1
2
3
4
5
6
7
8
9
10
11
12
13
{% 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

luxon_test.js javascriptluxon_test.js
1
2
3
4
'use strict';
var { DateTime } = require('luxon');
let daytime = DateTime.now().toFormat('yyyy-MM-dd HH:mm:ss');
console.log (`${daytime}`);

Backtick Code Block

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

Backtick Code Block 사용법

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

인용구 (Pull Quote)

이건 써본적이 없다

사용방법

1
2
3
{% pullquote [class] %}
이건 도대체 왜 사용하는 거야
{% endpullquote %}

class 는 html 의 class 속성을 지정해줄 수 있는 것 같다
hexo css 를 수정해서 사용할 수 있을 것 같지만 귀찮아서 안쓸꺼다
이거 쓸 바에는 blockquote 쓰는 게 나아요

사용예제

이건 도대체 왜 사용하는 거야
blockquote 쓰세요

jsFiddle

jsFiddle 에 작성한 코드를 embed 시킬 때 사용합니다

사용방법

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

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

사용예제

Gist

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

사용방법

1
{% gist gist_id [filename] %}

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

사용예제

iframe

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

사용방법

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

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

image

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

사용방법

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

단지 VSCode 의 Markdown Preview 에서 볼 수 없는 최대 단점이 있어서 잘 사용하지 않아요

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

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

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

external : true 또는 false

사용예제

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

Include Code

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

gist 와 fiddle 이 있어서 잘 사용하지 않아요

사용방법

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

Youtube

youtube 영상을 embed 시킬 수 있어요

사용방법

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

사용예제

1
{% youtube 8xe2jdNUtRI 'playlist' false %}

Vimeo

Vimeo 영상을 embed 시킬 수 있어요

사용방법

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

사용예제

1
{% vimeo 304963517 %}

Include Posts

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

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

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

사용방법

1
2
3
4
5
{% post_path filename %}
{% post_link filename [title] [escape] %}

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

사용예제

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

Include Assets

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

사용방법

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

_config.yml
1
post_asset_folder: true

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

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

사용예제

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

1
{% asset_img image_name.jpg %}