这篇文章用来记录自己开发 PureBlue 主题过程中的感想。
博客内容固然是最重要的,但是抛开内容不讲,博客本身也应该带有自己的Tag,而不是光会用别人的轮子。
最早接触的博客平台是 CSDN 和博客园,在上面学习到了很多网友的经验,于是萌发了想要创建自己博客的念头,在写了几篇文章后又觉得:为何不自己搭建一个博客平台呢?因此在今年一月份的寒假捣鼓了 hexo 和 github pages,包括下载各种漂亮的主题、添加各种有意思的插件,一时乐在其中。平静下来之后,我开始进行知识迁移的工作,把以前存放在印象笔记中的东西重新修改并整合,转移到个人博客里,于是内容慢慢充实起来。
直到十几天前,我用的还是 Next 主题,这的确是一个相当成熟和漂亮的主题,我特别喜欢它的简洁。直到某天看到一句话:
当你看到你用的主题出现在两个以上的博客时,那你就要考虑自己写一个了。
别说两个了,Next 主题的用户数应该是目前所有主题中最多的,而博客外观的雷同很显然是一件非常尴尬的事情。正好在那时我也陷入了一个纠结,就是我一直处于知识输入的状态却鲜有项目上的输出,简单地说就是学的多、做的少—-这是很要命的事,毕竟“纸上得来终觉浅”。也就是说我面临两个问题:
这两个问题恰巧有共同的答案,那就是自己制作一个主题。当时想的是这学期能做出来都算好的了,于是立了一个 flag:
不过很欣慰的是,我赶在月底之前把它完成了,前后大约花了14天。(大概是这个 flag 给我的动力)
这是项目地址。
虽然是一个小项目,而且代码也写得比较乱,但是收获颇丰——接触到了两个新的技术,一是模板引擎ejs,二个是css预处理器stylus,还有就是对hexo的原理有了更为深入的理解,至少知道了我写的markdown文件是怎么在网页上渲染出来的,而不是光会用却不知道原理。
万事开头难,前期准备工作的时候真的是一头雾水。首先是Hexo的官方文档,写得很不友好,所以读起来云里雾里;其次是不同主题使用的模板引擎和css预编译都不同,主题文件的结构也不同,这大大提高了阅读源码的难度和花在上面的时间成本。虽然经过“搜刮”,我找到了几篇教程,但是大部分还是讲的不够浅显易懂,越看越晕。这时候我意识到两个重要的问题:
所以我开始去youtube上寻找相关的视频,幸运的是我的确找到了纯新手向的主题制作教程。每集只有几分钟,但是对于理解一些基础概念来说已经足够。不用担心听不懂,因为自带字幕,再配合up主的操作演示,还是很好理解的。
之后我又谷歌了相关的文章,成功找到了这个系列教程,这是目前找到的最详细的教程,真真正正的从零开始教你怎么做一个主题,所以说实话真的很感谢这位老外。为了加深对主题制作的理解以及方便其他有需求的人,我将这个系列翻译了过来,可以在我的博客里找到,当然也可以去Segment Fault。目前我只翻译了两篇,第三篇会另外找个时间搞定。
教程看下来,发现难点主要集中在两个地方:一是理清项目结构,进行合理的组织,二个是设计样式并具体实现。 准备工作差不多之后,就可以开始动工了,不需要太着急,每天完成一部分就行。 印象比较深的难点就是垂直时间轴的制作,也就是下面这个东西:
一个是要做出样式,主要涉及伪元素的使用,以及考虑怎么让垂直轴随着页面高度增加而延长;二个是逻辑,遍历所有文章并根据年份进行划分,这里需要使用ejs的语法,对Hexo的内置变量也要熟悉。
当然,做这个主题的时候也踩了很多坑,这里做一下踩坑记录:
所以,为了保险一点还是在项目中放jq文件比较好,当然更好的做法应该是直接用原生js来写。
hexo clean
还不一定有效。只能说改动的同步还是需要时间的= =/archive
,导航栏条目是archive
),所以做一个判断就好。然而尴尬的是,首页压根就没有这种链接,首页就是一个/
,尽管有 is_home()
函数可以用,不过 js 里是用不了的。所以这个时候我想到了直接通过配置文件拿到首页的 url,之后再做判断,但是又有一个问题 —— 这是hexo的内置变量,只能在ejs中使用,在js里是不识别的。考虑到ejs会生成dom元素,所以解决的思路是:data-*
属性即可。后面的 TOC 文本也是用的这个办法。主题基本的东西都做好了,剩下的就是上传到 github,并且向 Hexo 官方站点发起 PR—-这些对于我这个菜鸟来说还很陌生,所以不得不去b站找了 github 和 git 使用的相关教程。本来应该一切顺利了,但是本地这边一直报错,原来是没有先 pull 远程仓库进行同步。
当然,git 和 github 是每个技术人的必备技能,所以之后我会另外找个时间系统学习一下这两者的使用。
最后当然就是编写说明文档了,这很像以前做汉化时写的使用说明。
感触比较深的两点:一个是注意阅读源码。如果实在没有思路,可以先参考别人是怎么写的,一开始制作主题的时候很难理清项目结构,所以我选择了先看看别人是怎么写的;二个是英语的重要性——1/5的答案在百度,4/5的答案在谷歌,学会英语就意味着你找到了解决问题的另一条途径,而且无疑是更加宽广的途径。比如 Hexo 主题的制作,国内是没有人真的会去为这个而做系列视频的,但是国外有;同样地,提问题时也可以考虑选择国外平台,如果你注意了提问礼仪,很大几率问题会得到秒回。
到这里差不多就告一段落了,之后的时间我会慢慢完善和更新这个主题。目前来说用户只有我自己,所以也算是为我自己而去努力地塑造它吧。