写一个属于你自己的hexo主题

出发点

其实本来是想找一个好看的逼格高的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就行了。

原文链接:

http://yidada.github.io/2016/07/27/%E5%A6%82%E4%BD%95%E5%86%99%E4%B8%80%E4%B8%AA%E5%B1%9E%E4%BA%8E%E4%BD%A0%E8%87%AA%E5%B7%B1%E7%9A%84hexo%E4%B8%BB%E9%A2%98/

PS:一定要chrome或者safari打开。要不然首页之类的效果会看的很恶心哈哈哈。

你可能感兴趣的:(写一个属于你自己的hexo主题)