博客二

前言

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

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

你可能感兴趣的:(博客二)