用vuepress搭建一個夠本身用的博客(帶評論功能)

時間 2019-12-07

標籤 vuepress 搭建一個夠本用的博客評論功能简体版

原文原文鏈接

閒扯

好久之前，本身擁有一個用hexo搭建的靜態博客網站，記得當時爲了把它搞出來，廢了很多勁，而後後來又斷斷續續更改過一些配置和樣式，可是由於感受各類麻煩，因此就放在github上積累和不少的塵土，到如今也懶得在打掃了（實際上是很久不用，有點忘了怎麼用了:-1:），前段時間在百度統計上看了看那個靜態網站的訪問人數，發現已經好久好久沒人訪問過了，，然而就在前段時間（沒錯，就是前面那個時間），我靈光一閃，爲啥不從新弄個靜態博客呢，因而我就決定洗洗睡覺（沒錯，那是一個夜深人靜的晚上），次日抽空找個簡單點的框架，而後搭個靜態博客，用來記錄本身的所見所聞所想
次日一大早吃完中午餐後（睡到中午了），我就看起了VuePress官網,沒錯，我選擇了VuePress框架，至於爲何呢，有如下幾點：html

一、目前開發用vue框架
二、就是想用它搞一個
三、反正也簡單，實在不行再換唄（搞不起來是不可能的）
四、沒有別的理由了

它有什麼好處、特性、和別的框架對比？看人家官網就得了，說的挺好的前端

項目搭建

沒啥好說的，按照人家官網搭就完事了，人家寫的那麼清晰、明瞭。感受尤大出品的文檔都很友好，閱讀起來很方便vue

# 將 VuePress 做爲一個本地依賴安裝
yarn add -D vuepress # 或者：npm install -D vuepress

# 新建一個 docs 文件夾,你也能夠打開編輯器來手動建立
mkdir docs

# 新建一個 markdown 文件
echo '# Hello VuePress!' > docs/README.md

# 啓動，讓你感覺下效果-----but:這種啓動方式不爽，仍是放package.json裏省事，因此感覺完了就結束進程吧，
npx vuepress dev docs

項目安裝完成後，咱們進入package.json裏面，添加script啓動項react

"scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }

上面一頓操做後咱們如今要知道三件事情：git

一、咱們之後全部的文章都將在docs中寫github

二、開發，也就是寫做的時候執行：npm

yarn docs:dev # 或者：npm run docs:dev // 默認端口http://localhost:8080/

三、打包生成靜態html文件，執行element-ui

yarn docs:build # 或者：npm run docs:build

默認狀況下，生成的靜態文件放在.vuepress/dist中，不過能夠改的
好了，先來認識下咱們之後要大展拳腳的地方 docs目錄：json

.
├─ docs //之後要在這裏面寫文章，直接在此文件夾下新建文件夾，而後再建md文檔就行，連接會自動生成
│  ├─ README.md // 這個將會是咱們之後的首頁
│  └─ .vuepress // 這個裏面會存放一些配置和組建
│     └─ public  // 靜態文件存放地
│     └─ components  // 組建存放地
│     └─ config.js //配置文件，咱們之後的全部配置基本都在這裏寫
└─ package.json

原諒我這部分說的比較糙，其實這部分看官網就行了，人家講的的確挺詳細的，要講的主要是下面的內容：

首頁配置

官網默認主題提供了一個只須要寫寫配置就能生成的頁面，格式是固定的，和VuePress的首頁一毛同樣,可是這不是我想要的（我也不知道我想要什麼樣的），因此我在.vuepress/components中新建了一個組建叫home，同時在首頁引入：（md文件裏能夠寫vue代碼的哦）

// 記得不要複製註釋
---
navbar: false       // 不要導航欄
isNoPage: true       // 自定義的屬性
sidebar: false        // 不要側導航
pageClass: home-list  //自定也頁面類
---
<home />

.vuepress/components/home.vue和咱們平時寫vue沒啥區別，引用的時候就用這個文件的文件名就能夠了，官網有介紹，由於目前還沒想好首頁改作成什麼樣的，因此就先這樣放着
isNoPage是我本身寫的，主要是爲了標誌當前是不是文章頁，之後會用來作判斷，在this.$site.frontmatter中存放
pageClass是頁面自定義類，編譯的時候會把這個類加在外層的div中，能夠根據這個來寫本身想要的樣式

