摘要：那么我們?nèi)绾卧诓┛椭袑?shí)現(xiàn)這個功能呢，其實(shí)很簡單，首先修改我們的文件介紹正在使用的構(gòu)造函數(shù)附加到根實(shí)例的一些選項(xiàng)當(dāng)前應(yīng)用的路由實(shí)例站點(diǎn)元數(shù)據(jù)對的判斷是防止編譯的時候報錯然后新建一個的文件取消默認(rèn)的復(fù)制事件作者靜水深流原文著作權(quán)歸作者所有。

原文博客

很久以前，自己擁有一個用hexo搭建的靜態(tài)博客網(wǎng)站，記得當(dāng)時為了把它搞出來，廢了不少勁，然后后來又?jǐn)鄶嗬m(xù)續(xù)更改過一些配置和樣式，但是因?yàn)楦杏X各種麻煩，所以就放在github上積累和很多的塵土，到現(xiàn)在也懶得在打掃了（其實(shí)是好久不用，有點(diǎn)忘了怎么用了:-1:），前段時間在百度統(tǒng)計上看了看那個靜態(tài)網(wǎng)站的訪問人數(shù)，發(fā)現(xiàn)已經(jīng)很久很久沒人訪問過了，，然而就在前段時間（沒錯，就是前面那個時間），我靈光一閃，為啥不重新弄個靜態(tài)博客呢，于是我就決定洗洗睡覺（沒錯，那是一個夜深人靜的晚上），第二天抽空找個簡單點(diǎn)的框架，然后搭個靜態(tài)博客，用來記錄自己的所見所聞所想
第二天一大早吃完中午飯后（睡到中午了），我就看起了VuePress官網(wǎng),沒錯，我選擇了VuePress框架，至于為什么呢，有以下幾點(diǎn)：

1、 目前開發(fā)用vue框架  
2、 就是想用它搞一個  
3、 反正也簡單，實(shí)在不行再換唄（搞不起來是不可能的）  
4、 沒有別的理由了

它有什么好處、特性、和別的框架對比？看人家官網(wǎng)就得了，說的挺好的

沒啥好說的，按照人家官網(wǎng)搭就完事了，人家寫的那么清晰、明了。感覺尤大出品的文檔都很友好，閱讀起來很方便

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

# 新建一個 docs 文件夾,你也可以打開編輯器來手動創(chuàng)建
mkdir docs

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

# 啟動，讓你感受下效果-----but:這種啟動方式不爽，還是放package.json里省事，所以感受完了就結(jié)束進(jìn)程吧，
npx vuepress dev docs

項(xiàng)目安裝完成后，我們進(jìn)入package.json里面，添加script啟動項(xiàng)

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

上面一頓操作后我們現(xiàn)在要知道三件事情：

1、我們以后所有的文章都將在docs中寫

2、開發(fā)，也就是寫作的時候執(zhí)行：

yarn docs:dev # 或者：npm run docs:dev // 默認(rèn)端口http://localhost:8080/

3、打包生成靜態(tài)html文件，執(zhí)行

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

默認(rèn)情況下，生成的靜態(tài)文件放在.vuepress/dist中，不過可以改的
好了，先來認(rèn)識下我們以后要大展拳腳的地方 docs目錄：

.
├─ docs //以后要在這里面寫文章，直接在此文件夾下新建文件夾，然后再建md文檔就行，鏈接會自動生成
│  ├─ README.md // 這個將會是我們以后的首頁
│  └─ .vuepress // 這個里面會存放一些配置和組建
│     └─ public  // 靜態(tài)文件存放地
│     └─ components  // 組建存放地
│     └─ config.js //配置文件，我們以后的所有配置基本都在這里寫
└─ package.json

原諒我這部分說的比較糙，其實(shí)這部分看官網(wǎng)就好了，人家講的的確挺詳細(xì)的，要講的主要是下面的內(nèi)容：

官網(wǎng)默認(rèn)主題提供了一個只需要寫寫配置就能生成的頁面，格式是固定的，和VuePress的首頁一毛一樣,但是這不是我想要的（我也不知道我想要什么樣的），所以我在.vuepress/components中新建了一個組建叫home，同時在首頁引入：（md文件里可以寫vue代碼的哦）

