Vuepress使用记录
2021年5月28日...大约 2 分钟
使用 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 都关闭,要么就点击页面上的 ** 此内容有更新 ** 的按钮主动刷新页面,之后就可以了