偶然在知乎上看到关于优化静态博客归档页面的问题,看完问题描述后发现,下面这种“按主题分类显示文章”的方式我也很喜欢,所以自己摸索了一个可以实现这个效果的苯方法。
思路
因为markdown是支持html标签的,所以要做的其实就是新建一个页面,然后用html语言写上想显示的主题、主题下的文章名和链接,最后定义不同内容的渲染样式就大功告成了。
步骤
新建一个页面
我新建的页面为“works”,中文名定为“作品集”。
之所以不直接在主题已有的“归档”页面上修改,是因为经过尝试我发现这样修改并不会生效。“归档”界面的显示方式似乎并不受其对应的
index.md
文件内容的影响(也可能是我技术太差,望专业人士指教)。新建页面的教程网上很多,不再赘述。部署完成后的博客首页上,应该会出现一个像下面这样的新按钮:
用html语言书写页面显示内容
找到
yourname.github.io\source\works
文件夹下的index.md
文件,按以下结构列出每一主题名称及对应文章(如果对html感兴趣可参看笑来老师的这一篇简明教程)。1
2
3
4
5
6
7<p><strong>主题名称</strong> </p>
<a href="文章链接">篇名</a>
<a href="文章链接">篇名</a>
. . .上面结构中出现的元素需要自己手动修改。想展示几个主题,就写几个类似这样的结构;一个主题下面有多少篇文章,就写多少文章链接。语句之间的空行不能省略。
前面说这是个苯方法,原因就在这一步。你在这里需要手动填入每篇文章链接和篇名,当文章较多时,就显得繁琐。
定义样式
在index.md
文件的结尾处,加上以下语句:1
2
3
4
5<style>
strong {
font-size: 26px;
}
</style>经过我的测试,确实只需要设定字体大小这一个参数,就可以实现想要的效果。
我推测是因为NexT主题中已经定义过strong、Link标签的渲染样式,所以不需要重复定义,所以我们只需要对独特需求做额外定义即可。