Butterfly主题内置标签

@ note modern blue no-icon @

本篇为hexo Butterfly主题内置标签的一些使用样例，供参考使用

@ endnote @

1,Block Quote

2,Code Block

3,Backtick Code Block

4,Pull Quote

5,tag-hide

@ tabs tag-hide @

1
##@ hideInline content,display,bg,color @##

  • content: 文本内容

  • display: 按钮显示的文字(可选)

  • bg: 按钮的背景颜色(可选)

  • color: 按钮文字的颜色(可选)

Demo:

1
2
3
哪个英文字母最酷？ ##@ hideInline 因为西装裤(C装酷),查看答案,#FF7242,#fff @##

门里站着一个人? ##@ hideInline 闪 @##

哪个英文字母最酷？ ##@ hideInline 因为西装裤(C装酷),查看答案,#FF7242,#fff @##

门里站着一个人? ##@ hideInline 闪 @##

Block独立的block隐藏内容，可以隐藏很多内容，包括图片，代码块等等

( display 不能包含英文逗号，可用‚)

1
2
3
##@ hideBlock display,bg,color @##
content
##@ endhideBlock @##
  • content: 文本内容
  • display: 按钮显示的文字(可选)
  • bg: 按钮的背景颜色(可选)
  • color: 按钮文字的颜色(可选)

Demo:

1
2
3
4
查看答案
##@ hideBlock 1+1=？ @##
2
##@ endhideBlock @##

查看答案

@ hideBlock 1+1= @

2

@ endhideBlock @

如果你需要展示的内容太多，可以把它隐藏在收缩框里，需要时再把它展开。

( display 不能包含英文逗号，可用‚)

1
2
3
##@ hideToggle display,bg,color @##
content
##@ endhideToggle @##

Demo:

1
2
3
4
5
6
##@ hideToggle Butterfly安装方法 @##
在你的博客根目录里
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
如果想要安装比较新的dev分支，可以
git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
##@ endhideToggle @##

@ hideToggle Butterfly安装方法 @

在你的博客根目录里
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
如果想要安装比较新的dev分支，可以
git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

@ endhideToggle @

@ endtabs @

6,Gist

7,iframe

1
<iframe src="https://mingsrc.work" cols="50%,50%" heigth=500px width=100% style="width:100%;height:500px;scroll-x:auto;"></iframe>

8,Image

插入具有指定尺寸的图像。

[classname]可选 

1
2
3
##@ img [class names] /path/to/image [width] [height] '"title text" "alt text"' @##
example:
##@ img https://tvax3.sinaimg.cn/large/0072YHp3ly1gjlriqpyayj30hs0hswf6.jpg  100 100 '"博客头像" "头像"' @##

@ img https://tvax3.sinaimg.cn/large/0072YHp3ly1gjlriqpyayj30hs0hswf6.jpg 100 100 ‘“博客头像” “头像”‘ @

9,Link

插入具有target =“ _ blank”属性的链接。

1
2
3
##@ link text url [external] [title] @##
example:
##@ link 博客首页,https://fole-del.github.io , https://tva1.sinaimg.cn/large/0072YHp3ly1gjtb4cmbnjj31s516lav7.jpg @##

10,Include Code

将代码段插入到source / downloads / code文件夹中。可以通过配置中的code_dir选项指定文件夹位置。

11,Checkbox

@ checkbox 纯文本测试 @

@ checkbox checked, 支持简单的 markdown 语法 @

@ checkbox red, 支持自定义颜色 @

@ checkbox green checked, 绿色 + 默认选中 @

@ checkbox yellow checked, 黄色 + 默认选中 @

@ checkbox cyan checked, 青色 + 默认选中 @

@ checkbox blue checked, 蓝色 + 默认选中 @

@ checkbox plus green checked, 增加 @

@ checkbox minus yellow checked, 减少 @

@ checkbox times red checked, 叉 @

@ radio 纯文本测试 @

@ radio checked, 支持简单的 markdown 语法 @

@ radio red, 支持自定义颜色 @

@ radio green, 绿色 @

@ radio yellow, 黄色 @

@ radio cyan, 青色 @

@ radio blue, 蓝色 @

12,Vimeo

插入自适应或指定大小的Vimeo视频。

13,Include Posts

14,Include Assets

15,Raw