ESON

Daily Notes

0%

Hexo简介

发表于 分类于 ， ， ，
本文字数： 2.4k 阅读时长 ≈ 2 分钟

Hexo剖析

中文文档：https://hexo.io/zh-cn/docs/
官方主题库：https://hexo.io/themes/
next主题：https://github.com/theme-next

Hexo原理综述

markdown到html的旅程

  • 模板渲染
  • 模板渲染

hexo文件结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
├── _config.yml     # 站点配置文件
├── db.json     # database，缓存文件
├── node_modules  # 安装的插件以及hexo所需的一些node.js模块
├── package.json  # 应用程序信息，配置hexo运行需要的js包
├── public     # deploy时生成，最终所见网页的所有内容
├── scaffolds  # 模板文件夹，hexo默认包含以下三种布局(layout)    https://hexo.io/zh-cn/docs/writing.html
│     ├──draft.md   # hexo new draft <title> 会在source/_drafts目录下生成md文件
│     ├──page.md  # hexo new page <title> 在source目录下
│     └──post.md   # hexo new post <title>  在source/_posts目录下生成md文件
├── source    # 资源文件夹。除 posts 文件夹之外，开头命名为 (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。
│     ├── _draft  # 除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略
│     └── _posts  #
│             └──  hello-world.md
└── themes   #主题文件夹
      ├──
      └──next
          ├──
          ├──
          ├──
          ├──

详解clean

1
2
3
4
$ hexo clean --debug

INFO  Deleted database.       # 清空 db.json
INFO  Deleted public folder.  # 删除public目录

详解hexo g

每次运行 hexo g 命令，hexo(node.js程序)会遍历你的 source 目录，建立索引，根据你 theme 文件夹的主题生成页面到 public 文件夹。这时 public 文件夹就是一个纯由 html javascript css 等内容制作的博客，而这些恰好能在 git pages 识别

详解deploy

最后 hexo d 将 public 文件夹的内容复制到临时目录，以 git 方式 push 到 github 的指定项目的指定分支，由 github 进行显示

首次deploy

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
$ hexo d --debug

# 1. 首先加载plugin和theme
DEBUG Config loaded: ~/xs/blog/_config.yml
DEBUG Plugin loaded: hexo-generator-category

# 2. 开始转化html
INFO  Start processing

# 2.1 处理404页面
DEBUG Processed: source/404.html  # 404不需要theme
DEBUG Processed: 404.html

# 2.2 加载主题，处理source目录下的.md .html
DEBUG Theme config loaded.
DEBUG Processed: _config.yml  # 这个也需要处理？
DEBUG Processed: source/css/main.styl  # 处理source目录下所有文件，包括js image md
DEBUG Processed: layout/archive.swig   # 处理layout languages等

DEBUG Generator: page  # 还包括post category archive index tag

# 3. 生成html，存储在public目录
INFO  Files loaded in 796 ms  #
DEBUG Rendering page: 404.html
DEBUG Rendering post: 2018/01/25/hello-world/index.html
DEBUG Rendering archive: archives/index.html
DEBUG Rendering index: index.html

# 4. deploy: 创建git repo，在public中拷贝文件，并push
INFO  Deploying: git
Initialized empty Git repository   # git init
INFO  Copying files from public folder...  # 从public复制到.deploy_git目录
INFO  Copying files from extend dirs...
INFO  Deploy done: git  # commit & push 已完成
DEBUG Database saved

详解hexo server

hexo s –debug

hexo的模板引擎,Rendering HTML

模板引擎的作用，就是将界面与数据分离。最简单的原理是将模板内容中指定的地方替换成数据，实现业务代码与逻辑代码分离。

source 文件夹理解为数据库，而theme文件夹相当于 界面。 hexo g 就将我们的数据和界面相结合生成静态文件 public。

Hexo 的模板引擎是默认使用 ejs 编写的，同类型的东西还有很多，比如jade，swig。

next选用的swig

比较赞的设计

  • 文件名与博客名分离，即title不直接采用文件名。(这样保证了不会因为title的变动引起url的变动)
  • url路径与实际路径分离 ()

reference

http://coderunthings.com/2017/08/20/howhexoworks/

相关文章