/**這段css能夠寫在.vuepress/style.styl中，這個是我對首頁寫的樣式**/
home-list{
  .page-edit{
    display: none /**隱藏首頁的編輯和最後修改時間標籤**/
  }
  #gitalk-container{
    display:none  /**隱藏首頁的評論**/
  }
}

列表頁的實現

每一張文章頁，我都會在頭部添加

---
tags: vuepress, 前端
description: 本文介紹應該VuePress搭建一個博客，據官網說：VuePress 由兩部分組成：一部分是支持用 Vue 開發主題的極簡靜態網站生成器，另外一個部分是爲書寫技術文檔而優化的默認主題。它的誕生初衷是爲了支持 Vue 及其子項目的文檔需求。
---

tags: 是當前頁面的標籤，用於在列表頁生成標籤雲
description:頁面的描述信息，在列表頁會顯示，官網中有獲取more以前的方法,可是會有樣式，因此會感受很難看，因此我就添加的這個description字段，固然，我也並無放棄官網的方法，由於有時候可能真的懶得寫描述信息了,因此加了個判斷

<div v-if="item.frontmatter.description" class="art">
  {{item.frontmatter.description}}……<a :href="item.path" class="look">閱讀原文</a>
</div>
<div class="art" v-html="item.excerpt" v-else></div>

獲取說有文章的列表我是經過一開始設置的isNoPage來作的判斷

const arts = this.$site.pages.filter(item => {
  return !item.frontmatter || !item.frontmatter.isNoPage
})

標籤的實現

個人標籤是一個vue組建，而後在列表頁引入改組件；上面說到，我在每一個文章前面都會加tags，我會在標籤組件中經過遍歷this.$site.pages，拿到全部的標籤，而後去重，便是我全部頁面的標籤

<template>
  <div class="tags">
    <h6>標籤雲</h6>
    <span v-for="item in tags" @click="handleChangeTag(item)">{{item}}</span>
    <span @click="handleChangeTag('all')">全部</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tags: []
    }
  },
  created() {
    const tags = this.$site.pages.map(item => {
      return item.frontmatter && item.frontmatter.tags || ""
    })
    const tagsArr = tags.join(",").split(",").filter(i => i !== "")
    this.tags = [...new Set(tagsArr)]
  },
  methods: {
    // 點擊標籤更改列表
    handleChangeTag(tag) {
      this.$emit('change-tag',tag)
    }
  },
}
</script>

favorite.icon配置

favorite.icon也就是網頁左上角那個小圖標

首先咱們須要一個小圖標，而後放在.vuepess/public下，而後
打開.vuepress/config.js，添加

