# Theme

使用的是 vuepress + vuepress-theme-seeker

框架简单友好,主题漂亮干净

主题配置的时候有几个坑:

  1. nav 中的 link 后面要带上 /,这样才能自动去找对应目录下的 README.md
  2. 分类路径是 /categories/

更多配置可以参考主题作者自己的博客

# 部分 tags 页面 title 为 hello world

这个是主题带来的问题

查看源码发现 FrontmatterPagination.vue 文件中有

export default {
  // ...
  created(){
    this.$page.frontmatter.title = 'hello world'
  }
}
1
2
3
4
5
6

变量 $page.frontmatter 表示的是 markdown 的 yaml 部分
页面打开时的表现:先是显示正确的 title,然后被 hello world 覆盖掉
不知道为什么部分页面是正常的

解决方案:去掉这句就行

  1. fork 原仓库
  2. 注释掉上述文件中的那行代码
  3. 修改依赖
    yarn remove vuepress-theme-seeker
    yarn install shapled/vuepress-theme-seeker
    
    1
    2
    如果安装时失败,请使用代理重试

当然,也可以用我 fork 好的仓库,只使用第三步

重新部署,大功告成!

# 修复 XML 高亮 bug

components/Tags.vue 中的 .tag 样式没有加 scoped,导致 XML 的高亮样式错误,加上即可

然后更新包

yarn upgrade vuepress-theme-seeker
1

来一段XML看看修复结果

<?xml version="1.0" encoding="UTF-8"?>
<root>
  <content color="red">Nice!</content>
</root>
1
2
3
4

# 功能扩展

# 为 markdown 添加 checkbox 支持

根据vuepress issues 986,使用markdown-it-task-lists扩展

yarn add markdown-it-task-lists
1
module.exports = {
  markdown: {
    extendMarkdown: md => {
      md.use(require('markdown-it-task-lists'))
    }
  }
}
1
2
3
4
5
6
7
/* file: .vuepress/styles/index.styl */
.contains-task-list li
{
  list-style-type: none;
}
1
2
3
4
5

# 添加流程图支持

使用插件 markdown-it-plantuml,语法是 Pantuml

yarn add markdown-it-plantuml
1
module.exports = {
  markdown: {
    extendMarkdown: md => {
      md.use(require('markdown-it-plantuml'))
    }
  }
}
1
2
3
4
5
6
7

例子

@startuml
Bob -> Alice : hello
@enduml
1
2
3
uml diagram

更多用法查看官方文档

然而,我想用 wbs 的功能却发现不支持,源码走起

发现他是将起止符、 图类型作为参数传入的,也就是说我可以改成多字符串匹配来解决这个问题

改造过程中,突然想到不对啊,我把模块多用几遍不就行了吗

module.exports = {
  markdown: {
    extendMarkdown: md => {
      md.use(require('markdown-it-plantuml'), {
        openMarker: '@startuml',
        closeMarker: '@enduml',
        diagramName: 'uml',
      })
      md.use(require('markdown-it-plantuml'), {
        openMarker: '@startditaa',
        closeMarker: '@endditaa',
        diagramName: 'ditaa',
      })
      md.use(require('markdown-it-plantuml'), {
        openMarker: '@startgantt',
        closeMarker: '@endgantt',
        diagramName: 'gantt',
      })
      md.use(require('markdown-it-plantuml'), {
        openMarker: '@startmindmap',
        closeMarker: '@endmindmap',
        diagramName: 'mindmap',
      })
      md.use(require('markdown-it-plantuml'), {
        openMarker: '@startwbs',
        closeMarker: '@endwbs',
        diagramName: 'wbs',
      })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

来个 wbs 的例子

@startwbs
* 今天做个好人
** 扶老奶奶过马路
*** 在菜市场旁边的红绿等蹲守
*** 寻找腿脚不利索要过马路的老奶奶
*** 扶过马路
** 帮张大爷拿快递
*** 问张大爷快递信息
*** 去收发室
*** 拿给张大爷并要寄存费
** 不拿秀秀的钱
@endwbs
1
2
3
4
5
6
7
8
9
10
11
12
uml diagram

# 添加图片点击放大功能

官方插件支持走起文档

yarn add -D @vuepress/plugin-medium-zoom@next
1
module.exports = {
  plugins: {
    '@vuepress/medium-zoom': {
      selector: '.content__default img',
      // medium-zoom options here
      // See: https://github.com/francoischalifour/medium-zoom#options
      options: {
        margin: 16
      }
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

# Markdown 中的代码添加行号

module.exports = {
  markdown: {
    lineNumbers: true,
  }
}
1
2
3
4
5

# SEO

# 添加 GA 支持

快乐的使用vuepress官方GA插件

yarn add -D @vuepress/plugin-google-analytics
1
module.exports = {
  plugins: {
    '@vuepress/google-analytics': {
      'ga': '' // UA-00000000-0
    }
  }
}
1
2
3
4
5
6
7

# sitemap

使用插件vuepress-plugin-sitemap

因为这个不支持按照 url 前缀 disallow,需要手动修改对应页面的 sitemap.exclude 为 true

const exclude_prefix = ['/archive/', '/categories/', '/tags/', '/about/', '/404.html']

module.exports = {
  plugins: [
    (options, ctx) => {
      return {
        generated () {
          const { pages, locales } = ctx.getSiteData ? ctx.getSiteData() : ctx
          pages.forEach(page => {
            exclude_prefix.forEach(prefix => {
              if (page.path.startsWith(prefix)) {
                let fmOpts = page.frontmatter.sitemap || {}
                fmOpts.exclude = true
                page.frontmatter.sitemap = fmOpts
              }
            })
          })
        }
      }
    },
    ['sitemap', {
      hostname: 'https://shapled.com/'
    }]
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# robots.txt

使用插件vuepress-plugin-robots

module.exports = {
  plugins: {
    'robots': {
      host: "https://shapled.com/",
      disallowAll: false,
      sitemap: "/sitemap.xml",
      policies: [{
        userAgent: '*',
        disallow: [
          '/archive/',
          '/categories/',
          '/tags/', 
          '/about/'
        ]
      }]
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 使用技巧

# 控制表格宽度

表格宽度是自适应的,很可能挤得别的列很窄,这时候可以添加