Tag Plugins Plus 튜토리얼 - 1

작성일|업데이트|
단어수4.7k|독해시간29분|조회수
카테고리
Hexo Tag Plugins|
태그
tutorial•hexo-butterfly-tag-plugins-plus•hexo-theme-butterfly•hexo-theme-volantis•

This posting is written in Korean. English is not scheduled to be written.

본 게시물은 hexo-butterfly-tag-plugins-plus 개발자가 작성한 튜토리얼[1]에 대한 한글 번역본입니다.
Hexo가 Jekyll보다 더 마음에 들어 선택했는데, 참고할 만한 글들이 다 중국어로 적혀있어서 매우 곤란…

내용이 너무 길어져서 세 파트로 나누어서 업로드하였습니다.

참고로 일부 태그들은 별도의 라이브러리 없이 butterfly 테마만으로도 사용 가능합니다.
애초에 Butterfly 테마가 이 플러그인을 기반으로 여러 태그를 추가했기 때문ㅎㅎ

  1. Tag Plugins Plus 튜토리얼 - 1
    text / span / p / note / tip / animated / checkbox / radio / timeline
  2. Tag Plugins Plus 튜토리얼 - 2
    link / btns / ghcard / ghbadge / sites / inlineimage / image / audio / video / gallery
  3. Tag Plugins Plus 튜토리얼 - 3
    folding / tab / issues / poem / icon / wow / progress / notation / bubble / reference / carousel

라이브러리 설치 (npm 이용)

  1. 터미널을 열고, 본인의 블로그 루트 디렉토리로 가서 아래의 설치 명령어를 실행합니다.

    1
    npm install hexo-butterfly-tag-plugins-plus --save

  2. Hexo에서 기본으로 제공하는 hexo-renderer-marked 라이브러리는 외부 태그와 호환성이 그리 좋지 못하므로 hexo-renderer-kramed로 바꿔주는 것이 좋습니다.

    1
    2
    npm un hexo-renderer-marked --save
    npm i hexo-renderer-kramed --save
    라고 쓰여있지만 저는 hexo-renderer-markdown-it을 대신 설치하였습니다.

    • Butterfly 테마 공식 블로그에서는 kaTeX 사용 시 hexo-renderer-markdown-it(권장) 또는 hexo-renderer-markdown-it-plus을 설치해야 함을 명시하고 있습니다.

    • hexo-renderer-markdown-it는 Hexo에서 제공하는 렌더러이기 때문에 비교적 꾸준한 업데이트가 이루어지고 있어, 이를 설치하였습니다.

    • 아래와 같이 터미널에서 명령어를 실행한 뒤, _config.yml에 내용을 추가하면 됩니다.

      1
      2
      3
      4
      npm un hexo-renderer-marked --save
      npm un hexo-renderer-kramed --save
      npm i hexo-renderer-markdown-it --save
      npm install @neilsustc/markdown-it-katex --save

    • plugins는 옵션으로 추가할 플러그인을 지정하는 변수이며, 자신이 사용하고자 하는 옵션만 추가하면 됩니다 (참고).

    • anchors는 목차(ToC) 및 헤드라인(h1…h6)을 어떻게 만들지에 관련된 변수입니다. level의 기본값이 2이기 때문에, level: 1로 변경하지 않으면 목차에서 h1에 대한 하이퍼링크가 만들어지지 않습니다.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      markdown:
        plugins:
          - markdown-it-abbr
          - markdown-it-container
          - markdown-it-deflist
          - markdown-it-footnote
          - markdown-it-ins
          - markdown-it-mark
          - markdown-it-sub
          - markdown-it-sup
          - name: '@neilsustc/markdown-it-katex'
            enable: true
            options:
              strict: false
        anchors:
          level: 1

  3. 사이트 구성 파일(_config.yml 또는 _config.butterfly.yml)에 아래의 내용을 추가합니다.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    # tag-plugins-plus
    # see https://akilar.top/posts/615e2dec/
    tag_plugins:
      enable: true # 플러그인 활성 여부
      priority: 5 # 필터 우선순위
      issues: false # issues 태그 활성 여부
      link:
        placeholder: /img/link.png # link_card 태그 기본 아이콘 이미지
      CDN:
        anima: https://cdn.jsdelivr.net/gh/l-lin/font-awesome-animation/dist/font-awesome-animation.min.css # animated 태그 종속성
        jquery: https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js # issues 태그 종속성
        issues: https://cdn.jsdelivr.net/npm/hexo-theme-volantis@latest/source/js/issues.min.js # issues 종속성
        iconfont: //at.alicdn.com/t/font_2032782_8d5kxvn09md.js # icon 태그 종속성 (https://akilar.top/posts/d2ebecef/ 참조)
        carousel: https://cdn.jsdelivr.net/npm/hexo-butterfly-tag-plugins-plus@latest/lib/carousel-touch.min.js # carousel 태그 마우스 이벤트 종속성

텍스트 기본 효과

