Vuepress使用记录

使用 Vuepress 的一些记录

主题

~~目前主题使用的是 vuepress-theme-hope ,~~主题现在是在 vuepress2 默认主题基础上改来的。

写md时的不同

因为本身支持一些 vue 的语法，所以在代码中写 vue 的语法时要用 特殊的写法 ，用的话需要这样写😂

::: v-pre
 - 在 template 中使用 `{{$t('header.index')}}`  `v-html="$t('header.index')"` ；
 - 在 js 中则使用 `this.$t('header.index')` 。
:::

利用 node 脚本生成侧边栏配置

因为是自用脚本，所以没做异常检测啥的，白费时间，现在的作用是在编译前生成侧边栏，然后进行编译或打包，对热更新也无影响，缺点就是后续的编译过程 console 的代码没有高亮了。有同样需求的伙伴可以参考下：

代码段

const fs = require('fs')
const path = require('path')
const ora = require('ora');
const { exec } = require('shelljs')
const [,, ...params] = process.argv

const result = {}

// 标题配置
const titleConfig = {
  '/posts/fe/about-plugin': '插件使用记录',
  '/posts/fe/about-vue': 'vue 相关',
  // 略
}
function handleGetTitle(val) {
  return titleConfig[val] || 'unknown-title'
}

function handleGetFolderChildren(targetPath, level = 0, parentPath = '') {
  const children = fs.readdirSync(targetPath)
  if (!(children && children.length > 0)) {
    return null
  }

  const resp = []
  for(let i = 0; i < children.length; i++) {
    let val = children[i]
    const subPath = path.join(targetPath, val)
    const stats = fs.statSync(subPath)
    // 如果是文件夹
    if (stats.isDirectory()) {
      // 如果是第一层级
      if (level === 0) {
        result[`/posts/${val}/`] = handleGetFolderChildren(subPath, level + 1, `/posts/${val}/`)
        continue
      }
      resp.push({
        title: handleGetTitle(parentPath + val),
        prefix: val + '/',
        children: handleGetFolderChildren(subPath, level + 1, `/posts/${val}/`)
      })
    } else {
      resp.push(val.replace(/.md/g, ''))
    }
  }
  return resp
}

const beginPath = path.resolve(__dirname, 'posts')

const spinner1 = ora('解析目录并生成目录树').start()
handleGetFolderChildren(beginPath, 0)
spinner1.succeed('目录树生成成功')
const spinner2 = ora('开始写入目标文件').start()

const outputPath = path.resolve(__dirname, '.vuepress/sideBarConf.js')

fs.writeFile(outputPath, 'module.exports = ' + JSON.stringify(result), (err) => {
  if (err) {
    return console.error(err);
  }
  spinner2.succeed('sidebar配置成功写入，开始编译流程')
  exec(params[0] === 'prod' ? 'vuepress build .' : 'vuepress dev .')
})

部署相关

有时会发现部署之后页面刷新后还是旧的，只有强刷才会是新的，但是再次普刷之后又是旧的了，这主要是因为 这个原因 ，要么把已打开的 clients 都关闭，要么就点击页面上的 ** 此内容有更新 ** 的按钮主动刷新页面，之后就可以了