出发点
其实本来是想找一个好看的逼格高的hexo主题的。
可是。。
尼玛hexo.io打开要好久有木有,根本就打不开有木有。
就算运气好,翻着墙打开了,点到theme的列表,又打不开了阿西吧啊。
点开了theme列表,结果选择主题的时候又是各种的慢打不开啊有木有。。。
干脆自己写一个
花了一天半写了一个hexo的主题。总体来说反正目前在我的chrome的环境下还是没啥bug的,因为本来也不大,这也说明了一个道理,其实很多看别人写的很牛逼的东西,别人各种写出好用好看的组件啊或者库啊之类的,其实也是一砖一瓦垒起来的。只要你用心去弄,也可以弄个大概模样的东西。
正文
第一步搭架子
第一步肯定是要创建一个骨架子,每一个主题其实可以理解成就是ejs+js+css。
让我们从头开始把:先安装hexo-cli生成器
```npm install hexo-cli -g```
安装好了hexo之后,用hexo init创建你的blog项目。
创建了之后cd到themes主题文件夹里面。
这里我是在网上找到了一个hexo 的theme结构生成器;是github上面随便找的一个
https://github.com/tcrowe/generator-hexo-theme
可能有更好的吧。不过这些不是重点,重点是我们创建好了一个主题骨架。
这个是我的主题的目录结构;
里面的东西不多,可以看到layout里面放的是ejs文件,source是静态资源文件,我习惯用的stylus+js。可以单独在这个主题文件夹下创建git库然后放到github上。
我做完之后的github地址:https://github.com/Yidada/z-index
好了,第一步我们的骨架子就弄好了。
第二步开发
这个其实就是自我发挥释放天性的时候了。
主要提下layout文件夹里面的ejs文件,有一个layout.ejs这个是所有页面的主页面,如果之前用过ejs的一定知道ejs能够嵌套其他的ejs文件,所有的ejs都是嵌套在layout.ejs里面的。打开layout.ejs可以看到。
我截了一块body里面的,整个内容页面呢就在这里分成了header、body、footer然后具体里面的内容就在layout文件夹下面的partials文件夹里面的各个ejs文件。不同的路由hexo会去填充不同的ejs。
我们可以先运行下,看下最原始的主题是啥样子。cd到整个blog项目的目录下,修_config.yml文件,修改里面的theme字段为你的主题的名字(一定要记得修改,:号后面一定要空格),我这里就是z-index,然后运行hexo s 等跑起来了,浏览器打开默认的地址是:localhost:4000能够看到。。。。。
恩,就是这么原始,就是这么朴素。
好了,赶紧开始我们自己的主题开发吧。
默认会css文件夹里面会有一个跟你的主题名字一样的.css文件,js也一样。这两个就是主战场了,具体的开发看自己了。
- reset.css咯
- 从index.ejs一个一个的对照着页面写样式
哥们自己这里因为特别喜欢clip-path这个属性,所以写了一个loading的组件。
文章的排版
首页啊乱七八糟的页面的样式都是老的东西,不过这里想特别的提下文章的样式。这个其实挺头疼的,因为博客博客最核心的当然就是文章了,可是感觉如果每种样式去调教去写的话又可以出个文章了。
所以在这里。。。大大的安利一个sofish大大的http://typo.sofi.sh/中文网页的重设与排版。很好看,用的也很爽。因为也是在.typo下的,也不会污染其他的元素。
后续
好像没有太多的后续了,hexo配置好之后,先generate再deploy就行了。
原文链接:
PS:一定要chrome或者safari打开。要不然首页之类的效果会看的很恶心哈哈哈。