前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >基于 Butterfly 的外挂标签引入

基于 Butterfly 的外挂标签引入

作者头像
王先森sec
发布2023-04-24 16:43:38
1.1K0
发布2023-04-24 16:43:38
举报
文章被收录于专栏:王先森

Markdown 教程

Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档。

Markdown 语言在 2004 由约翰·格鲁伯(英语:John Gruber)创建。

Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。

Markdown 编写的文档后缀为 .md, .markdown

行内文本样式 text

  • 标签语法
  • 样式展示
  • 显示代码
代码语言:javascript
复制
{% u 文本内容 %}
{% emp 文本内容 %}
{% wavy 文本内容 %}
{% del 文本内容 %}
{% kbd 文本内容 %}
{% psw 文本内容 %}
  1. 下划线 的文本
  2. 带着重号的文本
  3. 带波浪线的文本
  4. 删除线 的文本
  5. 键盘样式的文本 command + D
  6. 密码样式的文本:这里没有验证码
代码语言:javascript
复制
1. 带 {% u 下划线 %} 的文本
2. 带 {% emp 着重号 %} 的文本
3. 带 {% wavy 波浪线 %} 的文本
4. 带 {% del 删除线 %} 的文本
5. 键盘样式的文本 {% kbd command %} + {% kbd D %}
6. 密码样式的文本:{% psw 这里没有验证码 %}

行内文本 span

  • 标签语法
  • 配置参数
  • 样式展示
  • 显示代码
代码语言:javascript
复制
{% span 样式参数(参数以空格划分), 文本内容 %}
  1. 字体: logo, code
  2. 颜色: red,yellow,green,cyan,blue,gray
  3. 大小: small, h4, h3, h2, h1, large, huge, ultra
  4. 对齐方向: left, center, right
  • 彩色文字 在一段话中方便插入各种颜色的标签,包括:红色、黄色、绿色、青色、蓝色、灰色。
  • 超大号文字 文档「开始」页面中的标题部分就是超大号文字。 Volantis A Wonderful Theme for Hexo
