炫酷特效(二)

文章页相关配置，炫酷特效插件，让博客更具有美观性、实用性

文章页相关配置

文章顶部图

tag_per_img和category_per_img是 v3.2.0 新增的内容，可对 tag 和 category 进行单独的配置。
并不推荐为每个 tag 和每个 category 都配置不同的顶部图，因为配置太多会拖慢生成速度。

tag_per_img：
  aplayer: https://xxxxxx.png
  android: ddddddd.png
category_per_img：
  随想: hdhdh.png
  推荐: ddjdjdjd.png

文章置顶

【推荐】hexo-generator-index从 v2.0.0 开始，已经支持文章置顶功能。
你可以直接在文章的front-matter区域里添加sticky: 1属性来把这篇文章置顶。数值越大，置顶的优先级越大。

文章封面

文章的Markdown文档上，在Front-matter添加cover，并填上要显示的图片地址。如果不配置cover，可以设置显示默认的cover。
如果不想在首页显示cover，可以设置为false。

修改主题配置文件_config.butterfly.yml。

cover:
  # 是否显示文章封面
  index_enable: true
  aside_enable: true
  archives_enable: true
  # 封面显示的位置
  # 三个值可配置 left , right , both
  position: both
  # 当没有设置cover时，默认的封面显示
  default_cover: 

当配置多张图片时，会随机选择一张作为cover，此时写法应为：

default_cover:
  - https://bu.dusays.com/2022/06/05/629c5257753d1.png
  - https://bu.dusays.com/2022/05/29/62939662553c9.png
  - https://bu.dusays.com/2022/05/26/628fa0426213d.png

文章meta显示

post_meta这个属性用于显示文章的相关信息的。

修改主题配置文件_config.butterfly.yml。

post_meta:
  page:
    date_type: both # created or updated or both 主页文章日期是创建日或者更新日或都显示
    date_format: relative # date/relative 显示日期还是相对日期
    categories: true # true or false 主页是否显示分类
    tags: true # true or false 主页是否显示标签
    label: true # true or false 显示描述性文字
  post:
    date_type: both # created or updated or both 文章页日期是创建日或者更新日或都显示
    date_format: relative # date/relative 显示日期还是相对日期
    categories: true # true or false 文章页是否显示分类
    tags: true # true or false 文章页是否显示标签
    label: true # true or false 显示描述性文字

文章版权和协议许可

修改主题配置文件_config.butterfly.yml。

post_copyright:
  enable: true
  decode: false
  author_href:
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

由于Hexo 4.1开始，默认对网址进行解码，以至于如果是中文网址，会被解码，可设置decode: true来显示中文网址。
如果有文章（例如：转载文章）不需要显示版权，可以在文章页Front-matter中单独设置。

copyright: false

从v3.0.0开始，支持对单独文章设置版权信息，可以在文章Front-matter单独设置.

post_copyright:
copyright_author: xxxx
copyright_author_href: https://xxxxxx.com
copyright_url: https://xxxxxx.com
copyright_info: 此文章版权归xxxxx所有，如有转载，请註明来自原作者

文章内容复制相关配置

修改主题配置文件_config.butterfly.yml。

# copy settings
# copyright: Add the copyright information after copied content (复制的内容后面加上版权信息)
copy:
  enable: true
  copyright:
    enable: true
    limit_count: 50

配置	解释
enable	是否开启网站复制权限
copyright	复制的内容后面加上版权信息
enable	是否开启复制版权信息添加
limit_count	字数限制，当复制文字大于这个字数限制时，将在复制的内容后面加上版权信息

添加版权后的效果：

作者: 学弟不想努力了
链接: http://blog.renyuxin.cn/document/版权说明
来源: 学弟不想努力了
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

相关文章推荐

相关文章推荐的原理是根据文章tags的比重来推荐。

修改主题配置文件_config.butterfly.yml。

related_post:
  enable: true
  limit: 6 # 显示推荐文章数目
  date_type: created # or created or updated 文章日期显示创建日或者更新日

文章锚点

开启文章锚点后，当你在文章页进行滚动时，文章链接会根据标题ID进行替换。
注意: 每替换一次，会留下一个歷史记录。所以如果一篇文章有很多锚点的话，网页的歷史记录会很多。

修改主题配置文件_config.butterfly.yml。

# anchor
# when you scroll in post , the url will update according to header id.
anchor: true

文章过期提醒

可设置是否显示文章过期提醒，以更新时间为基准。

修改主题配置文件_config.butterfly.yml。

# Displays outdated notice for a post (文章过期提醒)
noticeOutdate:
  enable: true
  style: flat # style: simple/flat
  limit_day: 365 # When will it be shown
  position: top # position: top/bottom
  message_prev: It has been
  message_next: days since the last update, the content of the article may be outdated.

limit_day： 距离更新时间多少天才显示文章过期提醒。
message_prev ： 天数之前的文字。
message_next：天数之后的文字。

文章分页按钮

修改主题配置文件_config.butterfly.yml。

# post_pagination (分页)
# value: 1 || 2 || false
# 1: The 'next post' will link to old post
# 2: The 'next post' will link to new post
# false: disable pagination
post_pagination: false

参数	解释
post_pagination: false	关闭分页按钮
post_pagination: 1	下一篇显示的是旧文章
post_pagination: 2	下一篇显示的是新文章

文章打赏

修改主题配置文件_config.butterfly.yml。

reward:
  enable: true
  QR_code:
    - img: /img/wechat.jpg
      link:
      text: 微信
    - img: /img/alipay.jpg
      link:
      text: 支付宝

图片描述

可开启图片Figcaption描述文字显示，优先显示图片的title属性，然后是alt属性。

修改主题配置文件_config.butterfly.yml。

photofigcaption: false

代码相关配置

代码高亮主题

Butterfly支持 6 种代码高亮样式：

• darker
• pale night
• light
• ocean
• mac
• mac light

修改主题配置文件_config.butterfly.yml。中的highlight_theme属性。

highlight_theme: light

代码复制

修改主题配置文件_config.butterfly.yml。中的highlight_copy属性。

highlight_copy: true

代码框展开/关闭

修改主题配置文件_config.butterfly.yml。中的highlight_shrink属性。

highlight_shrink: true #代码框不展开，需点击 '>' 打开

在默认情况下，代码框自动展开，可设置是否所有代码框都关闭状态，点击>可展开代码。

• true 全部代码框不展开，需点击>打开
• false 代码框展开，有>点击按钮
• none 不显示>按钮

代码换行

在默认情况下，Hexo 在编译的时候不会实现代码自动换行。如果你不希望在代码块的区域里有横向滚动条的话，那么你可以考虑开启这个功能。

修改主题配置文件_config.butterfly.yml。中的code_word_wrap属性。

code_word_wrap: true

代码高度限制

v3.7.0 及以上支持。
可配置代码高度限制，超出的部分会隐藏，并显示展开按钮。

highlight_height_limit: false # unit: px

注意：

• 单位是px，直接添加数字，如 200
• 实际限制高度为highlight_height_limit + 30 px，多增加 30px 限制，目的是避免代码高度只超出highlight_height_limit一点时，出现展开按钮，展开没内容。
• 不适用于隐藏后的代码块（ css 设置 display: none）。