Tag Plugins Plus 튜토리얼 - 3

작성일|업데이트|
단어수3.7k|독해시간22분|조회수
카테고리
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

접이식 상자 (folding)

Butterfly에도 hideToggle이라는 접이식 상자 태그가 내장되어 있지만 원저자는 Volantis의 folding이 더 좋아 보여서 이를 사용한다고 합니다.

1
2
3
{% folding [인자 (선택사항)], [제목] %}
[본문 내용]
{ % endfolding % }
  1. 색상: blue, cyan, green, yellow, red
  2. 상태: (기본) 닫힘 / open 열린 상태
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{% folding  이미지 보기 테스트 %}
  ![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)
{% endfolding %}

{% folding cyan open, 기본적으로 열린기 접는 상자 보기 %}
  기본적으로 열린 상태인 접히는 상자입니다.
{% endfolding %}

{% folding green, 코드 보기 테스트 %}
  코드 블럭 있는 척 (코드 블럭은 중첩 불가)
{% endfolding %}

{% folding yellow, 목차 보기 테스트 %}
  - haha
  - hehe
{% endfolding %}

{% folding red, 중첩 테스트 (1/3) %}
  {% folding blue, 중첩 테스트 (2/3) %}
    {% folding 중첩 테스트 (3/3) %}
      hahaha <span><img src='https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/tieba/%E6%BB%91%E7%A8%BD.png' style='height:24px'></span>
    {% endfolding %}
  {% endfolding %}
{% endfolding %}
이미지 보기 테스트

기본적으로 열린 상자 보기

기본적으로 열린 상태인 접히는 상자입니다.

코드 보기 테스트 
1
![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)
목차 보기 테스트
  • haha
  • hehe
중첩 테스트 (1/3)
중첩 테스트 (2/3)
중첩 테스트 (3/3)

hahaha

다중 탭 (tab)

Butterfly와 Volantis의 tab은 모두 NexT 테마에서 가져온 것이기 때문에 형태와 스타일이 완전히 동일하다고 합니다.

1
2
3
4
5
{% tabs [Unique name], [index] %}
<!-- tab [Tab caption] [@icon] -->
Any content (support inline tags too).
<!-- endtab -->
{% endtabs %}
  1. Unique name:
    • 쉼표가 없는 탭 블록 레이블의 고유 이름입니다.
    • #id에서 각 태그의 접두어와 색인 번호로 사용됩니다.
    • 이름에 공백이 포함된 경우 #id 생성을 위해 모든 공백이 대시로 바뀝니다.
    • 현재 게시물/페이지의 url 내에서만 고유하면 됩니다!
  2. index (선택사항):
    • 활성할 탭의 인덱스 번호입니다.
    • 지정하지 않으면 첫 번째 레이블(1)이 선택됩니다.
    • 인덱스가 -1이면 탭이 선택되지 않습니다.
  3. Tab caption (선택사항):
    • 각 탭의 제목입니다.
    • 제목을 지정하지 않으면 탭 제목(Unique name) 옆에 서수가 붙어서 이름이 지정됩니다.
    • 제목을 지정하지 않고 아이콘을 지정하면 제목이 비어 있습니다.
  4. @icon (선택사항):
    • FontAwesome 아이콘 이름 ("fa-fa-font"와 같은 전체 이름으로 지정)
    • 공백을 포함하거나 포함하지 않고 지정할 수 있습니다.
    • 가령, ’Tab caption @icon’ 및 ‘Tab caption@icon’ 모두 가능합니다.
