Hexo教程(二) 基本文件结构

本篇是主要Hexo的基本文件结构介绍。以下是本篇的核心内容:


基本文件结构

在成功运行 Hexo 后,使用命令 hexo shexo d,你会在博客文件夹中看到如下文件结构:

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
- _config.yml
- source/
|--- _posts/
|--- _data/
|--- drafts/
|--- about/
|--- other folders
- themes/
|--- one or more theme folders, in each folder
|--- _config.yml
|--- languages/
|--- yaml files
|--- layout/
|--- (_partial/)
|--- (_widget/)
|--- layout.ejs
|--- index.ejs
|--- post.ejs
|--- other ejs files
|--- source/
|--- css/
|--- js/
|--- libs/
|--- medias/
|--- Others
- package-lock.json
- package.json
- scaffolds/
|--- several markdown files
- public/
- node_modules/
- db.json

重要的文件与文件夹:

  1. 两个 config.yml 文件

    在DIY自己的网站时,配置文件的修改是第一步。Hexo作为静态网站生成器,主要有两个 _config.yml 文件,分别用于全局配置和主题配置。这里将它们称为“大config”和“小config”,便于区分。

    • config.yml:位于项目根目录下,如 _config.yml。这是整个网站的全局配置文件,涵盖了网站的基本设置,包括标题、描述、URL样式(permalink)等。同时,这里也指定了要使用的主题。你只需要将 theme: 属性设置为 themes/ 文件夹下你希望使用的主题文件夹名即可。
    • config.yml:位于 themes/ 文件夹下,和每个主题的文件夹对应,如 _config.anzhiyu.yml。小config是针对某一特定主题的设置,每个主题可能包含不同的配置项。具体如何配置,你可以参考对应主题的官方文档。
  2. source 文件夹

    source 文件夹是进行网站内容创作的地方,主要用于博客文章的写作与更新。该文件夹包含以下几个子目录:

    • **_posts/**:存放发布的文章文件。Hexo支持Markdown格式,文章将在博客上显示。
    • drafts/:草稿文件夹,存放未发布的文章。默认情况下,Hexo不会渲染草稿文件,这个文件夹主要用于文章创作的中间状态。
    • **_data/**:用于存放一些不直接显示在文章里的数据,且可能需要在多个地方复用的内容。例如,友情链接、社交媒体信息等,可以通过 site.data.filename 来调用这些数据。
    • categories/tags/404/ 等文件夹,分别用来存放类别页面、标签页面和404错误页面的内容。这些文件夹与相应的CSS、EJS文件匹配,用于定制页面的显示。
  3. themes 文件夹

    source 文件夹是进行网站内容创作的地方,主要用于博客文章的写作与更新。该文件夹包含以下几个子目录:

    • 小config文件:与当前主题相关的配置,如启用某些主题特性或功能。
    • languages/:存储翻译文件,用于更改网站的显示语言。
    • layout/:一系列EJS模板文件,定义了网站的结构、功能以及如何呈现内容。常见的文件夹如:
      • layout/_partial/:存放网站共享模块(如页眉、页脚)。
      • layout/_layouts/:存放整个页面的框架,定义页面的整体结构。
    • source/:包含主题的CSS样式、图片、Logo等资源文件。此处也是添加额外功能库的地方,如集成Gitalk评论插件、Echarts图表等。
  4. 其他文件夹

    除了上面提到的主要文件夹,Hexo项目中还有一些其他文件夹,通常不需要频繁修改,除非你需要进行更深入的定制:

    • scaffolds/:存放默认的文章模板文件。
    • public/:通过 hexo cleanhexo generate 命令生成的静态文件,最终会被发布到Web服务器。

引用

  1. YouTube Hexo系列视频
  2. Hexo data文件夹
  3. gitalk
  4. echarts
  5. Github:前端入门到进阶图文教程