主题标签 Tag Plugins
Solitude 主题
Plugin Tags 部分移植来自店长的 hexo-butterfly-tag-plugins-plus,转载请注明出处。
使用方法和配置项基本相同
卡片 card
1 | {% card icon,color,title %} |
参数 | 含义 |
---|---|
color | red,green,blue,yellow,purple,cyan |
icon | 图标, no-icon |
title | 标题 |
lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, accusantium ad adipisci alias
lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, accusantium ad adipisci alias
lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, accusantium ad adipisci alias
1 | {% card no-icon,green,title %} |
按钮 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 button
This is my website, click the button
This is my website, click the button
This is my website, click the button
This is my website, click the button
调整位置或大小
more than one button 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 text red %} |
单选列表 radio
1 | {% radio 样式参数(可选), 文本(支持简单md) %} |
- 颜色: red,yellow,green,cyan,blue,gray
- 选中状态: checked
1 | {% radio 纯文本测试 %} |
直链音频 audio
1 | {% audio 音频链接 %} |
1 | {% audio 音频链接 %} |
直链视频 video
1 | {% video 视频链接 %} |
- 对其方向:left, center, right
- 列数:逗号后面直接写列数,支持 1 ~ 4 列。
默认
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,所有空格将由破折号代替。
- 仅当前帖子/页面的 URL 必须是唯一的!
[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 - 没有预设值
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://docs.wzsco.top/ %} |
折叠块 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 %} |
bilibili 视频播放
1 | {% bilibili [id] [time] %} |
参数 | 含义 |
---|---|
url | 视频嵌入链接(例如://player.bilibili.com/player.html?aid=450061422&bvid=BV1nj411i7Ja&cid=1310680043&p=1) |
1 | {% bilibili //player.bilibili.com/player.html?aid=450061422&bvid=BV1nj411i7Ja&cid=1310680043&p=1 %} |
- 感谢你赐予我前进的力量