hexo备忘录
常用指令
hexo cl
清理文件hexo g
生成静态文件hexo d
部署博客hexo s
启动本地服务hexo n 标题
创建一篇文章hexo new page 标题
创建一个新页面
1 | title: # 网站标题 |
1 | --- |
写法 | 解释 |
---|---|
title | 【必需】文章标题 |
date | 【必需】文章创建日期 |
updated | 【可选】文章更新日期 |
tags | 【可选】文章标籤 |
categories | 【可选】文章分类 |
keywords | 【可选】文章关键字 |
description | 【可选】文章描述 |
top_img | 【可选】文章顶部图片 |
cover | 【可选】文章缩略图(如果没有设置top_img,文章页顶部将显示缩略图,可设为false/图片地址/留空) |
comments | 【可选】显示文章评论模块(默认 true) |
toc | 【可选】显示文章TOC(默认为设置中toc的enable配置) |
toc_number | 【可选】显示toc_number(默认为设置中toc的number配置) |
toc_style_simple | 【可选】显示 toc 简洁模式 |
copyright | 【可选】显示文章版权模块(默认为设置中post_copyright的enable配置) |
copyright_author | 【可选】文章版权模块的文章作者 |
copyright_author_href | 【可选】文章版权模块的文章作者链接 |
copyright_url | 【可选】文章版权模块的文章连结链接 |
copyright_info | 【可选】文章版权模块的版权声明文字 |
mathjax | 【可选】显示mathjax(当设置mathjax的per_page: false时,才需要配置,默认 false) |
katex | 【可选】显示katex(当设置katex的per_page: false时,才需要配置,默认 false) |
aplayer | 【可选】在需要的页面加载aplayer的js和css,请参考文章下面的音乐 配置 |
highlight_shrink | 【可选】配置代码框是否展开(true/false)(默认为设置中highlight_shrink的配置) |
aside | 【可选】显示侧边栏 (默认 true) |
1 | --- |
写法 | 解释 |
---|---|
title | 【必需】页面标题 |
date | 【必需】页面创建日期 |
type | 【必需】标籤、分类和友情链接三个页面需要配置 |
updated | 【可选】页面更新日期 |
description | 【可选】页面描述 |
keywords | 【可选】页面关键字 |
comments | 【可选】显示页面评论模块(默认 true) |
top_img | 【可选】页面顶部图片 |
mathjax | 【可选】显示mathjax(当设置mathjax的per_page: false时,才需要配置,默认 false) |
katex | 【可选】显示katex(当设置katex的per_page: false时,才需要配置,默认 false) |
aside | 【可选】显示侧边栏 (默认 true) |
aplayer | 【可选】在需要的页面加载aplayer的js和css,请参考文章下面的音乐 配置 |
highlight_shrink | 【可选】配置代码框是否展开(true/false)(默认为设置中highlight_shrink的配置) |
<
行内样式文本 text
1 | {% u 文本内容 %} |
- 带 下划线 的文本
- 带
着重号 的文本 - 带
波浪线 的文本 - 带
删除线的文本 - 键盘样式的文本 command + D
- 密码样式的文本:
这里没有验证码
1 | 1. 带 {% u 下划线 %} 的文本 |
行内文本 span
1 | {% p 样式参数(参数以空格划分), 文本内容 %} |
- 字体: logo, code
- 颜色: red,yellow,green,cyan,blue,gray
- 大小: small, h4, h3, h2, h1, large, huge, ultra
- 对齐方向: left, center, right
- 彩色文字
在一段话中方便插入各种颜色的标签,包括:红色
、黄色
、绿色
、青色
、蓝色
、灰色
。 - 超大号文字
文档「开始」页面中的标题部分就是超大号文字。Volantis
A Wonderful Theme for Hexo
1 | - 彩色文字 |
段落文本 p
1 |
1 |
引用 note
内置图标
内置图标
修改主题配置文件
1
2
3
4
5
6
7
8
9
10
11
12note:
# Note tag style values:
# - simple bs-callout old alert style. Default.
# - modern bs-callout new (v2-v3) alert style.
# - flat flat callout style with background, like on Mozilla or StackOverflow.
# - disabled disable all CSS styles import of note tag.
style: simple
icons: false
border_radius: 3
# Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
# Offset also applied to label tag variables. This option can work with disabled note tag.
light_bg_offset: 0icons
和light_bg_offset
只对方法一生效1
2
3{% note [class] [no-icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}
名称|用法
-|-
class|【可选】标识,不同的标识有不同的配色( default / primary / success / info / warning / danger )
icon|【可选】不显示 icon
style|【可选】可以覆盖配置中的 style(simple/modern/flat/disabled)
1 | {% note simple %} |
默认 提示块标籤
default 提示块标籤
primary 提示块标籤
success 提示块标籤
info 提示块标籤
warning 提示块标籤
danger 提示块标籤
1 | {% note modern %} |
默认 提示块标籤
default 提示块标籤
primary 提示块标籤
success 提示块标籤
info 提示块标籤
warning 提示块标籤
danger 提示块标籤
1 | {% note flat %} |
默认 提示块标籤
default 提示块标籤
primary 提示块标籤
success 提示块标籤
info 提示块标籤
warning 提示块标籤
danger 提示块标籤
1 | {% note disabled %} |
默认 提示块标籤
default 提示块标籤
primary 提示块标籤
success 提示块标籤
info 提示块标籤
warning 提示块标籤
danger 提示块标籤
1 | {% note no-icon %} |
自定义图标
1 | {% note 'fab fa-cc-visa' simple %} |
你是刷 Visa 还是是 UnionPay
2021 年快到了….
小心开车 安全至上
这是三片呢?还是四片?
该充电了哦!
剪刀石头布
前端最讨厌的浏览器
1 | {% note 'fab fa-cc-visa' modern %} |
你是刷 Visa 还是是 UnionPay
2021 年快到了….
小心开车 安全至上
这是三片呢?还是四片?
该充电了哦!
剪刀石头布
前端最讨厌的浏览器
1 | {% note 'fab fa-cc-visa' flat %} |
你是刷 Visa 还是是 UnionPay
2021 年快到了….
小心开车 安全至上
这是三片呢?还是四片?
该充电了哦!
剪刀石头布
前端最讨厌的浏览器
1 | {% note 'fab fa-cc-visa' disabled %} |
你是刷 Visa 还是是 UnionPay
2021 年快到了….
小心开车 安全至上
这是三片呢?还是四片?
该充电了哦!
剪刀石头布
前端最讨厌的浏览器
1 | {% note no-icon %} |
上标标签 tip
1 | {% tip [参数,可选] %}文本内容{% endtip %} |
- 样式: 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图标
1 | {% tip %}default{% endtip %} |
动态标签 anima
1 | {% tip [参数,可选] %}文本内容{% endtip %} |
更多详情请参看font-awesome-animation文档
- 将所需的CSS类添加到图标(或DOM中的任何元素)。
- 对于父级悬停样式,需要给目标元素添加指定CSS类,同时还要给目标元素的父级元素添加CSS类
faa-parent animated-hover
。(详情见示例及示例源码)
You can regulate the speed of the animation by adding the CSS class or . faa-fastfaa-slow - 可以通过给目标元素添加CSS类
faa-fast
或faa-slow
来控制动画快慢。
On DOM load(当页面加载时显示动画)
warning
ban
调整动画速度
warning
ban
On hover(当鼠标悬停时显示动画)
warning
ban
On parent hover(当鼠标悬停在父级元素时显示动画)
warning
ban
- On DOM load(当页面加载时显示动画)
1
2{% tip warning faa-horizontal animated %}warning{% endtip %}
{% tip ban faa-flash animated %}ban{% endtip %} - 调整动画速度
1
2{% tip warning faa-horizontal animated faa-fast %}warning{% endtip %}
{% tip ban faa-flash animated faa-slow %}ban{% endtip %} - On hover(当鼠标悬停时显示动画)
1
2{% tip warning faa-horizontal animated-hover %}warning{% endtip %}
{% tip ban faa-flash animated-hover %}ban{% endtip %} - On parent hover(当鼠标悬停在父级元素时显示动画)
1
2{% tip warning faa-parent animated-hover %}<p class="faa-horizontal">warning</p>{% endtip %}
{% tip ban faa-parent animated-hover %}<p class="faa-flash">ban</p>{% endtip %}
复选列表 checkbox
1 | {% checkbox 样式参数(可选), 文本(支持简单md) %} |
- 样式: plus, minus, times
- 颜色: red,yellow,green,cyan,blue,gray
- 选中状态: checked
1 | {% checkbox 纯文本测试 %} |
单选列表 radio
1 | {% radio 样式参数(可选), 文本(支持简单md) %} |
- 颜色: red,yellow,green,cyan,blue,gray
- 选中状态: checked
1 | {% radio 纯文本测试 %} |
时间轴 timeline
1 | {% timeline 时间线标题(可选)[,color] %} |
参数 | 解释 |
---|---|
title | 标题/时间线 |
color | timeline颜色:default(留空) / blue / pink / red / purple / orange / green |
时间轴样式
2020-07-24 2.6.6 -> 3.0
- 如果有
hexo-lazyload-image
插件,需要删除并重新安装最新版本,设置lazyload.isSPA: true
。 - 2.x 版本的 css 和 js 不适用于 3.x 版本,如果使用了
use_cdn: true
则需要删除。 - 2.x 版本的 fancybox 标签在 3.x 版本中被重命名为 gallery 。
- 2.x 版本的置顶
top: true
改为了pin: true
,并且同样适用于layout: page
的页面。 - 如果使用了
hexo-offline
插件,建议卸载,3.0 版本默认开启了 pjax 服务。
2020-05-15 2.6.3 -> 2.6.6
不需要额外处理。
2020-04-20 2.6.2 -> 2.6.3
- 全局搜索
seotitle
并替换为seo_title
。 - group 组件的索引规则有变,使用 group 组件的文章内,
group: group_name
对应的组件名必须是group_name
。 - group 组件的列表名优先显示文章的
short_title
其次是title
。
1 | {% timeline 时间轴样式,blue %} |
链接卡片 link
1 | {% link 标题, 链接, 图片链接(可选) %} |
1 | {% link 下雨天不打伞, https://zkkk123.cn, /img/avatar.jpg %} |
按钮 btn
1 | This is my website, click the button {% btn 'https://butterfly.js.org',Butterfly %} |
This is my website, click the button Butterfly
This is my website, click the button Butterfly
1 | This is my website, click the button {% btn 'https://butterfly.js.org',Butterfly,far fa-hand-point-right,block larger %} |
This is my website, click the button Butterfly
This is my website, click the button Butterfly
This is my website, click the button Butterfly
1 | <div class="btn-center"> |
1 | <div class="btn-center"> |
1 | {% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %} |
按钮 btns
1 | {% btns 样式参数 %} |
- , circle
- 增加文字样式:可以在容器内增加 标题和
描述文字
布局方式: - 默认为自动宽度,适合视野内只有一两个的情况。
参数 | 含义 |
---|---|
wide | 宽一点的按钮 |
fill | 填充布局,自动铺满至少一行,多了会换行 |
center | 居中,按钮之间是固定间距 |
around | 居中分散 |
grid2 | 等宽最多2列,屏幕变窄会适当减少列数 |
grid3 | 等宽最多3列,屏幕变窄会适当减少列数 |
grid4 | 等宽最多4列,屏幕变窄会适当减少列数 |
grid5 | 等宽最多5列,屏幕变窄会适当减少列数 |
如果需要显示类似「团队成员」之类的一组含有头像的链接:
或者含有图标的按钮:
圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中
如果需要显示类似「团队成员」之类的一组含有头像的链接:
1
2
3
4
5
6
7{% btns circle grid5 %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% endbtns %}或者含有图标的按钮:
1
2
3
4{% btns rounded grid5 %}
{% cell 下载源码, /, fas fa-download %}
{% cell 查看文档, /, fas fa-book-open %}
{% endbtns %}圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中
1
2
3
4
5
6
7
8
9
10
11
12
13{% btns circle center grid5 %}
<a href='https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1'>
<i class='fab fa-apple'></i>
<b>心率管家</b>
{% p red, 专业版 %}
<img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_pro.png'>
</a>
<a href='https://apps.apple.com/cn/app/heart-mate-lite-hrm-utility/id1475747930?ls=1'>
<i class='fab fa-apple'></i>
<b>心率管家</b>
{% p green, 免费版 %}
<img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_lite.png'>
</a>
github卡片 ghcard
1 | {% ghcard 用户名, 其它参数(可选) %} |
更多参数可以参考:
使用,分割各个参数。写法为:参数名=参数值
以下只写几个常用参数值。
参数名 | 取值 | 释义 |
---|---|---|
hide | stars,commits,prs,issues,contribs | 隐藏指定统计 |
count_private | true | 将私人项目贡献添加到总提交计数中 |
show_icons | true | 显示图标 |
theme | 请查阅Available Themes | 主题 |
用户信息卡片
1
2
3
4
5| {% ghcard xaoxuu %} | {% ghcard xaoxuu, theme=vue %} |
| -- | -- |
| {% ghcard xaoxuu, theme=buefy %} | {% ghcard xaoxuu, theme=solarized-light %} |
| {% ghcard xaoxuu, theme=onedark %} | {% ghcard xaoxuu, theme=solarized-dark %} |
| {% ghcard xaoxuu, theme=algolia %} | {% ghcard xaoxuu, theme=calm %} |仓库信息卡片
1
2
3
4
5| {% ghcard volantis-x/hexo-theme-volantis %} | {% ghcard volantis-x/hexo-theme-volantis, theme=vue %} |
| -- | -- |
| {% ghcard volantis-x/hexo-theme-volantis, theme=buefy %} | {% ghcard volantis-x/hexo-theme-volantis, theme=solarized-light %} |
| {% ghcard volantis-x/hexo-theme-volantis, theme=onedark %} | {% ghcard volantis-x/hexo-theme-volantis, theme=solarized-dark %} |
| {% ghcard volantis-x/hexo-theme-volantis, theme=algolia %} | {% ghcard volantis-x/hexo-theme-volantis, theme=calm %} |
github徽标 ghbdage
1 | {% 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{% bdage Theme,Butterfly %}
{% bdage Frame,Hexo,hexo %}信息参数
1
2
3{% bdage CDN,JsDelivr,jsDelivr||abcdef,https://metroui.org.ua/index.html,本站使用JsDelivr为静态资源提供CDN加速 %}
//如果是跨顺序省略可选参数,仍然需要写个逗号,用作分割
{% bdage Source,GitHub,GitHub||,https://github.com/ %}拓展参数
1
2
3{% bdage Hosted,Vercel,Vercel||brightgreen,https://vercel.com/,本站采用双线部署,默认线路托管于Vercel||style=social&logoWidth=20 %}
//如果是跨顺序省略可选参数组,仍然需要写双竖线||用作分割
{% bdage Hosted,Vercel,Vercel||||style=social&logoWidth=20&logoColor=violet %}
网站卡片 sites
1 | {% sitegroup %} |
1 | {% sitegroup %} |
行内图片 inlineimage
1 | {% inlineimage 图片链接, height=高度(可选) %} |
- 高度:height=20px
这是 一段话。
这又是 一段话。
1 | 这是 {% inlineimage https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/0000.gif %} 一段话。 |
单张图片 image
1 | {% image 链接, width=宽度(可选), height=高度(可选), alt=描述(可选), bg=占位颜色(可选) %} |
- 图片宽度高度:width=300px, height=32px
- 图片描述:alt=图片描述(butterfly需要在主题配置文件中开启图片描述)
- 占位背景色:bg=#f2f2f2
添加描述:
指定宽度:
指定宽度并添加描述:
设置占位背景色:
添加描述:
1
{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, alt=每天下课回宿舍的路,没有什么故事。 %}
指定宽度:
1
{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px %}
指定宽度并添加描述:
1
{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px, alt=每天下课回宿舍的路,没有什么故事。 %}
设置占位背景色:
1
{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px, bg=#1D0C04, alt=优化不同宽度浏览的观感 %}
音频 audio
1 | {% audio 音频链接 %} |
1 | <audio controls="" preload="" __idm_id__="269361153"> |
嵌入自适应B站视频
key | 说明 |
---|---|
aid | 之前 B 站使用的 AV 号 |
bvid | 目前的 BV 号 |
page | 第几个视频, 起始下标为 1 (默认值也是为 1)就是 B 站视频, 选集里的, 第几个视频 |
as_wide | 是否宽屏 【1: 宽屏, 0: 小屏】 |
high_quality | 是否高清 【1: 高清(最高1080p) / 0: 最低视频质量(默认)】 |
danmaku | 是否开启弹幕 【1: 开启(默认), 0: 关闭】 |
1 | <div style="position: relative; padding: 30% 45%;"> |
视频 video
1 | {% video 视频链接 %} |
- 对其方向:left, center, right
- 列数:逗号后面直接写列数,支持 1 ~ 4 列。
100% 宽度
50% 宽度
25% 宽度
- 100% 宽度
1
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
- 50% 宽度
1
2
3
4
5
6{% videos, 2 %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% endvideos %} - 25% 宽度
1
2
3
4
5
6
7
8
9
10{% videos, 4 %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% endvideos %}
相册 gallary
Butterfly自带gallery相册,而且会根据图片大小自动调整排版,效果比Volantis的gallery更好,故不再收录Volantis的gallery标签。
以下为Butterfly自带的gallery标签写法。相册图库和相册配合使用。
- gallerygroup 相册图库
1
2
3
4
5<div class="gallery-group-main">
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
</div> - gallery 相册
1
2
3{% gallery %}
markdown 圖片格式
{% endgallery %}
- gallerygroup 相册图库
参数名 |释义
-|-
name |图库名字
description |图库描述
link |链接到对应相册的地址
img-url |图库封面思维拓展一下,相册图库的实质其实就是个快捷方式,可以自定义添加描述、封面、链接。那么我们未必要把它当做一个相册,完全可以作为一个链接卡片,链接到视频、QQ、友链都是不错的选择。
- gallery 相册
区别于旧版的Gallery相册,新的Gallery相册会自动根据图片长度进行排版,书写也更加方便,与markdown格式一样。可根据需要插入到相应的md。无需再自己配置长宽。建议在粘贴时故意使用长短、大小、横竖不一的图片,会有更好的效果。(尺寸完全相同的图片只会平铺输出,效果很糟糕)
- gallerygroup 相册图库
- gallery 相册
对于很多同学提问的 gallerygroup
和 gallery
相册页的链接问题。这里说下我个人的使用习惯。
一般使用相册图库的话,可以在导航栏加一个gallery的page(使用指令 hexo new page gallery
添加),里面放相册图库作为封面。然后在[Blogroot]/source/gallery/下面建立相应的文件夹,例如若按照这里的示例,若欲使用/gallery/壁纸/
路径访问壁纸相册,则需要新建[Blogroot]/source/gallery/MC/index.md
,并在里面填入gallery
相册内容。
gallerygroup 相册图库
1
2
3
4<div class="gallery-group-main">
{% galleryGroup '壁纸' '收藏的一些壁纸' '/images/wallpaper' https://s3.bmp.ovh/imgs/2022/10/21/e2f70d668441dd87.jpg %}
{% galleryGroup '日常' '关于日常的图片' '/images/daily' !https://s3.bmp.ovh/imgs/2022/10/21/604fc804c3dc29ed.jpg %}
</div>gallery 相册
1
2
3
4
5
6
7
8{% gallery %}
![](https://s3.bmp.ovh/imgs/2022/10/21/1ec5a40201abe7bd.jpg)
![](https://s3.bmp.ovh/imgs/2022/10/21/e2f70d668441dd87.jpg)
![](https://s3.bmp.ovh/imgs/2022/10/21/966d85c470185cc9.jpg)
![](https://s3.bmp.ovh/imgs/2022/10/21/b5abfc93b10a6701.jpg)
![](https://s3.bmp.ovh/imgs/2022/10/21/604fc804c3dc29ed.jpg)
![](https://s3.bmp.ovh/imgs/2022/10/21/fff599cb49a7b0b9.jpg)
{% endgallery %}
1 | <div class="gallery-group-main"> |
折叠框 folding
1 | {% folding 参数(可选), 标题 %} |
html语法格式1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72<details>
<summary>
<p>查看图片测试</p>
</summary>
<div class="content">
<p>
<img
src=https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/loading.gif
data-src="https://s3.bmp.ovh/imgs/2022/10/21/13af0161849ebb87.jpg"
alt="" />
</p>
</div>
</details>
<details cyan open>
<summary>
<p>查看默认打开的折叠框</p>
</summary>
<div class="content">
<p>这是一个默认打开的折叠框。</p>
</div>
</details>
<details green>
<summary>
<p>查看代码测试</p>
</summary>
<div class="content"></div>
</details>
<details yellow>
<summary>
<p>查看列表测试</p>
</summary>
<div class="content">
<ul>
<li>haha</li>
<li>hehe</li>
</ul>
</div>
</details>
<details red>
<summary>
<p>查看嵌套测试</p>
</summary>
<div class="content">
<details blue>
<summary>
<p>查看嵌套测试2</p>
</summary>
<div class="content">
<details>
<summary>
<p>查看嵌套测试3</p>
</summary>
<div class="content">
<p>
hahaha
<span
><img
src=https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/loading.gif
data-src='https://s3.bmp.ovh/imgs/2022/10/21/13af0161849ebb87.jpg'
style='height:24px'></span
>
</p>
</div>
</details>
</div>
</details>
</div>
</details>
参数位置可以填写颜色和状态,多个参数用空格隔开。
- 颜色
blue, cyan, green, yellow, red
- 状态
状态填写open
代表默认打开。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36{% folding 查看图片测试 %}
![](https://s3.bmp.ovh/imgs/2022/10/21/13af0161849ebb87.jpg)
{% endfolding %}
{% folding cyan open, 查看默认打开的折叠框 %}
这是一个默认打开的折叠框。
{% endfolding %}
{% folding green, 查看代码测试 %}
{% endfolding %}
{% folding yellow, 查看列表测试 %}
- haha
- hehe
{% endfolding %}
{% folding red, 查看嵌套测试 %}
{% folding blue, 查看嵌套测试2 %}
{% folding 查看嵌套测试3 %}
hahaha <span><img src='https://s3.bmp.ovh/imgs/2022/10/21/13af0161849ebb87.jpg' style='height:24px'></span>
{% endfolding %}
{% endfolding %}
{% endfolding %}查看图片测试
查看默认打开的折叠框
这是一个默认打开的折叠框。
查看代码测试
查看列表测试
- haha
- hehe
查看嵌套测试
查看嵌套测试2
查看嵌套测试3
hahaha
分栏 tab
tab名字为第一个Tab
只有图标 没有Tab名字
名字+icon
1 | {% tabs test2 %} |
数据集合 issue
诗词标签 poem
1 | {% poem [title],[author] %} |
- title:诗词标题
- author:作者,可以不写
丙辰中秋,欢饮达旦,大醉,作此篇,兼怀子由。
明月几时有?把酒问青天。
不知天上宫阙,今夕是何年?
我欲乘风归去,又恐琼楼玉宇,高处不胜寒。
起舞弄清影,何似在人间?
转朱阁,低绮户,照无眠。
不应有恨,何事长向别时圆?
人有悲欢离合,月有阴晴圆缺,此事古难全。
但愿人长久,千里共婵娟。
1 | {% poem 水调歌头,苏轼 %} |
阿里图标 icon
本标签的图标需要自己额外引入阿里矢量图标库的样式,具体引入方案请移步:Hexo引入阿里矢量图标库
特效标签 wow
进度条 progress
进度条标签参考沂佰孜猫-给HEXO文章添加彩色进度条。
源样式提取自Cuteen
主题。
1 | {% progress [width] [color] [text] %} |
width
: 0到100的阿拉伯数字color
: 颜色,取值有red,yellow,green,cyan,blue,graytext
:进度条上的文字内容
1 | {% progress 10 red 进度条样式预览 %} |
注释 notaction
1 | {% nota [label] , [text] %} |
label
: 注释词汇text
: 悬停显示的注解内容
把鼠标移动到我上面试试
1 | {% nota 把鼠标移动到我上面试试 ,可以看到注解内容出现在顶栏 %} |
气泡注释 bubble
1 | {% bubble [content] , [notation] ,[background-color] %} |
content
: 注释词汇notation
: 悬停显示的注解内容background
-color: 可选,气泡背景色。默认为“#71a4e3”
最近我学到了不少新玩意儿(虽然对很多大佬来说这些已经是旧技术了),比如CSS的兄弟相邻选择器 例如 h1 + p {margin-top:50px;}</span>,flex布局Flex 是 Flexible Box 的缩写,意为弹性布局”,用来为盒状模型提供最大的灵活性”</span>,transform变换 transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。</span>,animation的贝塞尔速度曲线贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋</span>写法,还有今天刚看到的clip-pathclip-path属性使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。</span>属性。这些对我来说很新颖的概念狠狠的冲击着我以前积累起来的设计思路。
1 | 最近我学到了不少新玩意儿(虽然对很多大佬来说这些已经是旧技术了),比如CSS的{% bubble 兄弟相邻选择器,"例如 h1 + p {margin-top:50px;}" %},{% bubble flex布局,"Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性","#ec5830" %},{% bubble transform变换,"transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。","#1db675" %},animation的{% bubble 贝塞尔速度曲线,"贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋","#de4489" %}写法,还有今天刚看到的{% bubble clip-path,"clip-path属性使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。","#868fd7" %}属性。这些对我来说很新颖的概念狠狠的冲击着我以前积累起来的设计思路。 |
引用文献 reference
1 | {% referto [id] , [literature] %} |
考虑到锚点跳转的特性,不建议您将引用出处标签referfrom写在常隐外挂标签(如folding、tab、hideToggle)中,这样能有效避免跳转失败。
referto 引用上标
id
: 上标序号内容,需与referfrom标签的id对应才能实现跳转literature
: 引用的参考文献名称referfrom 引用出处
id
: 序号内容,需与referto标签的id对应才能实现跳转literature
: 引用的参考文献名称url
: 引用的参考文献链接,可省略
Akilarの糖果屋(akilar.top)是一个私人性质的博客</span>[1]Akilarの糖果屋群聊简介参考资料</span></span>,从各类教程至生活点滴,无话不谈。建群的目的是提供一个闲聊的场所。博客采用Hexo框架</span>[2]Hexo中文文档参考资料</span></span>,Butterfly主题</span>[3]Butterfly 安装文档(一) 快速开始参考资料</span></span>
本项目参考了Volantis</span>[4]hexo-theme-volantis 标签插件参考资料</span></span>的标签样式。引入[tag].js
,并针对butterfly
主题修改了相应的[tag].styl
。在此鸣谢Volantis
主题众开发者。
主要参考内容包括各个volantis的内置标签插件文档</span>[5]Volantis文档:内置标签插件参考资料</span></span>
Butterfly主题的各个衍生魔改</span>[6]Butterfly 安装文档:标签外挂(Tag Plugins参考资料</span></span></span>[7]小弋の生活馆全样式预览参考资料</span></span></span>[8]l-lin-font-awesome-animation参考资料</span></span></span>[9]小康的butterfly主题使用文档参考资料</span></span>
1 | Akilarの糖果屋(akilar.top)是一个私人性质的博客{% referto '[1]','Akilarの糖果屋群聊简介' %},从各类教程至生活点滴,无话不谈。建群的目的是提供一个闲聊的场所。博客采用Hexo框架{% referto '[2]','Hexo中文文档' %},Butterfly主题{% referto '[3]','Butterfly 安装文档(一) 快速开始' %} |
收缩框 hideToggle
1 | {% hideToggle 我是谁 %} |
我是谁
爷是:
aike
隐藏块 hideBlock
1 | {% hideBlock 我是谁 %} |
音乐 Aplayer
1 | {% aplayerlist %} |
简单示例1
{% meting "60198" "netease" "playlist" %}
进阶示例1
{% meting "60198" "netease" "playlist" "autoplay" "mutex:false" "listmaxheight:340px" "preload:none" "theme:#ad7a86"%}
绘图 mermaid
pie title Key elements in Product X "Calcium" : 42.96 "Potassium" : 50.05 "Magnesium" : 10.01 "Iron" : 5
1 | {% mermaid %} |
1 | {% mermaid %} |
使用 mermaid 标签可以绘制 Flowchart(流程图)、Sequence diagram(时序图 )、Class Diagram(类别图)、State Diagram(状态图)、Gantt(甘特图)和 Pie Chart(圆形图),具体可以查看 mermaid 文档