更新文档网站步骤说明

# 安装相关软件

所需软件：

node (opens new window)(必需)
yarn (opens new window)(必需)
Visual Studio Code (opens new window)(可选) -代码编辑器

# 目录结构

解压网站安装包后，目录结构

.
📁ool.cool
├── 📁7z    ## 压缩工具(备份所用)
├── 📁docs
│   ├── 📁.vuepress
│   │   ├──📁dist   ## 最后生成的静态页面文件夹
│   │   ├──📁nav    ## 导航栏
│   │   ├──📁public
│   │   │   ├──📁download   ## 放置文件供下载
│   │   │   ├──📁img    ## 放置图片
│   │   │   └──📃其他
│   │   └──📃config.js  ## 配置文件
│   ├── 📁...   ## 各个分类文件夹
│   └── 📃README.md    ## 主页文档
├── 📁log
├── 📁node_modules
├── 📁theme-vdoing  ## vdoing主题源文件夹
├── 📃push_backup.bat   ## 推送更新文本、备份命令脚本
├── 📃package.json
└── 📃yarn.lock
.

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

提示

标高亮的文件\文件夹比较常用

# 开始调试&构建

解压ool.cool.zip到相关路径，进入ool.cool文件夹，然后在资源管理器地址栏输入powershell调用起命令窗口

点击查看动图

在窗口中输入yarn docs:dev，然后浏览器输入最后显示的网站地址(每次可能都不一样)，例如动图里：http://localhost:8096

点击查看动图

Ctrl+c进行终止命令，然后输入yarn docs:build，进行构建静态网页

点击查看动图

# 推送&备份

还是在原路径的命令窗口下输入：.\push_backup.bat，进行推送&备份

# 常用配置说明

# 默认MD文件格式

---
title: 默认页面标题 ## 页面标题(必需)
permalink: /update/ ## 永久链接(必需 建议标题/全部小写字母 '-'替换空格/)
date: 2020-01-12 11:51:53 ## 创建日期(可选  会自动生成)
sidebar: true ## 开启侧边栏
---
## 以下是正文
.
.

1
2
3
4
5
6
7
8
9

具体其他格式可参考：Cmd Markdown (opens new window),mahua (opens new window),editor.md (opens new window),Arya (opens new window)

# 主题配置文件

配置文件：ool.cool\docs\.vuepress\config.js 具体更多可参考:主题配置 (opens new window)

点击查看

module.exports = {
  theme: require.resolve('../../theme-vdoing'), // 使用vdoing主题
  head: [
    ['link', { rel: 'icon', href: '/favicon.ico' }],
    ['link', { rel: 'manifest', href: '/manifest.json' }],
    ['meta', { name: 'theme-color', content: '##1E1E22' }],
    ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
    ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
    ['link', { rel: 'apple-touch-icon', href: '/icons/apple-touch-icon-152x152.png' }],
    ['link', { rel: 'mask-icon', href: '/icons/safari-pinned-tab.svg', color: '##1E1E22' }],
    ['meta', { name: 'msapplication-TileImage', content: '/icons/msapplication-icon-144x144.png' }],
    ['meta', { name: 'msapplication-TileColor', content: '##000000' }]
  ],
  markdown: {
    lineNumbers: true,  // 开启代码显示行数
    externalLinks: { target: '_blank', rel: 'nofollow noopener noreferrer' }
  },
  plugins: [    //插件
    ['@vuepress/pwa', { //PWA插件
      serviceWorker: true,
      updatePopup: true
    }],
    [
      'one-click-copy', { //一键复制代码插件
        copySelector: ['div[class*="language-"] pre', 'div[class*="aside-code"] aside'],
        copyMessage: 'Copy successfully',
        duration: 2000,
        showInMobile: false
      },
    ],
    [
      'vuepress-plugin-zooming', //图片放大插件
      {
        selector: '.theme-vdoing-content img:not(.no-zoom)',
        options: {
          bgColor: 'rgba(0,0,0,0.6)'
        },
      },
    ]
  ],
  locales: {
    '/': {
      lang: 'en-US',
      title: 'PQLabs Support Documentation',
      description: 'PQLabs Support Documetation'
    },
    '/zh/': {
      lang: 'zh-CN',
      title: 'PQLabs 支持文档',
      description: 'PQLabs 支持文档'
    }
  },
  themeConfig: { //主题设置
    logo: '/logo.png', // 导航栏logo
    locales: {
      '/': {
        selectText: 'Languages',
        label: 'English',
        ariaLabel: 'Languages',
        nav: require('./nav/en'),
        sidebar: require('./sidebar/en')
      },
      '/zh/': {
        selectText: '选择语言',
        label: '简体中文',
        ariaLabel: 'Languages',
        nav: require('./nav/zh'),
        sidebar: require('./sidebar/zh')
      }
    },
    pageButton: false,  // 是否显示快捷翻页按钮，默认true
    footer: {   // 页脚信息
      createYear: 2018,
      copyrightInfo:
        'PQ Labs. All Rights Reserved.',
    },
    sidebarDepth: 2, // 侧边栏显示深度，默认1，最大2（显示到h3标题）
    category: false, // 是否打开分类功能，默认true。
    tag: false, // 是否打开标签功能，默认true。
    archive: false, // 是否打开归档功能，默认true。
    nextLinks: false, // 是否打开下一页链接，默认true。
    prevLinks: false, // 是否打开上一页链接，默认true。
    social: {
    // 社交图标，显示于信息栏和页脚栏
    // iconfontCssFile: '//at.alicdn.com/t/font_1678482_u4nrnp8xp6g.css', // 可选，阿里图标库在线css文件地址，对于主题没有的图标可自由添加
      iconfontCssFile: '//at.alicdn.com/t/font_2420504_bh57igz2bc.css',
      icons: [
        {
          iconClass: 'icon-mail-fill',
          title: 'Email',
          link: 'mailto:support@pqlabs.com'
        },
        {
          iconClass: 'icon-skype-fill',
          title: 'skype',
          link: 'skype:support.pqlabs?call'
        },
        {
          iconClass: 'icon-Youtube-fill',
          title: 'Youtube',
          link: 'https://www.youtube.com/channel/UCbw4eOUKTvio17r-wuY9zWQ'
        }
      ]
    }
  }
}

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
94
95
96
97
98
99
100
101
102
103
104
105
106