1
2
3
4
5
6
{% u [본문 내용] %}
{% emp [본문 내용] %}
{% wavy [본문 내용] %}
{% del [본문 내용] %}
{% kbd [본문 내용] %}
{% psw [본문 내용] %}
1
2
3
4
5
6
1. {% u 밑줄 %}이 있는 텍스트, 
2. {% emp 강조 %}가 있는 텍스트, 
3. {% wavy 물결선 %}이 있는 텍스트, 
4. {% del 취소선 %}이 있는 텍스트,
5. 키보드 스타일 텍스트: {% kbd ⌘ %} + {% kbd D %},
6. 비밀번호 스타일 텍스트: {% psw 여기에는 인증 코드가 없습니다.%}
  1. 밑줄이 있는 텍스트,
  2. 강조가 있는 텍스트,
  3. 물결선이 있는 텍스트,
  4. 취소선이 있는 텍스트,
  5. 키보드 스타일 텍스트: ⌘ + D,
  6. 비밀번호 스타일 텍스트: 여기에는 인증 코드가 없습니다.

  • 밑줄(u), 강조(emp), 취소선(del), 물결선(wavy), 비밀번호(psw:hover) 등 일부 스타일은 기본 색상이 회색으로 지정되어 있습니다.

  • 이를 원하지 않을 경우 본인의 커스텀 CSS 파일에서 수정하시면 됩니다.

  • 제 블로그에서는 이를 모두 본래 글꼴색으로 수정했습니다.
    (취소선은 회색인 편이 보다 의미 전달을 명확하게 해주는 것 같아 그대로 둠ㅎㅎ)

    1
    2
    3
    u, emp, wavy, psw:hover {
      color: unset !important;
    }

글자색/글자크기 (span)

1
{% span [스타일 인자 (띄어쓰기로 구분)], [본문 내용] %}
  1. 글꼴 : logo, code
  2. 색상 : red, yellow, green, cyan, blue, gray, #000000 ~ #ffffff
  3. 크기 : small, h4, h3, h2, h1, large, huge, ultra
  4. 정렬 : left, center, right
1
2
3
4
5
6
7
- 컬러 텍스트
{% span red, 빨간색 %}, {% span yellow, 노란색 %}, {% span green, 녹색 %}, {% span cyan, 청록색 %}, {% span blue, 파란색 %}, 그리고
{% span gray, 회색%} 등의 태그를 이용해 다양한 색상을 편리하게 삽입할 수 있습니다.
- 대형 텍스트
문서의 '시작' 페이지의 제목 부분은 아래의 대형 텍스트로 표현됩니다.
{% span center logo large , Butterfly & Volantis %}
{% span center small , Wonderful Themes for Hexo %}
  • 컬러 텍스트
    빨간색, 노란색, 녹색, 청록색, 파란색, 그리고 회색 등의 태그를 이용해 다양한 색상을 편리하게 삽입할 수 있습니다.
  • 대형 텍스트
    문서의 ‘시작’ 페이지의 제목 부분은 아래의 대형 텍스트로 표현됩니다.


    Wonderful Themes for Hexo

단락 스타일 (p)

1
{% p [스타일 인자 (띄어쓰기로 구분)], [본문 내용] %}
  1. 글꼴 : logo, code
  2. 색상 : red, yellow, green, cyan, blue, gray, #000000 ~ #ffffff
  3. 크기 : small, h4, h3, h2, h1, large, huge, ultra
  4. 정렬 : left, center, right
1
2
3
4
5
6
7
8
{% p red, 빨간색 %}
{% p yellow, 노란색 %}
{% p green, 녹색 %}
{% p cyan, 청록색 %}
{% p blue, 파란색 %}
{% p gray, 회색 %}
{% p center logo large , Butterfly & Volantis %}
{% p center small , Wonderful Themes for Hexo %}

빨간색

노란색

녹색

청록색

파란색

회색

Wonderful Themes for Hexo

인용문 (note)

_config.butterfly.yml 을 통해 기본값 수정 가능
1
2
3
4
5
6
7
8
9
10
11
12
note:
  # Note tag style values:
  #  - simple    bs-callout old alert style. Default.
  #  - modern    bs-callout new (v2-v3) alert style.
  #  - flat      flat callout style with background, like on Mozilla or StackOverflow.
  #  - disabled  disable all CSS styles import of note tag.
  style: modern
  icons: true
  border_radius: 3
  # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
  # Offset also applied to label tag variables. This option can work with disabled note tag.
  light_bg_offset: 0

방법-1

