主题样式CSS手册

2020-02-23更换主题 hexo-theme-butterfly，目前用该主题样式。
2018-12-01更换主题 Next，它自带有特别样式。也看了一篇文章才发现。地址：好玩的写作样式

主题样式

博主使用的是当前主题 hexo-theme-butterfly，对于其他主题可能不适用。

代码块

{% codeblock [title] [lang:language] [url] [link text] %}
code snippet
{% endcodeblock %}

分别为:标题、目标编程语言、链接、链接名称

也可以简写：
    ```[language] [title] [url] [link-text]
    code
    ```

效果：

代码范例来源

<div class="sp-container">
	<div class="sp-content">
		<div class="sp-globe"></div>
		<h2 class="frame-1">星空下</h2>
		<h2 class="frame-2">月光</h2>
		<h2 class="frame-3">照耀</h2>
		<h2 class="frame-4">大地</h2>
		<h2 class="frame-5"><span>啦啦啦</span> <span>啦啦啦啦</span></h2>
		<a class="sp-circle-link" href="nav/index.html">进主页</a>
	</div>
</div>

别忘了在主题设置开启代码高亮。

如果要单独设置开关，也可以在post/page页对应的markdown文件front-matter添加highlight_shrink来独立配置。
当主题配置文件中的highlight_shrink设为true时，可在front-matter添加highlight_shrink: false来单独配置文章展开代码框。
当主题配置文件中的highlight_shrink设为false时，可在front-matter添加highlight_shrink: true来单独配置文章收缩代码框。

内嵌图片

主题中的图片都是默认以 块级元素 显示，如果需要 内联元素 显示，可以使用这个标签外挂。

//butterfly主题
{% inlineImg 图片链接 高度限制（可选） %}

效果：

这是我滴头像～
还可以用表情包～

Gallery相册

图库集合：

<div class="gallery-group-main">
{% galleryGroup name description link img-url %}
</div>

name：图库名字
description：图库描述
link：连接到对应相册的地址
img-url：图库封面的地址

