主题标签 Tag Plugins
Solitude 主题
Plugin Tags 部分移植来自店长的 hexo-butterfly-tag-plugins-plus,转载请注明出处。
使用方法和配置项基本相同
music标签
1 | {% music 标题,作者,链接,封面,歌词 %} |
1 | {% music 贫道,刘心,https://music.163.com/song/media/outer/url?id=1889956929.mp3,https://p2.music.126.net/vCtY0DD0Z9PEmiCvn0Dxig==/109951166557423224.jpg?param=300y300, %} |
按钮 btn
1 | {% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %} |
参数 | 含义 |
---|---|
url | 链接 |
text | 按钮文字 |
icon | [可选] 图标 |
color | [可选] 按钮背景顔色(默认 style 时)按钮字体和边框顔色(outline 时)default/blue/pink/red/purple/orange/green |
layout | [可选] 按钮佈局 默认为 line block/留空 |
position | [可选] 按钮位置 前提是设置了 layout 为 block 默认为左边 center/right/留空 |
size | [可选] 按钮大小 larger/留空 |
一组按钮
This is my website, click the btn
This is my website, click the btn
This is my website, click the btn
This is my website, click the btn
This is my website, click the btn
调整位置或大小
more than one btn in center
居中按钮
1 | > 一组按钮 |
单张图片 image
1 | {% image 链接, width=宽度(可选), height=高度(可选), alt=描述(可选), bg=占位颜色(可选) %} |
- 图片宽度高度:width=300px, height=32px
- 图片描述:alt=图片描述
- 占位背景色:bg=#f2f2f2
添加描述
指定宽度
设置占位背景色
1 | > 添加描述 |
行内图片 inlineimage
1 | {% inlineimage 图片链接, height=高度(可选) %} |
- 高度:height=20px
这是 一段话。
这又是 一段话。
1 | 这是 {% inlineimage https://bu.dusays.com/2023/06/01/647895232e5d5.webp %} 一段话。 |
label 标签
1 | {% label text color %} |
参数 | 释义 |
---|---|
text | 文字 |
color | 【可选】背景颜色,默认为 default,default/blue/pink/red/purple/orange/green |
臣亮言: 创业未半,而 。今天下三分, ,此诚 也!然侍衞之臣,不懈于内; ,忘身于外者,盖追先帝之殊遇,欲报之于陛下也。诚宜开张圣听,以光先帝遗德,恢弘志士之气;不宜妄自菲薄,引喻失义,以塞忠谏之路也。
宫中、府中,俱为一体;陟罚臧否,不宜异同。若有 、 ,及为忠善者,宜付有司,论其刑赏,以昭陛下平明之治;不宜偏私,使内外异法也。
1 | 臣亮言:{% label 先帝 %}创业未半,而{% label 中道崩殂 blue %}。今天下三分,{% label 益州疲敝 pink %},此诚{% label 危急存亡之秋 red %}也!然侍衞之臣,不懈于内;{% label 忠志之士 purple %},忘身于外者,盖追先帝之殊遇,欲报之于陛下也。诚宜开张圣听,以光先帝遗德,恢弘志士之气;不宜妄自菲薄,引喻失义,以塞忠谏之路也。 |
直链音频 audio
1 | {% audio 音频链接 %} |
1 | {% audio 音频链接 %} |
直链视频 video
1 | {% video 视频链接 %} |
- 对其方向:left, center, right
- 列数:逗号后面直接写列数,支持 1 ~ 4 列。
默认
50% 宽度
25 %
1 | > 默认 |
段落文本 p
1 | {% p 样式参数(参数以空格划分), 文本内容 %} |
- 字体: logo, code
- 颜色: red,yellow,green,cyan,blue,gray
- 大小: small, h4, h3, h2, h1, large, huge, ultra
- 对齐方向: left, center, right
red left
yellow center
green right
center h1
center ultra
1 |
|
Note (Bootstrap Callout)
1 | {% note [class] %} |
参数 | 含义 |
---|---|
class | 显示值 |
显示值:(中间空格)
- 配色
- default / primary / success / info / warning / danger
- 样式
- simple / modern / flat / disabled
- 图标
- noicon
默认样式
Demo 1 - default
Simple 样式
Demo 1 - default
Demo 2 - primary
Demo 3 - success
Demo 4 - info
Demo 5 - warning
Demo 6 - danger
Modern 样式
Demo 1 - default
Demo 2 - primary
Demo 3 - success
Demo 4 - info
Demo 5 - warning
Demo 6 - danger
Flat 样式
Demo 1 - default
Demo 2 - primary
Demo 3 - success
Demo 4 - info
Demo 5 - warning
Demo 6 - danger
Disabled 样式
Demo 1 - default
Demo 2 - primary
Demo 3 - success
Demo 4 - info
Demo 5 - warning
Demo 6 - danger
1 | 默认样式: |
分栏 tabs
分栏支持内置codesign图标,如果开启了 customicon 则可以使用自定义的图标,否则只能使用默内置codesign图标
1 | {% tabs Unique name, [index] %} |
- Unique name:不带逗号的选项卡块标记的唯一名称。
- 将在 #id 中用作每个选项卡及其索引号的前缀。
- 如果名称中有空格,则对于生成 #id 所有空格都将替换为破折号。
- 仅帖子/页面的当前网址必须是唯一的!
- [index]:活动选项卡的索引号。
- 如果未指定,将选择第一个选项卡 (1)。
- 如果 index 为 -1,则不选择任何选项卡。这将是剧透。
- 可选参数。
- [Tab caption]:当前选项卡的标题。
- 如果未指定标题,则带有选项卡索引后缀的唯一名称将用作选项卡的标题。
- 如果未指定标题,但指定了图标,则标题将为空。
- 可选参数。
- [@icon]:图标名称(全名,例如“solitude st-logo”)
- 可以指定有或没有空格;例如,“Tab caption @icon”类似于“Tab caption@icon”。
- 可选参数。
Demo 1 - 预设选择第一个【默认】
This is Tab 1.
This is Tab 2.
This is Tab 3.
Demo 2 - 没有预设值
This is Tab 1.
This is Tab 2.
This is Tab 3.
Demo 3 - 自定义Tab名 + icon + Tab名和icon
This is Tab 1.
This is Tab 2.
This is Tab 3.
Demo 1 - 预设选择第一个【默认】
1 |
|
Demo 2 - 没有预设值
1 | {% subtabs Demo2 %} |
Demo 3 - 自定义Tab名 + icon + Tab名和icon
1 | {% subtabs Demo3 %} |
时间轴 Timelne
1 | {% timeline title %} |
参数 | 含义 |
---|---|
title | 节点名称 |
xxxx | 内容区 |
- 你好
- 你好
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio dolores eaque est ex voluptatum. Consequuntur
eligendi esse fugit quasi ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad amet animi assumenda atque consequatur, doloribus eligendi
est excepturi facere molestias nam, omnis perspiciatis quas, repellendus sit. Ipsum, rem, velit?
1 | {% timeline %} |
外链 link
1 | {% link [title],[subtitle],[link] %} |
参数 | 含义 |
---|---|
title | 标题 |
subtitle | 简介 |
link | 跳转链接 |
1 | {% link Solitude,官方文档地址,https://solitude-docs.efu.me/ %} |
折叠块 fold
1 | {% fold title open %} |
参数 | 含义 |
---|---|
title | 标题(可选) |
oepn | 是否打开(可选)不填默认不打开 |
Demo 1 - title
Demo1
Demo 2 - title + open
Demo2
Demo 1 - title
1 | {% fold Demo1 %} |
Demo 2 - title + open
1 | {% fold Demo2 open %} |
bvideo 视频播放
1 | {% bvideo [id] [time] %} |
参数 | 含义 |
---|---|
url | bvid(例如视频链接后的:BV1nj411i7Ja) |
1 | {% bvideo BV1nj411i7Ja %} |
复选列表 checkbox
1 | {% checkbox 样式参数(可选), 文本内容 %} |
- 样式: plus, minus, times
- 颜色: red,yellow,green,cyan,blue,gray
- 选中状态: checked
1 | {% checkbox 纯文本测试 %} |
mermaid 图
使用mermaid标签
可以绘制Flowchart(流程图)、Sequence diagram(时序图 )、Class Diagram(类别图)、State Diagram(状态图)、Gantt(甘特图)和Pie Chart(圆形图),具体可以查看mermaid文档
如果使用了 gulp 一定要关闭使用过 mermaid 的页面,具体看文档详情
- 打开主题配置文件中的开关
1 | mermaid: true |
1 | {% mermaid %} |
1 | {% mermaid %} |
gallery 图库
1 | {% gallery 图库 图库简介 链接 图片 %} |
相册
相册内容页
1 | {% mermaid %} |
- 感谢您的赞赏。