Hexo编写文章时所用的标签集合,已整理在下方
使用了Tab标签-点击按钮可展开
Hexo 编写文章格式 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 --- title: //标题 date: //例如:2020-03-02 21:31 updated: //更新时间 tags: [ , ] //便签 categories: //分类 keywords: //关键词 description: //文章描述 top_img: //顶部图片 comments: //评论 cover: //封面图 toc: toc_number : false /true copyright: //版权 highlight_shrink: //表示代码框是否收缩,默认“false” auto_open: toc sticky: 置顶操作数值越大越靠前 ---
key value title 标题 date 发表日期 updated 文章更新日期 type 类型,tags,link,categories 分别是“标签”,“友链”,“分类” 加“”引号 comments 是否显示评论,默认 true description 描述 top_img 顶部图 mathjax 数学公式 katex 数学公式 aside true 表示显示右边信息卡片,默认值;false 表示不显示 highlight_shrink 代码高亮是否收缩,默认“false”
Note标签写法 普通note 自定义font5图标c 自定义小标签 渐变标签 小标签 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 <div class ="note default icon flat" > <p > default</p > </div > {% note default icon %} default {% endnote %} <div class ="note primary icon flat" > <p > primary</p > </div > {% note primary icon %} primary {% endnote %} <div class ="note success icon flat" > <p > success</p > </div > {% note success icon %} success {% endnote %} <div class ="note info icon flat" > <p > info</p > </div > {% note info icon %} info {% endnote %} <div class ="note warning icon flat" > <p > warning</p > </div > {% note warning icon %} warning {% endnote %} <div class ="note danger icon flat" > <p > danger</p > </div > {% note danger icon %} danger {% endnote %} <div class ="note primary no-icon flat" > <p > primary</p > </div > {% note primary no-icon%} 无icon {% endnote %}
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 /* 链接 */ <div class="note icon font5 fa-fw fa fa-link" style="background: #eef7fa;border-left-color: #428bca;" > <p > info</p > </div > /* 小喇叭 */ <div class="note icon font5 fas fa-bullhorn" style="background: #fcf1f2;border-left-color: #d9534f;" > <p > info</p > </div > /* BUG */ <div class="note icon font5 fas fa-bug" style="background: #fcf1f2;border-left-color: #d9534f;" > <p > info</p > </div > /* idea */ <div class="note icon font5 far fa-lightbulb" style="background: #fdf8ea;border-left-color: #f0ad4e;" > <p > info</p > </div >
/* 小喇叭 */
/* BUG */
/* idea */
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <div class ="snote red" > <p > 默认red</p > </div > <div class ="snote quote" > <p > quote</p > </div > <div class ="snote info" > <p > info</p > </div > <div class ="snote done" > <p > done</p > </div > <div class ="snote success" > <p > success</p > </div > <div class ="snote danger" > <p > danger</p > </div > <div class ="snote error" > <p > error</p > </div > <div class ="snote radiation" > <p > radiation</p > </div > <div class ="snote bug" > <p > bug</p > </div > <div class ="snote idea yellow" > <p > idea-yellow</p > </div > <div class ="snote link blue" > <p > link- blue</p > </div > <div class ="snote paperclip" > <p > paperclip</p > </div > <div class ="snote todo" > <p > todo</p > </div > <div class ="snote msg cyan" > <p > msg cyan</p > </div > <div class ="snote guide" > <p > guide</p > </div > <div class ="snote download" > <p > download</p > </div > <div class ="snote up" > <p > up</p > </div > <div class ="snote undo" > <p > undo</p > </div > /* 引用 */ <div class ="snote quote" > <p class ='p subtitle' > 小标题</p > 这是个引用 </div >
/* 引用 */
- 颜色
1 clear, light, gray, red, yellow, green, cyan, blue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <div class ='tip faa-horizontal animated' > <p > 默认情况<p > </div > <div class ='tip info faa-horizontal animated' > <p > info<p > </div > <div class ='tip success faa-horizontal animated' > <p > success<p > </div > <div class ='tip error faa-horizontal animated' > <p > error<p > </div > <div class ='tip warning faa-horizontal animated' > <p > warning<p > </div > <div class ='tip font5 fas fa-atom faa-horizontal animated' > <p > 自定义font5图标<p > </div > <div class ='tip custom icon-QQ2 faa-horizontal animated' > <p > 自定义iconfont图标<p > </div > <div class ="tip wtgo font5 fas fa-bolt faa-horizontal animated" > <p > 文字</p > <p > </p > </div > <div class ="tip ban font5 fas fa-ban faa-horizontal animated" > <p > 文字</p > <p > </p > </div > <div class ="tip home font5 fas fa-home faa-horizontal animated" > <p > 文字</p > <p > </p > </div > <div class ="tip important font5 fas fa-home faa-horizontal animated" > <p > 魔改标签4</p > <p > </p > </div > <div class ="tip ref font5 fas fa-sync faa-horizontal animated" > <p > 魔改标签5</p > <p > </p > </div > <div class ="tip ffa font5 fas fa-cogs faa-horizontal animated" > <p > 魔改标签6</p > <p > </p > </div > <div class ="tip key font5 fas fa-key faa-horizontal animated" > <p > 魔改标签7</p > <p > </p > </div > <div class ="tip socd font5 fas fa-bell faa-horizontal animated" > <p > 魔改标签8</p > <p > </p > </div > <div class ="tip qq font5 fab fa-qq faa-horizontal animated" > <p > 魔改标签9</p > <p > </p > </div >
语法 红色小标签 绿色小标签 蓝色小标签 黄色小标签 灰色小标签
1 2 3 4 5 6 7 <span class ="inline-tag [red|green|blue|yellow|grey]" > 语法</span > <span class ="inline-tag red" > 红色小标签</span > <span class ="inline-tag green" > 绿色小标签</span > <span class ="inline-tag blue" > 蓝色小标签</span > <span class ="inline-tag yellow" > 黄色小标签</span > <span class ="inline-tag grey" > 灰色小标签</span > <span class ="inline-tag" style ="--Color:#881B12" > 自定义颜色小标签</span >
行内小标签 隐藏内容写法 hidesnote 写法 样式 hideTaggle 演示 隐藏属性 含义 content 文本内容 dispaly 按钮显示的文字(可选) bg 按钮的颜色 color 按钮文字的颜色(可选) inline 只限文字 hideblock 可以隐藏图片,代码块等
1 2 3 4 5 {% hideInline content,display,bg,color %} {% hideBlock display,bg,color %} content {% endhideBlock %}
隐藏inline内容red display 隐藏代码块 属性 文本内容 content 文本内容 display 显示的文字(可选) bg 背景颜色(可选) color 文字颜色(可选)
Checkbox & Radio 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 {% checkbox 纯文本测试 %} {% checkbox checked, 支持简单的 [markdown ](https://guides.github.com/features/mastering-markdown/ ) 语法 %} {% checkbox red, 支持自定义颜色 %} {% checkbox green checked, 绿色 + 默认选中 %} {% checkbox yellow checked, 黄色 + 默认选中 %} {% checkbox cyan checked, 青色 + 默认选中 %} {% checkbox blue checked, 蓝色 + 默认选中 %} {% checkbox plus green checked, 增加 %} {% checkbox minus yellow checked, 减少 %} {% checkbox times red checked, 叉 %} {% radio 纯文本测试 %} {% radio checked, 支持简单的 [markdown ](https://guides.github.com/features/mastering-markdown/ ) 语法 %} {% radio red, 支持自定义颜色 %} {% radio green, 绿色 %} {% radio yellow, 黄色 %} {% radio cyan, 青色 %} {% radio blue, 蓝色 %}
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 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 <div class ="checkbox" > <input type ="checkbox" /> <p > 纯文本测试</p > </div > <div class ="checkbox checked" > <input type ="checkbox" checked /> <p > 支持简单的 <a href="https://guides.github.com/features/mastering-markdown/" target="_blank" rel="noopener" >markdown</a > 语法 </p > </div > <div class ="checkbox red" > <input type ="checkbox" /> <p > 支持自定义颜色</p > </div > <div class ="checkbox green checked" > <input type ="checkbox" checked /> <p > 绿色 + 默认选中</p > </div > <div class ="checkbox yellow checked" > <input type ="checkbox" checked /> <p > 黄色 + 默认选中</p > </div > <div class ="checkbox cyan checked" > <input type ="checkbox" checked /> <p > 青色 + 默认选中</p > </div > <div class ="checkbox blue checked" > <input type ="checkbox" checked /> <p > 蓝色 + 默认选中</p > </div > <div class ="checkbox plus green checked" > <input type ="checkbox" checked /> <p > 增加</p > </div > <div class ="checkbox minus yellow checked" > <input type ="checkbox" checked /> <p > 减少</p > </div > <div class ="checkbox times red checked" > <input type ="checkbox" checked /> <p > 叉</p > </div > <div class ="checkbox" > <input type ="radio" /> <p > 纯文本测试</p > </div > <div class ="checkbox checked" > <input type ="radio" checked /> <p > 支持简单的 <a href="https://guides.github.com/features/mastering-markdown/" target="_blank" rel="noopener" >markdown</a > 语法 </p > </div > <div class ="checkbox red" > <input type ="radio" /> <p > 支持自定义颜色</p > </div > <div class ="checkbox green" > <input type ="radio" /> <p > 绿色</p > </div > <div class ="checkbox yellow" > <input type ="radio" /> <p > 黄色</p > </div > <div class ="checkbox cyan" > <input type ="radio" /> <p > 青色</p > </div > <div class ="checkbox blue" > <input type ="radio" /> <p > 蓝色</p > </div >
按钮 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 {% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %} [url] : 链接 [text] : 按钮文字 [icon] : [可选] 图标 [color] : [可选] 按钮背景顔色(默认style时) 按钮字体和边框顔色(outline时) default/blue/pink/red/purple/orange/green [style] : [可选] 按钮样式 默认实心 outline/留空 [layout] : [可选] 按钮佈局 默认为line block/留空 [position] : [可选] 按钮位置 前提是设置了layout为block 默认为左边 center/right/留空 [size] : [可选] 按钮大小 larger/留空
Folding写法 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 查看图片测试 %}  {% endfolding %} {% folding cyan open, 查看默认打开的折叠框 %} 这是一个默认打开的折叠框。 {% endfolding %} {% folding green, 查看代码测试 %} {% endfolding %} {% folding yellow, 查看列表测试 %} - haha- hehe{% endfolding %} {% folding red, 查看嵌套测试 %} {% folding blue, 查看嵌套测试2 %} {% folding 查看嵌套测试3 %} 嘿嘿 <span > <img src ='https://cdn.jsdelivr.net/gh/Rr210/[email protected] /img/api/phone/5031c5f90d9148b9.jpg' style ='height:24px' > </span > {% endfolding %} {% endfolding %} {% endfolding %}
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/[email protected] /Hexo/img/loading.gif data-src="https://cdn.jsdelivr.net/gh/Rr210/[email protected] /img/api/phone/5031c5f90d9148b9.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/[email protected] /Hexo/img/loading.gif data-src='https://cdn.jsdelivr.net/gh/Rr210/[email protected] /img/api/phone/5031c5f90d9148b9.jpg' style='height:24px'></span > </p > </div > </details > </div > </details > </div > </details >
查看图片测试
查看默认打开的折叠框
查看列表测试
查看嵌套测试
查看嵌套测试2
查看嵌套测试3
嘿嘿
媒体写法 图片-Photo 视频-video 音频-Audio
图片-Photo写法 1 2 3 4 5 6 7 8 9 {% image https://cdn.jsdelivr.net/gh/Rr210/[email protected] /img/api/phone/558c3dfea39cb752.jpg 图片描述。 %} 指定宽度: {% image https://cdn.jsdelivr.net/gh/Rr210/[email protected] /img/api/phone/558c3dfea39cb752.jpg 300px %} 指定宽度并添加描述: {% image https://cdn.jsdelivr.net/gh/Rr210/[email protected] /img/api/phone/558c3dfea39cb752.jpg 300px 图片描述。 %}
1 2 3 4 {% fancybox %}  {% endfancybox %}
1 2 3 4 5 {% fancybox %}    {% endfancybox %}
1 2 3 4 5 6 7 8 9 10 11 {% fancybox stretch, 4 %}         {% endfancybox %}
视频-video写法
1 2 3 4 5 6 {% videos, 2 %} {% video https://cdn.jsdelivr.net/gh/Rr210/[email protected] /img/video/1.mp4 %} {% video https://cdn.jsdelivr.net/gh/Rr210/[email protected] /img/video/1.mp4 %} {% video https://cdn.jsdelivr.net/gh/Rr210/[email protected] /img/video/1.mp4 %} {% video https://cdn.jsdelivr.net/gh/Rr210/[email protected] /img/video/1.mp4 %} {% endvideos %}
1 2 3 4 5 {% videos 对齐方向, 列数 %} {% video 视频链接 %} {% video 视频链接 %} {% video 视频链接 %} {% endvideos %}
对齐方向:left, center, right
列数:逗号后面直接写列数,支持 1 ~ 4 列。
音频-Audio Your browser does not support the audio tag. 1 {% audio https://cdn.mr90.top/music/tazhishijingguo.mp3 %}
1 2 3 4 5 6 7 <audio controls="" preload="" __idm_id__="269361153"> <source src="https://cdn.mr90.top/music/tazhishijingguo.mp3" type="audio/mp3" /> Your browser does not support the audio tag. </audio>
任意元素动画 例如网址导航栏可以写为- 收藏夹 || http://u.mr90.top || fas fa-infinity faa-shake animated
注意
:如果使用 On parent hover
需要向父级元素添加 class
名 faa-parent animated-hover
。其余两个不需要。
相册图库写法 1 2 3 {% gallery %} 图片使用md格式 {% endgallery %}
1 2 3 4 <div class ="gallery-group-main" > {% galleryGroup name description link img-url %} {% galleryGroup name description link img-url %} {% galleryGroup name description link img-url %} </div >
属性 含义 name 图库的名称 link 链接对应的相册地址可以是页面也可以是文章页(或者其他图库地址) img-url 图片封面的地址 description 图库的描述 注意事项 加引号使用
查看图片测试