如何採用VuePress構建文檔網站

来源:https://www.cnblogs.com/xiaoyangjia/archive/2023/10/31/17800255.html
-Advertisement-
Play Games

在建設博客的初期，我採用GitBook構建了編碼專家的專欄系統。GitBook是基於Node.js的靜態頁構建組件，可以將Markdown文檔渲染為靜態頁，支持插件擴展，使用非常簡單。由於它不支持深度的定製，使用了一段時間後，無法滿足我的要求了。有一天我看到某博客採用VuePress，簡潔美觀、功能... ...


作者：傾城
博客： https://www.codingbrick.com
寄語：當你意識到面子不重要時，你才算個真正的成年人。

在建設博客的初期，我採用GitBook構建了編碼專家的專欄系統。GitBook是基於Node.js的靜態頁構建組件，可以將Markdown文檔渲染為靜態頁，支持插件擴展，使用非常簡單。由於它不支持深度的定製，使用了一段時間後，無法滿足我的要求了。

有一天我看到某博客採用VuePress，簡潔美觀、功能強大。VuePress的幫助文檔非常詳實，是Vue團隊的誠意之作。正好我有一些Vue開發的功底，猶如出獄的色狼碰上了洗澡的劉亦菲。如果時間可以倒流，我絕對不會用WordPress來構建我的博客。WordPress固然成熟，設計的太“重”了。

VuePress 是一個 Vue 驅動的靜態網站生成器，使用Markdown編寫文檔，提供成熟的主題、側邊欄、搜索功能等，輕鬆創建如何結構清晰、易於導航和搜索的文檔網站。VuePress集成了自動化部署工具，可以將生成的靜態網站部署到各種托管平臺上，如GitHub Pages、Netlify等。VuePress還支持自動化的更新和發佈，使得您可以輕鬆地更新網站內容，並保持與代碼倉庫的同步。(來自VuePress官網)

1 安裝Nodejs

根據Vuepress官網的部署指南，Vuepress v2.0依賴Node.js版本是v16.19.0+。推薦採用 yum 方式安裝首先確認鏡像地址是否可用，文件路徑是：/etc/yum.repos.d/CentOS-Base.repo，參考內容如下所示：

# CentOS-Base.repo
#
# The mirror system uses the connecting IP address of the client and the
# update status of each mirror to pick mirrors that are updated to and
# geographically close to the client.  You should use this for CentOS updates
# unless you are manually picking other mirrors.
#
# If the mirrorlist= does not work for you, as a fall back you can try the 
# remarked out baseurl= line instead.
#
#
 
[base]
name=CentOS-$releasever - Base - mirrors.aliyun.com
failovermethod=priority
baseurl=http://mirrors.aliyun.com/centos/$releasever/os/$basearch/
        http://mirrors.aliyuncs.com/centos/$releasever/os/$basearch/
        http://mirrors.cloud.aliyuncs.com/centos/$releasever/os/$basearch/
gpgcheck=1
gpgkey=http://mirrors.aliyun.com/centos/RPM-GPG-KEY-CentOS-7
 
#released updates 
[updates]
name=CentOS-$releasever - Updates - mirrors.aliyun.com
failovermethod=priority
baseurl=http://mirrors.aliyun.com/centos/$releasever/updates/$basearch/
        http://mirrors.aliyuncs.com/centos/$releasever/updates/$basearch/
        http://mirrors.cloud.aliyuncs.com/centos/$releasever/updates/$basearch/
gpgcheck=1
gpgkey=http://mirrors.aliyun.com/centos/RPM-GPG-KEY-CentOS-7
 
#additional packages that may be useful
[extras]
name=CentOS-$releasever - Extras - mirrors.aliyun.com
failovermethod=priority
baseurl=http://mirrors.aliyun.com/centos/$releasever/extras/$basearch/
        http://mirrors.aliyuncs.com/centos/$releasever/extras/$basearch/
        http://mirrors.cloud.aliyuncs.com/centos/$releasever/extras/$basearch/
gpgcheck=1
gpgkey=http://mirrors.aliyun.com/centos/RPM-GPG-KEY-CentOS-7
 
