标签美化(转载+自创)

请注意，本文最近一次更新于：2022-08-07,文章内容可能已经不具有时效性，请谨慎参考

本文最后更新于：2022年8月7日星期日中午12点10分 +08:00

我们更新啦!

非原创声明：本文内容整合摘选自Akilarの糖果屋，所有权归站长所有

行内文本样式text

  • 标签语法
    1
    2
    3
    4
    5
    6
    {% 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 这里没有验证码 %}
  • 效果展示
  1. 带下划线的文本
  2. 带着重号的文本
  3. 波浪线的文本
  4. 删除线的文本
  5. 键盘样式的文本command+D
  6. 密码样式的文本这里没有验证码

行内文本span

  • 标签语法
    1
    {% span 样式参数列表(参数用空格间隔)，文本内容%}
  • 参数列表
    1. 字体：logo，code
    2. 颜色：red，yellow，green，cyan，blue，gray.etc
    3. 大小：small，h4，h3，h2，h1，large，huge，ultra
    4. 对齐方向：left，right，center
  • 实例代码
    1
    2
    3
    4
    5
    6
    7
    8
    - 彩色文字
    在一段话中方便插入各种颜色的标签，包括：{% 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 %} 
    - 综合实例
    {% span center logo ultra blue, USTC-NKU%}
  • 效果展示
    • 彩色文字
      在一段话中方便插入各种颜色的标签，包括：红色、黄色、绿色、青色、蓝色、灰色。
    • 超大号文字
      文档「开始」页面中的标题部分就是超大号文字。 A Wonderful Theme for Hexo
    • 综合实例

段落文本p

  • 标签语法
    1
    {% p 参数列表(参数以空格划分), 文本内容 %}
  • 参数列表
    1. 字体：logo，code
    2. 颜色：red，yellow，green，cyan，blue，gray.etc
    3. 大小：small，h4，h3，h2，h1，large，huge，ultra
    4. 对齐方向：left，right，center
  • 综合实例
    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 yellow, USTC-NKU %}
  • 效果展示
    • 彩色文字
      在一段话中方便插入各种颜色的标签，包括：

      红色

      黄色

      绿色

      青色

      蓝色

      灰色

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

      USTC-NKU

引用note

  • 标签语法
    1
    2
    3
    {% note [class] [no-icon] [style] %}
    Any content
    {% endnote %}  //endnote 一定不能忘记写上
  • 参数列表
    1. class: primary,success,info,warning,danger，default可缺省
    2. icon: 用于给note添加fontawesome图标，若不需要图标内写no-icon，可缺省
    3. style: 本博客默认为modern,可以修改为simple,modern,disabled,可缺省
  • 实例代码
    1
    2
    3
    4
    5
    6
    {% 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 %}
  • 效果展示

    default 提示块标签

    primary 提示块标签

    success 提示块标签

    info 提示块标签

    warning 提示块标签

    danger 提示块标签

上标标签tip

  • 标签语法
    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
    {% 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 %}
  • 效果展示

    默认情况

    success

    error

    warning

    bolt

    ban

    home

    sync

    cogs

    key

    bell

    自定义font awesome图标

动态标签tip

  • 标签语法
    1
    {% tip [参数，可选] %}文本内容{% endtip %}
  • 参数列表
    将所需的CSS类添加到图标（或DOM中的任何元素）。
    对于父级悬停样式，需要给目标元素添加指定CSS类，同时还要给目标元素的父级元素添加CSS类
    可以通过给目标元素添加CSS类faa-fast或faa-slow来控制动画快慢
  • 实例代码
    1
    2
    3
    4
    5
    6
    7
    - 页面加载时就显示动画效果
    {% tip warning faa-flash animated%}warning{% endtip %}
    {% tip error faa-horizontal animated%}error{% endtip %}
    - 鼠标悬停时才显示动画效果
    {% tip success faa-float animated-hover%}success{% endtip %}
    - 动画速度调整
    {% tip faa-pulse animated faa-slow%}custom{% endtip %}
  • 效果展示
    • 页面加载就显示

      warning

      error

    • 鼠标悬停才显示

      success

    • 动画速度调整

      custom

