Powered Hexo Powered Hexo Powered Hexo

本外挂标签的参数分为三组，用||分割

1.基本参数

2.信息参数

3.拓展参数

  1. 基本参数,定义徽标左右文字和图标

    1
    2
    {% bdage Theme,Butterfly %}
    {% bdage Frame,Hexo,hexo %}

  2. 信息参数，定义徽标右侧内容背景色，指向链接

    1
    2
    3
    {% bdage CDN,JsDelivr,jsDelivr||abcdef,https://metroui.org.ua/index.html,本站使用JsDelivr为静态资源提供CDN加速 %}
    //如果是跨顺序省略可选参数，仍然需要写个逗号,用作分割
    {% bdage Source,GitHub,GitHub||,https://github.com/ %}

  3. 拓展参数，支持shields的API的全部参数内容

    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 %}

进度条样式预览

进度条样式预览

进度条样式预览

Akilarの糖果屋(akilar.top)是一个私人性质的博客1 Akilarの糖果屋群聊简介参考资料，从各类教程至生活点滴，无话不谈。建群的目的是提供一个群聊的场所。博客采用Hexo框架2 Hexo中文文档参考资料，Butterfly主题3 Butterfly安装文档（一）快速开始参考资料
本项目参考了Volantis4 hexo-theme-volantis标签插件参考资料的标签样式。引入[tag].js，并针对butterfly主题修改了相应的[tag].styl。在此鸣谢Volantis主题众开发者。
主要参考内容包括各个volantis的内置标签插件文档5 Volantis文档：内置标签插件参考资料
Butterfly主题的各个衍生魔改6 Butterfly安装文档：标签外挂（Tag Plugins）参考资料7 小戈の生活馆全样式预览参考资料8 I-lin-font-awesome-animation参考资料9 小康的butterfly主题使用文档参考资料

1
Akilarの糖果屋群聊简介
2
Hexo中文文档
3
Butterfly安装文档（一）快速开始
4
hexo-theme-volantis标签插件
5
Volantis文档：内置标签插件
6
Butterfly安装文档：标签外挂（Tag Plugins）
7
小戈の生活馆全样式预览
8
I-lin-font-awesome-animation
9
小康的butterfly主题使用文档

最近我学到了不少新玩意儿（虽然对很多大佬来说这些已经是旧技术了），比如CSS的兄弟相邻选择器例如 h1 + p {margin-top:50px;}，flex布局Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，transform变换transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。，animation的贝塞尔速度曲线贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋写法，还有今天刚看到的clip-pathclip-path属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。属性。这些对我来说很新颖的概念狠狠的冲击着我以前积累起来的设计思路。

最近我学到了不少新玩意儿（虽然对很多大佬来说这些已经是旧技术了），比如 CSS 的兄弟相邻选择器例如 h1 + p {margin-top:50px;}，flex 布局 Flex 是 Flexible Box 的缩写，意为“弹性布局 ”，是用来为盒状模型提供最大的灵活性，transform 变换 transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。，animation 的贝塞尔速度曲线贝塞尔曲线 (Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋写法，还有今天刚看到的 clip-pathclip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。属性。这些对我来说很新颖的概念狠狠的冲击着我以前积累起来的设计思路。

进度条样式预览

进度条样式预览

进度条样式预览

进度条样式预览

进度条样式预览

进度条样式预览

图片中一看就全部是自定义图标，是note标签的方法2
特效应用于note标签上，那就应该是wowjs包裹note

flip动画效果。

zoomIn动画效果,持续5s，延时5s，离底部100距离时启动，重复10次。

slideInRight动画效果,持续5s，延时5s。

heartBeat动画效果，延时5s，重复10次。

1.页面加载时

warning

ban

2.调整动画速度

warning

ban

3.鼠标悬停时显示

warning

ban

4.鼠标悬停父元素时显示

warning

ban


学习资料

default

info

success

error

warning

bolt

ban

home

sync

cogs

key

bell

自定义font awesome图标

纯文本测试

支持简单的markdown语法

支持自定义颜色

绿色 + 默认选中

黄色 + 默认选中

青色 + 默认选中

蓝色 + 默认选中

增加

减少

叉

纯文本测试

支持简单的markdown语法

支持自定义颜色

绿色

黄色

青色

蓝色

糖果屋教程贴

https://akilar.top/posts/615e2dec/

我的博客

https://cyber0412.github.io

fa-solid fa-fan

标题

时间轴样式

2020-05-15 2.6.3->2.6.6

不需要额外处理

2020-04-20 2.6.2->2.6.3

  1. 全局搜索seotitle并替换为seo_title。
  2. group组件的索引规则有变，使用group组件的文章内，group: group_name为对应的组件名必须是group_name。
  3. group组件的列表名优先显示文章的short_title其次是title。
BiliBili紫罗兰的永恒花园
Linhk1606这是一段关于这个网站的描述文字
  • 彩色文字
    在一段话中方便插入各种颜色的标签，包括：

    红色

    、

    黄色

    、

    绿色

    、

    青色

    、

    蓝色

    、

    灰色

    。
  • 超大号文字
    文档「开始」页面中的标题部分就是超大号文字。

    A Wonderful Theme for Hexo

案例页面

案例页面