前言

本系列文章是博主日常业余折腾HEXO所总结的经验结果,不一定是最佳实践。了解更多请关注HEXO官方网站。关于HEXO主题已经折腾过好多,当然拆腾的都是比较有条理的。
有关HEXO主题Sakura已经是去年(前年)的事了,第一次提交: honjun committed on 20 Dec 2018。偶而怀旧下23333~,之前关于Sakura主题开发也录了大部分的视频教程,不过估计大部分人没有看,毕竟直接拿来用更香。这次准备出文章教程,顺带练习下我那半吊子的五笔打字。

准备工作

回归到正文,先总结下该教程的计划,首先html页面不准备写,去html5up上找个模版,众所周知(不知道的现在也知道了)这个网站已经出了好几个HEXO博客,包括
Phantom、Massively、strata、simplyspoke、Editorial(还没做完,看完教程的可以用这个模版练练手,给它PR完整)。
最后,选定story就刚刚决定的。

逛官网,读文档

首先来到hexo官网,你要折腾某个东西的时候,它的官网是一定要逛的。

找到自定义主题我们可以看到:(请务必认真看完再往后阅读)

本地新建

假设你已经看完上图的文档了,开始开发主题了。首先还是要新建一个hexo博客,在卡在这一步的时候就可以Ctrl+C停止了。

用subline打开新建好的博客(Story),可以看到在themes目录下空空如也,反正我们准备自己开发一个,空的正好。
这个时候就要想到文档里的目录结构了:

新建如下:(当然要给主题建个目录,这里就叫story好了)

建好这后记得上级目录的_config.yml里面修改配置:

有好奇的小伙伴可以试着运行看看:

不要但心,这是我们没有用npm安装依赖,因为上一步的时候直接ctrl+c跳过了。使用npm i命令安装。(有切换过淘宝镜像的可以使的cnpm i安装,npm安装淘宝镜像自行百度)

可以看到安装成功后使用hexo s发布真的能跑起来,不过当我们访问的时候就会报No layout: index.html这个错。简单理解下它意思,没有layout(布局,或者说模版):index.html。

选择模板引擎

那么我们就应该建一个layout来展示index.html。不过在建之前要先确定用哪种模版引擎,官方文档如是说到:Hexo 内建 Swig 模板引擎,您可以另外安装插件来获得 EJS、Haml 或 Jade 支持。这里为了简单,学习成本低,采用了ejs模板引擎。文档也说的很明白了,用ejs我们还要安装。不过看了下package.json,hexo4.0已经集成了hexo-renderer-ejs,所以用ejs也不用安装了,直接用就是。(Jade等还是要另外安装插件的)

构建主题页面

模板引擎选好之后,就可以新建模版页面了。在新建前要好好看下官方文档的模版说明。 看完之后可以自己构思下怎么做
t

h

i

n

k

i

n

g

想不出来的可以参考下别人或者官方的主题是怎么做的。
未完待续To be continued…..

希望这篇文章能给你带来知识和乐趣,喜欢博主的文章可以加博主好友哦

有好的文章也可以向博主投稿哦