1. 첫 번째 항목을 기본으로 보여주기 【기본형】 
1
2
3
4
5
6
7
8
9
10
11
{% tabs test1 %}
  <!-- tab -->
  **This is Tab 1.**
  <!-- endtab -->
  <!-- tab -->
  **This is Tab 2.**
  <!-- endtab -->
  <!-- tab -->
  **This is Tab 3.**
  <!-- endtab -->
{% endtabs %}
2. 선택한 항목 기본으로 보여주기 
1
2
3
4
5
6
7
8
9
10
11
{% tabs test2, 3 %}
  <!-- tab -->
  **This is Tab 1.**
  <!-- endtab -->
  <!-- tab -->
  **This is Tab 2.**
  <!-- endtab -->
  <!-- tab -->
  **This is Tab 3.**
  <!-- endtab -->
{% endtabs %}
3. 프리셋 없음 
1
2
3
4
5
6
7
8
9
10
11
{% tabs test3, -1 %}
  <!-- tab -->
  **This is Tab 1.**
  <!-- endtab -->
  <!-- tab -->
  **This is Tab 2.**
  <!-- endtab -->
  <!-- tab -->
  **This is Tab 3.**
  <!-- endtab -->
{% endtabs %}
4. 사용자 정의 탭 이름 / 아이콘 / 아이콘과 탭 이름 모두 있음 
1
2
3
4
5
6
7
8
9
10
11
{% tabs test4 %}
  <!-- tab 첫 번째 탭 -->
  **탭 이름은 "첫 번째 탭"입니다.**
  <!-- endtab -->
  <!-- tab @fab fa-apple-pay -->
  **아이콘만 있고 탭 이름은 없는 경우.**
  <!-- endtab -->
  <!-- tab 폭탄@fas fa-bomb -->
  **탭 이름과 아이콘이 모두 있는 경우.**
  <!-- endtab -->
{% endtabs %}
1. 첫 번째 항목을 기본으로 보여주기 【기본형】

This is Tab 1.

This is Tab 2.

This is Tab 3.

2. 선택한 항목 기본으로 보여주기

This is Tab 1.

This is Tab 2.

This is Tab 3.

3. 프리셋 없음

This is Tab 1.

This is Tab 2.

This is Tab 3.

4. 사용자 정의 탭 이름 / 아이콘 / 아이콘과 탭 이름 모두 있음

탭 이름은 "첫 번째 탭"입니다.

아이콘만 있고 탭 이름은 없는 경우.

탭 이름과 아이콘이 모두 있는 경우.

데이터 집합 (issues)

현재 사용 불가능한 것으로 추정.

시 (poem)

기왕 한글로 번역하는 김에 내용을 훈민정음언해로 변경해보았습니다.

1
2
3
{% poem [title],[author] %}
[시 내용]
{% endpoem %}
  1. title: 제목
  2. author: 저자
1
2
3
4
5
6
7
8
9
10
11
{% poem 훈민정음언해, 1459년 - 세조 5년 - %}
나랏말ᄊᆞ미
中<sub>듀ᇰ</sub>國<sub>귁</sub>에달아
文<sub>문</sub>字<sub>ᄍᆞᆼ</sub>와로서르ᄉᆞᄆᆞᆺ디아니ᄒᆞᆯᄊᆡ
이런젼ᄎᆞ로어린百<sub>ᄇᆡᆨ</sub>姓<sub>셔ᇰ</sub>이니르고져호ᇙ배이셔도
ᄆᆞᄎᆞᆷ내제ᄠᅳ들시러펴디몯ᄒᆞᇙ노미하니라
내이ᄅᆞᆯ為<sub>윙</sub>ᄒᆞ야어엿비너겨
새로스믈여듧字<sub>ᄍᆞᆼ</sub>ᄅᆞᆯᄆᆡᇰᄀᆞ노니
사ᄅᆞᆷ마다ᄒᆡᅇᅧ수ᄫᅵ니겨날로ᄡᅮ메
便<sub>뼌</sub>安<sub>ᅙᅡᆫ</sub>킈ᄒᆞ고져ᄒᆞᇙᄯᆞᄅᆞ미니라
{% endpoem %}
훈민정음언해
1459년 - 세조 5년 -