#additional packages that extend functionality of existing packages
[centosplus]
name=CentOS-$releasever - Plus - mirrors.aliyun.com
failovermethod=priority
baseurl=http://mirrors.aliyun.com/centos/$releasever/centosplus/$basearch/
        http://mirrors.aliyuncs.com/centos/$releasever/centosplus/$basearch/
        http://mirrors.cloud.aliyuncs.com/centos/$releasever/centosplus/$basearch/
gpgcheck=1
enabled=0
gpgkey=http://mirrors.aliyun.com/centos/RPM-GPG-KEY-CentOS-7
 
#contrib - packages by Centos Users
[contrib]
name=CentOS-$releasever - Contrib - mirrors.aliyun.com
failovermethod=priority
baseurl=http://mirrors.aliyun.com/centos/$releasever/contrib/$basearch/
        http://mirrors.aliyuncs.com/centos/$releasever/contrib/$basearch/
        http://mirrors.cloud.aliyuncs.com/centos/$releasever/contrib/$basearch/
gpgcheck=1
enabled=0
gpgkey=http://mirrors.aliyun.com/centos/RPM-GPG-KEY-CentOS-7

yum 方式安裝的預設版本是16.18.1，達不到VuePress 2.0需要的最小版本16.19.0，必須指定版本號，命令如下：

# 檢查可用版本
yum list available nodejs
# 安裝指定版本
yum install nodejs-16.20.0

有時候 yum 源裡面沒有相應的Node.js版本，可以採用n模塊安裝指定版本，命令如下：

# 首先安裝npm模塊
yum install npm
# 利用npm安裝n模塊
npm install -g n
# 安裝最新版
n latest
# 或者指定版本
n 16.20.0
# 顯示版本號，證明安裝成功
node -v

2 初始化項目

VuePress的預設主題比較簡陋，缺乏SEO、Markdown 語法擴展等功能，推薦直接使用vuepress-theme-hope。這個版本提供了更加美觀的主題，預設集成許多實用的插件，大大增強了原有的功能。

首先初始化項目，命令如下：

npm init vuepress-theme-hope

這個命令會下載所有的依賴包，根據提示依次設置項目名稱、版本號等信息，最終會生成帶有空頁面的初始工程。

採用如下命令啟動調試：

npm run docs:dev

開發完畢後，可以構建靜態頁部署到伺服器上，靜態頁預設輸出路徑是 .vuepress/dist/，構建命令如下：

npm run docs:build

3 遷移項目

如果重新部署項目，需要再次安裝依賴包，下載項目源碼後，在根目錄執行命令：

npm install vuepress@next
npm install vuepress-theme-hope

4 開發經驗

4.1 配置插件

VuePress支持很多插件，以安裝搜索插件為例，命令如下：

# 安裝搜索插件
npm i -D vuepress-plugin-search-pro

在 config.ts 文件裡面找到 defineUserConfig，在配置項里增加代碼：

  plugins: [
    searchProPlugin({
      // 索引全部內容
      indexContent: true,
      hotReload: true,
      // 為分類和標簽添加索引
      customFields: [
        {
          getter: (page) => page.frontmatter.category,
          formatter: "分類：$content",
        },
        {
          getter: (page) => page.frontmatter.tag,
          formatter: "標簽：$content",
        }
      ]
    })
  ]

4.2 百度統計

在 config.ts文件裡面找到 defineUserConfig，在這個配置項的 header 里插入百度統計的腳本，如下所示：

  head: [
    // 百度統計
    [
      "script",
      {},
      `
      var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?去百度統計網站獲取相應代碼";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
      })();
        `
    ]
  ]

新建文件 enhanceApp.ts ，加入如下內容：

export default ({ router }) => {
    /**
     * vuepress 是基於 vue 的單頁面應用，頁面切換過程中不會重新載入頁面，不會觸發百度統計。
     * 以下代碼用於監聽路由切換事件，當切換頁面時,手動上報百度統計 
     */
    router.beforeEach((to, from, next) => {
      console.log("切換路由", to.fullPath, from.fullPath);
  
      //觸發百度的pv統計
      if (typeof _hmt != "undefined") {
        if (to.path) {
          _hmt.push(["_trackPageview", to.fullPath]);
          console.log("上報百度統計", to.fullPath);
        }
      }
      // continue
      next();
    });
  };

