博客二

前言

hexo_logo.png

现在我们的blog是基于Hexo生成了，同时我下载了现在最为流行的主题next和yilia

当然Hexo的主题不仅仅是这两个，之所以看它们是因为使用它们的人数最多，而且主题也在持续更新中，功能也非常齐全，如果不是特别爱折腾直接挑选他们就ok了，

但是，恰恰我喜欢折腾，用着别人开发好的主题，总是觉得少了那么一点意思，虽然我现在写不出Hexo这样的静态页面生成框架，但是主题就是页面显示总得自己弄一个了吧。而且用他们的主题感觉很多东西都不能让我更好的表达我自己。

思考

想制作一个主题，基本知识就应该具备咯，HTML,CSS,JavaScript，这些是最基本，不然一个基本页面都做不出来，然后高级一些就是使用框架，使用一些库。只要基础扎实些，剩下的可以慢慢磨，一边做一边学习。

现在我们来分析一下Hexo的具体工作机制。

image.png

hexo可以粗略分为三个子项目，分别是:

• hexo-cli

• hexo (下文中用hexo core来指代)

• hexo plugins

其中hexo plugins不是指某一个单独的项目，而是泛指所有的hexo plugin项目。
请看下图:

image.png

让我们结合这张图来大致看看这三个项目的作用(下面的链接均是指向Github中相关的源码):

• hexo-cli: hexo命令行项目，作用是:
  1. 启动hexo命令(进程)，及其参数解析机制。每次我们输入’hexo xxx’命令后，都会通过node调用hexo-cli中的entry函数(比如，可以把’hexo init’视为’node hexo-cli/entry.js init’)
  2. 实现hexo命令的三个初始参数(功能): init / version / help
  3. 加载hexo核心模块，并初始化
• hexo core: hexo核心，他的主要作用如下:
  1. 实现了hexo功能扩展对象
  2. 实现了hexo核心功能, 如new, publish, generate等（其实是一些hexo插件，下文中会详细分析）
• hexo plugins: 指一些能够扩展hexo的插件。插件可以按功能分成两类:
  1. 扩展hexo命令的参数，如hexo-server(安装这个插件以后才能使用hexo server命令)
  2. 扩展hexo解析文件的”能力”，如增加jade模版解析功能的hexo-render-jade插件

从markdown到html的旅程

简单来说，hexo中，从markdown到html的generate过程中做了两件事：

模板渲染
模板渲染
是的，就是这样，就是两次模板渲染。只不过两次渲染的输入、渲染模板的引擎、输出不一样。此处应该有一个表格：

image.png

还得有一张图:

image.png

对上面表格和图的说明:

• hexo core在generate的过程中会产生一个对象，我们在这里把这个对象称为article。第一次渲染的主要目的就是给这个对象添加title,content等属性。其中:
  1.article.title, article.date, article.tags, article.categories等属性来自yml front的部分
  2.article.content是markdown文章解析后的html片段

• hexo项目目录下包含三个子目录，
  source目录，写博客的主要工作目录。这个目录下存放的是我们的markdown文章以及js, images, css
  themes目录，主题目录，定义了即将生成的html的layout, 和html中需要加载的css, js, images
  public目录, hexo generate的最终输出目录。里面包含了整个博客网站的html, css, js, images

• 第二次渲染，需要引入对应模板文件格式的插件，如.ejs文件就需要使用hexo-render-ejs插件，.jade文件需要使用hexo-render-jade插件，而.sass文件则需要hexo-render-sass插件来转换成css文件。hexo的这一设计有点类似webpack中的loader。

hexo插件是如何工作的

hexo和webpack还有一点类似的地方就是插件驱动理念。即hexo(和webpack)是先实现一套(插件)扩展系统，然后再往扩展系统中添加插件来实现自身的功能。即我们日常使用的hexo init, hexo new，hexo generate等等功能都是通过一个个插件(其实就是一个个function)实现的。

具体来讲就是:

1. hexo.extend这个对象的每个属性都是一个用来绑定(特定)插件的对象。（所谓”绑定”，其实就是对象的register方法）
2. hexo初始化过程中先加载内部插件，再加载外部插件

而这些插件的功能分为两大类: 命令行插件和generate过程相关功能，例如：

• 命令行插件, hexo

  new, 是在hexo.extend.console对象上绑定的一个插件

• generate过程相关的插件，如上文提到的往article对象添加title,content等属性的功能，是通过往hexo.extend.processer对象上绑定post插件来实现的

所以，当我们想自己动手写插件时，就是像hexo官网给出的这样,调用某个对象的register方法，如hexo.extend.console.register。

image.png

如上图，(用户通过浏览器访问到的)git page上的博客网站其实是hexo generate之后生成的public目录下的内容。

所以，一个hexo博客项目应该有两个仓库:

• 1. (基于hexo init结果的)博客编写仓库。可以把这个项目看成一个代码库，用来”开发”博客网站(包含写博客，生成博客等任务)
• 2. 存放(hexo generate结果的)public目录仓库。这个项目是”只读”的，我们不会直接修改这个仓库的内容，我们也不会对这个仓库直接进行git pull、git commit、git push等常规操作。这个仓库的内容就是public目下的内容，即是通过hexo generate产生、hexo deploy提交的。

先介绍一下Hexo的工作原理，待续。。。。。。。。。。。。。。。。。。。。。。。。