最近发现了两个特别好的hexo主题,考虑原有主题的一些bug难以修复,并且需要在国内平台托管一份博客,索性将两套主题都用上了,github使用tranquilpeak主题,主打简洁,gitee上为indigo主题,着重用户体验。


首先列出两大主题的文档地址,方便以后查阅
tranquilpeak
indigo

两大主题的主要不同:

  • tranquilpeak主要是展示简洁,无标题目录,白底黑字的阅读感类似简书,后者加入了很多设计元素,有目录/打赏等功能
  • tranquilpeak主题对博客作者展示比较少,但是indigo作者可以展示的位置比较多,并且可以加入自定义的作者页面
  • tranquilpeak的博客搜索用的是第三方的服务来做的,当博客更新后需要hexo algolia重新提交索引,而indigo是本地生成json数据,部署上更加方便一些
  • 本次还探索了使用本地图片来完成markdown的方法

切换主题

github上的主题切换用的是修改配置文件,在gitee上是用hexo新建了个项目完成的迁移,这个页面部署要小小参考一下gitee的使用文档。
切换主题基本没什么大的问题,直接把主题放入theme文件夹,而后在——config.yml进行配置即可,这个过程倒是很顺利,但在完成后会发现,所有的文章都没有缩略介绍,查看了说明才发现针对缩略介绍的文字这块是下放到主题上的,所以各个主题采用的方式不同,而原来用的主题是放到一个自定义字段description里面的,所以要费劲修改一番。针对两种主题不同的搜索处理,我都尝试了一下,综合感觉都不错,第三方的algolia是专门提供搜索的,个人的话免费的额度足够了。如果是本地生成json数据,那部署时就不需要向第三方数据搜索提供更新的条目,从精确性来讲感觉第三方更准一些,不过也不排除可能本地生成json数据的配置没做好,就基本的搜索需求来说都够用。

样式微调

  • 针对indigo这个博客主题,感觉文章显示宽度比较小,通过研究less样式表,把一个变量从绝对像素变成了百分比,从而顺利解决了适配问题
  • 另外在使用indigo博客主题时,发现最新版本的toc渲染不对头,我一直以为是自己的配置问题,最后在github上查issue,发现是hexo的问题,不过针对这个的折腾还是很值得,让我摸清了hexo的渲染架构,同时收获了字符escape的标准解决办法
  • 其实所有的主题只要把配置文件摸清楚了,用起来问题都不大,另外主题的维护者都是国人,交流也比较自然,并且可以自己发挥加入自定义的逻辑
  • gitee一开始一直不显示静态资源,经查询发现必须在配置文件中把项目名称给加上,也就是有个类似二级目录的配置

评论踩坑

两个主题都使用了gitment这个评论插件,这个是使用了gihub的issue功能,通过恰当的封装变成了评论的接口,确实很灵活,不得不给作者点赞。
这个配置的关键在于插件的文档写的不是特别详细,在此有两点需求,一是要明白那个github用户名指的是github的username,不是邮箱或者id,另外就是要填写的仓库应该直接是仓库的名称,不应该是一个git仓库的地址,这样在发请求时才会拼出正确的api。另外针对github里面申请那个appid,主要时回调的网址,必须前匹配,如果不对在点击初始化按钮时会在url栏里面提示错误,从而无法init。

博客折腾体会

虽然瞎费了不少功夫,不过对前端静态博客的架构有了一定的认识,对自己用的东西最起码有个了解的底气~
通过引入了hexo-asset-image,从而可以本地使用图片,相信这个对于写博客有很大的用途
最初看到的主题样例都是有丰富的图片展示,下一步就是增加一些博客图片,从而让博客有些灵气~
PS:附上两个博客的地址