写在前面

原主题: vue-aurora
移植主题:hexo–theme-aurora

此为之前相关博文的汇总与补充,也顺便回忆自己移植主题都做了哪些工作。

动机

为什么想到移植这样一个主题呢? 原因有三:喜欢这样主题的风格、设计苦手、在用 hexo 博客框架。

历程

第一次移植

既然是移植,就得具备相关的知识,大概能有下面这些:Vue、 hexo、stylus(CSS)、 pug(HTML)、 JavaScript 等。

第一版的移植,实现起来其实很粗糙,很多东西都是现摸现用的,像模板语言用的 是 ejs,之后才换成了 pug

实现功能和效果的时候,有时能够卡上两三天(就是菜吧),还记得当时有一个分类子页的实现,一直不知道怎么做到和原主题一样,后来硬着头皮去看了 hexo 里 关于分类部分的源码,才终于搞明白了,hexo 的官方文档里没写(摔!)。

第一版实现的主要功能和效果:基本复刻原页面的展示效果,无动态背景,无音乐播放器,无代码高亮功能。基本就是很粗糙的页面展示吧,原主题有的特效,移植的主题一概没有。

第二次移植

秉承着又不是不能用的原则,第一版的主题,用了两个月,觉得有些难受,就是那种有点说不出的难受,我就又重新翻新了一次。可能是因为有了第一次移植的经验,这次不像上次那样摸不着头脑了。

模板语言也换成了 pug(比 ejs 更好用)。 不过 pug 模板语言,文档是真的简单,一页就没了,很多语法都是看其他博客主题的写法才知道的。

比如 p != xxx 就可以把 xxx 渲染进 p 标签,还有诸如:

script.
  var valine = new Waline({
      el: '#waline',
      serverURL: '!{theme.waline.serverURL}', 
  })

!{theme.waline.serverURL} 这种语法,就能够在 script 标签下,嵌入提前设置好的变量。

总之就是有种质的提升,更好的代码组织方式,更多的原博客的效果实现。本次移植,最核心的部分就是使用了 pjax 包,这让网页的加载速度快了很多,因为只要加载一部分的网页内容,而不是请求整个页面的相关内容,但带来的问题就是,重新渲染的问题。比如 博文之间来回切换,会导致博文里面的代码,无法高亮,这样就需要重新进行渲染。其实 pjax 里面的 complete 事件就是用来解决此类问题的。

this.$pjaxMainPage.on('pjax:complete', (e) => {
    e.stopPropagation()

    // 重新渲染
    codeHighlight.renderCode()
})

持续优化

后续的功能就是断断续续的更新一些新的功能,比如 3D 书单的效果,樱花面板,更换评论,更换字体。以后原主题有什么新的功能,可能也会继续的跟进。不过也不排除,我换成了动态博客,然后又把主题移植到对应的动态博客主题。

收获

  • 一个静态博客主题
  • 一颗折腾的心
  • 各种相关的网页开发的知识
  • 还有一些网络上的朋友

最后,希望自己能够努力的去折腾,也希望自己以后也能够成为一个优秀的人。