搭建VuePress預設主題流程yarn安裝npm安裝建立一個檔案夾初始化README.md開發環境運作，.表示預設頁面路由位址建構靜态檔案添磚加瓦Reco主題安裝全局安裝reco提供的cli工具，比較友善項目初始化,跟着他的操作來就可以了最後有一個style的選擇,我三個都試了,沒發現什麼差別進入你剛剛建立的檔案夾安裝依賴運作開發環境編譯配置采坑熱加載buildupload.sh先删除本地檔案編譯編譯之後是public，我們重命名為想要的檔案名使用scp -r上傳插件

2020-09-11 23:50:00

搭建VuePress

Ikarosx 2020-07-31 18:20:26 VuePress

預設主題

流程

yarn安裝

yarn global add vuepress

npm安裝

npm install -g vuepress

建立一個檔案夾

mkdir blog

初始化README.md

echo '# Hello VuePress!' > README.md

開發環境運作，.表示預設頁面路由位址

vuepress dev .

建構靜态檔案

vuepress build .

echo PowerShell亂碼

執行這句之後，運作通路出現亂碼，這是因為預設PowerShell選擇UTF-16編碼

執行下面這句将編碼指定為UTF-8

$PSDefaultParameterValues['Out-File:Encoding'] = 'utf8'

運作完出現的應該就是下面這樣子

添磚加瓦

這是基本的目錄結構，當我們使用 vuepress dev docs 所有的通路路徑都是基于docs檔案夾

├── docs

│ ├── .vuepress # 用于存放全局的配置、元件、靜态資源等

│ │ ├── config.js # 配置檔案的入口檔案，也可以是 YML 或 toml

│ │ └── public # 靜态資源目錄

│ └── README.md # 預設頁面

└── package.json

3 directories, 4 files

下面我們修改一下README.md首頁

home: true

heroImage: /hero.png

heroText: Hero 标題

tagline: Hero 副标題

actionText: 快速上手 →

actionLink: /zh/guide/

features:

title: 簡潔至上

details: 以 Markdown 為中心的項目結構，以最少的配置幫助你專注于寫作。
title: Vue驅動

details: 享受 Vue + webpack 的開發體驗，在 Markdown 中使用 Vue 元件，同時可以使用 Vue 來開發自定義主題。
title: 高性能

details: VuePress 為每個頁面預渲染生成靜态的 HTML，同時在頁面被加載的時候，将作為 SPA 運作。

footer: MIT Licensed | Copyright © 2018-present Evan You

就能看到下面的效果

然後再docs下建立檔案夾或者建立md檔案

然後通路對應的路徑，就可以通路到檔案

比如以下目錄

├── README.md

│ ├── .vuepress

│ │ ├── config.js

│ │ └── public

│ ├── 2020

│ │ └── b.md

│ ├── README.md

│ └── a.md

4 directories, 6 files

Reco主題

主題

如果你和我一樣不擅長前端開發的話

使用現成的主題也不失為一個好的方案

這裡選擇了Reco

安裝

全局安裝reco提供的cli工具，比較友善

npm install @vuepress-reco/theme-cli -g

項目初始化,跟着他的操作來就可以了

最後有一個style的選擇,我三個都試了,沒發現什麼差別

theme-cli init

theme-cli無法找到

沒有配置npm全局包的環境變量

npm config list檢視prefix =後面的值

将其加入環境變量即可

進入你剛剛建立的檔案夾

cd blog

安裝依賴

npm install

運作

開發環境

npm run dev

編譯

npm run build

運作起來之後就能看到跟我這個部落格一樣的界面了

配置

主要是針對.vuepress/config.js的修改

官網和主題的文檔都非常詳細，建議參考官方文檔

采坑

熱加載

啟動之後一直無法熱加載，網上說的是md檔案可以，config.js不行但我md檔案也不行

最後在issue上找到了答案

vuepress dev . --host localhost

注意不能寫在package.json的script裡，無法生效

要直接運作vuepress dev . --host localhost

build

我還在想build之後我們是如何更新新的文章

結果發現其實需要我們手動去替換新生成的檔案

這裡我們可以使用腳本來解決

upload.sh

先删除本地檔案

rm -rf blog

編譯之後是public，我們重命名為想要的檔案名

mv public blog

使用scp -r上傳

scp -r blog [email protected]:/usr/share/nginx/yps/html/

我用這種做法是因為我是将網站部署在自己的雲伺服器

如果你是部署在github可以參考官方

插件

有很多好用的插件,比如評論、背景音樂

下面是我的配置檔案

plugins: [

[
  'vuepress-plugin-comment',
  {
    choosen: 'valine', 
    // options選項中的所有參數，會傳給Valine的配置
    options: {
      el: '#valine-vuepress-comment',
      // 需要去注冊，很簡單
      appId: 'your app Id',
      appKey: 'your app Key'
    }
  }
],
[
  '@vuepress-reco/vuepress-plugin-bgm-player',
  {
    audios: [
      {
        name: '野孩子',
        // bgm目錄放在.vuepress/public下
        url: '/bgm/楊千嬅 - 野孩子.mp3',
        cover: '/bgm/1.jpg'
      }
    ]
  }
]