Tag Plugins Plus 튜토리얼 - 2
This posting is written in Korean. English is not scheduled to be written.
본 게시물은 hexo-butterfly-tag-plugins-plus 개발자가 작성한 튜토리얼[1]에 대한 한글 번역본입니다.
Hexo가 Jekyll보다 더 마음에 들어 선택했는데, 참고할 만한 글들이 다 중국어로 적혀있어서 매우 곤란…
내용이 너무 길어져서 세 파트로 나누어서 업로드하였습니다.
참고로 일부 태그들은 별도의 라이브러리 없이 butterfly 테마만으로도 사용 가능합니다.애초에 Butterfly 테마가 이 플러그인을 기반으로 여러 태그를 추가했기 때문ㅎㅎ
- Tag Plugins Plus 튜토리얼 - 1
text / span / p / note / tip / animated / checkbox / radio / timeline - Tag Plugins Plus 튜토리얼 - 2
link / btns / ghcard / ghbadge / sites / inlineimage / image / audio / video / gallery - Tag Plugins Plus 튜토리얼 - 3
folding / tab / issues / poem / icon / wow / progress / notation / bubble / reference / carousel
링크 삽입 (link)
1 | {% link [제목], [링크], [이미지 (선택사항)] %} |
- 이미지의 기본값은 구성 파일(
_config.yml혹은_config.butterfly.yml)의tag_plugins-link-placeholder변수에서 설정합니다. - 기존에 작성되어 있는
/img/link.png라는 파일은 실제로 존재하지 않으니 꼭 수정하시기 바랍니다.
1 | {% link 캔디하우스 튜토리얼 포스팅, https://akilar.top/posts/615e2dec/, |
버튼 삽입 (btns)
1 | {% btns [스타일 인자] %} |
- 둥근 모서리 스타일 : rounded, circle
- 텍스트 스타일 추가 : 컨테이너 내에
<b>제목</b>또는<p>설명 텍스트</p>와 같이 추가할 수 있습니다. - 레이아웃 모드 : 기본값은 자동 너비로, 시야에 한두 개만 있는 상황에 적합합니다.
매개변수 설명 wide 넓은 버튼 fill 레이아웃 채우기. 자동으로 하나 이상의 라인을 채우며, 더 있으면 줄 바꿈을 시행합니다. center 가운데 정렬. 버튼 사이의 간격은 고정된 값으로 정해집니다. around 중심과 분산 grid2 동일한 너비로 최대 2열. 화면을 좁히면 열 수가 적절하게 줄어듭니다. grid3 동일한 너비로 최대 3열. 화면을 좁히면 열 수가 적절하게 줄어듭니다. grid4 동일한 너비로 최대 4열. 화면을 좁히면 열 수가 적절하게 줄어듭니다. grid5 동일한 너비로 최대 5열. 화면을 좁히면 열 수가 적절하게 줄어듭니다.
-
[팀 구성원]과 같이 아바타가 포함된 링크 그룹을 표시해야 하는 경우
1
2
3
4
5
6
7{% btns circle grid5 %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% endbtns %} -
또는 아이콘이 있는 버튼
1
2
3
4{% btns rounded grid4 %}
{% cell 소스코드 다운로드, /, fas fa-download %}
{% cell 문서 보기, /, fas fa-book-open %}
{% endbtns %} -
원형 아이콘 + 제목 + 설명 + 그림 + 그리드 5열 + 중앙
1
2
3
4
5
6
7
8
9
10
11
12
13
14{% btns circle center grid5 %}
<a href='https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1'>
<i class="fab fa-apple"></i>
<b>심박수 스튜어드</b>
{% p red, 프로 버전 %}
<img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_pro.png'>
</a>
<a href='https://apps.apple.com/cn/app/heart-mate-lite-hrm-utility/id1475747930?ls=1'>
<i class="fab fa-apple"></i>
<b>심박수 스튜어드</b>
{% p green, 무료 버전 %}
<img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_lite.png'>
</a>
{% endbtns %}
- [팀 구성원]과 같이 아바타가 포함된 링크 그룹을 표시해야 하는 경우
- 또는 아이콘이 있는 버튼
- 원형 아이콘 + 제목 + 설명 + 그림 + 그리드 5열 + 중앙
xaoxuu
- 2번 항목(아이콘이 있는 버튼)은 원문과 다르게
grid4로 설정해보았습니다.
GitHub 카드 (ghcard)
1 | {% ghcard [사용자 이름], [기타 인자 (선택사항)] %} |
- 더 많은 매개변수는
github-readme-stats를 참조할 수 있습니다. (인자명)=(인자값)의 형태로 작성하며, 각 매개변수의 분할은,를 사용합니다.
일반적으로 사용되는 몇 가지 매개변수만 아래에 소개하도록 하겠습니다.
매개변수 값 의미 hidestars, commits, prs, issues, contribs 지정된 통계 숨기기 count_privatetrue 프로젝트의 총 커밋 수에 비공개 기여 추가 show_iconstrue 아이콘 표시 theme48가지의 사용 가능한 테마를 확인하세요. 테마 (vim colorscheme과 유사)
-
사용자 정보 카드
1
2
3
4{% ghcard xaoxuu %} {% ghcard xaoxuu, theme=vue %}
{% ghcard xaoxuu, theme=buefy %} {% ghcard xaoxuu, theme=solarized-light %}
{% ghcard xaoxuu, theme=onedark %} {% ghcard xaoxuu, theme=solarized-dark %}
{% ghcard xaoxuu, theme=algolia %} {% ghcard xaoxuu, theme=calm %} -
웨어하우스 정보 카드
1
2
3
4{% ghcard volantis-x/hexo-theme-volantis %} {% ghcard volantis-x/hexo-theme-volantis, theme=vue %}
{% ghcard volantis-x/hexo-theme-volantis, theme=buefy %} {% ghcard volantis-x/hexo-theme-volantis, theme=solarized-light %}
{% ghcard volantis-x/hexo-theme-volantis, theme=onedark %} {% ghcard volantis-x/hexo-theme-volantis, theme=solarized-dark %}
{% ghcard volantis-x/hexo-theme-volantis, theme=algolia %} {% ghcard volantis-x/hexo-theme-volantis, theme=calm %}
-
사용자 정보 카드
-
웨어하우스 정보 카드
- 본 게시물에서는 2열로 표시하기 위해 아래와 같이 스타일을 임시로 추가했습니다.
1
2
3
4
5<style>
.tab-contents .tab-item-content p a.ghcard {
width: 49%;
}
</style>
GitHub 로고 (bdage)
1 | {% bdage [right],[left],[logo]||[color],[link],[title]||[option] %} |
left: 로고 왼쪽에 있는 정보. 필수 매개변수입니다.right: 로고 오른쪽에 있는 정보. 필수 매개변수입니다.logo: 로고 아이콘, 아이콘 이름은 simpleicons. 선택적 매개변수입니다.color: 로고 오른쪽의 색상. 선택적 매개변수입니다.link: 가리키는 링크입니다. 선택적 매개변수입니다.title: 로고에 대한 추가 정보. 선택적 매개변수입니다.
주로 SEO 최적화에 사용되지만a태그처럼 마우스를 가져가면object태그에title정보가 표시되지 않습니다.option: 사용자 정의 매개변수로, shields.io의 모든 API 매개변수를 지원합니다.
특정 매개변수는 위의 확장 작성 예제를 참조하십시오. 형식은(이름1)=(값1)&(이름2)=(값2)입니다.
- 기본 매개변수, 로고의 왼쪽 및 오른쪽 텍스트 및 아이콘 정의
1
2{% bdage Theme,Butterfly %}
{% bdage Frame,Hexo,hexo %} - 정보 매개변수, 로고 오른쪽에 콘텐츠의 배경색 정의, 링크 가리킴
1
2
3{% bdage CDN,JsDelivr,jsDelivr||abcdef,https://metroui.org.ua/index.html,이 사이트는 JsDelivr를 사용하여 정적 리소스에 대한 CDN 가속을 제공합니다. %}
//선택적 매개변수가 시퀀스 전체에서 생략되더라도 여전히 분할로 사용하려면 쉼표를 작성해야 합니다.
{% bdage Source,GitHub,GitHub||,https://github.com/ %} - 확장된 매개변수, 방패 API의 모든 매개변수 내용 지원
1
2
3{% bdage Hosted,Vercel,Vercel||brightgreen,https://vercel.com/,이 사이트는 2줄 배포를 채택하고 기본 라인은 Vercel에서 호스팅됩니다.||style=social&logoWidth=20 %}
//교차 시퀀스인 경우, 생략 가능 매개변수 그룹을 선택하고 분할을 위해 이중 수직선(||)을 작성해야 합니다.
{% bdage Hosted,Vercel,Vercel||||style=social&logoWidth=20&logoColor=violet %}
-
기본 매개변수. 로고의 왼쪽 및 오른쪽 텍스트 및 아이콘 정의
-
정보 매개변수. 로고 오른쪽에 콘텐츠의 배경색 정의, 링크 가리킴
-
확장된 매개변수. 방패 API의 모든 매개변수 내용 지원
웹사이트 카드 (sites)
1 | {% sitegroup % } |
1 | {% sitegroup %} |
기존에 4열로 표시되던 것을 3열로 변경하였습니다.
1 | .site-card { |
인라인 이미지 (inlineimage)
1 | {% inlineimage [이미지 링크], height=[높이 (선택사항)] %} |
height: 높이 (ex.height=20px)
1 | 이것은 {% inlineimage https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/0000.gif %} 단락입니다. |
이것은 
단락입니다.
이것은 
단락입니다.
단일 이미지 (image)
1 | {% image [링크], width=[폭 (선택사항)], height=[높이 (선택사항)], alt=[설명 (선택사항)], bg=[배경색 (선택사항)] %} |
- 이미지 크기:
width=300px, height=32px - 이미지 설명:
alt=(그림 설명)(butterfly는 테마 구성 파일에서photofigcaption혹은fancybox를 활성화해야 유의미함) - 배경색:
bg=#f2f2f2
- 설명 추가
1
{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, alt="매일 방과 후 기숙사로 돌아가는 길, 별 일 없습니다." %}
- 너비 지정
1
{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px %}
- 너비 지정 및 설명 추가
1
{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px, alt="매일 방과 후 기숙사로 돌아가는 길, 별 일 없습니다." %}
- 자리 표시자의 배경색 설정
1
{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px, bg=#162D39, alt="다양한 너비로 탐색의 모양과 느낌 최적화" %}
- 설명 추가 매일 방과 후 기숙사로 돌아가는 길, 별 일 없습니다.
- 너비 지정
- 너비 지정 및 설명 추가 매일 방과 후 기숙사로 돌아가는 길, 별 일 없습니다.
- 배경색 설정 다양한 너비로 탐색의 모양과 느낌 최적화
_config.butterfly.yml에서 photofigcaption: true로 설정했을 경우 이미지 캡션이 중복으로 나타날 수 있습니다. 이 경우, 아래와 같이 css를 수정하거나 photofigcaption: false로 설정하면 됩니다.
1 | span.image-caption { |
저는 이미지 캡션을 중앙에 위치시키고, 앞뒤로 아이콘(⊙)을 추가하기 위해 아래와 같이 css를 수정하였습니다.
(이미지 캡션 앞뒤에 "⊙︎"를 붙이는 방법은 Butterfly 테마 공식 튜토리얼을 참고하여 수정한 것으로 기억하고 있습니다.)
1 | span.image-caption { |
오디오 (audio)
1 | {% audio [오디오(.mp3) 링크] %} |
1 | {% audio https://github.com/volantis-x/volantis-docs/releases/download/assets/Lumia1020.mp3 %} |
비디오 (video)
1 | {% videos [정렬 방향 (선택사항)], [열 수] %} |
- 정렬 방향: left, center, right
- 열 수: 1~4 (쉼표 바로 뒤에 작성)
- 100% 너비
1
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
- 50% 너비
1
2
3
4{% videos, 2 %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% endvideos %} - 25% 너비
1
2
3
4
5
6{% videos center, 4 %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% endvideos %}
- 100% 너비
- 50% 너비
- 25% 너비
앨범 (gallery)
앨범 갤러리 (galleryGroup)
1 | <div class="gallery-group-main"> |
1 | <div class="gallery-group-main"> |
일반 갤러리 (gallery)
1 | {% gallery %} |
1 | {% gallery %} |
[{"url":"https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg","alt":"Bungee","title":""},{"url":"https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg","alt":"","title":""}]
-
Butterfly 테마 공식 튜토리얼에서는, 아래와 같이 캡션 앞에 아이콘(⊙︎)을 추가하는 방법을 소개하고 있습니다.
지금은 해당 튜토리얼이 삭제된 걸로 추정됨.1
2
3
4
5
6
7
8
9.jg-caption-visible::before {
content: "⊙︎ ";
}
.fancybox__caption::before {
content: "⊙ ";
}
.img-alt.is-center::before {
content: "⊙ ";
} -
저는 이 중
img-alt를 제외한 나머지 두 컴포넌트에만 앞뒤로 아이콘을 추가하였습니다.1
2
3
4
5
6
7
8.jg-caption-visible::before,
.fancybox__caption::before {
content: "⊙︎ ";
}
.jg-caption-visible::after,
.fancybox__caption::after {
content: " ⊙︎";
}
참고 링크
본 게시물은 Tag-Plugins-Plus 원문과 동일한 CC BY-NC-SA 4.0 라이센스를 준수합니다.
