我用Vuepress搭了一個好看的博客(內有源碼)

博客支持功能

• 文章分類功能
• 打賞模塊
• 按年歸檔
• 文章置頂
• 文章建立時間支持
• 文章閱讀量統計與評論
• 更好的移動端閱讀效果
• RSS訂閱
• 文章設置密碼

開發環境

• VuePress 1.x
• Node.js v10.8.0

本博客的開源代碼地址

• Github

效果預覽

• 博客的線上地址 blog.Iizhi.cn

開始

具體的開發細節官網上已經說得很詳細了，並且代碼已經開源，因此這裏不在說具體的細節，主要列舉開發過程當中遇到的一些問題。

如何添加分類的路由

只須要在 enhanceApp.js 中獲取 Vue 以及 router 這兩個對象，而後像在開發Vue項目中給應用添加正常的路由便可。

代碼以下：

const CategoryLayout = () => import('@theme/layouts/CategoryLayout')

const CATEGORYPATH = '/category/'

const install = (Vue, { router }) => {
  let routes = []
  routes.push({
    path: `${CATEGORYPATH}:category?`,
    component: CategoryLayout,
    meta: { tag: true }
  })
  router.addRoutes(routes)
}

export default { install }
複製代碼

文章建立時間支持

VuePress 默認是沒有文章的建立時間這個字段的，其實實現這個功能也比較簡單，就是經過 Vuepress 提供的 Plugin 的功能。

須要知道的是， vuepress 中的 plugin 是運行在 node 的環境中的。因此只須要，利用 node 提供的 fs.statSync 這個api便可。

具體代碼以下：

const fs = require('fs')

module.exports = (options = {}, context) => ({
  extendPageData ($page) {
    $page.publishDate = getFilePublishDate($page._filePath)
  }
})

function getFilePublishDate (filePath) {
  let publishDate
  try {
    publishDate = fs.statSync(filePath).birthtime
  } catch (e) { /* do not handle for now */ }
  return publishDate
}
複製代碼

只須要在 vuepress 的 config.js 中加載這個plugin便可。

···
 plugins: [
   require('./plugins/page-publish-date.js')
 ],
 ···
複製代碼

文章閱讀量統計與評論

文章的閱讀量與統計功能其用的是 Valine 這個庫。好像只有這個庫能夠同時有這兩個功能，因此就選了這個。

實現起來也是比較簡單的，可是中間遇到了兩個問題。

1. vuepress 沒法編譯成功

window.AV = require('leancloud-storage')
const Valine = require('valine')

new Valine({
    el:'#comment',
    ...
})
複製代碼

若是按照下面的方式初始化評論組件的話，在本地dev模式是能夠經過的，可是 npm run build 的時候會提示 window is not undefied 的錯誤，即便在評論組件加上 VuePress 提供的 ClientOnly 的標識符也會出現這個問題。

最後的解決辦法是，以 script 標籤的方式引入 leancloud-storage 和 valine 兩個庫。並在評論組件中輪詢檢查這兩個庫是否加載完成，在加載完成以後在初始化評論組件。 代碼以下：

<script>
let valine = null
const checkValine = () => {
  if (window.Valine) {
    valine = new Valine({
      appId: '******',
      appKey: '******',
      el: '#comment',
      placeholder: '評論在此',
      avatar: 'monsterid',
      path: window.location.pathname,
      recordIP: true,
      visitor: true
    })
  } else {
    setTimeout(checkValine, 50)
  }
}
export default {
  props: ['show'],
  watch: {
    '$route': 'refresh'
  },
  mounted () {
    checkValine()
  },
  methods: {
    refresh () {
      checkValine()
    }
  }
}
</script>
複製代碼

2.按照教程配置好後，發現文章切換時，評論內容並無切換

這個主要是因爲 Valine 這個庫在初始化全局對象時，若是沒有傳入path這個屬性，其內部會緩存當前頁面的 path。解決的辦法也很簡單，只要在傳 path 的時候指定的值便可，也即👆上面代碼中的 window.location.pathname。

一些其餘問題

其實在開發過程當中仍是有一些其餘的問題，好比 分類的路由經過首頁頁面點進去能夠直接訪問，可是若是直接在瀏覽器的地址欄輸入地址的話 Nginx 會索引不到相應的文件 提示 404 的錯誤。

這個問題的話，只須要在 nginx 的配置中添加下面👇的配置便可

location / {
  try_files $uri $uri/ /index.html /404.html;
}
複製代碼

其餘問題

我建了一個微信羣，具體的問題能夠加微信羣交流