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

原文博客

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

1、 目前開發(fā)用vue框架  
2、 就是想用它搞一個  
3、 反正也簡單，實在不行再換唄（搞不起來是不可能的）  
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里省事，所以感受完了就結束進程吧，
npx vuepress dev docs

項目安裝完成后，我們進入package.json里面，添加script啟動項

 "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 // 默認端口http://localhost:8080/

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

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

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

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

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

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

// 記得不要復制注釋
---
navbar: false       // 不要導航欄
isNoPage: true       // 自定義的屬性
sidebar: false        // 不要側導航
pageClass: home-list  //自定也頁面類
---

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

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

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

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

tags: 是當前頁面的標簽，用于在列表頁生成標簽云

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

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

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

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

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

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

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

$contentWidth = 90%

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

.navbar{
  background:red
}

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

我們對掘金進行大段文字復制的時候會顯示版權信息：

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

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

import copy from "./common/copy"

export default ({
  Vue, // VuePress 正在使用的 Vue 構造函數(shù)
  options, // 附加到根實例的一些選項
  router, // 當前應用的路由實例
  siteData // 站點元數(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(); // 取消默認的復制事件
    copyTxt = window.getSelection(0).toString()
    copyTxt = `${copyTxt}
作者：靜水深流
原文：${window.location.href}
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權，非商業(yè)轉載請注明出處。`
    const clipboardData = e.clipboardData || window.clipboardData
    clipboardData.setData("text", copyTxt);
  }
  document.addEventListener("cut", e => {
    addCopy(e)
  });
  document.addEventListener("copy", e => {
    addCopy(e)
  });
}

這樣就可以實現(xià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 構造函數(shù)
  options, // 附加到根實例的一些選項
  router, // 當前應用的路由實例
  siteData // 站點元數(shù)據(jù)
}) => {
  setTimeout(() => {
    try {
      document && (() => {
        getGitalk.call(this, siteData)
        copy()
      })()
    } catch (e) {
      console.error(e.message)
    }
  },500)
}

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

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.;
    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生成對應的issue，保證頁面之間的評論都是獨立的
      })
      _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

# 進入生成的文件夾
cd dist

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

# 如果發(fā)布到 https://.github.io/
git push -f [email protected]:slbyml/blog.git master

cd -

我的默認生成的靜態(tài)文件在根目錄下的dist，因為我更改了config.js里的配置，保證docs里面的文件是干凈的

dest: "dist"

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

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

[ ] 添加文章閱讀量和文章字數(shù)

[ ] 豐富列表頁

[ ] 豐富首頁

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