这是一个基于 Hexo 7.3.0 ，Hutterfly 5.3.5 ，macOS Sequoia 15.5 的博客配置教程。

之前 lucky 用的是 Matery 主题，但是由于换了新设备，导致数据损坏，所以便有了这篇文章。

1、网站基本信息

除了此处修改的是 Hexo 配置文件 _config.yml，后面的都是修改 Butterfly 主题配置文件 _config.butterfly.yml

1
2
3
4
5
6
7
title: 网站标题
subtitle: 网站副标题
description: 网站描述
keywords: 网站关键字1,网站关键字2,网站关键字3
author: 站点作者
language: zh-CN
timezone: Asia/Shanghai

2、导航栏配置

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

1
2
3
4
5
6
7
nav:
  # 左上角是否显示头像
  logo:
  # 左上角是否显示网站主题
  display_title: true
  # 是否固定顶部状态栏
  fixed: false

3、顶部目录配置

Butterfly 支持引用 font-awesome v6 图标

1
2
3
4
5
6
7
8
menu:
  主页: / || fas fa-home
  归档: /archives/ || fa fa-folder-open
  分类: /categories/ || fa fa-archive
  标签: /tags/ || fa fa-tags
  友链: /link/ || fa fa-link
  留言: /comment/ || fa fa-paper-plane
  关于: /about/ || fas fa-user

对于不存在的目录需要自己新建，例如

1
hexo new page archives

4、网站首页配置

4.1、文章卡片布局

文章封面制作网站推荐：https://nav.rdonly.com/laboratory/bgimage/backimage.html

1
2
3
4
5
6
7
8
# 1 - 封面在左，信息在右
# 2 - 封面在右，信息在左
# 3 - 封面和信息左右交替显示
# 4 - 封面在上，信息在下
# 5 - 信息显示在封面上
# 6 - 瀑布流布局，封面在上，信息在下
# 7 - 瀑布流布局，信息显示在封面上
layout: 3

4.2、主页文章节选

1
2
3
4
5
6
7
8
# 1 - 只显示 description
# 2 - 优先选择 description，如果沒有配置 description，则显示自动节选的內容
# 3 - 只显示自动节选
# 4 - 不显示文章内容
index_post_content:
  method: 1
  # 自动节选内容长度
  length: 500

5、代码高亮配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
code_blocks:
  # 代码快主题: darker / pale night / light / ocean / false
  theme: pale night
  # 是否启用 mac 主题代码块
  macStyle: true
  # 代码块高度限制 (unit: px), 默认展开全部代码块
  height_limit: 450
  # 是否自动换行
  word_wrap: false
	# 是否允许复制
  copy: true
  # 是否显示代码语言
  language: true
  # 是否收缩代码块
  	# true: 收缩代码块 
  	# false: 展开代码块
  	# none: 展开代码块并隐藏收缩按钮
  shrink: false
  # 是否允许全屏
  fullpage: false

6、社交图标配置

Butterfly 支持引用 font-awesome v6 图标

1
2
3
4
5
social:
  fas fa-rss: atom.xml || RSS || '#1d5ddd'
  fas fa-envelope: mailto:[email protected] || Email || '#4a7dbe'
  fab fa-bilibili: https://space.bilibili.com/xxxx || bilibili || '#FB7299'
  fab fa-github: https://github.com/xxx || Github || '#2fdd1d'

7、各种图片配置

7.1、头像

1
2
3
4
5
6
# 网页 title 图标
favicon: /img/title.icon
avatar:
  img: /img/avatar.png
  # 头像会一直转圈
  effect: true

7.2、页脚背景图

1
2
# 默认显示蓝色，可设置图片或者颜色（HEX值/RGB值/顔色单词/渐变色)
footer_img: 'linear-gradient(20deg, #0062be, #925696, #cc426e, #fb0347)'

7.3、网页背景图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 默认显示白色，可设置图片或者颜色（HEX值/RGB值/顔色单词/渐变色)
background: 'linear-gradient(20deg, #0062be, #925696, #cc426e, #fb0347)'

# 网页背景彩带特效
canvas_ribbon:
	# 是否开启彩带特效
  enable: true
  # 彩带的大小（px）
  size: 150
  # 彩带的透明度
  alpha: 0.6
  # 彩带的层级
  zIndex: -1
  # 点击更换彩带
  click_to_change: false
  # 手机端是否显示彩带
  mobile: false

8、文章信息展示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
post_meta:
  # 首页文章信息展示
  page:
    # Choose: created / updated / both
    date_type: both
    # Choose: date / relative
    date_format: date
    categories: true
    tags: true
    label: true
  # 文章详情页信息展示
  post:
    # Choose: left / center
    position: left
    # Choose: created / updated / both
    date_type: both
    # Choose: date / relative
    date_format: date
    categories: true
    tags: true
    label: true

