Hexo+Butterfly+GitHub

部署GitHub

在 Hexo 项目根目录下的 _config.yml 进行配置

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: https://github.com/hjhcos/hjhcos.github.io.git
  # 以前是 master 现在默认是 main
  branch: main

在 Git Bash Here 里面执行配置

npm install hexo-deployer-git --save
hexo deploy

恢复以前版本

git log
git reset --hard 80a692e
git push -f

初始目录，网站的内容是 Hexo 目录下的 pubilc 下的内容

配置音乐插件

aplayer:
  meting: true
  asset_inject: false

主题配置

# Inject the css and script (aplayer/meting)
aplayerInject:
  enable: true
  per_page: true


# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    # - <link rel="stylesheet" href="/xxx.css">
  bottom:
    # - <script src="xxxx"></script>
    - <div class="aplayer no-destroy" data-id="6649109696" data-server="netease" data-type="playlist" data-fixed="true" data-mini="true" data-listFolded="false" data-order="list" data-preload="none" data-autoplay="false" muted></div>

文章评论

comments:
  # Up to two comments system, the first will be shown as default
  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo
  use:
    - Valine
    # - Disqus
  text: true # Display the comment name next to the button
  # lazyload: The comment system will be load when comment element enters the browser's viewport.
  # If you set it to true, the comment count will be invalid
  lazyload: true # 只有滚动到评论位置时才会加载评论所需要的资源
  count: true # Display comment count in top_img
  card_post_count: false # Display comment count in Home Page

配置 valine

valine:
  appId:  # leancloud application app id
  appKey:  # leancloud application app key
  pageSize: 10 # comment list page size
  avatar: monsterid # gravatar style https://valine.js.org/#/avatar
  lang: en # i18n: zh-CN/zh-TW/en/ja
  placeholder: 記得留下你的暱稱和郵箱....可以快速收到回復 # valine comment input placeholder(like: Please leave your footprints )
  guest_info: nick,mail,link #valine comment header info (nick/mail/link)
  recordIP: false # Record reviewer IP
  serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
  bg: /img/comment_bg.png # valine background
  emojiCDN: # emoji CDN
  enableQQ: false # enable the Nickname box to automatically get QQ Nickname and QQ Avatar
  requiredFields: nick,mail # required fields (nick/mail)
  option:

在线聊天

1. 创建按钮

   # Chat Button [recommend]
   # It will create a button in the bottom right corner of website, and hide the origin button
   chat_btn: true
   

2. 使用Gitter聊天室

   # gitter
   # https://gitter.im/
   gitter:
     enable: true
     room: hjhcos/community # 你的聊天室房间
   

文章置顶

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

文章封面

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

文章版权

为你的博客文章展示文章版权和许可协议。
修改 主题配置文件

post_copyright:
  enable: true
  decode: false
  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

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

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

文章编辑

在文章标题旁边显示一个编辑按钮，点击会跳转到对应的链接去。

# Post edit
# Easily browse and edit blog source code online.
post_edit:
  enable: false
  # url: https://github.com/user-name/repo-name/edit/branch-name/subdirectory-name/
  # For example: https://github.com/jerryc127/butterfly.js.org/edit/main/source/
  url:

mermaid

使用mermaid标签可以绘制 Flowchart（流程图）、Sequence diagram（时序图 ）、Class Diagram（类别图）、State Diagram（状态图）、Gantt（甘特图）和Pie Chart（圆形图），具体可以查看 mermaid 文档

mermaid:
  enable: true
  # built-in themes: default/forest/dark/neutral
  theme: default

Tabs

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

Unique name   : 没有逗号的制表符块标记的唯一名称。
				将在#id中使用，作为每个标签及其索引号的前缀。
				如果名称中有空格，对于generate #id，所有空格将被破折号替换。
				仅为当前网址的帖子/页面必须是唯一的!
[index]       : 活动选项卡的索引数。
				如果未指定，将选择第一个选项卡(1)。
				如果index为-1，则不会选择任何选项卡。这有点像剧透。
				可选参数。
[Tab caption] :	当前选项卡的标题。
				如果没有指定标题，则使用带有制表索引后缀的惟一名称作为选项卡的标题。
				如果没有指定标题，而是指定了图标，则标题将为空。
				可选参数。
[@icon]       : 图标名称(全称，看起来像“fas fa-font”)
				可指定空格或不指定空格;如。'标签标题@图标'类似于'标签caption@icon'。
				可选参数。

Button

{% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %}

[url]         : 链接
[text]        : 按钮文字
[icon]        : [可选] 图标
[color]       : [可选] 按钮背景顔色(默认style时）
                      按钮字体和边框顔色(outline时)
                      default/blue/pink/red/purple/orange/green
[style]       : [可选] 按钮样式 默认实心
                      outline/留空
[layout]      : [可选] 按钮佈局 默认为line
                      block/留空
[position]    : [可选] 按钮位置 前提是设置了layout为block 默认为左边
                      center/right/留空
[size]        : [可选] 按钮大小
                      larger/留空