主题样式CSS手册
2020-02-23更换主题 hexo-theme-butterfly，目前用该主题样式。
2018-12-01更换主题 Next，它自带有特别样式。也看了一篇文章才发现。地址：好玩的写作样式
主题样式
博主使用的是当前主题 hexo-theme-butterfly，对于其他主题可能不适用。
引用块
来自hexo官方的插件
{% blockquote [author[, source]] [link] [source_link_title] %} |
分别为：作者，来源，链接，链接标题
效果：
Every interaction is both precious and an opportunity to delight.
代码块
来自hexo官方的插件
{% codeblock [title] [lang:language] [url] [link text] [additional options] %} |
分别为:标题、目标编程语言、链接、链接名称、其他选项
以 option:value 的格式指定额外选项，例如：line_number:false first_line:5。
| 额外选项 | 描述 | 默认值 |
|---|---|---|
| line_number | 显示行号 | true |
| line_threshold | 只有代码块的行数超过该阈值，才显示行数 | 0 |
| highlight | 启用代码高亮 | true |
| first_line | 指定第一个行号 | 1 |
| mark | 突出显示特定的行，每个值用逗号分隔。使用破折号指定数字范围 例如：mark:1,4-7,10 将标记第1、4至7和10行 | |
| wrap | 用<table>包裹代码块 | true |
效果：
#!/usr/bin/env python |
也可以简写：
```[language] [title] [url] [link-text] |
效果：
<div class="sp-container"> |
别忘了在主题设置开启代码高亮。
如果要单独设置开关，也可以在post/page页对应的markdown文件front-matter添加highlight_shrink来独立配置。
当主题配置文件中的highlight_shrink设为true时，可在front-matter添加highlight_shrink: false来单独配置文章展开代码框。
当主题配置文件中的highlight_shrink设为false时，可在front-matter添加highlight_shrink: true来单独配置文章收缩代码框。
iframe
来自hexo官方的插件
在文章中插入iframe。
{% iframe url [width] [height] %} |
Image
在文章中插入指定大小的图片。
{% img [class names] /path/to/image [width] [height] '"title text" "alt text"' %} |
内嵌图片
来自butterfly主题的插件
主题中的图片都是默认以 块级元素 显示，如果需要 内联元素 显示，可以使用这个标签外挂。
//butterfly主题 |
效果：
这是我滴头像～ 
还可以用表情包～ 
Gallery相册
来自butterfly主题的插件
图库集合：
<div class="gallery-group-main"> |
<div class="gallery-group-main"> |
效果：
相册：
{% gallery %} |
效果：
链接
在文章中插入链接，并自动给外部链接添加 target=”_blank” 属性。
{% link text url [external] [title] %} |
FontAwesome搭配文字
图标样式具体看官网FontAwesome
<i class="fa fa-pencil"></i> 记录 |
效果：
记录
播放
下载
居中引用文字
居中方式要看主题主持，之前用Next主题可以简单写标签外挂，现在换了主题只能用div方式了。
// html方式 |
效果：
不如偶尔装逼”
note 标签
// HTML方式 |
效果：
simple
{% note simple %} 默认 {% endnote %} |
默认
{% note default simple %} default {% endnote %} |
default
{% note primary simple %} primary {% endnote %} |
primary
{% note success simple %} success {% endnote %} |
success
{% note info simple %} info {% endnote %} |
info
{% note warning simple %} warning {% endnote %} |
warning
{% note danger simple %} danger {% endnote %} |
danger
modern
{% note modern %} 默认 {% endnote %} |
默认
{% note default modern %} default {% endnote %} |
default
{% note primary modern %} primary {% endnote %} |
primary
{% note success modern %} success {% endnote %} |
success
{% note info modern %} info {% endnote %} |
info
{% note warning modern %} warning {% endnote %} |
warning
{% note danger modern %} danger {% endnote %} |
danger
flat
{% note flat %} 默认 {% endnote %} |
默认
{% note default flat %} default {% endnote %} |
default
{% note primary flat %} primary {% endnote %} |
primary
{% note success flat %} success {% endnote %} |
success
{% note info flat %} info {% endnote %} |
info
{% note warning flat %} warning {% endnote %} |
warning
{% note danger flat %} danger {% endnote %} |
danger
disabled
{% note disabled %} 默认 {% endnote %} |
默认
{% note default disabled %} default {% endnote %} |
default
{% note primary disabled %} primary {% endnote %} |
primary
{% note success disabled %} success {% endnote %} |
success
{% note info disabled %} info {% endnote %} |
info
{% note warning disabled %} warning {% endnote %} |
warning
{% note danger disabled %} danger {% endnote %} |
danger
no-icon
{% 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 %} |
也可搭配FontAwesome弄出好看的标签
{% note blue 'fas fa-arrow-circle-down' modern %} 下载 {% endnote %} |
下载
{% note orange 'fas fa-umbrella-beach' modern %} 夏日烟火 {% endnote %} |
夏日烟火
{% note green 'fas fa-bookmark' flat %} 书签 {% endnote %} |
书签
{% note blue 'fas fa-bullhorn' disabled %} 提醒 {% endnote %} |
提醒
{% note red 'fas fa-fan' disabled %} 大风车 {% endnote %} |
大风车
{% note purple no-icon %} 紫色 {% endnote %} |
{% note green no-icon %} 春季 {% endnote %} |
tabs标签按钮
只隐藏文字，单独的按钮
{% hideInline 文本内容,按钮显示文字,按钮背景颜色,按钮文字颜色 %} |
效果：
今天的幸运色是什么呢？
独立的block隐藏内容，可以隐藏很多内容，包括图片，代码块等等
{% hideBlock 按钮显示文字,按钮背景颜色,按钮文字颜色 %} |
猜猜小伙伴去了哪里呢？
效果：
可以展示更多的内容，然后会变成收缩框，自己再点击就会展开了～
{% hideToggle 按钮显示文字,按钮背景颜色,按钮文字颜色 %} |
效果：
あした来る日
春に咲く花 夏広がる空よ
心の中に 刻まれてきらめく
朝に降る雨 窓を閉ざす日にも
胸にあふれる光は 雲の上
よろこび悲しみ すべて抱いて歩いている
私の手と 君の手を 強くつなぐもの
tabs标签卡
{% tabs test1 %} |
效果：
标签卡 1
我的第二个兄弟在哪里？
标签卡 2
我是小二！
标签卡 3
我是第三个！
按钮
详见：https://butterfly.js.org/posts/4aa8abbe/#Button
{% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %} |
效果：
默认 下载 标记 节日 警告 春天 写作 默认 下载 标记 节日 警告 春天 写作数字块
<span id="inline-toc">1.</span> |
1.测试
2.测试
3.测试
高亮文字
来自butterfly主题的插件
{% label text color %} |
当初有些事，让我们 刻骨铭心 ；曾经有些人，令我们 难以释怀 。我们一路走来，告别 一段往事 ，走入下一段风景。路 在延伸，风景在 变幻 ，人生没有不变的永恒。走远了再回头看，很多事已经模糊，很多人已经淡忘，只有很少的人与事与我们有关，牵连 着我们的幸福与快乐，这才是我们真正要 珍惜 的地方。
时间轴
来自butterfly主题的插件
{% timeline title,color %} |
效果：
2022
01-01
今天阳光不错！
01-02
今天有小雨
其他样式
来自其他非主题样式，采用了这个博主的样式，很好用。基于Butterfly的外挂标签引入
行内文本
{% u 下划线 %} |
效果：
{% span 样式参数(参数以空格划分), 文本内容 %} |
效果：
- 字体：红色、黄色、绿色、青色、蓝色、灰色。
- 超大号文字
文档「开始」页面中的标题部分就是超大号文字。居中文字 副标题
上标标签
{% tip [参数，可选] %}文本内容{% endtip %} |
效果：
默认情况
success
error
warning
bolt
ban
home
sync
cogs
key
bell
自定义font awesome图标
复选列表
{% checkbox 样式参数（可选）, 文本（支持简单md） %} |
效果：
纯文本测试
支持简单的 markdown 语法
支持自定义颜色
绿色 + 默认选中
黄色 + 默认选中
青色 + 默认选中
蓝色 + 默认选中
增加
减少
叉
单选列表
{% radio 样式参数（可选）, 文本（支持简单md） %} |
效果：
纯文本测试
支持简单的 markdown 语法
支持自定义颜色
绿色
黄色
青色
蓝色
链接卡片
{% link 标题, 链接, 图片链接（可选） %} |
效果：
github卡片
{% ghcard 用户名, 其它参数（可选） %} |
效果：
github徽标
{% bdage [right],[left],[logo]||[color],[link],[title]||[option] %} |
效果：
1、基本参数，定义徽标左右文字和图标
2、信息参数，定义徽标右侧内容背景色，指向链接
3、拓展参数，支持shields的API的全部参数内容
网站卡片
{% sitegroup %} |
折叠框
{% folding 参数（可选）, 标题 %} |
效果：
默认折叠状态
默认打开的折叠框
春に咲く花 夏広がる空よ
心の中に 刻まれてきらめく
朝に降る雨 窓を閉ざす日にも
胸にあふれる光は 雲の上
よろこび悲しみ すべて抱いて歩いている
私の手と 君の手を 強くつなぐもの
查看嵌套测试
查看嵌套测试2
查看嵌套测试3
进度条
{% progress [width] [color] [text] %} |
效果：
参考文章
[1]: butterfly官方文档
[2]: 基于Butterfly的外挂标签引入
[3]: 小康的butterfly主题使用文档
如果遇到评论加载不出来，请不要担心，稍等一会儿，等待服务器后台修复即可，或者过一段时间来看看～