태그플러그인(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 %}
참조문서
'IT > Hexo' 카테고리의 다른 글
Hexo 구글 검색 콘솔에 사이트맵 최신화 하기 (0) | 2022.06.30 |
---|---|
Hexo Next 테마 적용하기 (0) | 2022.06.30 |
Hexo 이카루스 테마 수정방법 (0) | 2022.06.30 |
Hexo 이카루스(icarus) 테마 적용방법 (0) | 2022.06.30 |
마크다운(Markdown) 사용법 (0) | 2022.06.28 |
Hexo 로 글작성하기 (0) | 2022.06.28 |
Hexo 의 package 설정 (0) | 2022.06.28 |
Hexo 란 (0) | 2022.06.28 |