1
2
3
{% note [class] [no-icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}
매개 변수 사용 방법
class «선택사항» 로고 （default / primary / success / info / warning / danger）
로고마다 지정된 색상이 다릅니다.
no-icon «선택사항» 아이콘을 표시하지 않음
style «선택사항» 스타일 （simple / modern / flat / disabled） 
1
2
3
4
5
6
7
{% note simple %}기본 알림 블록 태그{% endnote %}
{% note default simple %}default 알림 블록 태그{% endnote %}
{% note primary simple %}primary 알림 블록 태그{% endnote %}
{% note success simple %}success 알림 블록 태그{% endnote %}
{% note info simple %}info 알림 블록 태그{% endnote %}
{% note warning simple %}warning 알림 블록 태그{% endnote %}
{% note danger simple %}danger 알림 블록 태그{% endnote %}
1
2
3
4
5
6
7
{% note modern %}기본 알림 블록 태그{% endnote %}
{% note default modern %}default 알림 블록 태그{% endnote %}
{% note primary modern %}primary 알림 블록 태그{% endnote %}
{% note success modern %}success 알림 블록 태그{% endnote %}
{% note info modern %}info 알림 블록 태그{% endnote %}
{% note warning modern %}warning 알림 블록 태그{% endnote %}
{% note danger modern %}danger 알림 블록 태그{% endnote %}
1
2
3
4
5
6
7
{% note flat %}기본 알림 블록 태그{% endnote %}
{% note default flat %}default 알림 블록 태그{% endnote %}
{% note primary flat %}primary 알림 블록 태그{% endnote %}
{% note success flat %}success 알림 블록 태그{% endnote %}
{% note info flat %}info 알림 블록 태그{% endnote %}
{% note warning flat %}warning 알림 블록 태그{% endnote %}
{% note danger flat %}danger 알림 블록 태그{% endnote %}
1
2
3
4
5
6
7
{% note disabled %}기본 알림 블록 태그{% endnote %}
{% note default disabled %}default 알림 블록 태그{% endnote %}
{% note primary disabled %}primary 알림 블록 태그{% endnote %}
{% note success disabled %}success 알림 블록 태그{% endnote %}
{% note info disabled %}info 알림 블록 태그{% endnote %}
{% note warning disabled %}warning 알림 블록 태그{% endnote %}
{% note danger disabled %}danger 알림 블록 태그{% endnote %}
1
2
3
4
5
6
7
{% note no-icon %}기본 알림 블록 태그{% endnote %}
{% note default no-icon %}default 알림 블록 태그{% endnote %}
{% note primary no-icon %}primary 알림 블록 태그{% endnote %}
{% note success no-icon %}success 알림 블록 태그{% endnote %}
{% note info no-icon %}info 알림 블록 태그{% endnote %}
{% note warning no-icon %}warning 알림 블록 태그{% endnote %}
{% note danger no-icon %}danger 알림 블록 태그{% endnote %}

기본 알림 블록 태그

default 알림 블록 태그

primary 알림 블록 태그

success 알림 블록 태그

info 알림 블록 태그

warning 알림 블록 태그

danger 알림 블록 태그

기본 알림 블록 태그

default 알림 블록 태그

primary 알림 블록 태그

success 알림 블록 태그

info 알림 블록 태그

warning 알림 블록 태그

danger 알림 블록 태그

기본 알림 블록 태그

default 알림 블록 태그

primary 알림 블록 태그

success 알림 블록 태그

info 알림 블록 태그

warning 알림 블록 태그

danger 알림 블록 태그

기본 알림 블록 태그

default 알림 블록 태그

primary 알림 블록 태그

success 알림 블록 태그

info 알림 블록 태그

warning 알림 블록 태그

danger 알림 블록 태그

기본 알림 블록 태그

default 알림 블록 태그

primary 알림 블록 태그

success 알림 블록 태그

info 알림 블록 태그

warning 알림 블록 태그

danger 알림 블록 태그

  • 제 블로그에서는 [방법-1]의 아이콘의 위치가 글자의 중심보다 위로 올라와 있어 해당 위치를 조정했습니다.

    1
    2
    3
    #article-container .note:not(.no-icon)::before {
      top: calc(50% - 0.7em);
    }

방법-2

