VuePress

自动设置sidebar

const path = require('path')
const fs = require('fs')

/**
 * 自动生成 sidebar属性
 * @params {fileURL} base (path.join(__dirname, '..', '..', 'docs'))
 **/
function getSideBar(base) {
    var readDir = fs.readdirSync(base);
    // 排除docs下的非目录的文件名
    let notPages = ['.vuepress', '.DS_Store', 'README.md']
    readDir = readDir.filter(
        item => {
            return notPages.findIndex(ele => {
                return ele === item
            }) < 0
        }
    )
    let sidebar = {}
    readDir.forEach(item => {
        sidebar[`/${item}/`] = fs.readdirSync(`${base}/${item}`).map(item => {
            if (item === 'README.md') {
                return ''
            } else {
                return item.slice(0, -3)
            }
        })
    })
    return sidebar
}

配置全局的图片前缀

在md文档中这么使用:

![567](~@img/ccc.jpeg)

配置如下:

// .vuepress/config.js
module.exports = {
 configureWebpack: {
        resolve: {
            alias: {
                '@img': path.resolve(__dirname, './public/images')
            }
        }
    }
}

markdown的图床

  1. Typora 下载
  2. PicGo 下载
  3. Typora配置图像设置
  4. PicGo配置阿里OSS、腾讯COS、等图床(都有文档)
  5. 图片拖拽到markdown编辑器中提示有选项包含上图图片,点击即可上传并替换原先连接
  6. 请注意自己图床的防盗链以及对象存储的安全
Last Updated: