HEXO博客搭建(3):主题配置

主题的安装与更换

安装主题

1. 挑选主题，hexo 官网或 github 下载主题。（HEXO theme）

   • 主题支持git、gitee、npm多种方式安装
   • 这里推荐npm（以插件的形式安装）

2. 下载解压，放到自己博客目录下的 themes(非npm安装)文件夹。

   • 通过npm安装的是在node_modules插件目录下

3. 主题配置，修改_config.yml 参数。

4. 查看主题文档，进行主题配置(butterly主题文档)。

修改_config.yml更换butterfly主题

• 默认配置主题

theme:landscape

• 更换butterfly主题

theme: butterfly #更换主题名称

_config.yml 配置参数

Hexo官方配置说明文档

• Hexo官方中文文档
  https://hexo.io/zh-cn/docs/configuration

网站资料

# Site修改网站标题、副标题、作者、语言等
title: 
subtitle: ''
description: ''
keywords:
author: 
language: zh-CN/en
timezone: ''

_config.butterfly.yml 配置参数

• butterfly官方配置说明文档
  https://butterfly.js.org/
• Github项目地址
  https://github.com/jerryc127/butterfly.js.org

个人常用配置

代码高度

highlight_height_limit: 200 # unit: px

社交图标 唤醒QQ对话

• 开通QQ推广
  https://shang.qq.com/v3/index.html

• 参考文章

• 将开通后链接复制进项目即可唤起qq临时会话

# social settings (社交圖標設置)
# formal:
#   icon: link || the description
social:
   fa-brands fa-qq: QQ推广的链接复制到这 ||QQ

主页文章节选

# 主页文章节选(自动节选和文章页description)
1. description： 只显示description
2. both： 优先选择description，如果没有配置description，则显示自动节选的内容
3. auto_excerpt：只显示自动节选
false： 不显示文章内容
# false: do not show the article introduction
index_post_content:
  method: 2
  length: 500 # if you set method to 2 or 3, the length need to config

文章打赏

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

文章过期提醒

# 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.

最新评论

# Aside widget - Newest Comments
newest_comments:
  enable: true
  sort_order: # Don't modify the setting unless you know how it works
  limit: 6
  storage: 10 # unit: mins, save data to localStorage
  avatar: true

标签外挂

tag-hide

2.2.0以上提供

請注意，tag-hide內的標簽外掛content內都不建議有h1 - h6 等標題。因為Toc會把隱藏內容標題也顯示出來，而且當滾動屏幕時，如果隱藏內容沒有顯示出來，會導致Toc的滾動出現異常。

如果你想把一些文字、內容隱藏起來，並提供按鈕讓用戶點擊顯示。可以使用這個標籤外掛。

InlineBlockToggle

inline 在文本里面添加按鈕隱藏內容，只限文字

( content不能包含英文逗號，可用‚)

{% hideInline content,display,bg,color %}

• content: 文本內容

• display: 按鈕顯示的文字(可選)

• bg: 按鈕的背景顏色(可選)

• color: 按鈕文字的顏色(可選)

Demo

哪個英文字母最酷？ {% hideInline 因為西裝褲(C裝酷),查看答案,#FF7242,#fff %}

門裏站着一個人? {% hideInline 閃 %}

哪個英文字母最酷？ 查看答案因為西裝褲(C裝酷)

門裏站着一個人? Click閃

block獨立的block隱藏內容，可以隱藏很多內容，包括圖片，代碼塊等等

( display 不能包含英文逗號，可用‚)

{% hideBlock display,bg,color %}
content
{% endhideBlock %}

• content: 文本內容
• display: 按鈕顯示的文字(可選)
• bg: 按鈕的背景顏色(可選)
• color: 按鈕文字的顏色(可選)

Demo

查看答案
{% hideBlock 查看答案 %}
傻子，怎麼可能有答案
{% endhideBlock %}

查看答案

查看答案

傻子，怎麼可能有答案

2.3.0以上支持

如果你需要展示的內容太多，可以把它隱藏在收縮框裏，需要時再把它展開。

( display 不能包含英文逗號，可用‚)

{% hideToggle display,bg,color %}
content
{% endhideToggle %}

Demo

{% hideToggle Butterfly安裝方法 %}
在你的博客根目錄裏

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

如果想要安裝比較新的dev分支，可以

git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

{% endhideToggle %}

Butterfly安裝方法

在你的博客根目錄裏

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

如果想要安裝比較新的dev分支，可以

git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

timeline

{% timeline 2022 %}
<!-- timeline 01-02 -->
这是测试页面
<!-- endtimeline -->
{% endtimeline %}

美化页面显示

# 美化页面显示
beautify:
  enable: true
  field: site # site/post
  title-prefix-icon: '\f0c1'
  title-prefix-icon-color: "#F47466"

加载动画

# 加载动画 Loading Animation
preloader: true

预加载

# https://instant.page/
# prefetch (預加載)
instantpage: true

Lazyload (圖片懶加載)

https://github.com/verlok/vanilla-lazyload

# Lazyload (圖片懶加載)
# https://github.com/verlok/vanilla-lazyload
lazyload:
  enable: true
  field: post # site/post 全站和文章
  placeholder: /img/loading.gif   #加载图片的路径
  blur: false  #模糊(最好关闭)

Archives时间轴页面img配置

The banner image of archive page

#archive_img: https://cdn.jsdelivr.net/gh/Winward-King/picture_host@master/image/164521428629922.jpg
archive_img: /images/Wlop/70.jpg