vuepress自動生成側邊欄分組小函數

vuepress的自帶路由是很差用的,當你使用自動生成時,就不能生成一級分類,只能根據文章標題創建二級標題,那麼若是你想要生成一個帶有一級分類的子文章,那麼你須要手動配置這樣的配置javascript

{
    title: "xxx",
    collapsable: false,
    children: [
      'code-style/code',
      'code-style/browser-fix',
      'code-style/js-code'
    ]
  }

每次更新時,還須要手動向列表添加children,這是很是麻煩的,因此下面筆者提供了一個函數來處理這樣的問題vue

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

function getChildren(path) {
  const root = []
  readDirSync(path,root)
  return root
}

function readDirSync(path,root){
  var pa = fs.readdirSync(path);
  pa.forEach(function(ele,index){
    var info = fs.statSync(path+"/"+ele)
    if(info.isDirectory()) {
      readDirSync(path+ele,root)
    } else {
      if (checkFileType(ele)) {
        root.push(prefixPath(path,ele))
      }
    }
  })
}

function checkFileType(path) {
  return path.includes(".md")
}

function prefixPath(basePath,dirPath) {
  let index = basePath.indexOf("/")
  // 去除一級目錄地址
  basePath = basePath.slice(index,path.length)
  // replace用於處理windows電腦的路徑用\表示的問題
  return path.join(basePath,dirPath).replace(/\\/g,"/")
}

module.exports = {
  getChildren:getChildren
}

經過調用getChildren(basePath)方法就能夠得到對應basePath目錄下的全部博客,即便是子目錄,函數也會幫你正確的返回!可是爲了保證函數處理過程的正確性,你傳的目錄格式必須符合docs/xxx/xxx/,不然函數和webpack都不能正確的幫你生成數據。java

爲了保證你的目錄是符合要求的,你能夠使用仿製如下幫助函數來生成basePathwebpack

/**
 * @return {string}
 */
// xxx就是你的博客文件所在的一級目錄,dirPath爲二級目錄
function createFilePath(dirPath) {
  return `docs/xxx/${dirPath}/`
// `docs/study/${dirPath}/`
}
相關文章
相關標籤/搜索