hexo目录结构小探

本文旨在介绍hexo的文件、目录结构及其功能。

如果你想修改Hexo的布局、显示样式,或是为其增添RSS、评论等新模块却无从下手,那就先来了解一下Hexo的目录结构吧。知道各个文件、目录的作用之后,至少在看到别人写在XX中增加代码时,知道XX是个什么东西。

1 Hexo目录结构

我的Hexo目录结构:

.
├── _config.yml
├── package.json
├─.deploy_git
├─node_modules
├─public
├─scaffolds
├─source
│ ├─about
│ ├─audio
│ ├─img
│ ├─_drafts
│ └─_posts
└─themes
    ├─landscape
    └─next

有些是初始化后,自动创建的,也有在使用过程中,手动或自动创建的。有些像先天和后天的感觉 ^_^

2 _config.yml

初始化时自动创建。

网站的配置信息文件,可以在此配置大部分的参数。具体设置参见 配置 | Hexo

3 package.json

初始化时自动创建。

应用程序的信息。可以查看hexo的版本以及安装的扩展版本。

4 .deploy_git

在部署到github后自动创建。

此目录中的内容 = github站点中对于repository中的内容 = 最近一次上传到站点的public目录中的内容

因此,该目录的结构和 public 目录基本一致(不一致的情况是由于重新生成,但是没有发布站点造成,此时 public 内容新于 .deploy_git 内容)。

5 node_modules

存放安装的Hexo扩展。

node_modules
├─.bin
├─hexo
├─hexo-deployer-git
├─hexo-generator-archive
├─hexo-generator-category
├─hexo-generator-feed
├─hexo-generator-index
├─hexo-generator-tag
├─hexo-renderer-ejs
├─hexo-renderer-marked
├─hexo-renderer-org
├─hexo-renderer-stylus
└─hexo-server

Hexo 默认安装:

  • hexo: 主程序
  • hexo-deployer-git: git部署
  • hexo-generator-archive: 存档页面生成器
  • hexo-generator-category: 类别生成器
  • hexo-generator-index: index生成器
  • hexo-generator-tag: 标签生成器
  • hexo-renderer-ejs: 进一步了解 EJS tj/ejs · GitHub
  • hexo-renderer-stylus: 进一步了解 Stylus GitHub - hexojs/hexo-renderer-stylus: Stylus renderer for Hexo
  • hexo-renderer-marked: Markdown引擎,让你可以用markdown格式书写博客
  • hexo-server: 服务器,让你可以本地预览博客

在使用过程中自己安装的扩展也会在此新建目录,比如我安装的:

  • hexo-generator-feed:生成RSS
  • hexo-renderer-org:可以用org-mode书写博客

6 public

执行 hexo g 命令,Hexo程序会解析 source 、当前使用的theme,生成的静态网页内容目录就是 piblic 。执行 hexo d 则将该目录内容复制到 .deploy_git 目录。

7 scaffolds

模版 文件夹。当新建文章时,Hexo 会根据 scaffold 来建立文件。更多参见 模版 | Hexo

8 source

存放用户资源的地方。

8.1 _posts 文件夹

存放博客文章的地方,其中的markdown文件、html文件、org文件等会被解析并放到 public 文件夹,发布到站点。

8.2 其他开头命名为 _ (下划线)的文件 / 文件夹

将会被忽略。因此可以在source目录下创建 _drafts 目录用于存放未完成的草稿,其中内容不会发布到网站。

8.3 其他开头非_的文件 / 文件夹

会被拷贝到public目录并上传到站点。

  • 可以创建 img 目录来存放在博客引用到的图片等。
  • 要添加新的页面(例如about),执行 hexo new page PageName 命令即会在 source 中自动新建子目录 PageName
  • favicon.ico 在主题配置文件中引用 /favicon.ico 来设置站点的页面图标。

9 themes1

主题 文件夹。默认安装 landscape 主题,你可以安装新主题到 themes 目录,也可以自己新建主题。一个主题的基本结构如下:

.
├── _config.yml
├── languages
├── layout
├── scripts
└── source

9.1 _config.yml

主题的配置文件。

9.2 languages

语言文件夹。根据 Hexo 目录中 _config.yml 设置的语言来选择站点以哪种语言来呈现。

9.3 layout

存放主题的模板文件,决定了网站内容的呈现方式。Hexo 根据模板文件的扩展名来决定所使用的模板引擎,例如:

layout.ejs - 使用 EJS
layout.swig - 使用 Swig

更多参见:

9.4 scripts

脚本文件夹。在启动时,Hexo 会载入此文件夹内的 JavaScript 文件。

更多参见插件 | Hexo

9.5 source

资源文件夹,除了模板以外的资源,例如 CSS、JavaScript 文件等,都应该放在这个文件夹中。

文件或文件夹开头名称为 _(下划线)或隐藏的文件会被忽略。

如果文件可以被渲染的话,会经过解析然后储存到 public 文件夹,否则会直接拷贝到 public 文件夹。

以next主题为例,其 source 目录的结构如下:

source
  ├─css
  ├─fonts
  ├─images
  ├─js
  └─vendors
      ├─fancybox
      │ └─source
      │ └─helpers
      ├─fastclick
      │ └─lib
      ├─font-awesome
      │ ├─css
      │ └─fonts
      ├─jquery
      ├─jquery_lazyload
      └─velocity

9.5.1 css

多为styl文件,next的css目录结构如下:

css
├─_common
│ ├─_component
│ ├─_core
│ ├─_fonts
│ ├─_page
│ ├─_section
│ └─_vendor
├─_custom
├─_mixins
├─_variables
└─main.styl

如果想自定义CSS,主要修改2个地方:

  1. _variables
  2. _custom

9.5.2 vendors

引用的一些小插件。

10 更新历史

  • <2016-01-22 周五> 增加 public 目录说明
  • <2016-01-18 周一> 拟定初稿

11 参考

Footnotes:

Date: <2016-01-18 周一>

Validate

版权声明

本文由宇晨创作,采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。

首发于跬步,转载或引用请注明出处,本文永久链接:hexo目录结构小探

知识共享许可协议