Hexo 测试2——Hexo 定制样式
第二部分,hexo 和 butterfly 主题提供的一些样式,这里的部分内容在其它主题中可能不支持,在博客文件中尽量避免使用。
博客内的引用
hexo 提供的引用语法为
1 | {% post_link my-first-blog %} |
例如这是第一篇测试博客:Hexo 测试1——markdown 基础语法。
这种语法的好处是:不基于 URL 或者文章标题,而是基于文章的 markdown
文件名(其实是相对于_posts
文件夹的相对路径,不含文件后缀),在生成时会自动替换成文章当前的标题。
Tag
hexo 支持一些 Tag,效果如下,具体样式可以在主题配置文件中修改。
default Tag
primary Tag
success Tag
info Tag
warning Tag
danger Tag
语法如下,
1 | {% note default %} |
自定义 Tag
hexo 的 butterfly 主题支持在 Tag 中自定义颜色和图标,语法为
1 | {% note [color] [icon] [style] %} |
可选的选项包括
- color: default / blue / pink / red / purple / orange / green
- icon: fontawesome 图标
- style: simple / modern / flat / disabled
默认情况会加上一个图标,可以使用 no-icon 明确没有图标,也可以在配置文件中设置默认禁用图标。
例如
你是扫微信还是支付宝
2023 年快到了....
小心行驶
这是三片呢?还是四片?
电池图标
剪刀石头布
老古董 IE 浏览器
源代码为
1 | {% note 'fab fa-cc-visa' modern %} |
选项卡
支持简单的选项卡效果,可以切换内容,效果如下:
选项卡 1
选项卡 2
选项卡 3 名字为 A
代码如下
1 | {% tabs tab,1 %} 名字为tab,默认在第1个选项卡,如果是-1则隐藏 |
mermaid
butterfly 主题自带了对 mermaid 的支持,包括流程图和常见的统计图等。
pie title Key elements in Product X "Calcium" : 42.96 "Potassium" : 50.05 "Magnesium" : 10.01 "Iron" : 5
1 | {% mermaid %} |
graph LR A[Christmas] -->|Get money| B(Go shopping) B --> C{Let me think} C -->|One| D[Laptop] C -->|Two| E[iPhone] C -->|Three| F[fa:fa-car Car]
1 | {% mermaid %} |
label
butterfly 提供的可以实现词语的颜色等简单样式
1 | {% label text color %} |
其中的color可选的值包括:default / blue / pink / red / purple / orange / green,默认值是灰色的。
例如:
臣亮言:先帝创业未半,而中道崩殂。今天下三分,益州疲敝,此诚危急存亡之秋也!然侍内之臣,不懈于内;忠志之士,忘身于外者,盖追先帝之殊遇,欲报之于陛下也。
button
按钮样式,语法比较复杂
1 | {% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %} |
例如
Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly1 | {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,larger %} |
或者这种
1 | <div class="btn-center"> |
Emoji 图标
例如
- 常见 💡⭐🐞🚀🌍🚁⚡️🌌
- 书本 📔📕📗📘📙📒📃📜📚📖🧾
- 动植物 🌲🌵🐳🐬🐍🐣
- 人 🤺✍👌👈👉👆👇
- 其他 ⚠🚩💬🔨⏰💎
提供一个查询 Emoji 的网站:https://www.emojiall.com/。
一些常用emoji 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✅✔️➕❌⭕️🟡
📌📍🎈🚩
⏳🌀⏰💤
⚠️🚫🚧
🔍
🔧🔨🛠️⚙️
🔗
🤖
⚡️
🧪
🚀🎉
💥🔥
✨💡⭐
🧠
🐛🪲🐞
🎯
🌱☘️🐣
🔖🏷️
🧬🧩
📖📚📕📗📘📙📒
📝📑📄📃🧾🗒️📋📜📰
✍️✏️
👈👉👆👇
🗂️🧰📦
🔐
音乐
可以在文章中嵌入一个网易云播放器(不能是会员歌曲)
代码如下,可以去网易云网页版复制外链播放器。
1 | <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=1488737309&auto=1&height=66"></iframe> |
视频
可以嵌入 b 站的视频播放
代码如下,可以去 b 站分享中选择代码。
1 | <iframe src="//player.bilibili.com/player.html?aid=938539117&bvid=BV1JT4y1r74p&cid=587958621&page=10" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe> |
在线文档
对于网上的 PDF 文档等,直接使用 URL,例如:pdf-test,浏览器会直接缓存并在新页面打开它,对于手机端和 iPad 也是一样。
也可以在 GitHub 存放文档,使用 URL,例如:README,注意如果希望在 Github 网站打开,是仓库名+blob+分支名+文件名,如果以纯文件的形式打开,是仓库名+raw+分支名+文件名。
自定义样式 CSS
例如源代码
1 | <span id="inline-green"> 这里输入文字 </span> |
需要在 styles.styl 添加对应的内容,才能在渲染时呈现自定义样式(与具体的主题有关)
1 | // 颜色块-黄 |