折叠框folding

  • 标签语法
    1
    2
    3
    {% folding 参数(可选)，标题 %}
    content
    {% endfolding %}
  • 参数列表
    1. 颜色
    2. 状态: 填写open表示默认打开
    3. content：可以是图片、文字、网址、代码块等
    4. 支持嵌套
  • 实例代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    示例一
    {% folding blue open, 示例一测试 %}
    这是一个打开的折叠框测试
    {% endfolding %}
    示例二
    {% folding, 示例二测试 %}
    {% folding, 示例二第二层 %}
    {% span blue, 这是一个嵌套测试 %}
    {% endfolding %}
    {% endfolding %}
  • 效果展示
    示例一
    示例一测试

    这是一个打开的折叠框测试

    示例二
    示例二测试
    示例二第二层

    这是一个嵌套测试

    诗词标签poem

  • 标签语法
    1
    2
    3
    {% poem [title],[author] %}
    诗词内容
    {% endpoem %}
  • 参数列表
    title: 诗歌标题
    author：作者，可缺省
  • 实例代码
    1
    2
    3
    4
    5
    6
    {% poem 鹊仙桥·纤云弄巧，秦观%}
    纤云弄巧，飞星传恨，银汉迢迢暗度。
    金风玉露一相逢，便胜却人间无数。
    柔情似水，佳期如梦，忍顾鹊桥归路。
    两情若是久长时，又岂在朝朝暮暮。
    {% endpoem %}
  • 效果展示
    鹊仙桥·纤云弄巧，秦观

    纤云弄巧,飞星传恨， 银汉迢迢暗度。
    金风玉露一相逢，便胜却人间无数。
    柔情似水，佳期如梦，忍顾鹊桥归路。
    两情若是久长时，又岂在朝朝暮暮。

注释notation

  • 标签语法
    1
    {% nota [label],[text] %}
  • 参数列表
    label: 注释词汇
    text: 注释内容，注释内容会出现在顶部
  • 实例代码
    1
    {% nota CAS指什么, CAS是中古科学院的英文缩写 %}
  • 效果展示
    CAS指什么