9、侧边栏功能配置

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
aside:
	# 是否启用侧边栏
  enable: true
  # 是否默认隐藏侧边栏
  hide: false
  # 是否显示隐藏侧边栏的按钮
  button: true
  # 是否在移动端显示侧边栏
  mobile: true
  # 侧边栏位置，left / right
  position: right
  # archive、tag、category 页面是否显示 aside
  display:
    archive: true
    tag: true
    category: true
  card_author:
  	# 是否显示作者卡片
    enable: true
    description: 
    # 是否显示按钮
    button:
      enable: false
      icon: fab fa-github
      text: Follow Me
      link: https://github.com/xxxxxx      
  card_announcement:
  	# 是否显示公告卡片
    enable: false
    content: 公告内容
  card_recent_post:
  	# 是否显示最新文章卡片
    enable: true
    # 显示文章数目，0 为全部
    limit: 5
    # Sort: date / updated
    sort: date
    sort_order:
  card_newest_comments:
  	# 是否显示最近评论
    enable: false
    sort_order:
    limit: 6
    # Unit: mins, save data to localStorage
    storage: 10
    avatar: true
  card_categories:
  	# 是否显示分类卡片
    enable: true
    # 显示分类数目，0 为全部
    limit: 8
    # Choose: none / true / false
    expand: none
    sort_order:
  card_tags:
  	# 是否显示标签麻片
    enable: true
    # 显示标签数目，0 为全部
    limit: 40
    color: true
    # Order of tags, random/name/length
    orderby: random
    # Sort of order. 1, asc for ascending; -1, desc for descending
    order: 1
    sort_order:
  card_archives:
  	# 是否显示归档卡片
    enable: true
    # 归档类型，monthly / yearly
    type: monthly
    # Eg: YYYY年MM月
    format: MMMM YYYY
    # Sort of order. 1, asc for ascending; -1, desc for descending
    order: -1
    # 显示归档数目，0 为全部
    limit: 5
    sort_order:
  card_post_series:
  	# 是否显示文章系列卡片
    enable: true
    # 是否显示系列名称
    series_title: true
    # 排序方式，title / date
    orderBy: 'date'
    # 排序方式，1 为升序，-1 为降序
    order: -1
  card_webinfo:
  	# 是否显示网站信息卡片
    enable: true
    # 是否显示文章数量
    post_count: true
    # 是否显示最后更新日期
    last_push_date: true
    sort_order: 
    # Time difference between publish date and now
    # Formal: Month/Day/Year Time or Year/Month/Day Time
    # Leave it empty if you don't enable this feature
    runtime_date: Year/Month/Day

10、复制相关配置

1
2
3
4
5
6
7
8
copy:
	# 是否允许复制
  enable: true
  copyright:
  	# 复制的内容后面加上版权信息
    enable: false
    # 当超过字数限制时加上版权信息
    limit_count: 150

10、评论功能配置

笔者这里选择的是 Twikoo 评论系统进行部署配置，具体操作详见：使用 Netlify 云函数部署

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
comments:
	# 使用 Twikoo 评论系统
	use: Twikoo
	# 显示文章评论数量
	text: true
	# 懒加载，当评论框出现在视野中再加载
	azyload: true
	# 文章页面显示评论数量
	count: true
	# 在首页封面显示评论数量
	card_post_count: false

twikoo:
	# 云函数地址
  envId: http://xxxx/.netlify/functions/twikoo
  # 无需填写，默认就行
  region:
  visitor: false	# 默认
  option:

进入 Twikoo 管理后台，开始个性化配置

image-20250527181555359

11、网站分析服务

笔者这里使用的赛博善人提供的网络分析服务

  1. 登录 cloudflare ，找到 “分析与记录” ，选择 Web Analytics

image-20250527195153533

  1. 选择 新增网站，添加你的域名。添加完成后选择 管理网站，通过 JS 代码来安装启用

image-20250527204657937

  1. 复制生成的 JS 代码中的 Token 值到主图配置文件 _config.butterfly.yml
1
cloudflare_analytics: 79bd1a2008ca43f1babbe3ec69e36dff

12、谷歌广告服务

进入谷歌广告，生成 AdSense 代码段，将 client 值填入主题配置文件 _config.butterfly.yml

1
2
3
4
5
6
google_adsense:
  enable: true
  auto_ads: true
  js: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
  client: # 填入个人识别码
  enable_page_level_ads: true

13、图片大图查看模式

可配置 fancybox 或 medium_zoom 两种模式

1
lightbox: fancybox
  • fancybox

fancybox.gif

  • medium_zoom

medium_zoom.gif