如果你想修改Hexo的布局、显示样式,或是为其增添RSS、评论等新模块却无从下手,那就先来了解一下Hexo的目录结构吧。知道各个文件、目录的作用之后,至少在看到别人写在XX中增加代码时,知道XX是个什么东西。
1. Hexo目录结构
我的Hexo目录结构:
<!– more –>
.
├── _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个地方:
- _variables
- _custom
9.5.2. vendors
引用的一些小插件。
10. 更新历史
- 增加 public 目录说明
- 拟定初稿
11. 参考
Date: 2016-01-18 一 00:00