나랏말ᄊᆞ미
中듀ᇰ國귁에달아
文문字ᄍᆞᆼ와로서르ᄉᆞᄆᆞᆺ디아니ᄒᆞᆯᄊᆡ
이런젼ᄎᆞ로어린百ᄇᆡᆨ姓셔ᇰ이니르고져호ᇙ배이셔도
ᄆᆞᄎᆞᆷ내제ᄠᅳ들시러펴디몯ᄒᆞᇙ노미하니라
내이ᄅᆞᆯ為윙ᄒᆞ야어엿비너겨
새로스믈여듧字ᄍᆞᆼᄅᆞᆯᄆᆡᇰᄀᆞ노니
사ᄅᆞᆷ마다ᄒᆡᅇᅧ수ᄫᅵ니겨날로ᄡᅮ메
便뼌安ᅙᅡᆫ킈ᄒᆞ고져ᄒᆞᇙᄯᆞᄅᆞ미니라

  1. 나눔명조 옛한글을 사용하기 위한 npm 라이브러리를 설치한 후, markdown 파일에서 해당 글꼴을 추가했습니다.

    1
    npm install --save @kfonts/nanum-myeongjo-yet-hangul

    1
    2
    3
    4
    5
    6
    7
    <style>
      @import url('https://unpkg.com/@kfonts/nanum-myeongjo-yet-hangul/index.css');
      .poem p, .poem-title, .poem-author {
        text-align: left !important;
        font-family: '나눔명조 옛한글', serif !important;
      }
    </style>

  2. 해당 글꼴은 숫자 및 일부 문자를 회전하지 못하는 이슈가 있어, text-orientation: upright;를 추가하여 해결하였습니다.

  3. 또한, 1200px 이상의 너비인 화면에 대해서만 세로로 표기해주고 있으므로 동일한 css를 모든 너비에 대해 추가해주었습니다.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    .poem {
      margin: 0 auto;
      padding: 1em 0;
      writing-mode: vertical-rl;
      writing-mode: tb-rl;  
      text-orientation: upright;
    }
    .poem p {
      text-decoration: underline;
      text-decoration-color: #c10b0b;
      text-decoration-style: dashed;
      text-decoration-thickness: 2px;
    }

  4. 아래첨자의 스타일은 아래와 같이 css를 수정하였습니다.

    1
    2
    3
    4
    .poem p sub {
      right: -2.5px;
      bottom: 0;
    }

  5. 마지막으로, 제목과 본문의 자간이 너무 좁아보여서 아래와 같이 늘려주었습니다.

    1
    2
    3
    4
    5
    6
    .poem-title {
      letter-spacing: 0.6em;
    }
    .poem p {
      letter-spacing: 0.2em;
    }

IconFont 추가 (icon)

1
{% icon [icon-xxxx],[font-size] %}
  1. icon-xxxx: IconFont 아이콘의 font-class를 나타냅니다. 자신의 아이콘 라이브러리 항목에서 font-class 를 복사하여 참조하면 됩니다.
  2. font-size: 아이콘의 크기를 나타냅니다. 단위는 em이며, 숫자만 입력하면 됩니다 (기본값: 1em).
1
2
3
4
5
6
7
|size=1|size=2|size=3|size=4|size=5|size=6|
|:---:|:---:|:---:|:---:|:---:|:---:|
|{% icon icon-rat_zi %}|{% icon icon-rat,2 %}|{% icon icon-ox_chou,3 %}|{% icon icon-ox,4 %}|{% icon icon-tiger_yin,5 %}|{% icon icon-tiger,6 %}|
|{% icon icon-rabbit_mao,1 %}|{% icon icon-rabbit,2 %}|{% icon icon-dragon_chen,3 %}|{% icon icon-dragon,4 %}|{% icon icon-snake_si,5 %}|{% icon icon-snake,6 %}|
|{% icon icon-horse_wu %}|{% icon icon-horse,2 %}|{% icon icon-goat_wei,3 %}|{% icon icon-goat,4 %}|{% icon icon-monkey_shen,5 %}|{% icon icon-monkey,6 %}|
|{% icon icon-rooster_you %}|{% icon icon-rooster,2 %}|{% icon icon-dog_xu,3 %}|{% icon icon-dog,4 %}|{% icon icon-boar_hai,5 %}|{% icon icon-boar,6 %}|
<!-- endtab -->
size=1 size=2 size=3 size=4 size=5 size=6

