butterfly魔改之文章

永久链

npm install hexo-abbrlink --save

透明度、边框

创建文章

执行下列命令来创建一篇新文章或者新的页面。

$ hexo new [layout] <title>

在命令中指定文章的布局（layout），默认为 post，可以通过修改 _config.yml`中的 default_layout 参数来指定默认布局。

布局（Layout）

Hexo 有三种默认布局：post、page 和 draft。在创建这三种不同类型的文件时，它们将会被保存到不同的路径；而自定义的其他布局和 post 相同，都将储存到 source/_posts 文件夹。

布局	路径
post	source/_posts
page	source
draft	source/_drafts

Front-matter

Front-matter 是 markdown 文件最上方以 — 分隔的区域，用于指定个别档案的变数。

段落 → YAML Front matter   #可自建一篇

Page Front-matter 用于页面配置
Post Front-matter 用于文章页配置

Page Front-matter（页面配置）

---
title: #【必需】页面标题
date: #【必需】页面创建日期
updated: #【可选】页面更新日期
type: #【必需】标签、分类和友情链接三个页面需要配置
comments: #【可选】显示页面评论模块 (默认 true)
description: #【可选】页面描述
keywords: #【可选】页面关键字
top_img: #【可选】页面顶部图片
mathjax: #【可选】显示mathjax (当设置mathjax的per_page: false时，才需要配置，默认 false)
katex: #【可选】显示katex (当设置katex的per_page: false时，才需要配置，默认 false)
aside: #【可选】显示侧边栏 (默认 true)
aplayer: #【可选】在需要的页面加载aplayer的js和css,请参考文章下面的音乐配置
highlight_shrink: #【可选】配置代码框是否展开 (true/false) (默认为设置中highlight_shrink的配置)
---

Post Front-matter（文章页配置）

---
title: #【必需】文章标题
date: #【必需】文章创建日期
updated: #【可选】文章更新日期
tags: #【可选】文章标签
categories: #【可选】文章分类
keywords: #【可选】文章关键字
description: #【可选】文章描述
top_img: #【可选】文章顶部图片
comments: #【可选】显示文章评论模块(默认 true)
cover: #【可选】文章缩略图(如果没有设置top_img,文章页顶部将显示缩略图，可设为false/图片地址/留空)
toc: #【可选】显示文章TOC(默认为设置中toc的enable配置)
toc_number: #【可选】显示toc_number(默认为设置中toc的number配置)
toc_style_simple: #【可选】显示 toc 简洁模式
copyright: #【可选】显示文章版权模块(默认为设置中post_copyright的enable配置)
copyright_author: #【可选】文章版权模块的文章作者
copyright_author_href: #【可选】文章版权模块的文章作者链接
copyright_url: #【可选】文章版权模块的文章连结链接
copyright_info: #【可选】文章版权模块的版权声明文字
mathjax: #【可选】显示mathjax(当设置 mathjax 的 per_page: false 时，才需要配置，默认 false )
katex: #【可选】显示 katex (当设置 katex 的 per_page: false 时，才需要配置，默认 false )
aplayer: #【可选】在需要的页面加载 aplayer 的 js 和 css,请参考文章下面的音乐 配置
highlight_shrink: #【可选】配置代码框是否展开(true/false)(默认为设置中 highlight_shrink 的配置)
aside: #【可选】显示侧边栏 (默认 true)
abcjs: #【可选】加载 abcjs (当设置 abcjs 的 per_page: false 时，才需要配置，默认 false )
---

表格美化

https://nokiasonic.github.io/2020/12/09/【Hexo】美化表格/

加密文章

npm install --save hexo-blog-encrypt
# 文章开头添加：
password: aa

pdf插件

安装hexo-pdf

npm install --save hexo-pdf

使用

使用本地资源，可以在markdown文件路径下创建一个同名文件夹，其内放pdf文件
例如：

在需要的文章添加如下语句：（加载不出来）

{% pdf mydocument.pdf %}

使用外部资源同理，

{% pdf https://cdn.jsdelivr.net/gh/Justlovesmile/CDN/pdf/小作文讲义.pdf %}

效果

插入图片

npm install hexo-asset-img --save

标题小风车

主题配置文件_config.butterfly.yml

beautify:
  enable: true
  field: post # site/post
  title-prefix-icon:  '\f863'
  title-prefix-icon-color:  '#af7ab3'

# 小风车
      - "<style>#article-container.post-content h1:before, h2:before, h3:before, h4:before, h5:before, h6:before { -webkit-animation: avatar_turn_around 1s linear infinite; -moz-animation: avatar_turn_around 1s linear infinite; -o-animation: avatar_turn_around 1s linear infinite; -ms-animation: avatar_turn_around 1s linear infinite; animation: avatar_turn_around 1s linear infinite; }</style>"

标题序号

自定义js

function postAddToc () {
  let postContent = document.querySelector('#post>#article-container.post-content')
  let cardToc = document.getElementById('card-toc')
  if (postContent && cardToc) {
    let tocNumber = cardToc.getElementsByClassName('toc-number')
    let tocLink = cardToc.getElementsByClassName('toc-link')
    for (let i = 0; i < tocLink.length; i++) {
      document.getElementById(decodeURIComponent(tocLink[i].attributes.href.value).slice(1)).dataset.toc = tocNumber[i].innerText
    }
  }
}
postAddToc ()

自定义css

#post #article-container.post-content h1,
#post #article-container.post-content h2,
#post #article-container.post-content h3,
#post #article-container.post-content h4,
#post #article-container.post-content h5,
#post #article-container.post-content h6 {
  padding-left: 0 !important; 
}

#post #article-container.post-content h1::before,
#post #article-container.post-content h2::before,
#post #article-container.post-content h3::before,
#post #article-container.post-content h4::before,
#post #article-container.post-content h5::before,
#post #article-container.post-content h6::before {
  position: relative;
  content: attr(data-toc) ' ';
  display: inline;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  margin-left: 0;
}

https://blog.eurkon.com

字数统计

npm install hexo-wordcount --save

文章顶部波浪

修改 themes/butterfly/layout/includes/header/index.pug 大概第 33 行左右

if top_img !== false
  if is_post()
    include ./post-info.pug
+   section.main-hero-waves-area.waves-area
+     svg.waves-svg(xmlns='http://www.w3.org/2000/svg', xlink='http://www.w3.org/1999/xlink', viewBox='0 24 150 28', preserveAspectRatio='none', shape-rendering='auto')
+       defs
+         path#gentle-wave(d='M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z')
+       g.parallax
+         use(href='#gentle-wave', x='48', y='0')
+         use(href='#gentle-wave', x='48', y='3')
+         use(href='#gentle-wave', x='48', y='5')
+         use(href='#gentle-wave', x='48', y='7')
+    #post-top-cover
+      img#post-top-bg(class='nolazyload' src=bg_img)
  else if is_home()
    #site-info
      h1#site-title=site_title
      if theme.subtitle.enable

/* 波浪css */
.main-hero-waves-area {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: -11px;
  z-index: 5;
}
.waves-area .waves-svg {
  width: 100%;
  height: 5rem;
}
/* Animation */

.parallax > use {
  animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
  fill: #f7f9febd;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
  fill: #f7f9fe82;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
  fill: #f7f9fe36;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
  fill: #f7f9fe;
}
/* 黑色模式背景 */
[data-theme="dark"] .parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
  fill: #18171dc8;
}
[data-theme="dark"] .parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
  fill: #18171d80;
}
[data-theme="dark"] .parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
  fill: #18171d3e;
}
[data-theme="dark"] .parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
  fill: #18171d;
}

@keyframes move-forever {
  0% {
    transform: translate3d(-90px, 0, 0);
  }
  100% {
    transform: translate3d(85px, 0, 0);
  }
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
  .waves-area .waves-svg {
    height: 40px;
    min-height: 40px;
  }
}

https://blog.anheyu.com/posts/98c4.html

代码

代码限制高度折叠

highlight_theme: light #  darker / pale night / light / ocean / mac / mac light / false
highlight_copy: true # copy button
highlight_lang: true # show the code language
highlight_shrink: false # true: shrink the code blocks / false: expand the code blocks | none: expand code blocks and hide the button
highlight_height_limit: 300 # unit: px
code_word_wrap: false

全局字体

下载字体放置css文件夹中

https://www.fonts.net.cn/font-32027849465.html

自定义word.css

@font-face {
    /*字体名称，名字可以随便起，但是注意要一致，建议英文*/
    font-family: 'PMZDCST';
    font-display: swap;
    src: url('./PangMenZhengDaoCuShuTi-2.ttf') format("truetype");
  }

在主题配置中插入 -

并配置以下代码：

font:
# 全局字体大小
  global-font-size:  15px
#代码字体大小
  code-font-size:
#全局字体，与我们css文件中的字体名称要一致
  font-family: 'PMZDCST'
#代码字体
  code-font-family: 'PMZDCST'

信息栏美化

/*文章页信息栏美化*/
#post-info .post-title {
  font-weight: 600; /*字体粗细*/
  font-size: 2.5em; /*字体大小*/
  line-height: 2.2; /*元素高度*/
  letter-spacing: 9px; /*字体间距*/
}

/*信息栏高度调整*/
#page-header.post-bg {
  height: 26rem;
}

/*Web端信息栏适配*/
@media screen and (min-width: 421px){
  #page-header #post-info {
    bottom: 8rem;
}
}

/*Wap端信息栏适配*/
@media screen and (max-width: 420px){
  #page-header #post-info {
    bottom: 2rem;
}
}

文章相关推荐卡片美化

/*文章相关推荐卡片美化*/
.relatedPosts > .relatedPosts-list > div {
  border-radius: 20px;
}

文章分页卡片美化

/*文章分页卡片美化*/
#pagination .prev-post a, #pagination .next-post a {
  border-style: inset;
  border-width: 6px;
  border-color: #A8B2D1;
}

https://www.eacls.top

渐变色版权美化

修改[BlogRoot]\themes\butterfly\source\css\_layout\post.styl,直接复制以下内容，替换原文件，这个文件就是自己调节样式的。其中，184行是白天模式的背景色，这里默认是我网站的渐变色，大家可以根据自己的喜好调节；253行是夜间模式的发光光圈颜色，大家也可以自行替换成自己喜欢的颜色：

beautify()
  headStyle(fontsize)
    padding-left: unit(fontsize + 12, 'px')

    &:before
      margin-left: unit((-(fontsize + 6)), 'px')
      font-size: unit(fontsize, 'px')

    &:hover
      padding-left: unit(fontsize + 18, 'px')

  h1,
  h2,
  h3,
  h4,
  h5,
  h6
    transition: all .2s ease-out

    &:before
      position: absolute
      top: calc(50% - 7px)
      color: $title-prefix-icon-color
      content: $title-prefix-icon
      line-height: 1
      transition: all .2s ease-out
      @extend .fontawesomeIcon

    &:hover
      &:before
        color: $light-blue

  h1
    headStyle(20)

  h2
    headStyle(18)

  h3
    headStyle(16)

  h4
    headStyle(14)

  h5
    headStyle(12)

  h6
    headStyle(12)

  ol,
  ul
    p
      margin: 0 0 8px

  li
    &::marker
      color: $light-blue
      font-weight: 600
      font-size: 1.05em

    &:hover
      &::marker
        color: var(--pseudo-hover)

  ul > li
    list-style-type: circle

#article-container
  word-wrap: break-word
  overflow-wrap: break-word

  a
    color: $theme-link-color

    &:hover
      text-decoration: underline

  img
    display: block
    margin: 0 auto 20px
    max-width: 100%
    transition: filter 375ms ease-in .2s

  p
    margin: 0 0 16px

  iframe
    margin: 0 0 20px

  if hexo-config('anchor')
    a.headerlink
      &:after
        @extend .fontawesomeIcon
        float: right
        color: var(--headline-presudo)
        content: '\f0c1'
        font-size: .95em
        opacity: 0
        transition: all .3s

      &:hover
        &:after
          color: var(--pseudo-hover)

    h1,
    h2,
    h3,
    h4,
    h5,
    h6
      &:hover
        a.headerlink
          &:after
            opacity: 1

  ol,
  ul
    ol,
    ul
      padding-left: 20px

    li
      margin: 4px 0

    p
      margin: 0 0 8px

  if hexo-config('beautify.enable')
    if hexo-config('beautify.field') == 'site'
      beautify()
    else if hexo-config('beautify.field') == 'post'
      &.post-content
        beautify()

  > :last-child
    margin-bottom: 0 !important

#post
  .tag_share
    .post-meta
      &__tag-list
        display: inline-block

      &__tags
        display: inline-block
        margin: 8px 8px 8px 0
        padding: 0 12px
        width: fit-content
        border: 1px solid $light-blue
        border-radius: 12px
        color: $light-blue
        font-size: .85em
        transition: all .2s ease-in-out

        &:hover
          background: $light-blue
          color: var(--white)

    .post_share
      display: inline-block
      float: right
      margin: 8px 0
      width: fit-content

      .social-share
        font-size: .85em

        .social-share-icon
          margin: 0 4px
          width: w = 1.85em
          height: w
          font-size: 1.2em
          line-height: w

  .post-copyright
    position: relative
    margin: 40px 0 10px
    padding: 10px 16px
    border: 1px solid var(--light-grey)
    transition: box-shadow .3s ease-in-out
    overflow: hidden
    border-radius: 12px!important
    background: linear-gradient(135deg, #516395, #6b6b83, #3a6186);

    &:before
      background var(--heo-post-blockquote-bg)
      position absolute
      right -26px
      top -120px
      content '\f25e'
      font-size 200px
      font-family 'Font Awesome 5 Brands'
      opacity .2

    &:hover
      box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5)

    .post-copyright
      &-meta
        color: $light-blue
        font-weight: bold

      &-info
        padding-left: 6px

        a
          text-decoration: none
          word-break: break-word

          &:hover
            text-decoration: none

  .post-copyright-cc-info
    color: $theme-color;

  .post-outdate-notice
    position: relative
    margin: 0 0 20px
    padding: .5em 1.2em
    border-radius: 3px
    background-color: $noticeOutdate-bg
    color: $noticeOutdate-color

    if hexo-config('noticeOutdate.style') == 'flat'
      padding: .5em 1em .5em 2.6em
      border-left: 5px solid $noticeOutdate-border

      &:before
        @extend .fontawesomeIcon
        position: absolute
        top: 50%
        left: .9em
        color: $noticeOutdate-border
        content: '\f071'
        transform: translateY(-50%)

  .ads-wrap
    margin: 40px 0
.post-copyright-m-info
  .post-copyright-a,
  .post-copyright-c,
  .post-copyright-u
    display inline-block
    width fit-content
    padding 2px 5px
[data-theme="dark"]
  #post
    .post-copyright
      background #2E2E2E
      text-shadow #F7E7CE 1 0 0px
      border 2px solid #9C8CB9
      box-shadow 0 0 5px var(--theme-color)
      animation flashlight 1s linear infinite alternate
  .post-copyright-info
    color #9C8CB9

#post
  .post-copyright__title
    font-size 22px
  .post-copyright__notice
    font-size 15px
  .post-copyright
    box-shadow 2px 2px 5px

https://www.fomal.cc/posts/5389e93f.html

外挂标签

https://blog.antmoe.com/posts/3b43914f

分栏 tab

• 标签语法
• 配置参数
• 样式预览
• 示例源码

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

1.Unique name :

• 选项卡块标签的唯一名称，不带逗号。
• 将在#id中用作每个标签及其索引号的前缀。
• 如果名称中包含空格，则对于生成#id，所有空格将由破折号代替。
• 仅当前帖子/页面的URL必须是唯一的！

2.[index]:

• 活动选项卡的索引号。
• 如果未指定，将选择第一个标签（1）。
• 如果index为-1，则不会选择任何选项卡。
• 可选参数。

3.[Tab caption]:

• 当前选项卡的标题。
• 如果未指定标题，则带有制表符索引后缀的唯一名称将用作制表符的标题。
• 如果未指定标题，但指定了图标，则标题将为空。
• 可选参数。

4.[@icon]:

• FontAwesome图标名称（全名，看起来像“ fas fa-font”）
• 可以指定带空格或不带空格；
• 例如’Tab caption @icon’ 和 ‘Tab caption@icon’.
• 可选参数。

• test1 1
• test1 2
• test1 3

This is Tab 1.

This is Tab 2.

This is Tab 3.

{% tabs test1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

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

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

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

链接卡片

• 标签语法
• 样式预览
• 示例源码

{% link 标题, 链接, 图片链接（可选） %}

引用站外地址

Rshimmer

https://rshimmering.github.io

{% link Rshimmer, https://rshimmering.github.io, /img/avatar.png %}

网站卡片 sites

• 标签语法
• 样式预览
• 示例源码

{% sitegroup %}
{% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %}
{% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %}
{% endsitegroup %}

xaoxuu

inkss

MHuiG

Colsrch

Linhk1606

{% 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 MHuiG, url=https://blog.mhuig.top, screenshot=https://i.loli.net/2020/08/22/d24zpPlhLYWX6D1.png, avatar=https://cdn.jsdelivr.net/gh/MHuiG/imgbed@master/data/p.png, 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 %}

音频 audi

• 标签语法
• 样式预览
• 示例源码

{% audio 音频链接 %}

{% audio https://github.com/volantis-x/volantis-docs/releases/download/assets/Lumia1020.mp3 %}

视频 video

• 标签语法
• 参数配置
• 样式预览
• 示例源码

{% video 视频链接 %}

对其方向：left, center, right
列数：逗号后面直接写列数，支持 1 ～ 4 列。

100%宽度

100%宽度

{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}

50%宽度

{% videos, 2 %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% endvideos %}

25%宽度

{% videos, 4 %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}
{% endvideos %}

折叠框

• 标签语法
• 配置参数
• 样式预览
• 示例源码

{% folding 参数（可选）, 标题 %}
![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)
{% endfolding %}

颜色：blue, cyan, green, yellow, red
状态：状态填写 open 代表默认打开。

查看图片测试

查看默认打开的折叠框

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

查看代码测试

假装这里有代码块（代码块没法嵌套代码块）

查看列表测试

• haha
• hehe

查看嵌套测试

查看嵌套测试2

查看嵌套测试3

hahaha

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

时间线

• 标签语法
• 参数设置
• 样式预览
• 示例源码

{% timeline 时间线标题（可选）[,color] %}
<!-- timeline 时间节点（标题） -->
正文内容
<!-- endtimeline -->
<!-- timeline 时间节点（标题） -->
正文内容
<!-- endtimeline -->
{% endtimeline %}

参数	解释
title	标题/时间线
color	timeline颜色:default(留空) / blue / pink / red / purple / orange / green

时间轴样式

2020-07-24 2.6.6 -> 3.0

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 服务。

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。

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

小标签及边框颜色

• 标签语法
• 样式预览
• 示例源码

{% label text color %}

参数	解释
text	文字
color	可选背景颜色，默认 default default/blue/pink/red/purple/orange/green

臣亮言：先帝 創業未半，而中道崩殂 。今天下三分，益州疲敝 ，此誠危急存亡之秋 也！然侍衞之臣，不懈於內；忠志之士 ，忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。誠宜開張聖聽，以光先帝遺德，恢弘志士之氣；不宜妄自菲薄，引喻失義，以塞忠諫之路也。
宮中、府中，俱為一體；陟罰臧否，不宜異同。若有作奸 、犯科 ，及為忠善者，宜付有司，論其刑賞，以昭陛下平明之治；不宜偏私，使內外異法也。

臣亮言：{% label 先帝 %}創業未半，而{% label 中道崩殂 blue %}。今天下三分，{% label 益州疲敝 pink %}，此誠{% label 危急存亡之秋 red %}也！然侍衞之臣，不懈於內；{% label 忠志之士 purple %}，忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。誠宜開張聖聽，以光先帝遺德，恢弘志士之氣；不宜妄自菲薄，引喻失義，以塞忠諫之路也。
宮中、府中，俱為一體；陟罰臧否，不宜異同。若有{% label 作奸 orange %}、{% label 犯科 green %}，及為忠善者，宜付有司，論其刑賞，以昭陛下平明之治；不宜偏私，使內外異法也。

行内小标签

• 下划线
• 着重线
• 下划线
• 删除线
• 按键
• 隐藏框

<u>下划线</u>

下划线

<emp>着重线</emp>

着重线

<wavy>波浪线</wavy>

波浪线

<del>删除线</del>

删除线

<kbd>command</kbd>

command

<psw>这里没有验证码</psw>

这里没有验证码