# 导航栏配置

配置文件：ool.cool\docs\.vuepress\nav\en.js/zh.js 具体更多可参考:导航栏配置 (opens new window)

点击查看

可以通过 en.js/zh.js 增加一些导航栏链接:

// .vuepress/config.js
module.exports = {
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Guide', link: '/guide/' },
      { text: 'External', link: 'https://google.com' },
    ]
}

1
2
3
4
5
6
7
8

外部链接 <a> 标签的特性将默认包含target="_blank" rel="noopener noreferrer"，你可以提供 target 与 rel，它们将被作为特性被增加到 <a> 标签上：

// .vuepress/config.js
module.exports = {
  themeConfig: {
    nav: [
      { text: 'External', link: 'https://google.com', target:'_self', rel:'' },
      { text: 'Guide', link: '/guide/', target:'_blank' }
    ]
  }
}

1
2
3
4
5
6
7
8
9

当你提供了一个 items 数组而不是一个单一的 link 时，它将显示为一个 下拉列表 ：

// .vuepress/config.js
module.exports = {
  themeConfig: {
    nav: [
      {
        text: 'Languages',
        ariaLabel: 'Language Menu',
        items: [
          { text: 'Chinese', link: '/language/chinese/' },
          { text: 'Japanese', link: '/language/japanese/' }
        ]
      }
    ]
  }
}

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

此外，还可以通过嵌套的 items 来在 下拉列表 中设置分组：

// .vuepress/config.js
module.exports = {
  themeConfig: {
    nav: [
      {
        text: 'Languages',
        items: [
          { text: 'Group1', items: [/*  */] },
          { text: 'Group2', items: [/*  */] }
        ]
      }
    ]
  }
}

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

可以使用 themeConfig.navbar 来禁用所有页面的导航栏：

// .vuepress/config.js
module.exports = {
  themeConfig: {
    navbar: false
  }
}

1
2
3
4
5
6

也可以通过 MD文件 来禁用某个指定页面的导航栏：

---
navbar: false
---

1
2
3

# 侧边栏配置

配置文件：ool.cool\docs\.vuepress\sidebar\en.js/zh.js 具体更多可参考:侧边栏配置 (opens new window)

# 推送&备份脚本

脚本文件：ool.cool\push_backup.bat

备份说明：只会保留上一个版本，也就是说每次更新上一个版本保留，再上一个版本删除。（ool.cool.zip这一版本，ool.cool_bk.zip上一版本）

@ECHO OFF
::清屏
CLS
::使用UTF-8代码页
chcp 65001
::设置时间
set "YMDHMS=%date:~3,4%_%date:~8,2%_%date:~11,2%_%time:~,2%_%time:~3,2%_%time:~6,2%"
::本地路径*(必需正确)
set ydir=G:\vuepress\
::目的路径*(必需正确)
set bkdir=\\192.168.1.67\website\
::备份名称*(必需正确)
set webname=ool.cool
::日志路径*(必需正确)
set logdir=E:\vuepress\ool.cool\log
::判断条件
set num=1
.
.
.

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