Vdoing主题配置

# 前言

这篇文章用来记录我搭建这个知识库时遇到的一些问题

# 正文

# 为什么我没找到文档

因为文档藏在了演示项目里

https://doc.xugaoyi.com/pages/52d5c3/
https://doc.xugaoyi.com/pages/a20ce8/

# 怎么新建文章

直接新建markdown然后编辑文章就行了，反正打包时会自动生成的

也可以使用Webstorm的File来新建文章，可以自动添加下面的信息

---
title: 测试一下
date: 2022-03-04 16:08:47
permalink: /pages/bcca13/
sidebar: auto
categories:
  - 随笔
tags:
  - 
---

1
2
3
4
5
6
7
8
9
10

注意

这篇文章在new后会立刻添加到首页中
permalink随机生成
categories只会影响右侧边栏里文章分类这一项，其他情况下都是自动根据文件目录输出的
tag只影响侧边栏里热门标签这一项

比如说

---
title: new命令原理
date: 2019-12-25 14:27:01
permalink: /pages/8143cc480faf9a11
categories: 
  - 前端
  - JavaScript文章
tags: 
  - null
author: 
  name: xugaoyi
  link: https://github.com/xugaoyi
---

1
2
3
4
5
6
7
8
9
10
11
12
13

如果把JavaScript文章从categories里删掉，在访问这篇文章时，就会发生下面这种神奇的情况

这种情况下就没有

非常不符合直觉

# 导航栏怎么配置

我自己改了一点配置，大部分还是原作者的配置

在docs/.vuepress/config/config.

// nav
// 头部导航
module.exports = [
  { text: '首页', link: '/' },
  {
    text: '前端',
    // 目录页链接，此处link是vdoing主题新增的配置项，有二级导航时，可以点击一级导航跳到目录页
    link: '/web/',
    items: [
      // 说明：以下所有link的值只是在相应md文件定义的永久链接。另外，注意结尾是有斜杠的
      {
        text: '前端文章',
        items: [
          { text: 'JavaScript', link: '/pages/8143cc480faf9a11/' },
        ],
      },
      {
        text: '学习笔记',
        items: [
          { text: '《JavaScript教程》', link: '/note/javascript/' },
          { text: '《JavaScript高级程序设计》', link: '/note/js/' },
          { text: '《ES6 教程》', link: '/note/es6/' },
          { text: '《Vue》', link: '/note/vue/' },
          { text: '《React》', link: '/note/react/' },
          {
            text: '《TypeScript 从零实现 axios》',
            link: '/note/typescript-axios/',
          },
          {
            text: '《Git》',
            link: '/note/git/',
          },
          {
            text: 'TypeScript',
            link: '/pages/51afd6/',
          },
          {
            text: 'JS设计模式总结',
            link: '/pages/4643cd/',
          },
        ],
      },
    ],
  },
  {
    text: '后端',
    link: '/back/',
    items: [
      { text: 'Node', link: '/pages/47e5bf/' },
      { text: 'Linux', link: '/pages/0a83b083bdf257cb/' },
    ],
  },
  {
    text: '工具',
    link: '/tool/',
    items: [
      { text: '技术文档', link: '/pages/9a7ee40fc232253e/' },
      { text: 'GitHub技巧', link: '/pages/4c778760be26d8b3/' },
      { text: 'Nodejs', link: '/pages/117708e0af7f0bd9/' },
      { text: '博客搭建', link: '/pages/41f87d890d0a02af/' },
      { text: '测试', link: '/pages/aaf474/'}
    ],
  },
  {
    text: '算法',
    link: '/algo/',
    items: [
      { text: '学习', link: '/pages/f2a556/' },
      { text: '面试', link: '/pages/aea6571b7a8bae86/' },
      { text: '心情杂货', link: '/pages/2d615df9a36a98ed/' },
      { text: '实用技巧', link: '/pages/baaa02/' },
      { text: '友情链接', link: '/friends/' },
    ],
  },
  {
    text: '其他',
    items: [
      { text: '关于', link: '/about/' },
      { text: '友链', link: '/friends/' },
      { text: '收藏', link: '/pages/beb6c0bd8a66cea6/' },
    ],
  },
  {
    text: '索引',
    link: '/archives/',
    items: [
      { text: '分类', link: '/categories/' },
      { text: '标签', link: '/tags/' },
      { text: '归档', link: '/archives/' },
    ],
  },
]

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

# 为什么改了主题文件不生效

比如我改了404.vue文件，但是重新打包后没有生效

因为主题默认使用npm包，如果你的主题放在了本地，需要配置docs/.vuepress/config.js

const head = require('./config/head.js');
const plugins = require('./config/plugins.js');
const themeConfig = require('./config/themeConfig.js');

module.exports = {
  // 如果要修改主题 配置使用本地主题
  // theme: 'vdoing', // 使用npm包主题
  theme: require.resolve('../../theme-vdoing'), // 使用本地主题

  title: "SakuraSnow's blog",
  description: '雪之樱的个人知识库',
  markdown: {
    lineNumbers: true, // 代码行号
  },

  head,
  plugins,
  themeConfig,
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

但是非常不建议这么干，因为主题后续有更新时，你的代码就会被覆盖掉，只有你确保你知道你改了什么，且能明确记住的情况下才这么干

# 加入了文章or修改了配置不生效

多半重新打包可以解决问题

也可能是一些格式问题，可以看看控制台

E:\Workspaces\knowledge-library>npm run dev

> theme-vdoing-blog@1.0.0 dev E:\Workspaces\knowledge-library
> vuepress dev docs

wait Extracting site metadata...
warning: 该文件 "E:\Workspaces\knowledge-library\docs\02.后端\01.Node\node-1.md" 序号出错，请填写正确的序号
warning: 该文件 "E:\Workspaces\knowledge-library\docs\02.后端\01.Node\node-2.md" 序号出错，请填写正确的序号
warning: 该文件 "E:\Workspaces\knowledge-library\docs\02.后端\01.Node\node-3.md" 序号出错，请填写正确的序号
warning: 该文件 "E:\Workspaces\knowledge-library\docs\02.后端\01.Node\node-cookie.md" 序号出错，请填写正确的序号
warning: 该文件 "E:\Workspaces\knowledge-library\docs\02.后端\01.Node\package-manager.md" 序号出错，请填写正确的序号
warning: 该目录 "E:\Workspaces\knowledge-library\docs\03.技术" 内部没有任何文件或文件序号出错，将忽略生成对应侧边栏
warning: 该目录 "E:\Workspaces\knowledge-library\docs\04.更多" 内部没有任何文件或文件序号出错，将忽略生成对应侧边栏

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 主题修改

# 404时黑暗模式不生效

修改/theme-vdoing/layout/404.vue文件，加了个beforeCreate

export default {
  methods: {
    getMsg () {
      return msgs[Math.floor(Math.random() * msgs.length)]
    }
  },
  beforeCreate() {
  	console.log('isDark', window.matchMedia('(prefers-color-scheme: dark)').matches);
  	if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
	  document.body.className = 'theme-mode-dark';
    }
  },
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 后记

没想好

#工具 #博客搭建

上次更新: 2022/03/05, 15:57:30

← GitHub + jsDelivr + TinyPNG+ PicGo 打造稳定快速、高效免费图床