一個基於vuepress默認主題開發的主題-vuepress-theme-reform

介紹

項目地址：vuepress-theme-reform

效果展現： 個人博客

此主題繼承至vuepress的默認主題，添加功能有標籤頁改造，主頁改造，博客分類及展現，gitalk集成及gitalk自動化配置，最新google Analytics集成等。

使用

npm install vuepress-theme-reform -D # or yarn add vuepress-theme-reform
複製代碼

而後在docs/.vuepress/config.js文件中添加

{
  ...
  theme:'reform'
  ...
}
複製代碼

便可使用本主題

功能介紹

主頁展現

如需使用主頁展現 在docs下的README.md中修改defaultHome:true

---
defaultHome: true
___
複製代碼

目錄分類及展現

在config.js中配置

...
nav: [
      ...
      {
        text: "博文",
        icon: 'zhi',
        items: [
          { text: "前端", link: "/blog/frontend/" }
        ]
      }
      ...
]
複製代碼

在docs/blog/frontend下新建README.md，在頭部編寫

---
type: 'classify'
---
複製代碼

那此文件夾下的其它文件都會被編譯成展現的博文,此中的/blog/frontend自行定義

標籤雲集成

在docs下新建tags,在tags下新建空的README.md

在config.js中的themeConfig下配置

...
themeConfig:{
  ...
  tags:"tags"
  ...
  nav:[
    ...
    {
        text: "標籤雲",
        link: '/tags/',
        tags: true
      },
      ...
  ]
}
...
複製代碼

其中後面的tags表示你標籤雲的文件夾名

在咱們寫的文章中寫

---
tags:
  - vuepress
---
複製代碼

就能在頁面中看到效果

gitalk

在config.js中配置

{
  themConfig:{
    ...
    gitalk: {
      // gitalk的主要參數
      clientID: `your clientID`,
      clientSecret: `your clientSecret`,
      repo: `your repo`,
      owner: "yourname",
      admin: ["yourname"],
      accessToken: 'your accessToken ',
      labelRule: `(title,path)=> { let paths=path.split('/') if(paths.length>0){ let res = paths.pop() if(res===''){ res=paths.pop() } res = res.slice(-50) return res }else{ return title } }`
    },
    ...
  }
}
複製代碼

• clientID： 你的clientID，在github的Settings/Developer settings/OAuth Apps下建立獲取
• clientSecret： 你的clientSecret，在github的Settings/Developer settings/OAuth Apps下建立獲取
• repo: 你的評論存放的倉庫名，如個人爲xuzhongpeng.github.io
• owner: 你的github帳戶名
• admin: 評論下展現的名字
• accessToken: 可選，用於自動化建立gitalk時發送請求的taken，在github的Settings/Developer settings/Personal access tokens下建立獲取
• labelRule: 評論請求及自動化建立評論時的回調函數，有回調函數的緣由在於gitalk標籤只能有50個字符的限制，回調函數的第一個參數爲當前頁面的標題，第二個參數當前頁面的路徑，返回建立的標籤名

gitalk自動化建立

下載安裝插件

yarn add vuepress-plugin-gitalk # npm i vuepress-plugin-gitalk -D
複製代碼

在package.json中的scripts中加入

{
  "scripts":{
    ...
    "gitalk": "vuepress gitalk ./docs",
    ...
  }
}
複製代碼

執行

npm run gitalk
複製代碼

便可輸出自動化初始化評論的結果

最新Google Analytics插件集成

vuepress提供了@vuepress/plugin-google-analytics,我使用事後沒有效果，去google-analytics網站上發現當前的插入代碼已有變化，因此本身內置了插件，只需在config.js中配置便可。

{
  ga:'XXXX'
}
複製代碼

錯誤處理

若是自動化建立評論時輸出

接口返回數據{"message":"Bad credentials","documentation_url":"https://developer.github.com/v3"}
xxx 建立失敗
複製代碼

報這個錯誤大機率是accessToken失效了，這時須要從新到github的Settings/Developer settings/Personal access tokens下建立獲取並替換

項目地址：vuepress-theme-reform

效果展現： 個人博客