改文章只是为了防止以后找不到原文章而写的,没有别的意思
安装插件,在博客根目录[Blogroot]下打开终端,运行以下指令:
1 npm install hexo-butterfly-tag-plugins-plus --save
考虑到hexo自带的markdown渲染插件hexo-renderer-marked与外挂标签语法的兼容性较差,建议您将其替换成hexo-renderer-kramed
1 2 npm uninstall hexo-renderer-marked --save npm install hexo-renderer-kramed --save
添加配置信息,以下为写法示例
在站点配置文件_config.yml或者主题配置文件_config.butterfly.yml中添加
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 tag_plugins: enable: true priority: 5 issues: false link: placeholder: CDN: anima: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/font-awesome-animation.min.css jquery: https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js issues: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/issues.js iconfont: //at.alicdn.com/t/font_2032782_8d5kxvn09md.js carousel: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/carousel-touch.js tag_plugins_css: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/tag_plugins.css
源码修改配置方案适用于不想应用全部外挂标签的用户,供熟悉外挂标签原理的用户自行选择装配需要的标签文件。
1. 下载资源文件 https://github.com/Akilarlxh/hexo-butterfly-tag-plugins-plus
将下载的hexo-butterfly-tag-plugins-plus.zip解压得到资源文件夹,下文以[tag_plugins_file]指代该文件夹。
将[tag_plugins_file]\lib\scripts目录下的文件放到[Blogroot]\themes\butterfly\scripts\tag\文件夹内。
将[tag_plugins_file]\lib\style目录下的文件放到[Blogroot]\themes\butterfly\source\css\tags\文件夹内。
修改[Blogroot]_config.butterfly.yml的inject配置项,添加CDN依赖项。由于issues写入timeline和site-card标签要用到jquery,请务必根据注释指示的版本决定是否添加。
1 2 3 4 5 6 7 8 9 inject: head: - <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/l-lin/font-awesome-animation/dist/font-awesome-animation.min.css" media="defer" onload="this.media='all'"> - <script async src="https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/carousel-touch.min.js"></script> bottom: - <script defer src="https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js"></script> - <script defer src="https://npm.elemecdn.com/hexo-theme-volantis@4.3.1/source/js/issues.js"></script>
考虑到hexo自带的markdown渲染插件hexo-renderer-marked与外挂标签语法的兼容性较差,建议您将其替换成hexo-renderer-kramed
1 2 npm uninstall hexo-renderer-marked --save npm install hexo-renderer-kramed --save
行内文本样式:
1 2 3 4 5 6 7 8 {% u 文本内容 %} {% emp 文本内容 %} {% wavy 文本内容 %} {% del 文本内容 %} {% kbd 文本内容 %} {% psw 文本内容 %}
文本内容
文本内容
文本内容
文本内容
文本内容
文本内容
1 2 3 4 5 6 1. 带 {% u 下划线 %} 的文本2. 带 {% emp 着重号 %} 的文本3. 带 {% wavy 波浪线 %} 的文本4. 带 {% del 删除线 %} 的文本5. 键盘样式的文本 {% kbd command %} + {% kbd D %}6. 密码样式的文本:{% psw 这里没有验证码 %}
行内文本span
1 {% span 样式参数(参数以空格划分), 文本内容 %}
字体: 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 2 3 4 5 6 - 彩色文字在一段话中方便插入各种颜色的标签,包括:{% span red, 红色 %}、{% span yellow, 黄色 %}、{% span green, 绿色 %}、{% span cyan, 青色 %}、{% span blue, 蓝色 %}、{% span gray, 灰色 %}。 - 超大号文字文档「开始」页面中的标题部分就是超大号文字。 {% span center logo large, Volantis %} {% span center small, A Wonderful Theme for Hexo %}
段落文本 p
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 2 3 4 5 6 - 彩色文字在一段话中方便插入各种颜色的标签,包括:{% p red, 红色 %}、{% p yellow, 黄色 %}、{% p green, 绿色 %}、{% p cyan, 青色 %}、{% p blue, 蓝色 %}、{% p gray, 灰色 %}。 - 超大号文字文档「开始」页面中的标题部分就是超大号文字。 {% p center logo large, Volantis %} {% p center small, A Wonderful Theme for Hexo %}
引用node
修改主题配置文件
1 2 3 4 5 6 7 8 9 10 11 12 note: style: simple icons: false border_radius: 3 light_bg_offset: 0
Note标签外挂有两种用法。icons和light_bg_offset只对方法一生效。
方法一 1 2 3 {% note [class] [no-icon] [style] %} Any content (support inline tags too.io). {% endnote %}
方法二 1 2 3 {% note [color] [icon] [style] %} Any content (support inline tags too.io). {% endnote %}
方法一 参数 用法
class 【可选】标识,不同的标识有不同的配色( default / primary / success / info / warning / danger )
no-icon 【可选】不显示 icon
style 【可选】可以覆盖配置中的 style(simple/modern/flat/disabled)
方法二 参数 用法
class 【可选】标识,不同的标识有不同的配色( default / blue / pink / red / purple / orange / green )
no-icon 【可选】可配置自定义 icon (只支持 fontawesome 图标, 也可以配置 no-icon )
style 【可选】可以覆盖配置中的 style(simple/modern/flat/disabled)
方法一
simple样式
morden样式
flat样式
disabled样式
no-icon样式
方法二
simple样式
2. modern样式
3. flat样式
4. disable样式
5. no-icon样式
方法一
simple样式
1 2 3 4 5 6 7 8 9 10 11 12 13 {% note simple %}默认 提示块标签{% endnote %} {% note default simple %}default 提示块标签{% endnote %} {% note primary simple %}primary 提示块标签{% endnote %} {% note success simple %}success 提示块标签{% endnote %} {% note info simple %}info 提示块标签{% endnote %} {% note warning simple %}warning 提示块标签{% endnote %} {% note danger simple %}danger 提示块标签{% endnote %}
morden样式
1 2 3 4 5 6 7 8 9 10 11 12 13 {% note modern %}默认 提示块标签{% endnote %} {% note default modern %}default 提示块标签{% endnote %} {% note primary modern %}primary 提示块标签{% endnote %} {% note success modern %}success 提示块标签{% endnote %} {% note info modern %}info 提示块标签{% endnote %} {% note warning modern %}warning 提示块标签{% endnote %} {% note danger modern %}danger 提示块标签{% endnote %}
flat样式
1 2 3 4 5 6 7 8 9 10 11 12 13 {% note flat %}默认 提示块标签{% endnote %} {% note default flat %}default 提示块标签{% endnote %} {% note primary flat %}primary 提示块标签{% endnote %} {% note success flat %}success 提示块标签{% endnote %} {% note info flat %}info 提示块标签{% endnote %} {% note warning flat %}warning 提示块标签{% endnote %} {% note danger flat %}danger 提示块标签{% endnote %}
disabled样式
1 2 3 4 5 6 7 8 9 10 11 12 13 {% note disabled %}默认 提示块标签{% endnote %} {% note default disabled %}default 提示块标签{% endnote %} {% note primary disabled %}primary 提示块标签{% endnote %} {% note success disabled %}success 提示块标签{% endnote %} {% note info disabled %}info 提示块标签{% endnote %} {% note warning disabled %}warning 提示块标签{% endnote %} {% note danger disabled %}danger 提示块标签{% endnote %}
no-icon样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 {% note no-icon %}默认 提示块标签{% endnote %} {% note default no-icon %}default 提示块标签{% endnote %} {% note primary no-icon %}primary 提示块标签{% endnote %} {% note success no-icon %}success 提示块标签{% endnote %} {% note info no-icon %}info 提示块标签{% endnote %} {% note warning no-icon %}warning 提示块标签{% endnote %} {% note danger no-icon %}danger 提示块标签{% endnote %}
方法二
simple样式
1 2 3 4 5 6 7 8 9 10 11 12 13 {% note 'fab fa-cc-visa' simple %}你是刷 Visa 还是 UnionPay{% endnote %} {% note blue 'fas fa-bullhorn' simple %}2021年快到了....{% endnote %} {% note pink 'fas fa-car-crash' simple %}小心开车 安全至上{% endnote %} {% note red 'fas fa-fan' simple%}这是三片呢?还是四片?{% endnote %} {% note orange 'fas fa-battery-half' simple %}你是刷 Visa 还是 UnionPay{% endnote %} {% note purple 'far fa-hand-scissors' simple %}剪刀石头布{% endnote %} {% note green 'fab fa-internet-explorer' simple %}前端最讨厌的浏览器{% endnote %}
modern样式
1 2 3 4 5 6 7 8 9 10 11 12 13 {% note 'fab fa-cc-visa' modern %}你是刷 Visa 还是 UnionPay{% endnote %} {% note blue 'fas fa-bullhorn' modern %}2021年快到了....{% endnote %} {% note pink 'fas fa-car-crash' modern %}小心开车 安全至上{% endnote %} {% note red 'fas fa-fan' modern%}这是三片呢?还是四片?{% endnote %} {% note orange 'fas fa-battery-half' modern %}你是刷 Visa 还是 UnionPay{% endnote %} {% note purple 'far fa-hand-scissors' modern %}剪刀石头布{% endnote %} {% note green 'fab fa-internet-explorer' modern %}前端最讨厌的浏览器{% endnote %}
flat样式
1 2 3 4 5 6 7 8 9 10 11 12 13 {% note 'fab fa-cc-visa' flat %}你是刷 Visa 还是 UnionPay{% endnote %} {% note blue 'fas fa-bullhorn' flat %}2021年快到了....{% endnote %} {% note pink 'fas fa-car-crash' flat %}小心开车 安全至上{% endnote %} {% note red 'fas fa-fan' flat%}这是三片呢?还是四片?{% endnote %} {% note orange 'fas fa-battery-half' flat %}你是刷 Visa 还是 UnionPay{% endnote %} {% note purple 'far fa-hand-scissors' flat %}剪刀石头布{% endnote %} {% note green 'fab fa-internet-explorer' flat %}前端最讨厌的浏览器{% endnote %}
disable样式
1 2 3 4 5 6 7 8 9 10 11 12 13 {% note 'fab fa-cc-visa' disabled %}你是刷 Visa 还是 UnionPay{% endnote %} {% note blue 'fas fa-bullhorn' disabled %}2021年快到了....{% endnote %} {% note pink 'fas fa-car-crash' disabled %}小心开车 安全至上{% endnote %} {% note red 'fas fa-fan' disabled %}这是三片呢?还是四片?{% endnote %} {% note orange 'fas fa-battery-half' disabled %}你是刷 Visa 还是 UnionPay{% endnote %} {% note purple 'far fa-hand-scissors' disabled %}剪刀石头布{% endnote %} {% note green 'fab fa-internet-explorer' disabled %}前端最讨厌的浏览器{% endnote %}
no-icon样式
1 2 3 4 5 6 7 8 9 10 11 12 13 {% note no-icon %}你是刷 Visa 还是 UnionPay{% endnote %} {% note blue no-icon %}2021年快到了....{% endnote %} {% note pink no-icon %}小心开车 安全至上{% endnote %} {% note red no-icon %}这是三片呢?还是四片?{% endnote %} {% note orange no-icon %}你是刷 Visa 还是 UnionPay{% endnote %} {% note purple no-icon %}剪刀石头布{% endnote %} {% note green no-icon %}前端最讨厌的浏览器{% endnote %}
上标签tips
1 {% tip [参数,可选] %}文本内容{% endtip %}
样式: success,error,warning,bolt,ban,home,sync,cogs,key,bell
自定义图标: 支持fontawesome。
1 2 3 4 5 6 7 8 9 10 11 12 13 {% tip %}default{% endtip %} {% tip info %}info{% endtip %} {% tip success %}success{% endtip %} {% tip error %}error{% endtip %} {% tip warning %}warning{% endtip %} {% tip bolt %}bolt{% endtip %} {% tip ban %}ban{% endtip %} {% tip home %}home{% endtip %} {% tip sync %}sync{% endtip %} {% tip cogs %}cogs{% endtip %} {% tip key %}key{% endtip %} {% tip bell %}bell{% endtip %} {% tip fa-atom %}自定义font awesome图标{% 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(当页面加载时显示动画)
调整动画速度
On hover(当鼠标悬停时显示动画)
On parent hover(当鼠标悬停在父级元素时显示动画)
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 2 3 4 5 6 7 8 9 10 {% 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
1 {% radio 样式参数(可选), 文本(支持简单md) %}
颜色: red,yellow,green,cyan,blue,gray
选中状态: checked
1 2 3 4 5 6 7 {% radio 纯文本测试 %} {% radio checked, 支持简单的 [markdown ](https://guides.github.com/features/mastering-markdown/ ) 语法 %} {% radio red, 支持自定义颜色 %} {% radio green, 绿色 %} {% radio yellow, 黄色 %} {% radio cyan, 青色 %} {% radio blue, 蓝色 %}
时间轴 timeline
1 2 3 4 5 6 7 8 {% timeline 时间线标题(可选)[,color] %} <!-- timeline 时间节点(标题) --> 正文内容 <!-- endtimeline --> <!-- timeline 时间节点(标题) --> 正文内容 <!-- endtimeline --> {% endtimeline %}
参数 解释
title 标题/时间线
color timeline颜色:default(留空) / blue / pink / red / purple / orange / green
如果有 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 服务。
全局搜索 seotitle
并替换为 seo_title
。
group 组件的索引规则有变,使用 group 组件的文章内,group: group_name
对应的组件名必须是 group_name
。
group 组件的列表名优先显示文章的 short_title
其次是 title
。
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 {% timeline 时间轴样式,blue %} <!-- timeline 2020-07-24 [2.6.6 -> 3.0 ](https://github.com/volantis-x/hexo-theme-volantis/releases ) --> 1. 如果有 `hexo-lazyload-image` 插件,需要删除并重新安装最新版本,设置 `lazyload.isSPA: true` 。2. 2.x 版本的 css 和 js 不适用于 3.x 版本,如果使用了 `use_cdn: true` 则需要删除。3. 2.x 版本的 fancybox 标签在 3.x 版本中被重命名为 gallery 。4. 2.x 版本的置顶 `top: true` 改为了 `pin: true` ,并且同样适用于 `layout: page` 的页面。5. 如果使用了 `hexo-offline` 插件,建议卸载,3.0 版本默认开启了 pjax 服务。<!-- endtimeline --> <!-- timeline 2020-05-15 [2.6.3 -> 2.6.6 ](https://github.com/volantis-x/hexo-theme-volantis/releases/tag/2.6.6 ) --> 不需要额外处理。 <!-- endtimeline --> <!-- timeline 2020-04-20 [2.6.2 -> 2.6.3 ](https://github.com/volantis-x/hexo-theme-volantis/releases/tag/2.6.3 ) --> 1. 全局搜索 `seotitle` 并替换为 `seo_title` 。2. group 组件的索引规则有变,使用 group 组件的文章内,`group: group_name` 对应的组件名必须是 `group_name` 。2. group 组件的列表名优先显示文章的 `short_title` 其次是 `title` 。<!-- endtimeline --> {% endtimeline %}
链接卡片 link
1 {% link 标题, 链接, 图片链接(可选) %}
1 {% link Nuyoah, https://zjhinsist.github.io/, https://s3.bmp.ovh/imgs/2022/07/27/fc28cbf90fcd17d9.png %}
折叠框 folding
1 2 3 {% folding 参数(可选), 标题 %} ![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg ) {% endfolding %}
颜色:blue, cyan, green, yellow, red
状态:状态填写 open 代表默认打开。
查看图片测试
查看默认打开的折叠框
查看代码测试
查看列表测试
查看嵌套测试
查看嵌套测试2 查看嵌套测试3 hahaha
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://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg ) {% 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://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/tieba/%E6%BB%91%E7%A8%BD.png' style ='height:24px' > </span > {% endfolding %} {% endfolding %} {% endfolding %}
分栏tab
1 2 3 4 5 6 {% tabs Unique name, [index] %} <!-- tab [Tab caption] [@icon] --> Any content (support inline tags too). <!-- endtab --> {% endtabs %}
Unique name :
选项卡块标签的唯一名称,不带逗号。
将在#id中用作每个标签及其索引号的前缀。
如果名称中包含空格,则对于生成#id,所有空格将由破折号代替。
仅当前帖子/页面的URL必须是唯一的!
[index]:
活动选项卡的索引号。
如果未指定,将选择第一个标签(1)。
如果index为-1,则不会选择任何选项卡。
可选参数。
[Tab caption]:
当前选项卡的标题。
如果未指定标题,则带有制表符索引后缀的唯一名称将用作制表符的标题。
如果未指定标题,但指定了图标,则标题将为空。
可选参数。
[@icon]:
FontAwesome图标名称(全名,看起来像“ fas fa-font”)
可以指定带空格或不带空格;
例如’Tab caption @icon’ 和 ‘Tab caption@icon’.
可选参数。
1 2 3 4 5 6 7 8 9 10 11 12 13 {% tabs test1 %} <!-- tab --> **This is Tab 1.** <!-- endtab --> <!-- tab --> **This is Tab 2.** <!-- endtab --> <!-- tab --> **This is Tab 3.** <!-- endtab --> {% endtabs %}
进度条 progress
1 {% progress [width] [color] [text] %}
width: 0到100的阿拉伯数字
color: 颜色,取值有red,yellow,green,cyan,blue,gray
text:进度条上的文字内容
1 2 3 4 5 6 {% progress 10 red 进度条样式预览 %} {% progress 30 yellow 进度条样式预览 %} {% progress 50 green 进度条样式预览 %} {% progress 70 cyan 进度条样式预览 %} {% progress 90 blue 进度条样式预览 %} {% progress 100 gray 进度条样式预览 %}
注释 notation
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;} ,flex布局 Flex 是 Flexible Box 的缩写,意为弹性布局",用来为盒状模型提供最大的灵活性" ,transform变换 transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。 ,animation的贝塞尔速度曲线 贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋 写法,还有今天刚看到的clip-path clip-path属性使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。 属性。这些对我来说很新颖的概念狠狠的冲击着我以前积累起来的设计思路。
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 2 {% referto [id] , [literature] %} {% referfrom [id] , [literature] , [url] %}
考虑到锚点跳转的特性,不建议您将引用出处标签referfrom写在常隐外挂标签(如folding、tab、hideToggle)中,这样能有效避免跳转失败。
1. referto 引用上标
id: 上标序号内容,需与referfrom标签的id对应才能实现跳转
literature: 引用的参考文献名称
referfrom 引用出处
id: 序号内容,需与referto标签的id对应才能实现跳转
literature: 引用的参考文献名称
url: 引用的参考文献链接,可省略
Akilarの糖果屋(akilar.top)是一个私人性质的博客[1] Akilarの糖果屋群聊简介 参考资料 ,从各类教程至生活点滴,无话不谈。建群的目的是提供一个闲聊的场所。博客采用Hexo框架[2] Hexo中文文档 参考资料 ,Butterfly主题[3] Butterfly 安装文档(一) 快速开始 参考资料
本项目参考了Volantis[4] hexo-theme-volantis 标签插件 参考资料 的标签样式。引入[tag].js
,并针对butterfly
主题修改了相应的[tag].styl
。在此鸣谢Volantis
主题众开发者。
主要参考内容包括各个volantis的内置标签插件文档[5] Volantis文档:内置标签插件 参考资料
Butterfly主题的各个衍生魔改[6] Butterfly 安装文档:标签外挂(Tag Plugins 参考资料 [7] 小弋の生活馆全样式预览 参考资料 [8] l-lin-font-awesome-animation 参考资料 [9] 小康的butterfly主题使用文档 参考资料
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 Akilarの糖果屋(akilar.top)是一个私人性质的博客{% referto '[1]','Akilarの糖果屋群聊简介' %},从各类教程至生活点滴,无话不谈。建群的目的是提供一个闲聊的场所。博客采用Hexo框架{% referto '[2]','Hexo中文文档' %},Butterfly主题{% referto '[3]','Butterfly 安装文档(一) 快速开始' %} 本项目参考了Volantis{% referto '[4]','hexo-theme-volantis 标签插件' %}的标签样式。引入`[tag].js` ,并针对`butterfly` 主题修改了相应的`[tag].styl` 。在此鸣谢`Volantis` 主题众开发者。 主要参考内容包括各个volantis的内置标签插件文档{% referto '[5]','Volantis文档:内置标签插件' %} Butterfly主题的各个衍生魔改{% referto '[6]','Butterfly 安装文档:标签外挂(Tag Plugins' %}{% referto '[7]','小弋の生活馆全样式预览' %}{% referto '[8]','l-lin-font-awesome-animation' %}{% referto '[9]','小康的butterfly主题使用文档' %} {% referfrom '[1]','Akilarの糖果屋群聊简介','https://jq.qq.com/?_wv=1027&k=pGLB2C0N' %} {% referfrom '[2]','Hexo中文文档','https://hexo.io/zh-cn/docs/' %} {% referfrom '[3]','Butterfly 安装文档(一) 快速开始','https://butterfly.js.org/posts/21cfbf15/' %} {% referfrom '[4]','hexo-theme-volantis 标签插件','https://volantis.js.org/v5/tag-plugins/' %} {% referfrom '[5]','Volantis文档:内置标签插件','https://volantis.js.org/tag-plugins/' %} {% referfrom '[6]','Butterfly 安装文档:标签外挂(Tag Plugins','https://butterfly.js.org/posts/4aa8abbe/#%E6%A8%99%E7%B1%A4%E5%A4%96%E6%8E%9B%EF%BC%88Tag-Plugins%EF%BC%89' %} {% referfrom '[7]','小弋の生活馆全样式预览','https://lovelijunyi.gitee.io/posts/c898.html' %} {% referfrom '[8]','l-lin-font-awesome-animation','https://github.com/l-lin/font-awesome-animation' %} {% referfrom '[9]','小康的butterfly主题使用文档','https://www.antmoe.com/posts/3b43914f/' %}
注释 notation