// 記得不要復(fù)制注釋
---
navbar: false       // 不要導(dǎo)航欄
isNoPage: true       // 自定義的屬性
sidebar: false        // 不要側(cè)導(dǎo)航
pageClass: home-list  //自定也頁面類
---

.vuepress/components/home.vue和我們平時寫vue沒啥區(qū)別，引用的時候就用這個文件的文件名就可以了，官網(wǎng)有介紹，因?yàn)槟壳斑€沒想好首頁改做成什么樣的，所以就先這樣放著
isNoPage是我自己寫的，主要是為了標(biāo)志當(dāng)前是否是文章頁，以后會用來做判斷，在this.$site.frontmatter中存放
pageClass是頁面自定義類，編譯的時候會把這個類加在外層的div中，可以根據(jù)這個來寫自己想要的樣式

/**這段css可以寫在.vuepress/style.styl中，這個是我對首頁寫的樣式**/
home-list{
  .page-edit{
    display: none /**隱藏首頁的編輯和最后修改時間標(biāo)簽**/
  }
  #gitalk-container{
    display:none  /**隱藏首頁的評論**/
  }
}

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

---
tags: vuepress, 前端
description: 本文介紹應(yīng)該VuePress搭建一個博客，據(jù)官網(wǎng)說：VuePress 由兩部分組成：一部分是支持用 Vue 開發(fā)主題的極簡靜態(tài)網(wǎng)站生成器，另一個部分是為書寫技術(shù)文檔而優(yōu)化的默認(rèn)主題。它的誕生初衷是為了支持 Vue 及其子項(xiàng)目的文檔需求。
---

tags: 是當(dāng)前頁面的標(biāo)簽，用于在列表頁生成標(biāo)簽云

description:頁面的描述信息，在列表頁會顯示，官網(wǎng)中有獲取more之前的方法,但是會有樣式，所以會感覺很難看，所以我就添加的這個description字段，當(dāng)然，我也并沒有放棄官網(wǎng)的方法，因?yàn)橛袝r候可能真的懶得寫描述信息了,所以加了個判斷

  {{item.frontmatter.description}}……閱讀原文

獲取說有文章的列表我是通過一開始設(shè)置的isNoPage來做的判斷

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

我的標(biāo)簽是一個vue組建，然后在列表頁引入改組件；上面說到，我在每個文章前面都會加tags，我會在標(biāo)簽組件中通過遍歷this.$site.pages，拿到所有的標(biāo)簽，然后去重，即是我所有頁面的標(biāo)簽

favorite.icon也就是網(wǎng)頁左上角那個小圖標(biāo)

首先我們需要一個小圖標(biāo)，然后放在.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:用來覆蓋默認(rèn)主體樣式,比如我想讓我的內(nèi)容占據(jù)屏幕的90%，可以：

$contentWidth = 90%

style.styl:寫自己一些自定義的樣式，可以在這個文件夾里寫，比如多帶帶修改導(dǎo)航的顏色

.navbar{
  background:red
}

官網(wǎng)對此的介紹

我們對掘金進(jìn)行大段文字復(fù)制的時候會顯示版權(quán)信息：

用vuepress搭建一個夠自己用的博客  
作者：給我講個笑話  
鏈接：https://juejin.im/post/5ce945...  
來源：掘金  
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

那么我們?nèi)绾卧诓┛椭袑?shí)現(xiàn)這個功能呢 ，其實(shí)很簡單，
首先修改我們的.vuepress/enhanceApp.js文件（enhanceApp.js介紹）

import copy from "./common/copy"

export default ({
  Vue, // VuePress 正在使用的 Vue 構(gòu)造函數(shù)
  options, // 附加到根實(shí)例的一些選項(xiàng)
  router, // 當(dāng)前應(yīng)用的路由實(shí)例
  siteData // 站點(diǎn)元數(shù)據(jù)
}) => {
  setTimeout(() => {
    try {
      document && (() => { //對document的判斷是防止編譯的時候報錯
        copy()
      })()
    } catch (e) {
      console.error(e.message)
    }
  },500)
}