그 외의 아이콘을 사용하고 싶을 경우, 이 블로그 포스팅를 참고하시면 될 것 같습니다.

대략 아래의 프로세스를 따른다고 보시면 됩니다.

  1. https://www.iconfont.cn에 접속하여 원하는 아이콘들을 장바구니(?)에 추가

  2. 프로젝트를 새로 생성하거나 기존의 프로젝트에 장바구니에 담은 아이콘들을 옮김

  3. 프로젝트에 생성된 Font Class (예시: //at.alicdn.com/t/c/font_4814779_nyhonqavyya.css)를 복사하여 _config.butterfly.yml의 [inject]>[head] 아래에 추가

    1
    2
    3
    inject:
      head:
        - <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4814779_nyhonqavyya.css"  media="defer" onload="this.media='all'">

    혹은 간단하게 본인의 커스텀 css에 아래와 같이 삽입

    1
    @import url("//at.alicdn.com/t/c/font_4814779_nyhonqavyya.css");

  4. 프로젝트에 생성된 Symbol (예시: //at.alicdn.com/t/c/symbol_4814779_nyhonqavyya.js)를 복사하여 _config.yml의 [tag_plugins]>[CDN]>[iconfont] 변경

    1
    2
    3
    tag_plugins:
      CDN:
        iconfont: //at.alicdn.com/t/c/font_4814779_nyhonqavyya.js

  5. FontAwsome 쓰듯이 <i class="iconfont icon-xxx"></i>와 같은 형태로 활용

라고 쓰여있긴 하나, 사실 그냥 i 태그 쓰면 js 없이 잘 작동하긴 합니다..ㅎㅎ 
1
2
3
4
5
6
7
8
9
10
11
12
13
'use strict';

function iconFont(args) {
  args = args.join(' ').split(',')
  let p0 = args[0]
  let p1 = args[1]?args[1]:1
  return `
    <svg class="icon" style="width:${p1}em; height:${p1}em" aria-hidden="true">
      <use xlink:href="#${p0}"></use>
    </svg>`;
}

hexo.extend.tag.register('icon',iconFont);
1
2
3
4
5
6
7
8
9
10
11
'use strict';

function iconFont(args) {
  args = args.join(' ').split(',')
  let p0 = args[0]
  let p1 = args[1]?args[1]:1
  return `
    <i class="iconfont ${p0}" style="font-size:${p1}em" aria-hidden="true"></i>`;
}

hexo.extend.tag.register('icon',iconFont);

특수효과 (wow)

추가 라이브러리의 설치가 필요합니다.
설치 방법은 원저자의 다른 블로그 포스팅[2] 또는 아래의 +a 탭을 참고하시면 될 것 같습니다.

1
2
3
{% wow [animate],[duration],[delay],[offset],[iteration] %}
[내용]
{% endwow %}
  1. animate: 애니메이션 스타일. 효과에 대한 설명은 animate.css 문서를 참조
  2. duration: «선택사항» 애니메이션 지속시간. 단위는 ms 또는 s 가능. (ex. 2s 700ms)
  3. delay: «선택사항» 애니메이션 시작 지연시간. 단위는 ms 또는 s 가능. (ex. 2s 700ms)
  4. offset: «선택사항» 애니메이션 시작 위치
  5. iteration: «선택사항» 애니메이션 반복 횟수

마지막 네 항목은 선택사항이지만, 위치를 벗어나서 채워야 할 때는 순서가 흐트러져서는 안 됩니다 (자세한 내용은 예시 참조). 또한, 다른 외부 태그의 사용이 가능합니다.

  1. flip 애니메이션 효과

    1
    2
    3
    4
    5
    {% wow animate__flip %}
    {% note green 'fas fa-fan' modern %}
    `flip` 애니메이션 효과.
    {% endnote %}
    {% endwow %}

  2. zoomIn 애니메이션 효과. 5초 지속, 2초 지연, 바닥에서 100 거리에서 시작하여 2회 반복.

    1
    2
    3
    4
    5
    {% wow animate__zoomIn,5s,2s100,2 %}
    {% note blue 'fas fa-bullhorn' modern%}
    `zoomIn` 애니메이션 효과. 5초 지속, 2초 지연, 바닥에서 100 거리에서 시작, 2회 반복.
    {% endnote %}
    {% endwow %}

  3. slideInRight 애니메이션 효과. 3초 지속, 2초 지연.

    1
    2
    3
    4
    5
    {% wow animate__slideInRight,3s,2s %}
    {% note orange 'fas fa-car' modern%}
    `slideInRight` 애니메이션 효과. 3초 지속, 2초 지연.
    {% endnote %}
    {% endwow %}

  4. heartBeat 애니메이션 효과. 2초 지연, 3회 반복.

    1
    2
    3
    4
    5
    {% wow animate__heartBeat,,2s,,3 %}
    {% note red 'fas fa-battery-half' modern%}
    `heartBeat` 애니메이션 효과. 2초 지연, 3회 반복.
    {% endnote %}
    {% endwow %}
  1. flip 애니메이션 효과

    flip 애니메이션 효과.

  2. zoomIn 애니메이션 효과. 5초 지속, 2초 지연, 바닥에서 100 거리에서 시작, 2회 반복.

    zoomIn 애니메이션 효과. 5초 지속, 2초 지연, 바닥에서 100 거리에서 시작, 2회 반복.

  3. slideInRight 애니메이션 효과. 5초 지속, 2초 지연.

    slideInRight 애니메이션 효과. 3초 지속, 2초 지연.

  4. heartBeat 애니메이션 효과. 2초 지연, 3회 반복.

    heartBeat 애니메이션 효과. 2초 지연, 3회 반복.

wowjs 사용 방법

  1. 터미널을 열고, 블로그의 루트 디렉토리로 이동하여 아래의 명령어를 실행합니다.

    1
    npm install hexo-butterfly-wowjs --save

  2. 블로그 구성 파일(_config.yml 또는 _config.butterfly.yml)에 아래의 구문을 추가합니다.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    wowjs:
      enable: true  # wow.js 활성화 여부
      priority: 10  # wow.js 스크립트의 우선순위
      mobile: false # 모바일에서도 wow.js 사용 여부
      animateitem:
        #- 아래에 추가하고 싶은 항목을 추가.
        - class: recent-post-item # 필수항목, 애니메이션을 추가하고 싶은 클래스명
          style: animate__zoomIn  # 필수항목, 애니메이션 스타일. 효과에 대한 설명은 animate.css 문서를 참조
          duration: 2s            # 선택항목, 애니메이션 지속시간，단위: ms 또는 s. (예: 3s, 700ms)
          delay: 1s               # 선택항목, 애니메이션 시작 지연시간，단위: ms 또는 s. (예: 3s, 700ms)
          offset: 100             # 선택항목, 애니메이션 시작 위치 (브라우저 하단 기준)
          iteration: 2            # 선택항목, 애니메이션 반복 횟수
        - class: card-widget
          style: animate__zoomIn
      animate_css: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/animate.min.css
      wow_js: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow.min.js
      wow_init_js: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow_init.js

  • animateitem에 추가하고 싶은 항목이 없을 땐 아래처럼 비워두면 에러 없이 작동합니다.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    wowjs:
      enable: true  # wow.js 활성화 여부
      priority: 10  # wow.js 스크립트의 우선순위
      mobile: false # 모바일에서도 wow.js 사용 여부
      animateitem:
        - class: 
      animate_css: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/animate.min.css
      wow_js: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow.min.js
      wow_init_js: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow_init.js

진행률 (progress)

1
{% progress [width] [color] [text] %}
  1. width: 0부터 100까지의 아라비아 숫자
  2. color: 색상. 값은 red, yellow, green, cyan, blue, gray 로 표시
  3. text: 진행 표시줄의 텍스트 내용
1
2
3
4
5
6
{% progress 10 red '진행률 표시줄 미리보기' %}
{% progress 30 yellow '진행률 표시줄 미리보기' %}
{% progress 50 green '진행률 표시줄 미리보기' %}
{% progress 70 cyan '진행률 표시줄 미리보기' %}
{% progress 90 blue '진행률 표시줄 미리보기' %}기
{% progress 100 gray '진행률 표시줄 미리보기' %}

진행률 표시줄 미리보기

진행률 표시줄 미리보기

진행률 표시줄 미리보기

진행률 표시줄 미리보기

진행률 표시줄 미리보기

진행률 표시줄 미리보기

주석 (notation)

1
{% nota [label], [text] %}
  1. label: 주석을 달 단어
  2. text: mouse over 시 표시되는 주석
1
{% nota '이 위로 마우스를 이동시켜 보십시오.', '맨 위 표시줄' %}

이 위로 마우스를 이동시켜 보십시오.

말풍선 주석 (bubble)

1
{% bubble [content] , [notation] ,[background-color] %}
  1. content: 주석을 달 단어
  2. notation: mouse over 시 표시되는 주석
  3. background-color: «선택사항» 말풍선의 배경색. 기본값은 #71a4e3
1
2
저는 최근에 많은 새로운 것을 배웠습니다(비록 이것들이 많은 전문가에게는 오래된 기술일지라도요).
가령, CSS {% bubble 인접 형제 선택자,"가령&comma; h1 + p {margin-top:50px;}" %}, {% bubble flex 레이아웃,"Flex는 Flexible Box의 약자로&comma; 박스 모델에 유연하고 강력한 레이아웃 설정을 가능하게 합니다.","#ec5830" %}, {% bubble transform 변환,"transform 속성은 요소에 2D 또는 3D 변형을 적용합니다. 이 속성을 사용하면 요소를 회전&comma; 크기 조정&comma; 이동&comma; 또는 기울일 수 있습니다.","#1db675" %}, animation을 위한 {% bubble 베지에 곡선,"베지에 곡선(Bézier curve)은 베지어 곡선이라고 불리는&comma; 2차원 그래픽 응용 프로그램에서 사용되는 매개변수 곡선입니다. 일반적인 벡터 그래픽 소프트웨어는 이를 통해 곡선을 정확하게 그립니다. 베지에 곡선은 선분과 노드로 구성되어 있는데&comma; 노드는 끌 수 있는 지점이며 선분은 신축성 있는 고무줄과 같습니다.","#de4489" %} 작성법, 그리고 오늘 본 {% bubble clip-path,"clip-path 속성은 요소의 표시 가능 영역 주위에 클리핑 경로를 생성합니다. 해당 영역의 내부는 표시되고&comma; 외부는 숨겨집니다.","#868fd7" %} 속성 등이 있습니다. 이러한 새로운 개념들은 제가 이전에 쌓아온 디자인 아이디어에 큰 영향을 주었습니다.

저는 최근에 많은 새로운 것을 배웠습니다(비록 이것들이 많은 전문가에게는 오래된 기술일지라도요).
가령, CSS 인접 형제 선택자가령, h1 + p {margin-top:50px;}, flex 레이아웃Flex는 Flexible Box의 약자로, 박스 모델에 유연하고 강력한 레이아웃 설정을 가능하게 합니다., transform 변환transform 속성은 요소에 2D 또는 3D 변형을 적용합니다. 이 속성을 사용하면 요소를 회전, 크기 조정, 이동, 또는 기울일 수 있습니다., animation을 위한 베지에 곡선베지에 곡선(Bézier curve)은 베지어 곡선이라고 불리는, 2차원 그래픽 응용 프로그램에서 사용되는 매개변수 곡선입니다. 일반적인 벡터 그래픽 소프트웨어는 이를 통해 곡선을 정확하게 그립니다.
베지에 곡선은 선분과 노드로 구성되어 있는데, 노드는 끌 수 있는 지점이며 선분은 신축성 있는 고무줄과 같습니다. 작성법, 그리고 오늘 본 clip-pathclip-path 속성은 요소의 표시 가능 영역 주위에 클리핑 경로를 생성합니다. 해당 영역의 내부는 표시되고, 외부는 숨겨집니다. 속성 등이 있습니다. 이러한 새로운 개념들은 제가 이전에 쌓아온 디자인 아이디어에 큰 영향을 주었습니다.

  • 기존에는 버블의 위치가 우측에 있을 경우 폭이 너무 좁아 보이는 문제가 있었습니다.
    이를 해결하기 위해 window 크기가 바뀔 때마다 bubble의 위치 및 방향을 수정하는 js 코드를 추가해봤습니다만 주먹구구식이라 속도가 느린 것 같습니다.
  • 그나저나 프리뷰에 적힌 내용 중 8할은 무슨 말인지 모르겠는 부분… 베지어 곡선은 일러에서 곡선 그릴 때 접점에서 드래그하는 그거 말하는 거 같긴 한데…

참고문헌 (reference)

본 블로그는 markdown-it-footnote 플러그인을 사용하기 때문에, 하기의 태그와는 형식과 스타일에 차이가 있습니다.

1
2
{% referto [id] , [literature] %}
{% referfrom [id] , [literature] , [url] %}
  1. referto: 참조 위 첨자
    • id: 위 첨자의 순번 내용은 referfrom 탭의 id와 대응되어야 상호 이동 가능
    • literature: 인용된 참고 문헌 이름
  2. referfrom 참조 출처
    • id: 번호 내용, referto 태그의 id와 대응되어야 상호 이동 가능
    • literature: 인용된 참고 문헌 이름
    • url: 인용된 참조 링크, 생략 가능
1
2
3
4
5
6
이 블로그는 Hexo 프레임워크{% referto '[1]', 'Hexo Official Site' %}에 Butterfly 테마{% referto '[2]', 'Butterfly - A Simple and Card UI Design theme for Hexo' %}를 사용하고 있습니다. 
Butterfly 테마{% referto '[2]', 'Butterfly - A Simple and Card UI Design theme for Hexo' %}는 Melody 테마{% referto '[3]', 'Molunerfinn/hexo-theme-melody' %}{% referto '[4]', 'MARKSZのBlog' %}를 기반으로 제작되어 있어 이들과 관련된 여러 블로그들을 참고해볼 수 있습니다.
{% referfrom '[1]', 'Hexo Official Site', 'https://hexo.io' %}
{% referfrom '[2]', 'Butterfly - A Simple and Card UI Design theme for Hexo', 'https://butterfly.js.org' %}
{% referfrom '[3]', 'Molunerfinn/hexo-theme-melody', 'https://github.com/Molunerfinn/hexo-theme-melody' %}
{% referfrom '[4]', 'MARKSZのBlog', 'https://molunerfinn.com' %}

이 블로그는 Hexo 프레임워크[1] Hexo Official Site参考资料에 Butterfly 테마[2] Butterfly - A Simple and Card UI Design theme for Hexo参考资料를 사용하고 있습니다.
Butterfly 테마[2] Butterfly - A Simple and Card UI Design theme for Hexo参考资料는 Melody 테마[3] Molunerfinn/hexo-theme-melody参考资料[4] MARKSZのBlog参考资料를 기반으로 제작되어 있어 이들과 관련된 여러 블로그들을 참고해볼 수 있습니다.

[1]
 Hexo Official Site
[2]
 Butterfly - A Simple and Card UI Design theme for Hexo
[3]
 Molunerfinn/hexo-theme-melody
[4]
 MARKSZのBlog

  • mouseover 시 나타나는 参考资料(참고자료)라는 문구는 제거했습니다.

    1
    2
    3
    .reference-title {
      display: none;
    }

회전목마 앨범 (carousel)

1
2
3
4
5
{% carousel [Id], [name] %}
![](/img/1.jpg)
![](/img/2.jpg)
![](/img/3,jpg)
{% endcarousel %}
  1. Id: 앨범의 고유 ID로, 앨범의 마우스 움직임을 모니터링하는 데 사용됩니다. 중국어 사용을 금지합니다.한국어도 해당될 듯 동일한 ID를 가진 캐러셀 앨범은 동일한 페이지에 존재할 수 없습니다.
  2. name: 앨범 중간에 표시되는 내용, 영문 작은따옴표로 감싸는 것을 권장합니다.
1
2
3
4
5
6
7
8
9
10
11
12
{% carousel 'SF','strike freedom' %}
![](https://cdn.jsdelivr.net/npm/akilar-candyassets/image/20200907110444226.png)
![](https://cdn.jsdelivr.net/npm/akilar-candyassets/image/20200907110508327.png)
![](https://cdn.jsdelivr.net/npm/akilar-candyassets/image/20200907110525753.png)
![](https://cdn.jsdelivr.net/npm/akilar-candyassets/image/20200907110600751.png)
![](https://cdn.jsdelivr.net/npm/akilar-candyassets/image/20200907110621554.png)
![](https://cdn.jsdelivr.net/npm/akilar-candyassets/image/20200907110637459.png)
![](https://cdn.jsdelivr.net/npm/akilar-candyassets/image/20200907110654150.png)
![](https://cdn.jsdelivr.net/npm/akilar-candyassets/image/20200907110707916.png)
![](https://cdn.jsdelivr.net/npm/akilar-candyassets/image/20200907110719787.png)
![](https://cdn.jsdelivr.net/npm/akilar-candyassets/image/20200907110731118.png)
{% endcarousel %}

carousel 탭은 markdown 플러그인으로 컴파일된 html 내용의 시작과 끝부분 p 태그를 삭제하는 코드가 존재하므로, 다른 태그와 함께 사용할 때 버그가 발생합니다. 따라서, tab 태그 내부에서 사용이 불가능하기 때문에 여기에서는 미리보기를 표시할 수 없습니다.
덧붙여, 현재 최적의 레이아웃 세팅은 8-12개의 이미지를 사용하는 것입니다. 이 범위에 없으면 컴퓨터 상에서는 마우스 휠로 확대/축소할 수 있지만 휴대 전화에서는 휠을 사용할 수 없기 때문에 애니메이션 효과가 제대로 나타나지 않을 수 있습니다. 이는 carousel-touch.js의 시작 부분에서 매개변수를 수정하여 조정할 수 있습니다.

라고 예전엔 쓰여 있었는데, 지금은 fancybox와 호환되지 않으니 lightbox를 모두 끄거나 medium_zoom을 활용하라는 안내 문구만 남아있네요.

  • 확인해본 바로는 carousel을 사용할 페이지에만 GLOBAL_CONFIG_SITE.lightbox = 'medium_zoom';으로 변경해주면 나머지 페이지에서는 fancybox를 사용할 수 있는 것 같습니다.
  • 활용 예시는 이 페이지에서 확인해보실 수 있습니다.

참고 링크

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

  2. Add Blog Animation – Wowjs | Akilarの糖果屋 (link) ↩︎

작성자 :(역) extreme-rearranger
링크 :https://ex-rearranger.github.io/posts/ko/tag-plugins-plus-tutorial-3/
저작권 :본 게시물은 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