4.3 輔助腳本

懶得去記憶npm原始命令，編寫一個Shell腳本用來構建站點，代碼如下：

#!/bin/sh

echo "please choose your option(1、2):"
echo "1: hot deploy for developing"
echo "2: build static page(default path: .vuepress/dist/)"

read item
if [ $item == 1 ]
then
  git pull
  npm run docs:dev
elif [ $item == 2 ]
then
  git pull
  npm run docs:build
else
    choose
fi

5 參考文檔

https://v2.vuepress.vuejs.org/zh/guide/
https://theme-hope.vuejs.press/zh/guide/

博客作者：編碼專家
公 眾 號：編碼專家
獨立博客：codingbrick.com
文章出處：https://www.cnblogs.com/xiaoyangjia/p/17800255.html
本文版權歸作者所有，任何人或團體、機構全部轉載或者部分轉載、摘錄，請在文章明顯位置註明作者和原文鏈接。
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Linux 搭建私有CA
    CA和PKI介紹 CA（Certificate Authority），翻譯過來就叫作證書頒發機構。用於實現數字證書的管理，包括證書頒發、吊銷、續期等。 PKI（Registration Authority ），翻譯過來叫作註冊機構，負責接收請求並驗證實體的身份，然後指示 CA 為其頒發或撤銷證書。 ...
  • 屏蔽百度熱搜榜
    哈嘍大家好，我是鹹魚 我們知道預設情況下，Linux 終端提示符都是簡單的黑白色 這種黑白提示一方面看久了容易視覺疲勞，另一方面由於沒有高亮顯示，看著很不方便，視覺體驗極差 所以我們需要修改我們的終端顯示顏色，像下麵這樣子 PS1（提示語句） 在 Linux 中，當前的 Bash 提示設置保存在一個 ...
  • kube-promethues配置釘釘告警
    kube-promethues配置釘釘告警 前置：k8s部署kube-promethues 一.配置釘釘機器人 打開釘釘的智能群助手，點擊添加機器人 選擇自定義機器人 勾選加簽，複製後保存 複製webhook地址後點擊保存 二.編寫dingtalk的yaml部署文件 vi dingtalk.yaml ...
  • Redis7新特性簡介及十大數據類型
    Redis是基於記憶體的K-V鍵值對記憶體資料庫 淺談Redis7新特性 主要是自身底層性能和資源利用率上的提高和優化。 多AOF文件支持 config命令增強 限制客戶端記憶體使用 listpack緊湊列表調整 訪問安全性增強 Redis Functions（要搶Lua腳本的飯碗） RDB保存時間調整， ...
  • Linux系統上導出和導入MongoDB資料庫
    本文記錄如何在Linux系統上進行MongoDB資料庫的導出和導入（備份和還原），Windows系統上的命令基本一樣，僅文件路徑不同。 ...
  • Linux Mysql安裝配置
    本文分享自華為雲社區《華為雲GaussDB城市沙龍活動走進安徽，助力金融行業數字化轉型》，作者： GaussDB 資料庫 。 近日，華為雲GaussDB資料庫城市沙龍·安徽站圈層活動順利舉行。活動邀請了金融行業代表及伙伴，一起圍繞資料庫展開了金融行業數字化轉型解決方案與成功實踐交流，共同推動國內數據 ...
  • 鴻蒙極速入門(六)-載入請求狀態管理-LoadState+觀察者模式
    背景 1、在ArkTS的架構中，沒有明確的可管理的載入請求狀態的腳手架，在進行網路請求過程中，無法簡單的進行交互響應。 2、參考Android中的LoadState寫了一個簡單的腳手架，以便在日常開發過程中，管理載入請求狀態和UI交互。 腳手架說明與源碼 1、狀態機LoadState 使用一個狀態機 ...
  • uni-app 應對微信小程式最新隱私協議介面要求的處理方法
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 一，問題起因 最新在開發小程式的時候，調用微信小程式來獲取用戶信息的時候經常報錯一個問題 fail api scope is not declared in the privacy agreement，api 更具公告，是微信更新對應的隱 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類