본 글에서는 Hugo블로그에 shortcode를 추가하여 JS Fiddle을 글에 첨부할 수 있도록 합니다.
JS Fiddle 서비스에 저장된 데모를 첨부할 수 있으며, 직접 JS 데모를 작성하고 저장하기 위해서는 JS Fiddle 계정이 생성되어있어야 합니다.
Hugo에 JS Fiddle Shortcode 추가 #
Shortcode 작성 #
Hugo 블로그의 layout/shortcodes 위치에 Js Fiddle용 shortcode html을 생성합니다.
shortcode 문법에 맞춰 Js Fiddle 추가용 스크립트를 작성합니다.
{{/* DEFAULTS 속성 지정 */}}
{{ $tabs := "js,html,css,result" }}
{{ $style := "light" }}
<script async src="//jsfiddle.net/{{ .Get "fiddle" }}/embed/{{ or (.Get "tabs") $tabs }}/{{ or (.Get "style") $style }}/"></script>
본 스크립트는 shortcode가 fiddle, tabs, style 세가지 옵션을 지정할 수 있으며, 그 중 tabs, style 옵션은 default 값을 주어 값을 넣지 않더라도 자동으로 적용되도록 작성되었습니다.
fiddle 옵션은 필수입니다.
JS Fiddle 작성 #
JS Fiddle 사이트에서 접속해서 로그인/회원가입 후 JS Demo를 작성합니다.
Demo 작성 후 상단의 Save 버튼을 누르면 Embed 버튼이 활성화 됩니다.
Embed 버튼을 누르면 몇가지 옵션으로 제어가능한 Embed snippet이 제공됩니다.
위에서 만든 Hugo용 FS Fiddle Shortcode를 이용하기 위해서는 snippet 화면 좌측 하단의 Embed snippet 아래, textarea에 표시되는 script 태그 내의 src의 링크가 필요합니다.
위의 이미지 기준으로는 //jsfiddle.net/sseung/6n1va2cf/1/embed/가 되겠습니다.
하지만 우리는 shortcode 작성 시 해당 src url의 고정된 앞, 뒷 부분을 적어주었기 때문에 이중에 shortcode에서 필요로 하는 부분은 sseung/6n1va2cf/1 가 됩니다.
Shortcode로 JS Fiddle 페이지 추가 방법 #
- JS Fiddle 사이트에서 로그인 후 JS Demo 작성 및 저장
Embed메뉴에서 JS Demo의 src url 추출- src url 중 {username}/{demo id}/{demo version} 정보 추출
- 추출한 정보를 사용하여 아래 스크립트를 추가
아래 소스에서 ‘|‘를 제거하고 사용 (블로그에서 소스 표기를 위해 ‘|’ 추가함)
{{|% jsfiddle fiddle="{username}/{demo id}/{demo version}" tabs="html,css,result" style="light" %|}}
JS Fiddle shortcode 사용 예시 #
아래 소스에서 ‘|‘를 제거하고 사용 (블로그에서 소스 표기를 위해 ‘|’ 추가함)
- default 옵션으로 JS Fiddle 추가
{{|% jsfiddle fiddle="{username}/{demo id}/{demo version}" %|}}
- tab을 js와 result만 보이게 JS Fiddle 추가
{{|% jsfiddle fiddle="{username}/{demo id}/{demo version}" tabs="js,result" %|}}
- 어두운 테마로 JS Fiddle 추가
{{|% jsfiddle fiddle="{username}/{demo id}/{demo version}" style="dark" %|}}