如果看到这个页面,我想你应该是对博客的主题感兴趣。如果你不想听我唠叨的话,可以直接去看看 ZenMind 主题。
之前一直使用 Wordpress,且个人希望页面干净一点,就在官方的 Twenty Twelve 主题上改了改,变成下面这个样子,直到现在我还是非常喜欢。
今年,在腾讯云上购买的服务器快到期了,看了看续费价格,1 核 2G 内存的服务器每年要六百多,再看了看自己如今的更新频率,心里只剩一句不值得。在免费和继续付费两种方案之间摇摆了一段时间后,咬了咬牙决定还是用免费的吧,毕竟如今的经济形势也不好,能节约一点是一点吧。
简单把 Hexo 主题页翻了翻,又到 Twitter 上找了找,发现了 ZenMind 主题。这个主题的页面非常干净,首页只有顶部菜单、文章摘要列表、底部版权信息,和我目前使用的大差不差,只需要改改 CSS 就可以实现我现有博客的效果。
在原主题上,我做了如下修改:
首先,增加 Font Awesome 图标库 V5 版本,用于在页面上展示一些小图标,网页顶部菜单和底部版权信息都能看到它们的身影。
其次,为了让顶部菜单展示小图标,我把菜单配置改成了这样:
menu:
<i class="fas fa-volleyball-ball"></i> 知识: /books/
<i class="fas fa-feather"></i> 生活漫记: /ramble/
正常情况下,这样配置后,会直接把 HTML 标签展示在页面上,所以就把显示菜单的代码由 <%= name %>
改成了 <%- name %>
。这样能实现我需要的效果,但有一丢丢注入的风险。
还有,文章的摘要使用 <!-- more -->
标签来处理,为了让首页的摘要能够正常显示,需要将 post-md
的样式引入首页中。
<div class="post-except post-md">
<%- post.excerpt %>
</div>
还有一个很重要的功能就是,分类页面的展示。页面上展示的是分类的中文名称,但访问的链接是英文,这个可以通过配置实现:
category_map:
知识: knowledge
生活漫记: ramble
同时,将配置 category_dir: categories
修改为 category_dir: ''
,这样访问分类页面的访问链接就由原来的 xxx.com/categories/知识
变成了 xxx.com/knowledge/
。
除此之外,我还需要在页面上展示分类的名称:
不知道是否可以通过配置实现,我通过一个简单的方法实现,具体的实现代码如下所示。简而言之,利用页面的访问链接找到分类的英文名称,然后取得配置的分类映射,遍历映射找到对应分类的中文名称。
<header class="archive-header">
<h1 class="archive-header-title">
分类目录归档:
<% Object.keys(config.category_map).forEach(function(key) { %>
<% if (config.category_map[key] === page.path.split("/")[0]) { %>
<span><%= key %></span>
<% } %>
<% }); %>
</h1>
</header>
另外,我还升级了 highlightjs
插件到最新版本(11.9),我不太喜欢黑色背景,就选了一个 xcode
的主题,更多主题,你可以在 highlight.js官方主题 预览。
最后,就是 CSS 和一些细节的调整,也没啥可说的,留给大家慢慢发现吧。
以我半吊子的前端编码水平,只花了半天时间就修改完成,所以代码就不开源了,况且我也不一定有精力来维护。但如果你实在懒得自己修改,可以联系我,我直接把修改后的主题源码发你。
至于联系方式,你在网站上一定能找到的。