vuepress主题改造-标签云的改造(2)

前言

上一章已经讲了 vuepress 主题如何实现继承，这样我们可以任意修改默认主题的任何组件及样式了。我们知道 vuepress 是无法自动根据我们 markdown 文件中的

---
tags:
- js
- vue
---
复制代码

生成标签云的页面的，而一个博客，标签在其中有知识分类及导航功能，是必不可少的一环，下面带领大家来改造一下默认主题让它能支持自动生成标签云页面

第一步配置的修改

既然是主题，就要提供可定制化，如果有人不需要 tag 功能，那也需要满足需求，打开 config.js 文件，修改其中的配置

themeConfig: {
    ...
    tags:"/tags",
    ...
    nav: [
    ...
        {
            text:"标签云",
            link:'/tags/',
            tags:true
        },
    ...
    ]
    ...
}
复制代码

我这样配置的原因是 nav 是给头部目录添加菜单，tags:"/tags"是定义标签路由路径，这样不管我的标签页定义成什么名字，都能导航到正确的位置。

第二步文件夹建立

由于 vuepress 是根据 markdown 文件生成的路由，所以想要生成一个标签的页面也必须建立一个 markdown 文件。在.vuepress 文件夹下建立 tags 文件夹，其中新建 README.md 文件。重启项目可看到

第三步新建 Tags 组件

在 docs/.vuepress/theme/components 下新建 Tags.vue 文件。为了使页面自动集成 tag 组件，需要修改 Layout.vue 组件，上一节我们讲过要修改默认主题可以用组件的继承，现在把默认主题的 Layout 组件复制到 docs/.vuepress/theme/layouts 目录下(如果不知道如何复制默认主题的 Layout 请看上一节)，修改其中的

在script中对tags变量的判断

export default {
  ...
  data() {
    return{
      ...
      tags:false
    }
  },
  ...
  created(){
    this.checkTags()
  }
  ...
  checkTags() {
      path=this.$route.path
      let tags = this.$site.themeConfig.nav.filter(v => v.tags); //判断tags
      if (tags[0].link === path) {
        this.tags = true;
        this.$page.frontmatter.sidebar = false; //tags不需要侧标栏
      } else {
        this.tags = false;
      }
      //判断是否是分类页面
      let type = this.$page.frontmatter.type;

      if (type === "classify") {
        this.type = "classify";
        this.$page.frontmatter.sidebar = false; //tags不需要侧标栏
      } else {
        this.type = "";
      }
      if (this.$page.frontmatter.defaultHome) {
        this.$page.frontmatter.sidebar = false; //主页不需要侧标栏
      }
    }
  }
复制代码

引入 Tags 组件，其中的 tags 是判断当前页面路由 tags 是否为 true，这是 config.js 中配置的选项。再新建的 Tags.vue 文件中加入以下内容，这是我定义的tag组件，你们可以根据我的组件自行修改







复制代码

其中 Article 组件是标签中显示文章内容的部分的组件，大家可自行定义组件及样式，我贴上自己的 Article 组件







复制代码

至此，标签云页面已经完成，效果如下

第四步页面显示标签页及标签页跳转

Page组件是文章显示的内容组件，如果需要在文章显示的时候把标签显示到文章头部，就需要改造Page组件。

把默认主题中 components 下的 Page.vue 文件复制到 docs/.vuepress/theme/components 中，修改其中内容




    
    
        
        {{tag}}
    




复制代码

修改后效果如下

至此，标签云的改造大致完成，这里贴上我改造好的源码地址：vuepress-theme-reform

查看效果可来到我的博客

vuepress主题改造-标签云的改造(2)

前言

第一步配置的修改

第二步文件夹建立

第三步新建 Tags 组件

第四步 页面显示标签页及标签页跳转

你可能感兴趣的:(vuepress主题改造-标签云的改造(2))

第四步页面显示标签页及标签页跳转