<div class="gallery-group-main">
{% galleryGroup '视频剪辑' '个人剪辑作品' '/Gallery/video' https://npm.elemecdn.com/[email protected]/bg/bg8.jpg %}
{% galleryGroup '海报作品' '一些海报作品' '/Gallery/design' https://npm.elemecdn.com/[email protected]/bg/bg3.jpg %}
{% galleryGroup '其他类' '其他类' '/Gallery/other' https://npm.elemecdn.com/[email protected]/cover/8.jpg %}
</div>

效果：

视频剪辑

个人剪辑作品

海报作品

一些海报作品

其他类

其他类

相册：

{% gallery %}
![](https://npm.elemecdn.com/[email protected]/bg/bg.jpg)
![](https://npm.elemecdn.com/[email protected]/cover/1.jpg)
![](https://npm.elemecdn.com/[email protected]/bg/bg8.jpg)
![](https://npm.elemecdn.com/[email protected]/bg/bg5.jpg)
![](https://npm.elemecdn.com/[email protected]/bg/bg3.jpg)
![](https://npm.elemecdn.com/[email protected]/cover/8.jpg)
{% endgallery %}

效果：

[{"url":"https://npm.elemecdn.com/[email protected]/bg/bg.jpg","alt":""},{"url":"https://npm.elemecdn.com/[email protected]/cover/1.jpg","alt":""},{"url":"https://npm.elemecdn.com/[email protected]/bg/bg8.jpg","alt":""},{"url":"https://npm.elemecdn.com/[email protected]/bg/bg5.jpg","alt":""},{"url":"https://npm.elemecdn.com/[email protected]/bg/bg3.jpg","alt":""},{"url":"https://npm.elemecdn.com/[email protected]/cover/8.jpg","alt":""}]

加载更多

FontAwesome搭配文字

图标样式具体看官网FontAwesome

<i class="fa fa-pencil"></i> 记录
<i class="fa fa-play-circle"></i> 播放
<i class="fa fa-download"></i> 下载

效果：
记录
播放
下载

居中引用文字

居中方式要看主题主持，之前用Next主题可以简单写标签外挂，现在换了主题只能用div方式了。

// html方式
<div style="text-align:center;font-family: 'Source Han Serif SC','Source Han Serif','source-han-serif-sc','PT Serif','SongTi SC','MicroSoft Yahei',Georgia,serif;font-size: 1.3em;line-height: 35px;">文字</div>

效果：

“人生如此艰难
不如偶尔装逼”

note 标签

// HTML方式
<div class="note default">文字</div>
// 标签方式
{% note [class] [no-icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}

class：标识，不同的标识有不同的配色（default/primary/success/info/warning/danger ）
no-icon：不显示 icon
style：可以覆盖配置中的style（simple/modern/flat/disabled）

效果：

• simple
• modern
• flat
• disabled
• no-icon
• FontAwesome

simple

默认

default

primary

success

info

warning

danger

modern

默认

default

primary

success

info

warning

danger

flat

默认

default

primary

success

info

warning

danger

disabled

默认

default

primary

success

info

warning

danger

no-icon

默认

default

primary

success

info

warning

danger

也可搭配FontAwesome弄出好看的标签

下载

夏日烟火

书签

提醒

大风车

粉色

春季

tabs标签按钮

• Inline
• block
• Toggle

只隐藏文字，单独的按钮

{% hideInline 文本内容,按钮显示文字,按钮背景颜色,按钮文字颜色 %}

效果：
今天的幸运色是什么呢？ 点击看看
红色

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

{% hideBlock 按钮显示文字,按钮背景颜色,按钮文字颜色 %}
文本内容
{% endhideBlock %}

猜猜小伙伴去了哪里呢？
效果：

查看路径

哎呀人家也不知道哇～

可以展示更多的内容，然后会变成收缩框，自己再点击就会展开了～

{% hideToggle 按钮显示文字,按钮背景颜色,按钮文字颜色 %}
文本内容
{% endhideToggle %}

效果：

あした来る日

春に咲く花 夏広がる空よ
心の中に 刻まれてきらめく
朝に降る雨 窓を閉ざす日にも
胸にあふれる光は 雲の上
よろこび悲しみ すべて抱いて歩いている
私の手と 君の手を 強くつなぐもの

tabs标签卡

{% tabs test1 %}
<!-- tab 标签卡1 -->
**标签卡 1** 
我的第二个兄弟在哪里？
<!-- endtab -->

<!-- tab 标签卡2 -->
**标签卡 2** 
我是小二！
<!-- endtab -->

<!-- tab 标签卡3 -->
**标签卡 3** 
我是第三个！
<!-- endtab -->
{% endtabs %}

效果：

• 标签卡1
• 标签卡2
• 标签卡3

标签卡 1
我的第二个兄弟在哪里？

标签卡 2
我是小二！

标签卡 3
我是第三个！

按钮

详见：https://butterfly.js.org/posts/4aa8abbe/#Button

{% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %}

[url]         : 链接
[text]        : 按钮文字
[icon]        : [可选] 图标
[color]       : [可选] 按钮背景顔色(默认style时）
                      按钮字体和边框顔色(outline时)
                      default/blue/pink/red/purple/orange/green
[style]       : [可选] 按钮样式 默认实心
                      outline/留空
[layout]      : [可选] 按钮佈局 默认为line
                      block/留空
[position]    : [可选] 按钮位置 前提是设置了layout为block 默认为左边
                      center/right/留空
[size]        : [可选] 按钮大小
                      larger/留空

效果：

默认 下载 标记 节日 警告 春天 写作 默认 下载 标记 节日 警告 春天 写作

数字块

<span id="inline-toc">1.</span>

1.测试
2.测试
3.测试

高亮文字

{% label text color %}

text：文字
color：背景颜色，default/blue/pink/red/purple/orange/green

当初有些事，让我们 刻骨铭心 ；曾经有些人，令我们 难以释怀 。我们一路走来，告别 一段往事 ，走入下一段风景。路 在延伸，风景在 变幻 ，人生没有不变的永恒。走远了再回头看，很多事已经模糊，很多人已经淡忘，只有很少的人与事与我们有关，牵连 着我们的幸福与快乐，这才是我们真正要 珍惜 的地方。

时间轴

{% timeline title,color %}
<!-- timeline title -->
文字
<!-- endtimeline -->
<!-- timeline title -->
文字
<!-- endtimeline -->
{% endtimeline %}

title：标题/时间线
color：timeline颜色，default(留空)/blue/pink/red/purple/orange/green

效果：

2022

01-01

今天阳光不错！

01-02

今天有小雨

其他样式

来自其他非主题样式，采用了这个博主的样式，很好用。基于Butterfly的外挂标签引入

行内文本

{% u 下划线 %}
{% emp 着重号 %}
{% wavy 波浪线 %}
{% del 删除线 %}
{% kbd 键盘键位 %}
{% psw 隐藏文字 %}

效果：

带 下划线 的文本
带着重号的文本
带波浪线的文本
带 删除线 的文本
键盘样式的文本 command + D
密码样式的文本：这里没有验证码

{% span 样式参数(参数以空格划分), 文本内容 %}

字体: logo, code
颜色: red,yellow,green,cyan,blue,gray
大小: small, h4, h3, h2, h1, large, huge, ultra
对齐方向: left, center, right

效果：

• 字体：红色、黄色、绿色、青色、蓝色、灰色。
• 超大号文字
  文档「开始」页面中的标题部分就是超大号文字。居中文字 副标题

上标标签

{% tip [参数，可选] %}文本内容{% endtip %}

样式: success,error,warning,bolt,ban,home,sync,cogs,key,bell
自定义图标: 支持fontawesome

效果：

默认情况

success

error

warning

bolt

ban

home

sync

cogs

key

bell

自定义font awesome图标

复选列表

{% checkbox 样式参数（可选）, 文本（支持简单md） %}

样式: plus, minus, times
颜色: red,yellow,green,cyan,blue,gray
选中状态: checked

效果：

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色 + 默认选中

黄色 + 默认选中

青色 + 默认选中

蓝色 + 默认选中

增加

减少

叉

单选列表

{% radio 样式参数（可选）, 文本（支持简单md） %}

颜色: red,yellow,green,cyan,blue,gray
选中状态: checked

效果：

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色

黄色

青色

蓝色

链接卡片

{% link 标题, 链接, 图片链接（可选） %}

效果：

我的网站

https://sarakale.netlify.app/blog/

github卡片

{% ghcard 用户名, 其它参数（可选） %}
{% ghcard 用户名/仓库, 其它参数（可选） %}

hide：stars,commits,prs,issues,contribs	 #隐藏指定统计
count_private：true	 #将私人项目贡献添加到总提交计数中
show_icons：true	#显示图标
theme：主题

效果：

github徽标

{% bdage [right],[left],[logo]||[color],[link],[title]||[option] %}

left：徽标左边的信息，必选参数。
right: 徽标右边的信息，必选参数，
logo：徽标图标，图标名称详见simpleicons，可选参数。
color：徽标右边的颜色，可选参数。
link：指向的链接，可选参数。
title：徽标的额外信息，可选参数。主要用于优化SEO，但object标签不会像a标签一样在鼠标悬停显示title信息。
option：自定义参数，支持shields.io的全部API参数支持，具体参数可以参看上文中的拓展写法示例。形式为name1=value2&name2=value2。

效果：
1、基本参数，定义徽标左右文字和图标

2、信息参数，定义徽标右侧内容背景色，指向链接

3、拓展参数，支持shields的API的全部参数内容

网站卡片

{% sitegroup %}
{% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %}
{% endsitegroup %}

xaoxuu简约风格

inkss这是一段关于这个网站的描述文字

MHuiG这是一段关于这个网站的描述文字

Colsrch这是一段关于这个网站的描述文字

Linhk1606这是一段关于这个网站的描述文字

折叠框

{% folding 参数（可选）, 标题 %}
内容
{% endfolding %}

颜色：blue, cyan, green, yellow, red
状态：状态填写 open 代表默认打开。

效果：

默认折叠状态

默认打开的折叠框

春に咲く花 夏広がる空よ
心の中に 刻まれてきらめく
朝に降る雨 窓を閉ざす日にも
胸にあふれる光は 雲の上
よろこび悲しみ すべて抱いて歩いている
私の手と 君の手を 強くつなぐもの

查看嵌套测试

查看嵌套测试2

查看嵌套测试3

进度条

{% progress [width] [color] [text] %}

width: 0到100的阿拉伯数字
color: 颜色，取值有red,yellow,green,cyan,blue,gray
text：进度条上的文字内容

效果：

你的计划完成了吗？

快去学习！

到一半了

加油吧

成功在望！

进度条加载完毕

参考文章

[1]: butterfly官方文档
[2]: 基于Butterfly的外挂标签引入
[3]: 小康的butterfly主题使用文档