然后新建一個copy.js的文件

export default () => {
  function addCopy(e) {
    let copyTxt = ""
    e.preventDefault(); // 取消默認(rèn)的復(fù)制事件
    copyTxt = window.getSelection(0).toString()
    copyTxt = `${copyTxt}
作者：靜水深流
原文：${window.location.href}
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。`
    const clipboardData = e.clipboardData || window.clipboardData
    clipboardData.setData("text", copyTxt);
  }
  document.addEventListener("cut", e => {
    addCopy(e)
  });
  document.addEventListener("copy", e => {
    addCopy(e)
  });
}

這樣就可以實(shí)現(xiàn)了，有興趣可以去博客體驗(yàn)一下

作為一個有靈魂的博客，怎么可以不能評論呢，我能忍，博客也不能忍，我的評論系統(tǒng)用的是GITALK,官網(wǎng)說是這是一個基于 Github Issue 和 Preact 開發(fā)的評論插件，現(xiàn)在用的多的貌似還有valine、gitment,這個貌似可以統(tǒng)計閱讀量；希望gitalk也能出個閱讀量統(tǒng)計功能，官網(wǎng)提供的方式有兩種，一種是在html中引入js文件，另一種是用npm包的形式，我選擇的是通過js將評論需要的js和css用js動態(tài)插入到頁面中，首先修改.vuepress/enhanceApp.js中的代碼：

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

export default ({
  Vue, // VuePress 正在使用的 Vue 構(gòu)造函數(shù)
  options, // 附加到根實(shí)例的一些選項(xiàng)
  router, // 當(dāng)前應(yīng)用的路由實(shí)例
  siteData // 站點(diǎn)元數(shù)據(jù)
}) => {
  setTimeout(() => {
    try {
      document && (() => {
        getGitalk.call(this, siteData)
        copy()
      })()
    } catch (e) {
      console.error(e.message)
    }
  },500)
}

getGitalk.js的實(shí)現(xiàn)如下

export default ({pages})=> {
  const path = window.location.pathname
  // 獲取當(dāng)前頁面信息
  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.;
    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),      // 每個頁面根據(jù)url生成對應(yīng)的issue，保證頁面之間的評論都是獨(dú)立的
      })
      _gitalk.render("gitalk-container")
    }
  }
}

對于gitalk的用法請看官網(wǎng)，但是要講兩個元素clientSecret和clientSecret，這兩個怎么來的呢，是在這申請的，創(chuàng)建完成后可以看到生成的這兩個字段

::: tip 注意：
如果想在框架中引入第三方框架，比如element-ui，也可以在這個js中引入注冊
:::

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

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

然后根目錄下新建deploy.sh文件：

#!/usr/bin/env sh

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

# 生成靜態(tài)文件
npm run docs:build

# 進(jìn)入生成的文件夾
cd dist

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

# 如果發(fā)布到 https://.github.io/
git push -f git@github.com:slbyml/blog.git master

cd -

我的默認(rèn)生成的靜態(tài)文件在根目錄下的dist，因?yàn)槲腋牧?b>config.js里的配置，保證docs里面的文件是干凈的

dest: "dist"

這樣在我執(zhí)行npm run deploy的時候就會自動生成靜態(tài)文件，并上傳的github上，是不是很方便
最后，這些都是我自己做的事情，可能會有更好的實(shí)現(xiàn)，所以歡迎討論！！
以后想添加的東西：

[ ] 添加下拉加在更多功能

[ ] 添加文章閱讀量和文章字?jǐn)?shù)

[ ] 豐富列表頁

[ ] 豐富首頁

最后的最后這篇文字也是突發(fā)奇想寫的，剛開始不知道寫啥，所以就邊寫變想該寫啥（負(fù)面教學(xué)，別學(xué)我），沒想到寫著寫著，文思泉涌 ，一片文采華麗的文章就這么誕生了，從沒發(fā)現(xiàn)自己還有寫文章的天賦。
轉(zhuǎn)載原文