Tag标签页和分类页非常相似,也是标签汇总页加上具体标签的文章列表页组合而成,同样是借助vuepress的extendPageData插件api动态注入页面类型和blog插件君打的一套组合拳。

分类页和上一篇的归档页一样,都是方便检索文章博客的必备功能页,与之类似,我们同样是借助vuepress的extendPageData插件api动态注入页面类型,同时配合blog插件君的文档分类功能共同完成分类页。

本篇我们来实现文章归档页,关键点还是涉及全局计算属性的运用,同时借助了相关插件api来动态生成归档页并注入页面类型。

接上一篇,我们完成剩下的用来放一些社交媒体链接及版权信息的FooterBar模板。本篇内容会比较简单,主要会利用vue的条件渲染对常用的链接类型进行区别适配,编写一个图标组件用来媒体图标的显示。版权信息之类的是用v-html指令接收,可以自己自定义任意的HTML。

SideBar是一个复合模板, FooterBar,NavBar, SubNav均包含在里面, 我们已经完成了NavBar, 剩下的SubNav是对站点的分类、标签及文章的简易统计和快速入口,FooterBar是用来放一些社交媒体链接及版权信息。

导航模块是博客站点必备的一个元素,我们将参考VuePress默认主题来实现导航模块。

上篇我们已经完成了文章列表页,但还看不到文章内容,本篇我们就来编写文章详情页来展示文章的内容及文章对应的一些元数据。eg.作者、发布日期、分类、标签等。

从本篇开始我们将引入官方的 vuepress-plugin-blog 插件, blog插件封装了一系列实用功能, 用它来做博客的自定义主题可以省心不少。

在 VuePress 中 Markdown 文件是元数据（页面内容、配置等）的提供者，而布局组件负责消费他们。VuePress中的模板文件指的就是普通的Vue组件,它可以配合布局组件共同处理这些元数据,渲染出我们的主题页面。从本篇开始,假设你已具备Vue应用的开发基础, 如果没有接触过Vue开发请先移步Vue官网。

接上一篇,我们已经有了个能运行的简易站点,主题目录下仅包含了一个Layout.vue文件,从现在开始我们需要往里面添置东西让主题变得功能完备起来,以下是推荐的目录结构。