我干了什么?

这一周以来,咱一直在为移植主题而废寝忘食的编写代码,终于移植的主题,离高完成度也就只有一点点距离了,目前已经可以使用,但如果能再添加一些功能,主题的完成度将会更高。

这次移植的主题是蝉时雨大佬的aurora(意为极光)主题,原主题是由vue进行构建,后端数据依托Github

咱把主题给移植成了hexo–theme-aurora,还原程度还算高吧,可hexovue毕竟是两样东西,所以需要进行一些割舍。同时在页面的一些表现样式上有所调整,用以保证最大程度上样式的美观。

我学到了什么?

在移植主题的开始,咱是两眼一抹黑,根本不知道该如何下手。谷歌搜索出的教程,也基本上是简单的介绍了一下主题的构建过程。咱想吧,这也忒难了,感觉自己啥都不知道,还想去移植主题?自己啥水平心里没有数嘛!

可以不能这样放弃吧,不会就学咯,那就学咯,一步一步的解决问题,还是那句老话:在模仿中获得知识,在实践中进行验证。

过程中最深刻的应该是在编写分类和标签功能的时候。

在编写分类功能的时候,由于官方的辅助函数list_categories()提供的接口和最终生成的DOM结构,不符合原主题的DOM结构,于是就去翻看list_categories.js源码,最终根据源代码,仿写出了一个模板文件,来满足需求。

至于list_tags()的排序问题,官方给出的文档标签排列方式默认是’name’(其他的呢???),结果这会导致标签显示与写文章时候的标签顺序不一样,最后还是翻源代码的时候,翻到了还能使用id,解决了这个问题。

临近结束发现rem布局问题,最开始依赖于执行一次setRem计算函数,即为根元素添加font-size,这样导致的问题就是每次加载页面的时候,页面总是从一团文字拓展开来。其原因就是根元素一开始并没有设置font-size。所以解决办法就是使用css的媒体查询方法,在一开始就预先给根元素设置font-size,同时取消setRem函数的执行。

在移植主题的过程中,咱学会了去翻官方的文档,甚至源代码,学会了如何去分离通用模板和通用样式,学会了去通过模仿其他主题的源码,对自己的代码进行改造。当然,使用的ejs模板和stylus语言也在这个过程中基本学会了,同时借助了很多第三方的代码,来对主题进行功能的优化。