代码语言:javascript
复制
- 彩色文字
在一段话中方便插入各种颜色的标签,包括:{% 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

  • 标签语法
  • 配置参数
  • 样式展示
  • 显示代码
代码语言:javascript
复制
{% p 样式参数(参数以空格划分), 文本内容 %}
  1. 字体: logo, code
  2. 颜色: red,yellow,green,cyan,blue,gray
  3. 大小: small, h4, h3, h2, h1, large, huge, ultra
  4. 对齐方向: left, center, right
  • 彩色文字 在一段话中方便插入各种颜色的标签,包括:红色 、黄色 、绿色 、青色 、蓝色 、灰色 。
  • 超大号文字 文档「开始」页面中的标题部分就是超大号文字。Volantis A Wonderful Theme for Hexo
代码语言:javascript
复制
- 彩色文字
在一段话中方便插入各种颜色的标签,包括:{% 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 %}

上标标签 tip

主要样式参考自小康的 butterfly 渐变背景标签 , 自己写了个 tip.js 来渲染标签,精简了一下代码。

  • 标签语法
  • 配置参数
  • 样式展示
  • 显示代码
代码语言:javascript
复制
{% tip [参数,可选] %}文本内容{% endtip %}
  1. 样式: success,error,warning,bolt,ban,home,sync,cogs,key,bell
  2. 自定义图标:支持 fontawesome。

默认情况

success

error

warning

bolt

ban

home

sync

cogs

key

bell

自定义font awesome图标

代码语言:javascript
复制
{% tip %}默认情况{% 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

动态标签的实质是引用了 font-awesome-animation 的 css 样式,不一定局限于 tip 标签,也可以是其他标签。 只不过这里 tip.js 是我自己写的,所以我清楚它会怎么被渲染成 html,才用的这个写法。 可以熟读文档,使用 html 语言来编写其他标签类型。

  • 标签语法
  • 配置参数
  • 样式展示
  • 显示代码
代码语言:javascript
复制
{% tip [参数,可选] %}文本内容{% endtip %}
  1. 更多详情请参看 font-awesome-animation 文档
    1. 将所需的 CSS 类添加到图标(或 DOM 中的任何元素)。
    2. 对于父级悬停样式,需要给目标元素添加指定 CSS 类,同时还要给目标元素的父级元素添加 CSS 类 faa-parent animated-hover。(详情见示例及示例源码) You can regulate the speed of the animation by adding the CSS class or . faa-fastfaa-slow
    3. 可以通过给目标元素添加 CSS 类 faa-fastfaa-slow 来控制动画快慢。

On DOM load 当页面加载时 显示动画

On hover 当鼠标悬停时 显示动画

On parent hover 当鼠标悬停 在父级元素时 显示动画

faa-wrench animated

faa-wrench animated-hover

faa-wrench

faa-ring animated

faa-ring animated-hover

faa-ring

faa-horizontal animated

faa-horizontal animated-hover

faa-horizontal

faa-vertical animated

faa-vertical animated-hover

faa-vertical

faa-flash animated

faa-flash animated-hover

faa-flash

faa-bounce animated

faa-bounce animated-hover

faa-bounce

faa-spin animated

faa-spin animated-hover

faa-spin

faa-tada animated

faa-tada animated-hover

faa-tada

faa-pulse animated

faa-pulse animated-hover

faa-pulse

faa-shake animated

faa-shake animated-hover

faa-shake

faa-tada animated

faa-tada animated-hover

faa-tada

faa-passing animated

faa-passing animated-hover

faa-passing

faa-passing-reverse animated

faa-passing-reverse animated-hover

faa-passing-reverse

faa-burst animated

faa-burst animated-hover

faa-burst

faa-falling animated

faa-falling animated-hover

faa-falling

faa-rising animated

faa-rising animated-hover

faa-rising

  1. On DOM load(当页面加载时显示动画) warning ban
  2. 调整动画速度 warning ban
  3. On hover(当鼠标悬停时显示动画) warning ban
  4. On parent hover(当鼠标悬停在父级元素时显示动画) warning ban
代码语言:javascript
复制
1. On DOM load(当页面加载时显示动画)

   {% tip warning faa-horizontal animated %}warning{% endtip %}
   {% tip ban faa-flash animated %}ban{% endtip %}

2. 调整动画速度

   {% tip warning faa-horizontal animated faa-fast %}warning{% endtip %}
   {% tip ban faa-flash animated faa-slow %}ban{% endtip %}

3. On hover(当鼠标悬停时显示动画)

   {% tip warning faa-horizontal animated-hover %}warning{% endtip %}
   {% tip ban faa-flash animated-hover %}ban{% endtip %}

4. On parent hover(当鼠标悬停在父级元素时显示动画)

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

折叠框 folding

Butterfly 虽然也有内置折叠框 hideToggle 标签,但是 Volantisfolding 折叠框更好看一些

  • 标签语法
  • 配置参数
  • 样式展示
  • 显示代码
代码语言:javascript
复制
{% folding 参数(可选), 标题 %}
![](https://fastly.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)
{% endfolding %}
  1. 颜色:blue, cyan, green, yellow, red
  2. 状态:状态填写 open 代表默认打开。

查看图片测试

查看默认打开的折叠框

这是一个默认打开的折叠框。

查看代码测试

假装这里有代码块(代码块没法嵌套代码块)

查看列表测试

  • haha
  • hehe

查看嵌套测试

查看嵌套测试2

查看嵌套测试3

hahaha

代码语言:javascript
复制
{% folding 查看图片测试 %}

![](https://fastly.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://fastly.jsdelivr.net/gh/volantis-x/cdn-emoji/tieba/%E6%BB%91%E7%A8%BD.png' style='height:24px'></span>

{% endfolding %}

{% endfolding %}

{% endfolding %}

注释 notation

  • 标签语法
  • 配置参数
  • 样式展示
  • 显示代码
代码语言:javascript
复制
{% nota [label] , [text] %}
  1. label: 注释词汇
  2. text: 悬停显示的注解内容

把鼠标移动到我上面试试

代码语言:javascript
复制
{% nota 把鼠标移动到我上面试试 ,可以看到注解内容出现在顶栏 %}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-05-02,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Markdown 教程
  • 行内文本样式 text
  • 行内文本 span
  • 段落文本 p
  • 上标标签 tip
  • 动态标签 anima
  • 折叠框 folding
  • 注释 notation
相关产品与服务
腾讯云服务器利旧
云服务器(Cloud Virtual Machine,CVM)提供安全可靠的弹性计算服务。 您可以实时扩展或缩减计算资源,适应变化的业务需求,并只需按实际使用的资源计费。使用 CVM 可以极大降低您的软硬件采购成本,简化 IT 运维工作。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档