1
2
3
{% note [color] [icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}
매개 변수 사용 방법
class «선택사항» 로고 색상 （default / blue / pink / red / purple / orange / green）
icon «선택사항» 커스텀 아이콘. 단, Font Awsome만 지원되며, 아이콘이 없는 설정도 가능.
style «선택사항» 스타일 （simple / modern / flat / disabled） 
1
2
3
4
5
6
7
{% note 'fab fa-cc-visa' simple %}Visa 또는 UnionPay를 사용하십니까{% endnote %}
{% note blue 'fas fa-bullhorn' simple %}2021년이 곧 다가옵니다...{% endnote %}
{% note pink 'fas fa-car-crash' simple %}조심해서 운전하고 안전이 가장 중요합니다{% endnote %}
{% note red 'fas fa-fan' simple %} 이 세 조각인가요? 네 조각?{% endnote %}
{% note orange 'fas fa-battery-half' simple %}Visa 또는 UnionPay를 사용하십니까{% endnote %}
{% note purple 'far fa-hand-scissors' simple %}가위바위보{% endnote %}
{% note green 'fab fa-internet-explorer' simple %}프론트엔드에서 가장 싫어하는 브라우저{% endnote %}
1
2
3
4
5
6
7
{% note 'fab fa-cc-visa' modern %}Visa 또는 UnionPay를 사용하십니까{% endnote %}
{% note blue 'fas fa-bullhorn' modern %}2021년이 곧 다가옵니다...{% endnote %}
{% note pink 'fas fa-car-crash' modern %}조심해서 운전하고 안전이 가장 중요합니다{% endnote %}
{% note red 'fas fa-fan' modern %} 이 세 조각인가요? 네 조각?{% endnote %}
{% note orange 'fas fa-battery-half' modern %}Visa 또는 UnionPay를 사용하십니까{% endnote %}
{% note purple 'far fa-hand-scissors' modern %}가위바위보{% endnote %}
{% note green 'fab fa-internet-explorer' modern %}프론트엔드에서 가장 싫어하는 브라우저{% endnote %}
1
2
3
4
5
6
7
{% note 'fab fa-cc-visa' flat %}Visa 또는 UnionPay를 사용하십니까{% endnote %}
{% note blue 'fas fa-bullhorn' flat %}2021년이 곧 다가옵니다...{% endnote %}
{% note pink 'fas fa-car-crash' flat %}조심해서 운전하고 안전이 가장 중요합니다{% endnote %}
{% note red 'fas fa-fan' flat %} 이 세 조각인가요? 네 조각?{% endnote %}
{% note orange 'fas fa-battery-half' flat %}Visa 또는 UnionPay를 사용하십니까{% endnote %}
{% note purple 'far fa-hand-scissors' flat %}가위바위보{% endnote %}
{% note green 'fab fa-internet-explorer' flat %}프론트엔드에서 가장 싫어하는 브라우저{% endnote %}
1
2
3
4
5
6
7
{% note 'fab fa-cc-visa' disabled %}Visa 또는 UnionPay를 사용하십니까{% endnote %}
{% note blue 'fas fa-bullhorn' disabled %}2021년이 곧 다가옵니다...{% endnote %}
{% note pink 'fas fa-car-crash' disabled %}조심해서 운전하고 안전이 가장 중요합니다{% endnote %}
{% note red 'fas fa-fan' disabled %} 이 세 조각인가요? 네 조각?{% endnote %}
{% note orange 'fas fa-battery-half' disabled %}Visa 또는 UnionPay를 사용하십니까{% endnote %}
{% note purple 'far fa-hand-scissors' disabled %}가위바위보{% endnote %}
{% note green 'fab fa-internet-explorer' disabled %}프론트엔드에서 가장 싫어하는 브라우저{% endnote %}
1
2
3
4
5
6
7
{% note no-icon %}Visa 또는 UnionPay를 사용하십니까{% endnote %}
{% note blue no-icon %}2021년이 곧 다가옵니다...{% endnote %}
{% note pink no-icon %}조심해서 운전하고 안전이 가장 중요합니다{% endnote %}
{% note red no-icon %} 이 세 조각인가요? 네 조각?{% endnote %}
{% note orange no-icon %}Visa 또는 UnionPay를 사용하십니까{% endnote %}
{% note purple no-icon %}가위바위보{% endnote %}
{% note green no-icon %}프론트엔드에서 가장 싫어하는 브라우저{% endnote %}

Visa 또는 UnionPay를 사용하십니까

2021년이 곧 다가옵니다…

조심해서 운전하고 안전이 가장 중요합니다

이 세 조각인가요? 네 조각?

Visa 또는 UnionPay를 사용하십니까

가위바위보

프론트엔드에서 가장 싫어하는 브라우저

Visa 또는 UnionPay를 사용하십니까

2021년이 곧 다가옵니다…

조심해서 운전하고 안전이 가장 중요합니다

이 세 조각인가요? 네 조각?

Visa 또는 UnionPay를 사용하십니까

가위바위보

프론트엔드에서 가장 싫어하는 브라우저

Visa 또는 UnionPay를 사용하십니까

2021년이 곧 다가옵니다…

조심해서 운전하고 안전이 가장 중요합니다

이 세 조각인가요? 네 조각?

Visa 또는 UnionPay를 사용하십니까

가위바위보

프론트엔드에서 가장 싫어하는 브라우저

Visa 또는 UnionPay를 사용하십니까

2021년이 곧 다가옵니다…

조심해서 운전하고 안전이 가장 중요합니다

이 세 조각인가요? 네 조각?

Visa 또는 UnionPay를 사용하십니까

가위바위보

프론트엔드에서 가장 싫어하는 브라우저

Visa 또는 UnionPay를 사용하십니까

2021년이 곧 다가옵니다…

조심해서 운전하고 안전이 가장 중요합니다

이 세 조각인가요? 네 조각?

Visa 또는 UnionPay를 사용하십니까

가위바위보

프론트엔드에서 가장 싫어하는 브라우저

위 첨자 라벨 (tip)

1
{% tip [스타일 인자] %}본문 내용{% endtip %}
  1. 스타일 : success, error, warning, bolt, ban, home, sync, cogs, key, bell
  2. 사용자 정의 아이콘 : FontAwsome을 지원합니다.
1
2
3
4
5
6
7
8
9
10
11
12
{% tip %}기본 스타일{% endtip %}
{% tip success %}success{% endtip %}
{% tip error %}error{% endtip %}
{% tip warning %}warning{% endtip %}
{% tip bolt %}bolt{% endtip %}
{% tip ban %}ban{% endtip %}
{% tip home %}home{% endtip %}
{% tip sync %}sync{% endtip %}
{% tip cogs %}cogs{% endtip %}
{% tip key %}key{% endtip %}
{% tip bell %}bell{% endtip %}
{% tip fa-cog %}커스텀 변경 (FontAwsome 사용){% endtip %}

기본 스타일

success

error

warning

bolt

ban

home

sync

cogs

key

bell

커스텀 변경 (FontAwsome 사용)

애니메이션 추가 (tip + animated)

보다 자세한 내용은 font-awesome-animation 문서를 참고하십시오.

  1. 필요한 CSS 클래스를 아이콘(또는 DOM의 모든 요소)에 추가합니다.
  2. parent hover 스타일의 경우, 대상 요소에 CSS 클래스를 지정하고 faa-parent animated-hover CSS 클래스를 동시에 추가해야 합니다. (자세한 사항은 예시 및 예시 소스코드 참조)
  3. 대상 요소에 CSS 클래스 faa-fast 또는 faa-slow를 추가함으로써 애니메이션 속도를 조정할 수 있습니다.

  1. On DOM load : 페이지가 로드될 때 애니메이션이 표시됩니다.

     faa-wrench animated  faa-ring animated  faa-horizontal animated
     faa-vertical animated  faa-flash animated  faa-bounce animated
     faa-spin animated  faa-tada animated  faa-pulse animated
     faa-shake animated  faa-tada animated  faa-passing animated
     faa-passing-reverse animated  faa-burst animated  faa-falling animated
     faa-rising animated

  2. On mouse hover : 마우스를 아이콘 위에 위치시킬 때 애니메이션이 표시됩니다.

     faa-wrench animated-hover  faa-ring animated-hover  faa-horizontal animated-hover
     faa-vertical animated-hover  faa-flash animated-hover  faa-bounce animated-hover
     faa-spin animated-hover  faa-tada animated-hover  faa-pulse animated-hover
     faa-shake animated-hover  faa-tada animated-hover  faa-passing animated-hover
     faa-passing-reverse animated-hover  faa-burst animated-hover  faa-falling animated-hover
     faa-rising animated-hover

  3. On parent hover : 마우스가 부모 요소 위에 있을 때 애니메이션이 표시됩니다.

     faa-wrench  faa-ring  faa-horizontal
     faa-vertical  faa-flash  faa-bounce
     faa-spin  faa-tada  faa-pulse
     faa-shake  faa-tada  faa-passing
     faa-passing-reverse  faa-burst  faa-falling
     faa-rising
  1. On DOM load (페이지 로드 시) 
    1
    2
    {% tip warning faa-horizontal animated %}warning{% endtip %}
    {% tip ban faa-flash animated %}ban{% endtip %}
  2. 애니메이션 속도 조정 
    1
    2
    {% tip warning faa-horizontal animated faa-fast %}warning{% endtip %}
    {% tip ban faa-flash animated faa-slow %}ban{% endtip %}
  3. On mouse hover 
    1
    2
    {% tip warning faa-horizontal animated-hover %}warning{% endtip %}
    {% tip ban faa-flash animated-hover %}ban{% endtip %}
  4. On parent hover 
    1
    2
    {% tip warning faa-parent animated-hover %}<p class="faa-horizontal">warning</p>{% endtip %}
    {% tip ban faa-parent animated-hover %}<p class="faa-flash">ban</p>{% endtip %}
  1. On DOM load (페이지 로드 시)

    warning

    ban

  2. 애니메이션 속도 조정

    warning

    ban

  3. On mouse hover

    warning

    ban

  4. On parent hover

    warning

    ban

다중 선택 리스트 (checkbox)

1
{% checkbox [스타일 인자], [본문 (간단한 markdown 문법 지원)] %}
  1. 스타일 : plus, minus, times
  2. 색상 : red, yellow, green, cyan, blue, gray
  3. 확인 상태 : checked
1
2
3
4
5
6
7
8
9
10
{% checkbox 일반 텍스트 테스트 %}
{% checkbox checked , 간단한 [markdown](https://guides.github.com/features/mastering-markdown/) 지원 %}
{% checkbox red, 사용자 정의 지원정의 색상 %}
{% checkbox green checked, 초록색 + 기본 선택 %}
{% checkbox yellow checked, 노란색 + 기본 선택 %}
{% checkbox cyan checked, 청록색 + 기본 선택 %}
{% checkbox blue checked, 파란색 + 기본 선택 %}
{% checkbox plus green checked, plus 선택 %}
{% checkbox minus yellow checked, minus 선택 %}
{% checkbox times red checked , times 선택 %}

일반 텍스트 테스트

간단한 markdown 지원

빨간색

초록색 + 기본 선택

노란색 + 기본 선택

청록색 + 기본 선택

파란색 + 기본 선택

초록색 + plus 선택

노란색 + minus 선택

빨간색 + times 선택

단일 선택 리스트 (radio)

1
{% radio [스타일 인자], [본문 (간단한 markdown 문법 지원)] %}
  1. 색상 : red, yellow, green, cyan, blue, gray
  2. 확인 상태 : checked
1
2
3
4
5
6
7
{% radio 일반 텍스트 테스트 %}
{% radio checked, 간단한 [markdown](https://guides.github.com/features/mastering-markdown/) 지원 %}
{% radio red, 빨간색 %}
{% radio green, 초록색 %}
{% radio yellow, 노란색 %}
{% radio cyan, 청록색 %}
{% radio blue, 파란색 %}

일반 텍스트 테스트

간단한 markdown 지원

빨간색

초록색

노란색

청록색

파란색

타임라인 (timeline)

사용자의 요청에 따라, Butterfly 테마의 4.0.0 버전부터 timeline 태그가 지원되고 있습니다. 따라서, 4.0.0-b9 버전을 이용하고 있는 제 블로그에서는 본 플러그인의 timeline 태그가 제대로 작동하지 않습니다.

내장된 timeline 태그보다 이 플러그인의 timeline 태그가 더 마음에 드신다면, {root}/themes/butterfly/scripts/tag/timeline.js와 {root}/themes/butterfly/source/css/_tags/timeline.styl을 모두 삭제하면 됩니다.

hexo-butterfly-tag-plugins-plus 제공 
1
2
3
4
5
6
7
8
{% timeline [타임라인 제목 (선택사항)] %}
{% timenode [시간 노드 (제목)] %}
[본문 내용]
{ % endtimenode % }
{% timenode [시간 노드 (제목)] %}
[본문 내용]
{ % endtimenode % }
{ % endtimeline % }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{% timeline %}

{% timenode 2020-07-24 [2.6.6 -> 3.0](https://github.com/volantis-x/hexo-theme-volantis/releases) %}

1. `hexo-lazyload-image` 플러그인이 있는 경우, 최신 버전 삭제 후 새로 설치해야 하며，`lazyload.isSPA: true`를 설정해야 합니다.
2. 2.x 버전의 css 맟 js는 3.x 버전에 적용되지 않으며, `use_cdn: true`를 사용했다면 이를 삭제해야 합니다.
3. 2.x 버전의 fancybox 라벨은 3.x 버전에서 gallery로 이름이 변경되었습니다.
4. 2.x 버전의 헤드업 `top: true`를 `pin: true`로 수정하였으며, `layout: page` 페이지에도 동일하게 적용됩니다.
5. `hexo-offline` 플러그인의 경우 제거하는 것이 좋습니다. 기본적으로, 3.0 버전은 pjax 서비스가 활성화되어 있습니다.

{% endtimenode %}

{% timenode 2020-05-15 [2.6.3 -> 2.6.6](https://github.com/volantis-x/hexo-theme-volantis/releases/tag/2.6.6) %}

별도의 처리가 필요하지 않습니다.

{% endtimenode %}

{% timenode 2020-04-20 [2.6.2 -> 2.6.3](https://github.com/volantis-x/hexo-theme-volantis/releases/tag/2.6.3) %}

1. 전역검색에서 `seotitle`를 `seo_title`로 변경합니다.
2. group 컴포넌트의 색인 규칙이 변경되었습니다. group 컴포넌트를 사용하는 아티클에서,`group: group_name`에 대응하는 컴포넌트명은 `group_name`이어야 합니다.
2. group 컴포넌트 아티클의 표시명 우선 순위는 `short_title` 다음이 `title`입니다.

{% endtimenode %}

{% endtimeline %}
Hexo Butterfly 테마 제공 
1
2
3
4
5
6
7
{% timeline [타임라인 제목],[색상] %}
<!-- timeline [시간 노드 (제목)] -->
<!-- endtimeline -->
<!-- timeline [시간 노드 (제목)] -->
[본문 내용]
<!-- endtimeline -->
{% endtimeline %}
1
2
3
4
5
6
7
8
9
10
{% timeline 2020 %}
<!-- timeline 2020-07-24 [2.6.6 -> 3.0](https://github.com/volantis-x/hexo-theme-volantis/releases) -->
별도의 처리가 필요하지 않습니다.
<!-- endtimeline -->
<!-- timeline 2020-04-20 [2.6.2 -> 2.6.3](https://github.com/volantis-x/hexo-theme-volantis/releases/tag/2.6.3) -->
1. 전역검색에서 `seotitle`를 `seo_title`로 변경합니다.
1. group 컴포넌트의 색인 규칙이 변경되었습니다. group 컴포넌트를 사용하는 아티클에서,`group: group_name`에 대응하는 컴포넌트명은 `group_name`이어야 합니다.
1. group 컴포넌트 아티클의 표시명 우선 순위는 `short_title` 다음이 `title`입니다.
<!-- endtimeline -->
{% endtimeline %}
1
2
3
4
5
6
7
8
9
10
{% timeline 2020,blue %}
<!-- timeline 2020-07-24 [2.6.6 -> 3.0](https://github.com/volantis-x/hexo-theme-volantis/releases) -->
별도의 처리가 필요하지 않습니다.
<!-- endtimeline -->
<!-- timeline 2020-04-20 [2.6.2 -> 2.6.3](https://github.com/volantis-x/hexo-theme-volantis/releases/tag/2.6.3) -->
1. 전역검색에서 `seotitle`를 `seo_title`로 변경합니다.
1. group 컴포넌트의 색인 규칙이 변경되었습니다. group 컴포넌트를 사용하는 아티클에서,`group: group_name`에 대응하는 컴포넌트명은 `group_name`이어야 합니다.
1. group 컴포넌트 아티클의 표시명 우선 순위는 `short_title` 다음이 `title`입니다.
<!-- endtimeline -->
{% endtimeline %}
1
2
3
4
5
6
7
8
9
10
{% timeline 2020,pink %}
<!-- timeline 2020-07-24 [2.6.6 -> 3.0](https://github.com/volantis-x/hexo-theme-volantis/releases) -->
별도의 처리가 필요하지 않습니다.
<!-- endtimeline -->
<!-- timeline 2020-04-20 [2.6.2 -> 2.6.3](https://github.com/volantis-x/hexo-theme-volantis/releases/tag/2.6.3) -->
1. 전역검색에서 `seotitle`를 `seo_title`로 변경합니다.
1. group 컴포넌트의 색인 규칙이 변경되었습니다. group 컴포넌트를 사용하는 아티클에서,`group: group_name`에 대응하는 컴포넌트명은 `group_name`이어야 합니다.
1. group 컴포넌트 아티클의 표시명 우선 순위는 `short_title` 다음이 `title`입니다.
<!-- endtimeline -->
{% endtimeline %}
1
2
3
4
5
6
7
8
9
10
{% timeline 2020,red %}
<!-- timeline 2020-07-24 [2.6.6 -> 3.0](https://github.com/volantis-x/hexo-theme-volantis/releases) -->
별도의 처리가 필요하지 않습니다.
<!-- endtimeline -->
<!-- timeline 2020-04-20 [2.6.2 -> 2.6.3](https://github.com/volantis-x/hexo-theme-volantis/releases/tag/2.6.3) -->
1. 전역검색에서 `seotitle`를 `seo_title`로 변경합니다.
1. group 컴포넌트의 색인 규칙이 변경되었습니다. group 컴포넌트를 사용하는 아티클에서,`group: group_name`에 대응하는 컴포넌트명은 `group_name`이어야 합니다.
1. group 컴포넌트 아티클의 표시명 우선 순위는 `short_title` 다음이 `title`입니다.
<!-- endtimeline -->
{% endtimeline %}
1
2
3
4
5
6
7
8
9
10
{% timeline 2020,purple %}
<!-- timeline 2020-07-24 [2.6.6 -> 3.0](https://github.com/volantis-x/hexo-theme-volantis/releases) -->
별도의 처리가 필요하지 않습니다.
<!-- endtimeline -->
<!-- timeline 2020-04-20 [2.6.2 -> 2.6.3](https://github.com/volantis-x/hexo-theme-volantis/releases/tag/2.6.3) -->
1. 전역검색에서 `seotitle`를 `seo_title`로 변경합니다.
1. group 컴포넌트의 색인 규칙이 변경되었습니다. group 컴포넌트를 사용하는 아티클에서,`group: group_name`에 대응하는 컴포넌트명은 `group_name`이어야 합니다.
1. group 컴포넌트 아티클의 표시명 우선 순위는 `short_title` 다음이 `title`입니다.
<!-- endtimeline -->
{% endtimeline %}
1
2
3
4
5
6
7
8
9
10
{% timeline 2020,orange %}
<!-- timeline 2020-07-24 [2.6.6 -> 3.0](https://github.com/volantis-x/hexo-theme-volantis/releases) -->
별도의 처리가 필요하지 않습니다.
<!-- endtimeline -->
<!-- timeline 2020-04-20 [2.6.2 -> 2.6.3](https://github.com/volantis-x/hexo-theme-volantis/releases/tag/2.6.3) -->
1. 전역검색에서 `seotitle`를 `seo_title`로 변경합니다.
1. group 컴포넌트의 색인 규칙이 변경되었습니다. group 컴포넌트를 사용하는 아티클에서,`group: group_name`에 대응하는 컴포넌트명은 `group_name`이어야 합니다.
1. group 컴포넌트 아티클의 표시명 우선 순위는 `short_title` 다음이 `title`입니다.
<!-- endtimeline -->
{% endtimeline %}
1
2
3
4
5
6
7
8
9
10
{% timeline 2020,green %}
<!-- timeline 2020-07-24 [2.6.6 -> 3.0](https://github.com/volantis-x/hexo-theme-volantis/releases) -->
별도의 처리가 필요하지 않습니다.
<!-- endtimeline -->
<!-- timeline 2020-04-20 [2.6.2 -> 2.6.3](https://github.com/volantis-x/hexo-theme-volantis/releases/tag/2.6.3) -->
1. 전역검색에서 `seotitle`를 `seo_title`로 변경합니다.
1. group 컴포넌트의 색인 규칙이 변경되었습니다. group 컴포넌트를 사용하는 아티클에서,`group: group_name`에 대응하는 컴포넌트명은 `group_name`이어야 합니다.
1. group 컴포넌트 아티클의 표시명 우선 순위는 `short_title` 다음이 `title`입니다.
<!-- endtimeline -->
{% endtimeline %}

2020

2020-07-24 2.6.6 -> 3.0

별도의 처리가 필요하지 않습니다.

2020-04-20 2.6.2 -> 2.6.3

  1. 전역검색에서 seotitle를 seo_title로 변경합니다.
  2. group 컴포넌트의 색인 규칙이 변경되었습니다. group 컴포넌트를 사용하는 아티클에서,group: group_name에 대응하는 컴포넌트명은 group_name이어야 합니다.
  3. group 컴포넌트 아티클의 표시명 우선 순위는 short_title 다음이 title입니다.

2020

2020-07-24 2.6.6 -> 3.0

별도의 처리가 필요하지 않습니다.

2020-04-20 2.6.2 -> 2.6.3

  1. 전역검색에서 seotitle를 seo_title로 변경합니다.
  2. group 컴포넌트의 색인 규칙이 변경되었습니다. group 컴포넌트를 사용하는 아티클에서,group: group_name에 대응하는 컴포넌트명은 group_name이어야 합니다.
  3. group 컴포넌트 아티클의 표시명 우선 순위는 short_title 다음이 title입니다.

2020

2020-07-24 2.6.6 -> 3.0

별도의 처리가 필요하지 않습니다.

2020-04-20 2.6.2 -> 2.6.3

  1. 전역검색에서 seotitle를 seo_title로 변경합니다.
  2. group 컴포넌트의 색인 규칙이 변경되었습니다. group 컴포넌트를 사용하는 아티클에서,group: group_name에 대응하는 컴포넌트명은 group_name이어야 합니다.
  3. group 컴포넌트 아티클의 표시명 우선 순위는 short_title 다음이 title입니다.

2020

2020-07-24 2.6.6 -> 3.0

별도의 처리가 필요하지 않습니다.

2020-04-20 2.6.2 -> 2.6.3

  1. 전역검색에서 seotitle를 seo_title로 변경합니다.
  2. group 컴포넌트의 색인 규칙이 변경되었습니다. group 컴포넌트를 사용하는 아티클에서,group: group_name에 대응하는 컴포넌트명은 group_name이어야 합니다.
  3. group 컴포넌트 아티클의 표시명 우선 순위는 short_title 다음이 title입니다.

2020

2020-07-24 2.6.6 -> 3.0

별도의 처리가 필요하지 않습니다.

2020-04-20 2.6.2 -> 2.6.3

  1. 전역검색에서 seotitle를 seo_title로 변경합니다.
  2. group 컴포넌트의 색인 규칙이 변경되었습니다. group 컴포넌트를 사용하는 아티클에서,group: group_name에 대응하는 컴포넌트명은 group_name이어야 합니다.
  3. group 컴포넌트 아티클의 표시명 우선 순위는 short_title 다음이 title입니다.

2020

2020-07-24 2.6.6 -> 3.0

별도의 처리가 필요하지 않습니다.

2020-04-20 2.6.2 -> 2.6.3

  1. 전역검색에서 seotitle를 seo_title로 변경합니다.
  2. group 컴포넌트의 색인 규칙이 변경되었습니다. group 컴포넌트를 사용하는 아티클에서,group: group_name에 대응하는 컴포넌트명은 group_name이어야 합니다.
  3. group 컴포넌트 아티클의 표시명 우선 순위는 short_title 다음이 title입니다.

2020

2020-07-24 2.6.6 -> 3.0

별도의 처리가 필요하지 않습니다.

2020-04-20 2.6.2 -> 2.6.3

  1. 전역검색에서 seotitle를 seo_title로 변경합니다.
  2. group 컴포넌트의 색인 규칙이 변경되었습니다. group 컴포넌트를 사용하는 아티클에서,group: group_name에 대응하는 컴포넌트명은 group_name이어야 합니다.
  3. group 컴포넌트 아티클의 표시명 우선 순위는 short_title 다음이 title입니다.

참고 링크

  1. Tag Plugins Plus | Akilarの糖果屋 (link) ↩︎

작성자 :(역) extreme-rearranger
링크 :https://ex-rearranger.github.io/posts/ko/tag-plugins-plus-tutorial-1/
저작권 :본 게시물은 Tag-Plugins-Plus 원문과 동일한 CC BY-NC-SA 4.0 라이센스를 준수합니다.
댓글
avatar
⊂(▀¯▀⊂) (づ▀¯▀)づ ⊂(▀¯▀⊂)
게시물
9
태그
16
카테고리
8
Tag Plugins Series
Tag Plugins Plus 튜토리얼 - 1
1 ) Tag Plugins Plus 튜토리얼 - 1
Tag Plugins Plus 튜토리얼 - 2
2 ) Tag Plugins Plus 튜토리얼 - 2
Tag Plugins Plus 튜토리얼 - 3
3 ) Tag Plugins Plus 튜토리얼 - 3
최근 게시물
Hexo에서 `punycode` DeprecationWarning 해결하기
Hexo에서 `punycode` DeprecationWarning 해결하기
Tag Plugins Plus 튜토리얼 - 3
Tag Plugins Plus 튜토리얼 - 3
Tag Plugins Plus 튜토리얼 - 2
Tag Plugins Plus 튜토리얼 - 2