head:[
    ['link', { rel: 'shortcut icon', href: '/favorite.icon type: 'image/jpg' }]
]

注意href寫的是/favorite.icon,而不是/public/favorite.icon

樣式更改

在.vuepress下新建兩個styl文件用來寫樣式

override.styl:用來覆蓋默認主體樣式,好比我想讓個人內容佔據屏幕的90%，能夠：

$contentWidth = 90%

style.styl:寫本身一些自定義的樣式，能夠在這個文件夾裏寫，好比單獨修改導航的顏色

.navbar{
  background:red
}

官網對此的介紹

對複製進行修改

咱們對掘金進行大段文字複製的時候會顯示版權信息：

用vuepress搭建一個夠本身用的博客
做者：給我講個笑話
連接： https://juejin.im/post/5ce945...
來源：掘金
著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。

那麼咱們如何在博客中實現這個功能呢，其實很簡單，
首先修改咱們的.vuepress/enhanceApp.js文件（enhanceApp.js介紹）

import copy from './common/copy'

export default ({
  Vue, // VuePress 正在使用的 Vue 構造函數
  options, // 附加到根實例的一些選項
  router, // 當前應用的路由實例
  siteData // 站點元數據
}) => {
  setTimeout(() => {
    try {
      document && (() => { //對document的判斷是防止編譯的時候報錯
        copy()
      })()
    } catch (e) {
      console.error(e.message)
    }
  },500)
}

而後新建一個copy.js的文件

export default () => {
  function addCopy(e) {
    let copyTxt = ""
    e.preventDefault(); // 取消默認的複製事件
    copyTxt = window.getSelection(0).toString()
    copyTxt = `${copyTxt}\n做者：靜水深流\n原文：${window.location.href}\n著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。`
    const clipboardData = e.clipboardData || window.clipboardData
    clipboardData.setData('text', copyTxt);
  }
  document.addEventListener("cut", e => {
    addCopy(e)
  });
  document.addEventListener("copy", e => {
    addCopy(e)
  });
}

這樣就能夠實現了，有興趣能夠去博客體驗一下

添加評論

做爲一個有靈魂的博客，怎麼能夠不能評論呢，我能忍，博客也不能忍，個人評論系統用的是GITALK,官網說是這是一個基於 Github Issue 和 Preact 開發的評論插件，如今用的多的貌似還有valine、gitment,這個貌似能夠統計閱讀量；但願gitalk也能出個閱讀量統計功能，官網提供的方式有兩種，一種是在html中引入js文件，另外一種是用npm包的形式，我選擇的是經過js將評論須要的js和css用js動態插入到頁面中，首先修改.vuepress/enhanceApp.js中的代碼：

import getGitalk from "./common/getGitalk"
import copy from './common/copy'

export default ({
  Vue, // VuePress 正在使用的 Vue 構造函數
  options, // 附加到根實例的一些選項
  router, // 當前應用的路由實例
  siteData // 站點元數據
}) => {
  setTimeout(() => {
    try {
      document && (() => {
        getGitalk.call(this, siteData)
        copy()
      })()
    } catch (e) {
      console.error(e.message)
    }
  },500)
}

getGitalk.js的實現以下

export default ({pages})=> {
  const path = window.location.pathname
  // 獲取當前頁面信息
  const dist = pages.filter(item => {
    return item.path === path
  })[0]

  //只有在isNoPage是false的時候纔會顯示評論
  if (!dist.frontmatter || !dist.frontmatter.isNoPage) {
    const page =document.querySelector('.page')

    const linkGitalk = document.createElement('link');
    linkGitalk.href = 'https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css';
    linkGitalk.rel = 'stylesheet';
    document.body.appendChild(linkGitalk);

    const scriptGitalk = document.createElement('script');
    scriptGitalk.src = 'https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js';
    document.body.appendChild(scriptGitalk);

    scriptGitalk.onload= () => {
      let gitalk = document.createElement('div')
      gitalk.id = 'gitalk-container'
      page.appendChild(gitalk)
      var _gitalk = new Gitalk({
        clientID: '11111111111111',
        clientSecret: '2222222222222222',
        repo: 'slbyml.github.io', // 存儲評論的倉庫名字
        owner: 'slbyml',
        admin: ['slbyml'],  //倉庫的管理員，能夠有多個
        id: decodeURI(path),      // 每一個頁面根據url生成對應的issue，保證頁面之間的評論都是獨立的
      })
      _gitalk.render('gitalk-container')
    }
  }
}

對於gitalk的用法請看官網，可是要講兩個元素clientSecret和clientSecret，這兩個怎麼來的呢，是在這申請的，建立完成後能夠看到生成的這兩個字段

::: tip 注意：
若是想在框架中引入第三方框架，好比element-ui，也能夠在這個js中引入註冊
:::

部署

部署就簡單了，我目前是兩個倉庫，一個私有的，用來存放源代碼，一個就是用來存放生成的靜態文件的倉庫
更改package.json->script:

"scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs",
    "deploy": "bash deploy.sh"  // 新加的，用來生成靜態文件及上傳到github
  }

而後根目錄下新建deploy.sh文件：

#!/usr/bin/env sh

# 確保腳本拋出遇到的錯誤
set -e

# 生成靜態文件
npm run docs:build

# 進入生成的文件夾
cd dist

git init
git add -A
git commit -m 'deploy'

# 若是發佈到 https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:slbyml/blog.git master

cd -

個人默認生成的靜態文件在根目錄下的dist，由於我更改了config.js裏的配置，保證docs裏面的文件是乾淨的