前言
在很多功能的实现过程中，我都因为不熟悉项目架构和具体代码而束手无策，尝试很多方法也事倍功半，因此决定在继续搭建博客之前先对butterfly主题的框架梳理一遍，在gpt的帮助下通读一遍代码，至少要知道各级文件之间的联系、某项具体功能由哪些文件负责，在了解这些之后再去有的放矢地修改。
本文会按顺序对以下重点文件进行分析
1
2
3
4
5
6
7
8
9
10
11
| 项目根目录/
├── source/
│ ├── _data/
│ ├── _posts/
│ ├── categories/ 等
│ └── css/
└── themes/
└── butterfly/
└── layout/
└── source/
|
项目根目录
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| 项目根目录/
├── .deploy_git/
├── .github/
├── node_modules/
├── scaffolds/
├── source/ <-- 重点关注
│ ├── _posts/
│ │ └── ... （博客文章）
│ └── ... （其他资源文件）
├── themes/ <-- 重点关注
│ └── butterfly/ （Butterfly主题）
├── .gitignore
├── _config.butterfly.yml <-- 重点关注
├── _config.landscape.yml
├── _config.yml <-- 重点关注
├── package.json
└── package-lock.json
|
需要重点关注的文件
source 文件夹
这个文件夹是 Hexo 博客内容的主要存放地，包括你所有的 Markdown 文件（博客文章）、资源文件（如图片、视频等）以及其他静态文件。默认情况下，Hexo 会将这个文件夹中的内容解析并生成静态网页。
themes 文件夹
这个文件夹包含博客使用的主题。每个主题都会有一个独立的子文件夹，包含该主题的布局、样式、脚本和其他资源文件。Butterfly 主题通常会在这里有一个名为 butterfly 的子文件夹。
_config.butterfly.yml
这个文件是 Butterfly 主题的配置文件，用于定义主题的特定设置。可以在这里配置主题的布局、颜色、字体、插件、导航栏等。
_config.yml
这个文件是 Hexo 项目的主配置文件。它定义了整个博客的基本配置，如站点信息（标题、描述、作者等）、URL 设置、目录结构、插件配置等。所有全局性的配置都在这里定义。主要是在_config.butterfly.yml进行修改，较少用到_config.yml文件，了解即可。
不需要关注的文件
点击展开
.deploy_git 文件夹
这个文件夹用于 Hexo 部署功能，通常包含 Git 仓库的相关信息，用于在部署过程中存放生成的静态文件。如果你使用 Git 来部署博客，这个文件夹会存储部署用的 Git 仓库数据。一般不需要修改，不用过多关注。
.github 文件夹
这个文件夹包含 GitHub 特有的配置文件，如 GitHub Actions 的工作流文件、Issue 模板和 Pull Request 模板等。主要用于自动化工作流的配置以及项目协作相关的模板设置。通常不需要修改，除非你需要自定义自动化工作流，不用过多关注。
node_modules 文件夹
这个文件夹存放项目依赖的所有 Node.js 模块和包。在执行 npm install 后，项目中引用的所有第三方库和工具都会被下载到这个文件夹中，确保项目能够正常运行。一般不需要手动修改。
scaffolds 文件夹
这个文件夹用于存放 Hexo 的脚手架文件。当你新建文章、页面或其他内容时，Hexo 会使用这个文件夹中的模板文件。比如新建一篇博客文章时会应用 post.md 模板。除非你需要自定义新建内容的模板，否则不需要修改。
.gitignore 文件
这个文件指定 Git 在版本控制时应忽略的文件和目录，避免将不需要的文件（如临时文件、构建输出、敏感信息等）提交到仓库中。与网页内容无关。
_config.landscape.yml
这个文件可能是一个特定配置，用于定义另一种布局或主题的设置。如果你使用多种布局或需要不同的配置，可以通过这种方式进行管理。如果不使用这个配置文件定义的布局或主题，可以忽略。
package.json
这个文件是 Node.js 项目的描述文件，包含项目的基本信息（如名称、版本、描述）、依赖项、脚本命令等。通过这个文件，npm 可以管理项目的依赖和运行脚本。除非你需要添加新的依赖或修改脚本命令，否则不需要修改。
package-lock.json
这个文件是 package.json 的锁定文件，记录了当前安装的具体版本的依赖树。它确保在不同环境中安装相同的依赖版本，保证项目的一致性和可重复性。一般不需要修改。
source目录
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| 项目根目录/source/
├── _date/
│ ├── link.yml #友链数据
│ └── movies.yml #电影数据（影视清单）
├── _posts/
│ └── ... #博客文章
├── categories/
│ └── ... #分类页面，以下同理，分别为标签、友链、影视等页面
├── tags/
├── link/
├── movies/
├── css/
│ └── ... #自定义CSS文件
└── CNAME #用于自定义域名
|
通常用于存储自定义数据文件，这些数据可以在生成页面时被模板引用。如果需要在博客中引用某些固定的数据（如统计数据、表格等），可以将这些数据文件放在这里，并在模板中使用数据标签引用。
里面都有一个index.md文件用于存放页面，目前里面只有Page Front-matter，没有其他内容，猜测这里是用于设置页面的title和type等，样式还要在其他地方。至少清单-影视等页面的样式是在css文件夹里。
我用来存放自定义css文件的文件夹，前面已经实现的悬停动画（hover_animation.css）、顶部导航栏居中（menu_mid.css）、新文章外挂标签（new_post.css）、隐藏搜索字样（search_hide.css）、调整logo位置（site_icon.css）的功能都在此实现。
themes/butterfly目录
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| themes/butterfly/
├── .github/
├── languages/
│ └── ... （多语言支持文件）
├── layout/ <-- 重点关注
│ └── ... （页面布局文件）
├── scripts/
│ └── ... （自定义脚本文件）
├── source/ <-- 重点关注
│ └── ... （静态资源文件）
├── _config.yml
├── LICENSE
├── package.json
├── plugins.yml
└── README.md
|
需要重点关注的文件
存放主题的页面布局文件。定义了网站各个页面的 HTML 结构，包括头部、脚部、侧边栏等。如果需要修改页面的结构和布局，这里的文件非常重要。
存放主题的静态资源文件，如 CSS、JS、图片等。用于主题的样式和行为定义。在这里可以添加或修改 CSS 和 JavaScript 文件，以自定义样式和功能。
存放主题的自定义脚本文件。用于添加或修改 JavaScript 功能。如果需要添加复杂的交互功能，可以关注这里的文件。没有上面两个文件夹重要。
不需要关注的文件
点击展开
包含 GitHub 特有的配置文件，如 GitHub Actions 工作流文件，用于自动化部署或其他 CI/CD 配置。
存放多语言支持文件。包含各种语言的翻译文件，用于国际化和本地化网站内容。设置好后一般不需要修改。
主题的配置文件。包含主题的配置选项，如布局、颜色、字体、插件等。由于在项目根目录下设置了_config.butterfly.yml文件，所以不需要对此文件进行修改。
许可证文件。声明主题的使用许可，通常说明版权和使用限制。
Node.js 项目的描述文件。包含项目的基本信息、依赖项和脚本命令等。
插件配置文件。定义了主题使用的插件及其配置。
项目的自述文件。提供主题的介绍、安装和使用说明。
重点内容的完整结构展开
不再对 themes/butterfly/layout/ 和 themes/butterfly/source/ 进行单独展开分析，在此附上themes目录重点内容的完整结构，此后就开始代码阅读了。
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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
| 项目根目录/
└── themes/
└── butterfly/
├── layout/
│ ├── archive.pug // 存档页面布局
│ ├── category.pug // 分类页面布局
│ ├── index.pug // 主页布局
│ ├── post.pug // 单篇文章页面布局
│ ├── page.pug // 单独页面布局
│ ├── tag.pug // 标签页面布局
│ └── includes/ // 包含的模板片段
│ ├── head/ // 头部相关
│ │ ├── analytics.pug // 分析工具集成代码
│ │ ├── config.pug // 网站配置信息
│ │ ├── config_site.pug // 站点具体配置信息
│ │ ├── google_adsense.pug // Google AdSense 广告集成代码
│ │ ├── open_graph.pug // Open Graph 协议元数据
│ │ ├── preconnect.pug // 预连接设置
│ │ ├── pwa.pug // 渐进式 Web 应用配置
│ │ └── site_verification.pug // 网站验证代码
│ ├── header/ // 头部布局
│ │ ├── index.pug // 头部主要布局
│ │ ├── menu_item.pug // 菜单项布局
│ │ ├── nav.pug // 导航栏布局
│ │ ├── post-info.pug // 文章信息显示布局
│ │ └── social.pug // 社交分享按钮布局
│ ├── loading/ // 加载效果布局
│ │ ├── fullpage-loading.pug // 全屏加载效果布局
│ │ ├── index.pug // 加载效果主要布局
│ │ └── pace.pug // Pace 加载条效果集成
│ ├── mixins/ // 混合模板
│ │ ├── article-sort.pug // 文章排序 mixins
│ │ └── post-ui.pug // 文章界面 mixins
│ ├── page/ // 页面布局
│ │ ├── categories.pug // 分类页面布局
│ │ ├── default-page.pug // 默认页面布局
│ │ ├── flink.pug // 友情链接页面布局
│ │ ├── movies.pug // 电影页面布局
│ │ └── tags.pug // 标签页面布局
│ ├── post/ // 文章布局
│ │ ├── post-copyright.pug // 文章版权信息布局
│ │ └── reward.pug // 打赏功能布局
│ ├── widget/ // 小部件布局
│ │ ├── card_ad.pug // 广告卡片布局
│ │ ├── card_announcement.pug // 公告卡片布局
│ │ ├── card_archives.pug // 归档卡片布局
│ │ ├── card_author.pug // 作者卡片布局
│ │ ├── card_bottom_self.pug // 底部自定义卡片布局
│ │ ├── card_categories.pug // 分类卡片布局
│ │ ├── card_newest_comment.pug // 最新评论卡片布局
│ │ ├── card_post_series.pug // 文章系列卡片布局
│ │ ├── card_post_toc.pug // 文章目录卡片布局
│ │ ├── card_recent_post.pug // 最近文章卡片布局
│ │ ├── card_tags.pug // 标签卡片布局
│ │ ├── card_top_self.pug // 顶部自定义卡片布局
│ │ ├── card_webinfo.pug // 网页信息卡片布局
│ │ └── index.pug // 小部件索引布局
│ ├── third-party/ // 第三方插件（未展开）
│ ├── layout.pug // 整体页面布局模板
│ ├── pagination.pug // 分页控件模板
│ ├── rightside.pug // 页面右侧栏布局
│ ├── sidebar.pug // 侧边栏布局
│ ├── 404.pug // 404 错误页面布局
│ ├── additional-js.pug // 附加的 JavaScript 文件引入布局
│ ├── footer.pug // 网页页脚布局
│ └── head.pug // 网页头部布局
├── source/ // 主题的源代码文件夹
│ ├── css/
│ │ ├── _global/
│ │ │ ├── function.styl // 全局功能样式
│ │ │ └── index.styl // 全局样式入口文件
│ │ ├── _highlight/ // 代码高亮样式文件夹（未展开）
│ │ ├── _layout/
│ │ │ ├── aside.styl // 侧边栏样式
│ │ │ ├── chat.styl // 聊天框样式
│ │ │ ├── comment.styl // 评论框样式
│ │ │ ├── footer.styl // 底部样式
│ │ │ ├── head.styl // 头部样式
│ │ │ ├── loading.styl // 加载效果样式
│ │ │ ├── pagination.styl // 分页样式
│ │ │ ├── post.styl // 文章样式
│ │ │ ├── relatedposts.styl // 相关文章样式
│ │ │ ├── reward.styl // 打赏功能样式
│ │ │ ├── rightside.styl // 右侧栏样式
│ │ │ ├── sidebar.styl // 侧边栏样式
│ │ │ └── third-party/ // 第三方插件样式文件夹（未展开）
│ │ ├── _mode/
│ │ │ ├── darkmode.styl // 暗黑模式样式
│ │ │ └── readmode.styl // 阅读模式样式
│ │ ├── _page/
│ │ │ ├── 404.styl // 404 页面样式
│ │ │ ├── archives.styl // 归档页面样式
│ │ │ ├── categories.styl // 分类页面样式
│ │ │ ├── common.styl // 公共页面样式
│ │ │ ├── flink.styl // 友情链接页面样式
│ │ │ ├── homepage.styl // 主页样式
│ │ │ └── tags.styl // 标签页面样式（未展开）
│ │ ├── _search/
│ │ │ ├── algolia.styl // Algolia 搜索样式
│ │ │ ├── index.styl // 搜索样式入口文件
│ │ │ └── local-search.styl // 本地搜索样式
│ │ └── _tags/
│ │ ├── button.styl // 按钮样式
│ │ ├── gallery.styl // 图库样式
│ │ ├── hexo.styl // Hexo 样式
│ │ ├── hide.styl // 隐藏元素样式
│ │ ├── inlinelmg.styl // 内联图片样式
│ │ ├── label.styl // 标签样式
│ │ ├── note.styl // 注释样式
│ │ ├── tabs.styl // 标签页样式
│ │ └── timeline.styl // 时间线样式
│ ├── js/
│ │ ├── search/
│ │ │ ├── algolia.js // Algolia 搜索功能
│ │ │ └── local-search.js // 本地搜索功能
│ │ ├── main.js // 主要 JavaScript 文件
│ │ ├── tw_cn.js // 特定语言或地区的 JavaScript 文件
│ │ └── utils.js // 工具函数 JavaScript 文件
│ └── img/ // 图片文件夹（未展开）
|
结语
通过对项目结构的大致梳理，可以忽略不相关的文件和不重要的文件，按照功能模块按图索骥修改自己想要修改的内容，例如字体、各种颜色、部分样式。这是我阅读的第一个前端项目，对很多基础知识和基本信息完全陌生，因此才有必要进行一次系统性梳理，同时也是某种程度上的纪念意义。如果以后再接触类似项目当然就不需要写笔记来记录架构梳理过程了，那时自然而然很容易就读懂。