旋转相册carousel

  • 标签语法
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
      {% carousel [Id],[name] %}
      ![name](src)
      ![name](src)
      {% endcarousel %}
    - 参数列表
      Id: 相册唯一ID，用于监测相册鼠标动作。禁止使用中文。同一页内不得出现相同ID的carousel相册
      name: 相册中间显示的内容，建议用英文单引号包裹
    - 实例代码
      ```markdown
      {% carousel JNZ,嘉南传 %}
      ![](\标签/1.jpg)
      ![](\标签/2.jpg)
      ![](\标签/3.jpg)
      ![](\标签/4.jpg)
      ![](\标签/5.jpg)
      ![](\标签/6.jpg)
      {% endcarousel %}
  • 效果展示

github徽标bdage

  • 标签语法
    1
    {% bdage [right],[left],[logo]||[color],[link],[title]||[option] %}
  • 参数列表
    left：徽标左边的信息，必选参数。
    right: 徽标右边的信息，必选参数，
    logo：徽标图标，图标名称详见simpleicons，可选参数。
    color：徽标右边的颜色，可选参数。
    link：指向的链接，可选参数。
    title：徽标的额外信息，可选参数。主要用于优化SEO，但object标签不会像a标签一样在鼠标悬停显示title信息。
    option：自定义参数，支持shields.io的全部API参数支持，具体参数可以参看上文中的拓展写法示例。形式为name1=value2&name2=value2。
  • 实例代码
    1
    2
    3
    4
    {% bdage Theme,Fluid %}
    {% bdage Frame,Hexo,hexo %}
    {% bdage Source,Github,Github||,https://github.com/USTC-NKU %}
    {% bdage CDN,JsDelivr,jsDelivr||abcdef%}
  • 效果展示

时间轴timeline

  • 标签语法
    1
    2
    3
    4
    5
    6
    7
    8
    {% timeline 时间线标题（可选） %}
    {% timenode 时间节点（标题） %}
    正文内容
    {% endtimenode %}
    {% timenode 时间节点（标题） %}
    正文内容
    {% endtimenode %}
    {% endtimeline %}
  • 实例代码
    1
    2
    3
    4
    5
    6
    7
    8
    {% timeline 更新日志 %}
    {% timenode 2021-11-27%}
    {% span left purple small ,1.添加`实验室`模块 %}
    {% endtimenode %}
    {% timenode 2021-11-28 %}
    {%span left purple small, 1.尝试优化`标签`样式 %}
    {% endtimenode %}
    {% endtimeline %}
  • 效果展示

    更新日志

    2021-11-27

    1.添加实验室模块

    2021-11-28

    1.尝试优化标签样式

按钮btns

  • 标签语法

    1
    2
    3
    4
    {% btns 样式参数 %}
    {% cell 标题, 链接, 图片或者图标 %}
    {% cell 标题, 链接, 图片或者图标 %}
    {% endbtns %}

  • 参数配置
    样式参数：rounded,circle;,

    ;wild,fill,center,around,grid2-5

  • 实例代码

    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
    {% btns circle grid5 %}
    {% cell USTC-NKU, https://github.com/USTC-NKU, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
    {% cell USTC-NKU, https://github.com/USTC-NKU, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
    {% cell USTC-NKU, https://github.com/USTC-NKU, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
    {% cell USTC-NKU, https://github.com/USTC-NKU, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
    {% cell USTC-NKU, https://github.com/USTC-NKU, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
    {% endbtns %}

    {% btns center grid5 %}
    {% cell 下载源码, /, fa fa-download %}
    {% cell 查看文档, /, fa fa-book %}
    {% endbtns %}

    {% btns circle center grid5 %}
    <a href='https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1'>
      <i class='fa fa-apple'></i>
      <b>心率管家</b>
      {% p red, 专业版 %}
      <img src='https://cdn.jsdelivr.net/gh/USTC-NKU/cdn-assets/qrcode/heartmate_pro.png'>
    </a>
    <a href='https://apps.apple.com/cn/app/heart-mate-lite-hrm-utility/id1475747930?ls=1'>
      <i class='fa fa-apple'></i>
      <b>心率管家</b>
      {% p green, 免费版 %}
      <img src='https://cdn.jsdelivr.net/gh/USTC-NKU/cdn-assets/qrcode/heartmate_lite.png'>
    </a>
    {% endbtns %}

  • 效果展示

    USTC-NKU USTC-NKU USTC-NKU USTC-NKU USTC-NKU
    下载源码 查看文档
    心率管家

    专业版

     心率管家

    免费版

Github卡片ghcard

  • 标签语法

    1
    2
    {% ghcard 用户名, 其它参数（可选） %}
    {% ghcard 用户名/仓库, 其它参数（可选） %}

  • 实例代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
     - 用户信息卡片 
    | {% ghcard USTC-NKU %} | {% ghcard USTC-NKU, theme=vue %} |
    | -- | -- |
    | {% ghcard USTC-NKU, theme=buefy %} | {% ghcard USTC-NKU, theme=solarized-light %} |
    | {% ghcard USTC-NKU, theme=onedark %} | {% ghcard USTC-NKU, theme=solarized-dark %} |
    | {% ghcard USTC-NKU, theme=algolia %} | {% ghcard USTC-NKU, theme=calm %} |

    - 仓库信息卡片
    | {% ghcard volantis-x/hexo-theme-volantis %} | {% ghcard volantis-x/hexo-theme-volantis, theme=vue %} |
    | -- | -- |
    | {% ghcard volantis-x/hexo-theme-volantis, theme=buefy %} | {% ghcard volantis-x/hexo-theme-volantis, theme=solarized-light %} |
    | {% ghcard volantis-x/hexo-theme-volantis, theme=onedark %} | {% ghcard volantis-x/hexo-theme-volantis, theme=solarized-dark %} |
    | {% ghcard volantis-x/hexo-theme-volantis, theme=algolia %} | {% ghcard volantis-x/hexo-theme-volantis, theme=calm %} |

  • 效果展示

    • 用户信息卡片

    • 仓库信息卡片

行内图片inlineimage

  • 标签语法
    1
    {% inlineimage 图片链接, height=高度（可选） %}
  • 参数配置
    height= Num px
  • 实例代码
    1
    2
    这是 {% inlineimage https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/0000.gif %} 一段话。
    这又是 {% inlineimage https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/5150.gif, height=40px %} 一段话。
  • 效果展示
    这是 一段话。
    这又是 一段话。

网站卡片site

  • 标签语法
    1
    2
    3
    4
    {% sitegroup %}
    {% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %}
    {% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %}
    {% endsitegroup %}
  • 实例代码
    1
    2
    3
    4
    5
    6
    {% sitegroup %}
    {% site xaoxuu, url=https://xaoxuu.com, screenshot=https://i.loli.net/2020/08/21/VuSwWZ1xAeUHEBC.jpg, avatar=https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png, description=简约风格 %}
    {% site inkss, url=https://inkss.cn, screenshot=https://i.loli.net/2020/08/21/Vzbu3i8fXs6Nh5Y.jpg, avatar=https://cdn.jsdelivr.net/gh/inkss/common@master/static/web/avatar.jpg, description=这是一段关于这个网站的描述文字 %}
    {% site Colsrch, url=https://colsrch.top, screenshot=https://i.loli.net/2020/08/22/dFRWXm52OVu8qfK.png, avatar=https://cdn.jsdelivr.net/gh/Colsrch/images/Colsrch/avatar.jpg, description=这是一段关于这个网站的描述文字 %}
    {% site Linhk1606, url=https://linhk1606.github.io, screenshot=https://i.loli.net/2020/08/21/3PmGLCKicnfow1x.png, avatar=https://i.loli.net/2020/02/09/PN7I5RJfFtA93r2.png, description=这是一段关于这个网站的描述文字 %}
    {% endsitegroup %}
  • 效果展示
    xaoxuu简约风格
    inkss这是一段关于这个网站的描述文字
    Colsrch这是一段关于这个网站的描述文字
    Linhk1606这是一段关于这个网站的描述文字

单选列表radio

  • 标签语法
    1
    {% radio 样式参数（可选）, 文本（支持简单md） %}
  • 实例代码
    1
    2
    3
    4
    5
    6
    7
    {% radio 纯文本测试 %}
    {% radio checked, 支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}
    {% radio red checked, 支持自定义颜色 %}
    {% radio green, 绿色 %}
    {% radio yellow, 黄色 %}
    {% radio cyan, 青色 %}
    {% radio blue, 蓝色 %}
  • 效果展示

    纯文本测试

    支持简单的 markdown 语法

    支持自定义颜色

    绿色

    黄色

    青色

    蓝色

分栏tabs

  • 标签语法

    1
    2
    3
    {% tabs Unique name, [index] %}
    <!-- tab [Tab caption] [@icon] -->
    Any content (support inline tags too).

    Unique name :
    选项卡块标签的唯一名称，不带逗号。
    将在 #id 中用作每个标签及其索引号的前缀。
    如果名称中包含空格，则对于生成 #id，所有空格将由破折号代替。
    仅当前帖子 / 页面的 URL 必须是唯一的！
    [index]:
    活动选项卡的索引号。
    如果未指定，将选择第一个标签（1）。
    如果 index 为 - 1，则不会选择任何选项卡。
    可选参数。
    [Tab caption]:
    当前选项卡的标题。
    如果未指定标题，则带有制表符索引后缀的唯一名称将用作制表符的标题。
    如果未指定标题，但指定了图标，则标题将为空。
    可选参数。
    [@icon]:
    FontAwesome 图标名称（全名，看起来像 “fa fa-font”）
    可以指定带空格或不带空格；
    例如’Tab caption @icon’ 和 ‘Tab caption@icon’.
    可选参数。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    {% tabs test1 %}
    <!-- tab a-->
    **This is Tab 1.**
    <!-- endtab -->

    <!-- tab b-->
    **This is Tab 2.**
    <!-- endtab -->

    <!-- tab c-->
    **This is Tab 3.**
    <!-- endtab -->
    {% endtabs %}
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    {% tabs test2, 3 %}
     <!-- tab -->
     **This is Tab 1.**
     <!-- endtab -->
     <!-- tab -->
     **This is Tab 2.**
     <!-- endtab -->
     <!-- tab -->
     **This is Tab 3.**
     <!-- endtab -->
     {% endtabs %}
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    {% tabs test4 %}
     <!-- tab @fa fa-ravelry -->
     **tab名字为第一个Tab**
     <!-- endtab -->

     <!-- tab @fa fa-apple -->
     **只有图标 没有Tab名字**
     <!-- endtab -->

     <!-- tab 炸弹@fa fa-bomb -->
     名字+icon
     <!-- endtab -->
     {% endtabs %}

  • 效果展示

This is Tab 1.

This is Tab 2.

This is Tab 3.

This is Tab 1.

This is Tab 2.

This is Tab 3.

tab名字为第一个Tab

只有图标 没有Tab名字

名字+icon

彩色文本grad

这是小U自己第一次自己写的一个外挂插件，主要实现渐变文本的样式，食用形式简便

  • 支持文字位置调节，参数:left,center,right
  • 支持文字大小调节，参数：small,large,huge,ultra,h5-1
  • 支持文字粗细调节，参数bold
1
2
3
{% grad center small , 测试文本1%}
{% grad left large , 测试文本2%}
{% grad right small bold , 测试文本3%}

测试文本1

测试文本2

流光文本wavep

这是小U自己第二次自己写的一个外挂插件，主要实现流光文本的样式，食用形式简便

  • 支持文字位置调节，参数:left,center,right
  • 支持文字大小调节，参数：small,large,huge,ultra,h5-1
  • 支持文字粗细调节，参数bold
  • (必选参数)流光样式：linear; linear colorful;
1
2
3
{% wavep center small linear, 测试文本1%}
{% wavep center h2 bold linear, 测试文本2%}
{% wavep center h1 linear colorful ,测试文本3%}

测试文本1

测试文本2

测试文本3

  • 在大小调节时，ultra huge large会出现不同程度溢出

网址卡片link

1
{% link 卡片标题,卡片小标题,网址链接%}
1
{% link 获取网站的Favicon图标并显示在你的网页上,owen0o0,https://github.com/owen0o0/getFavicon %}
引用站外地址
获取网站的Favicon图标并显示在你的网页上
owen0o0
beautify
beautify
您阅读这篇文章共花了：
Invitation
Floral-Sunsunrise
FeynmanDirac
created:12/03/2022
Welcome to Floral-Sunsunrise

This is an identification card as an honored membership of FeynmanDirac

Happy to see you follow FeynmanDirac, enjoy science together

© 版权声明
标签美化(转载+自创)
链接：传送门
作者
Flora-Sunsunrise
创作于
2021-11-28
更新于
2022-08-07
许可协议
CC BY-NC-SA 4.0
免责声明 1 小站名称：USTC-茶糜花开
2 小站网址：https://blog.starysky.top
3 除标注`转载`字样的文章外，小站所发布的文章由小U均由撰写，仅供学习参考，我们尽最大能力保障文章内容的准确性和科学性
4 小站所转载的文章的内容与观点，不代表`USTC-茶糜花开`的立场，文章所有权归属作者所有
5 小站将在《中华人民共和国网络安全法》、《中华人民共和国计算机信息系统安全保护条例》等法律法规的框架下依法依规运行
7 本站文章采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可，阅读后请勿用于任何未授权用途
验证码启动中...