此文为转载文章来自大佬安知鱼,为方便后面创作时使用。
段落文本 p
标签语法
配置参数
- 字体: logo, code
- 颜色: red,yellow,green,cyan,blue,gray
- 大小: small, h4, h3, h2, h1, large, huge, ultra
- 对齐方向: left, center, right
样式预览
- 彩色文字 在一段话中方便插入各种颜色的标签，包括：红色、黄色、绿色、青色、蓝色、灰色。
- 超大号文字 文档「开始」页面中的标题部分就是超大号文字。 logo large Volantis small A Wonderful Theme for Hexo
示例源码
行内文本 span
标签语法
配置参数
- 字体: logo, code
- 颜色: red,yellow,green,cyan,blue,gray
- 大小: small, h4, h3, h2, h1, large, huge, ultra
- 对齐方向: left, center, right
样式预览
- 彩色文字 在一段话中方便插入各种颜色的标签，包括：红色、黄色、绿色、青色、蓝色、灰色。
- 超大号文字 文档「开始」页面中的标题部分就是超大号文字。 logo large Volantis small A Wonderful Theme for Hexo
示例源码
行内文本样式 text
标签语法
样式预览
- 带 的文本
- 带 的文本
- 带 的文本
- 带 的文本
- 键盘样式的文本 +
- 密码样式的文本：这里没有验证码
示例源码
分栏 tab
分栏支持内置阿里图标，如果开启了 可以使用 fontawesome 的图标，否则只能使用默内置阿里图标
标签语法
配置参数
- Unique name :
- 选项卡块标签的唯一名称，不带逗号。
- 将在#id 中用作每个标签及其索引号的前缀。
- 如果名称中包含空格，则对于生成#id，所有空格将由破折号代替。
- 仅当前帖子/页面的 URL 必须是唯一的！
- [index]:
- 活动选项卡的索引号。
- 如果未指定，将选择第一个标签（1）。
- 如果 index 为-1，则不会选择任何选项卡。
- 可选参数。
- [Tab caption]:
- 当前选项卡的标题。
- 如果未指定标题，则带有制表符索引后缀的唯一名称将用作制表符的标题。
- 如果未指定标题，但指定了图标，则标题将为空。
- 可选参数。
- [@icon]: - FontAwesome 图标名称（全名，看起来像“ fas fa-font”） - 可以指定带空格或不带空格； - 例如'Tab caption @icon' 和 'Tab caption@icon'. - 可选参数。
样式预览
Demo 1 - 预设选择第一个【默认】
This is Tab 1.
This is Tab 2.
This is Tab 3.
Demo 2 - 预设选择 tabs
This is Tab 1.
This is Tab 2.
This is Tab 3.
Demo 3 - 没有预设值
This is Tab 1.
This is Tab 2.
This is Tab 3.
Demo 4 - 自定义 Tab 名 + 只有 icon + icon 和 Tab 名
第一个Tab
tab 名字为第一个 Tab
@anzhiyufont anzhiyu-icon-oranges
只有图标 没有 Tab 名字
炸弹@anzhiyufont anzhiyu-icon-oranges
名字+icon
Demo 1 - 预设选择第一个【默认】
{% tabs test1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->
<!-- tab -->
**This is Tab 2.**
<!-- endtab -->
<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}
Demo 2 - 预设选择 tabs
{% tabs test2, 3 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->
<!-- tab -->
**This is Tab 2.**
<!-- endtab -->
<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}
Demo 3 - 没有预设值
{% tabs test3, -1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->
<!-- tab -->
**This is Tab 2.**
<!-- endtab -->
<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}
Demo 4 - 自定义 Tab 名 + 只有 icon + icon 和 Tab 名
{% tabs test4 %}
<!-- tab 第一个Tab -->
**tab 名字为第一个 Tab**
<!-- endtab -->
<!-- tab @fab fa-apple-pay -->
**只有图标 没有 Tab 名字**
<!-- endtab -->
<!-- tab 炸弹@fas fa-bomb -->
**名字+icon**
<!-- endtab -->
{% endtabs %}
按钮 btns
标签语法
参数配置
- 圆角样式：rounded, circle
- 增加文字样式：可以在容器内增加 和
- 布局方式： 默认为自动宽度，适合视野内只有一两个的情况。
| 参数 | 含义 |
|---|---|
| wide | 宽一点的按钮 |
| fill | 填充布局，自动铺满至少一行，多了会换行 |
| center | 居中，按钮之间是固定间距 |
| around | 居中分散 |
| grid2 | 等宽最多 2 列，屏幕变窄会适当减少列数 |
| grid3 | 等宽最多 3 列，屏幕变窄会适当减少列数 |
| grid4 | 等宽最多 4 列，屏幕变窄会适当减少列数 |
| grid5 | 等宽最多 5 列，屏幕变窄会适当减少列数 |
样式预览
- 如果需要显示类似「团队成员」之类的一组含有头像的链接：
- 或者含有图标的按钮：
- 圆形图标 + 标题 + 描述 + 图片 + 网格 5 列 + 居中
示例源码
- 如果需要显示类似「团队成员」之类的一组含有头像的链接：
- 或者含有图标的按钮：
- 圆形图标 + 标题 + 描述 + 图片 + 网格 5 列 + 居中
按钮 btn
标签语法
参数配置
| 参数 | 含义 |
|---|---|
| url | 链接 |
| text | 按钮文字 |
| icon | [可选] 图标，如果开启了 可以使用 fontawesome 的图标，否则只能使用默内置图标 |
| color | [可选] 按钮背景顔色(默认 style 时）按钮字体和边框顔色(outline 时)default/blue/pink/red/purple/orange/green |
| style | [可选] 按钮样式 默认实心数，outline/留空 |
| layout | [可选] 按钮佈局 默认为 line block/留空 |
| position | [可选] 按钮位置 前提是设置了 layout 为 block 默认为左边 center/right/留空数 |
| size | [可选] 按钮大小 larger/留空 |
样式预览
- 一组按钮
This is my website, click the button https://anheyu.com/ This is my website, click the button https://anheyu.com/ This is my website, click the button https://anheyu.com/ This is my website, click the button https://anheyu.com/ This is my website, click the button https://anheyu.com/
- 调整位置/大小
https://anheyu.com/ https://anheyu.com/ https://anheyu.com/
- more than one button in center
https://anheyu.com/ https://anheyu.com/ https://anheyu.com/ https://anheyu.com/ https://anheyu.com/ https://anheyu.com/ https://anheyu.com/
- 居中按钮
示例源码
- 一组按钮
- 调整位置/大小
- more than one button in center
- 居中按钮
网站卡片 sites
标签语法
样式预览
示例源码
单张图片 image
标签语法
参数配置
- 图片宽度高度：width=300px, height=32px
- 图片描述：alt=图片描述（butterfly 需要在主题配置文件中开启图片描述）
- 占位背景色：bg=#f2f2f2
样式预览
- 添加描述：
- 指定宽度：
- 指定宽度并添加描述：
- 设置占位背景色：
示例源码
- 添加描述：
- 指定宽度：
- 指定宽度并添加描述：
- 设置占位背景色：
inlineImg 行内图片
标签语法
参数配置
| 参数 | 含义 |
|---|---|
| src | 图片链接 |
| height | 图片高度限制【可选】 |
样式预览
你看我长得漂亮不
我觉得很漂亮
示例源码
行内图片 inlineimage
标签语法
参数配置
- 高度：height=20px
样式预览
这是 一段话。
这又是 一段话。
示例源码
label 标签
标签语法
参数配置
| 参数 | 含义 |
|---|---|
| text | 文字 |
| color | 【可选】背景颜色，默认为 default，default/blue/pink/red/purple/orange/green |
样式预览
臣亮言：创业未半，而。今天下三分，，此诚也！然侍衞之臣，不懈于内；，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气；不宜妄自菲薄，引喻失义，以塞忠谏之路也。 宫中、府中，俱为一体；陟罚臧否，不宜异同。若有、，及为忠善者，宜付有司，论其刑赏，以昭陛下平明之治；不宜偏私，使内外异法也。
示例源码
timeline
标签语法
参数配置
| 参数 | 含义 |
|---|---|
| title | 标题/时间线 |
| color | timeline 颜色，default(留空) / blue / pink / red / purple / orange / green |
样式预览
- 默认颜色
这是测试页面
- blue
这是测试页面
- pink
这是测试页面
- red
这是测试页面
- purple
这是测试页面
- orange
这是测试页面
- green
这是测试页面
示例源码
- 默认颜色
- blue
- pink
- red
- purple
- orange
- green
flink 友链标签
可在任何界面插入类似列表效果，内容格式与友情链接界面一样，支持 ,注意具有格式要求，请注意格式对齐，防止被编辑器格式化导致格式错误从而报错。
标签语法
参数配置
| 参数 | 含义 |
|---|---|
| class_name | h2标题 |
| flink_style | 【可选】友链样式，默认为 flexcard，flexcard/anzhiyu |
| link_list | 【可选】友链样式，默认为 flexcard，flexcard/anzhiyu |
样式预览
class_name: 推荐博客 flink_style: flexcard link_list:
- name: 安知鱼 link: https://anheyu.com/ avatar: https://img02.anheyu.com/adminuploads/1/2022/09/15/63232b7d91d22.jpg descr: 生活明朗，万物可爱 siteshot: https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/common/anheyu.com.jpg
class_name: 网站 class_desc: 值得推荐的网站 flink_style: anzhiyu link_list:
- name: Youtube link: https://www.youtube.com/ avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png descr: 视频网站
- name: Weibo link: https://www.weibo.com/ avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png descr: 中国最大社交分享平台
- name: Twitter link: https://twitter.com/ avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png descr: 社交分享平台
示例源码
mermaid 图
使用可以绘制Flowchart（流程图）、Sequence diagram（时序图 ）、Class Diagram（类别图）、State Diagram（状态图）、Gantt（甘特图）和Pie Chart（圆形图），具体可以查看mermaid文档
修改 主题配置文件
# mermaid
# see https://github.com/mermaid-js/mermaid
mermaid:
enable: true
# built-in themes: default/forest/dark/neutral
theme:
light: default
dark: dark
标签语法
样式预览
示例源码
复选列表 checkbox
标签语法
配置参数
- 样式: plus, minus, times
- 颜色: red,yellow,green,cyan,blue,gray
- 选中状态: checked
样式预览
示例源码
dogeplayer 多吉云播放器
快捷引入多吉云视频
标签语法
参数配置
获取与
| 参数 | 含义 |
|---|---|
| userId | 多吉云userId |
| vcode | 视频vcode |
样式预览
示例源码
折叠框 folding
折叠框folding
标签语法
配置参数
- 颜色：blue, cyan, green, yellow, red
- 状态：状态填写 open 代表默认打开。
样式预览
查看图片测试
cyan
这是一个默认打开的折叠框。
green
yellow
- haha
- hehe
red
hahaha 
示例源码
Gallery 相册图库
一个图库集合。
标签语法
gallerygroup 相册图库
```markdown
</div>
```
- gallery 相册
本地
| 参数名 | 释义 |
|---|---|
| lazyload | 【可选】点击按钮加载更多图片，填写 true/false。默认为 。 |
| rowHeight | 【可选】图片显示的高度，如果需要一行显示更多的图片，可设置更小的数字。默认为 。 |
| limit | 【可选】每次加载多少张照片。默认为 。 |
远程
| 参数名 | 释义 |
|---|---|
| url | 【必须】 识别词 |
| link | 【必须】远程的 json 链接 |
| lazyload | 【可选】点击按钮加载更多图片，填写 true/false。默认为 。 |
| rowHeight | 【可选】图片显示的高度，如果需要一行显示更多的图片，可设置更小的数字。默认为 。 |
| limit | 【可选】每次加载多少张照片。默认为 。 |
远程链接 Json 的例子
有三个参数，是必须存在的， 和 可有，也可没有。
示例
gallerygroup 相册图库
| 参数名 | 释义 | | :---------- | :------------------- | | name | 图库名字 | | description | 图库描述 | | link | 链接到对应相册的地址 | | img-url | 图库封面 |
思维拓展一下，相册图库的实质其实就是个快捷方式，可以自定义添加描述、封面、链接。那么我们未必要把它当做一个相册，完全可以作为一个链接卡片，链接到视频、QQ、友链都是不错的选择。
- gallery 相册 区别于旧版的 Gallery 相册,新的 Gallery 相册会自动根据图片长度进行排版，书写也更加方便，与 markdown 格式一样。可根据需要插入到相应的 md。无需再自己配置长宽。建议在粘贴时故意使用长短、大小、横竖不一的图片，会有更好的效果。（尺寸完全相同的图片只会平铺输出，效果很糟糕）
本地
| 参数名 | 释义 |
|---|---|
| lazyload | 【可选】点击按钮加载更多图片，填写 true/false。默认为 。 |
| rowHeight | 【可选】图片显示的高度，如果需要一行显示更多的图片，可设置更小的数字。默认为 。 |
| limit | 【可选】每次加载多少张照片。默认为 。 |
远程
| 参数名 | 释义 |
|---|---|
| url | 【必须】 识别词 |
| link | 【必须】远程的 json 链接 |
| lazyload | 【可选】点击按钮加载更多图片，填写 true/false。默认为 。 |
| rowHeight | 【可选】图片显示的高度，如果需要一行显示更多的图片，可设置更小的数字。默认为 。 |
| limit | 【可选】每次加载多少张照片。默认为 。 |
远程链接 Json 的例子
有三个参数，是必须存在的， 和 可有，也可没有。
示例
- gallerygroup 相册图库
</div>
- gallery 相册
对于很多同学提问的和相册页的链接问题。这里说下我个人的使用习惯。 一般使用相册图库的话，可以在导航栏加一个 gallery 的 page(使用指令添加)，里面放相册图库作为封面。然后在下面建立相应的文件夹，例如若按照这里的示例，若欲使用路径访问 MC 相册，则需要新建，并在里面填入相册内容。
注意 ⚠️：本站相册集为单独优化，可参考配置相册页面。
gallerygroup 相册图库
<div class="gallery-group-main"> {% galleryGroup MC 在Rikkaの六花服务器里留下的足迹 '/wordScenery/' https://bu.dusays.com/2023/06/01/64788f24d05bd.webp %} {% galleryGroup Gundam 哦咧哇gundam哒！ '/thousand/' https://bu.dusays.com/2023/06/01/64788f456fc3d.webp %} {% galleryGroup I-am-Akilar 某种意义上也算自拍吧 '/wallpaper/' https://bu.dusays.com/2023/06/01/64788f83e5fa1.webp %} </div>gallery 相册
{% gallery true,,2 %}         {% endgallery %}
tag-hide
如果你想把一些文字、内容隐藏起来，并提供按钮让用户点击显示。可以使用这个标签外挂。 请注意，tag-hide内的标签外挂content内都不建议有h1 - h6 等标题。因为Toc会把隐藏内容标题也显示出来，而且当滚动屏幕时，如果隐藏内容没有显示出来，会导致Toc的滚动出现异常。
inline
在文本里面添加按钮隐藏内容，只限文字
( content不能包含英文逗号，可用)
content: 文本内容
display: 按钮显示的文字(可选)
bg: 按钮的背景颜色(可选)
color: 按钮文字的颜色(可选)
Demo
哪个英文字母最酷？
门里站着一个人?
Block
独立的block隐藏内容，可以隐藏很多内容，包括图片，代码块等等
( display 不能包含英文逗号，可用)
content: 文本内容
display: 按钮显示的文字(可选)
bg: 按钮的背景颜色(可选)
color: 按钮文字的颜色(可选)
Demo
查看答案
傻子，怎么可能有答案
Toggle
如果你需要展示的内容太多，可以把它隐藏在收缩框里，需要时再把它展开。
( display 不能包含英文逗号，可用)
Demo
在你的博客根目录里
git clone -b master https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git themes/anzhiyu
如果想要安装比较新的dev分支，可以
git clone -b dev https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git themes/anzhiyu
链接卡片 link
单选列表 radio
标签语法
配置参数
- 颜色: red,yellow,green,cyan,blue,gray
- 选中状态: checked
样式预览
示例源码
上标标签 tip
主要样式参考自小康的 butterfly 渐变背景标签
标签语法
配置参数
- 样式: success,error,warning,bolt,ban,home,sync,cogs,key,bell
- 自定义图标: 支持 fontawesome。
样式预览
default
info
success
error
warning
bolt
ban
home
sync
cogs
key
bell
自定义 font awesome 图标
示例源码
Note (Bootstrap Callout)
通用配置
修改主题配置文件
标签外挂有两种用法。和只对方法一生效。
图标需开启主题配置文件中
语法格式
配置参数
| 参数 | 用法 |
|---|---|
| class | 【可选】标识，不同的标识有不同的配色 （ default / primary / success / info / warning / danger ） |
| no-icon | 【可选】不显示 icon |
| style | 【可选】可以覆盖配置中的 style （simple/modern/flat/disabled） |
| 参数 | 用法 |
|---|---|
| class | 【可选】标识，不同的标识有不同的配色 （ default / blue / pink / red / purple / orange / green ） |
| no-icon | 【可选】可配置自定义 icon (支持 fontawesome 图标和主题内置的阿里图标,图标需开启主题配置文件中, 也可以配置 no-icon ) |
| style | 【可选】可以覆盖配置中的 style （simple/modern/flat/disabled） |
样式预览
- 样式
默认 提示块标签
default 提示块标签
primary 提示块标签
success 提示块标签
info 提示块标签
warning 提示块标签
danger 提示块标签
- 样式
默认 提示块标签
default 提示块标签
primary 提示块标签
success 提示块标签
info 提示块标签
warning 提示块标签
danger 提示块标签
- 样式
默认 提示块标签
default 提示块标签
primary 提示块标签
success 提示块标签
info 提示块标签
warning 提示块标签
danger 提示块标签
- 样式
默认 提示块标签
default 提示块标签
primary 提示块标签
success 提示块标签
info 提示块标签
warning 提示块标签
danger 提示块标签
- 样式
默认 提示块标签
default 提示块标签
primary 提示块标签
success 提示块标签
info 提示块标签
warning 提示块标签
danger 提示块标签
图标支持 和 ，使用方法为加上对应的类名，图标需开启主题配置文件中，默认未开启 fontawesome
- simple 样式
你是刷 Visa 还是 UnionPay
2022 年快到了....
小心开车 安全至上
这是三片呢？还是四片？
你是刷 Visa 还是 UnionPay
剪刀石头布
前端最讨厌的浏览器
，开启主题配置文件中的为后可见
你是刷 Visa 还是 UnionPay
2022 年快到了....
小心开车 安全至上
这是三片呢？还是四片？
你是刷 Visa 还是 UnionPay
剪刀石头布
前端最讨厌的浏器
- modern 样式
你是刷 Visa 还是 UnionPay
2022 年快到了....
小心开车 安全至上
这是三片呢？还是四片？
你是刷 Visa 还是 UnionPay
剪刀石头布
前端最讨厌的浏览器
fontawesome 图标，开启主题配置文件中的icons.fontawesome为true后可见
你是刷 Visa 还是 UnionPay
2021 年快到了....
小心开车 安全至上
这是三片呢？还是四片？
你是刷 Visa 还是 UnionPay
剪刀石头布
前端最讨厌的浏览器
- flat 样式
你是刷 Visa 还是 UnionPay
2022 年快到了....
小心开车 安全至上
这是三片呢？还是四片？
你是刷 Visa 还是 UnionPay
剪刀石头布
前端最讨厌的浏览器
fontawesome 图标，开启主题配置文件中的icons.fontawesome为true后可见
你是刷 Visa 还是 UnionPay
2021 年快到了....
小心开车 安全至上
这是三片呢？还是四片？
你是刷 Visa 还是 UnionPay
剪刀石头布
前端最讨厌的浏览器
- disabled 样式
你是刷 Visa 还是 UnionPay
2022 年快到了....
小心开车 安全至上
这是三片呢？还是四片？
你是刷 Visa 还是 UnionPay
剪刀石头布
前端最讨厌的浏览器
fontawesome 图标，开启主题配置文件中的icons.fontawesome为true后可见
你是刷 Visa 还是 UnionPay
2021 年快到了....
小心开车 安全至上
这是三片呢？还是四片？
你是刷 Visa 还是 UnionPay
剪刀石头布
前端最讨厌的浏览器
- no-icon 样式
你是刷 Visa 还是 UnionPay
2021 年快到了....
小心开车 安全至上
这是三片呢？还是四片？
你是刷 Visa 还是 UnionPay
剪刀石头布
前端最讨厌的浏览器
示例源码
- 样式
- 样式
- 样式
- 样式
- 样式
图标支持 和 ，使用方法为加上对应的类名，图标需开启主题配置文件中，默认未开启 fontawesome
- simple 样式
```markdown
你是刷 Visa 还是 UnionPay
2022 年快到了....
小心开车 安全至上
这是三片呢？还是四片？
你是刷 Visa 还是 UnionPay
剪刀石头布
前端最讨厌的浏览器
```
<p><code>fontawesome 图标</code>，开启主题配置文件中的<code>icons.fontawesome</code>为<code>true</code>后可见</p>
```markdown
你是刷 Visa 还是 UnionPay
2022 年快到了....
小心开车 安全至上
这是三片呢？还是四片？
你是刷 Visa 还是 UnionPay
剪刀石头布
前端最讨厌的浏览器
```
- modern 样式
```markdown
你是刷 Visa 还是 UnionPay
2022 年快到了....
小心开车 安全至上
这是三片呢？还是四片？
你是刷 Visa 还是 UnionPay
剪刀石头布
前端最讨厌的浏览器
```
<p><code>fontawesome 图标</code>，开启主题配置文件中的<code>icons.fontawesome</code>为<code>true</code>后可见</p>
```markdown
你是刷 Visa 还是 UnionPay
2021 年快到了....
小心开车 安全至上
这是三片呢？还是四片？
你是刷 Visa 还是 UnionPay
剪刀石头布
前端最讨厌的浏览器
```
- flat 样式
```markdown
你是刷 Visa 还是 UnionPay
2022 年快到了....
小心开车 安全至上
这是三片呢？还是四片？
你是刷 Visa 还是 UnionPay
剪刀石头布
前端最讨厌的浏览器
```
<p><code>fontawesome 图标</code>，开启主题配置文件中的<code>icons.fontawesome</code>为<code>true</code>后可见</p>
```markdown
你是刷 Visa 还是 UnionPay
2021 年快到了....
小心开车 安全至上
这是三片呢？还是四片？
你是刷 Visa 还是 UnionPay
剪刀石头布
前端最讨厌的浏览器
```
- disabled 样式
```markdown
你是刷 Visa 还是 UnionPay
2022 年快到了....
小心开车 安全至上
这是三片呢？还是四片？
你是刷 Visa 还是 UnionPay
剪刀石头布
前端最讨厌的浏览器
```
<p><code>fontawesome 图标</code>，开启主题配置文件中的<code>icons.fontawesome</code>为<code>true</code>后可见</p>
```markdown
你是刷 Visa 还是 UnionPay
2021 年快到了....
小心开车 安全至上
这是三片呢？还是四片？
你是刷 Visa 还是 UnionPay
剪刀石头布
前端最讨厌的浏览器
```
- no-icon 样式 ```markdown
你是刷 Visa 还是 UnionPay
2021 年快到了....
小心开车 安全至上
这是三片呢？还是四片？
你是刷 Visa 还是 UnionPay
剪刀石头布
前端最讨厌的浏览器
```
音频 audio
标签语法
样式预览
示例源码
视频 video
标签语法
参数配置
- 对其方向：left, center, right
- 列数：逗号后面直接写列数，支持 1 ～ 4 列。
样式预览
- 100%宽度
- 50%宽度
- 25%宽度
示例源码
- 100%宽度
- 50%宽度
- 25%宽度