別眨眼網

一、前言

網站主題最初是在開發資料api的時候看到的，當時在學習Mybatis-Plus，最初也不知道這是個主題，就覺得Mybatis-Plus官網UI真的不錯，直到後面發現另外一個類似的網站，我意識到這是個模板，於是有了自己也搭建一個的想法，不過拖延症相當嚴重，最初是在寶塔上修改的，效率極低，一度放棄部署，直到最近換成本地開發才好了很多，也就是最近網站搭建初步完成，接下來就是往裡面增加文章等等，這裡帶大家從零開始搭建Vdoing主題網站，算是對過去一個月的知識總結。下圖就是mybatis-plus官網，是我們年輕人喜歡的風格（這裡隨便吐槽一下xx園吧，風格還是20年前的，不知道他們的UI設計師是不是還是兼職的）。

二、準備工作

1。github註冊

what？你居然沒有github賬號，建議你放棄網站部署（開玩笑）。作為全球最大的程式碼託管平臺，基本上每個稍微接觸過開發的應該都用過，如果你還沒註冊的話，趕緊註冊一個，沒聽過github太丟人了，註冊也很簡單（有手就行）。

點選進入github官網，這裡需要注意一點，如果是國內訪問的話，移動是可以的，其他運營商貌似有遮蔽，如果訪問不了，自行百度解決。

2。申請屬於自己的域名

這裡推薦去國外的Godaddy平臺註冊一個域名

3。申請註冊vercel平臺

vercel平臺是一個可以免費託管個人網站的自動化部署平臺，只要你的程式碼託管平臺（類似github，gitlab，gitee等）commit發生變化，它就會自動更新和重新部署，解放生產力。

點選vercel官網sign up註冊一個賬號，當然也可以選擇github直接登入，會更方便一點，可以直接匯入自己的倉庫，包括私有倉庫。

4。下載node和yarn

node

進入node的官網，選擇LTS即長期穩定版本下載。會得到一個msi字尾的檔案，即開箱即用的版本，不用自己手動配置環境變數啥的，會配置好的，注意安裝位置改一下就行，放在除c盤外的盤即可，其他就一步步點選確認即可，最後cmd中輸入node有welcome提示即為成功，不成功按照相應提示瀏覽器搜尋即可。

yarn

這個是個包管理工具，和npm差不多，聽說更快一點，這裡安裝是由於主題更新採用的是這個命令，所以這裡安裝一下。

yarn官網，如果不想配置環境變數的話，還是可以採用msi字尾安裝。

5。圖床配置

CDN + COS配置圖床

有了圖床，你就可以隨時隨地採用URL引用你的圖片，非常方便，可以參考我寫的這篇搭建部落格CDN+COS搭建圖床超詳細步驟，有個缺點就是需要備案才能使用自定義域名和CDN服務，不過如果想要白嫖的話，搜尋國外的圖床也是可以的，國內也有一些提供圖床配置的，使用它們的域名上傳圖片也可以。這裡採用的是pic-go圖床管理工具，強烈安利，真的太方便了。

路徑引用

如果你沒有自己的圖床也沒關係，主題部落格還提供本地引用的功能，不過這個更改圖片的時候比較麻煩，雖然有時候它可能更快一點點。

6。開發IDE下載

我是用習慣了idea，所以這裡推薦idea進行開發，安裝node。js外掛，然後就可以本地開發了，沒有的話安裝一下即可。

idea官網

安裝node。js外掛

至此，準備工作已經完成，接下來就進入今天的主題。

三、本地開發

1。github fork專案

Vdoing主題專案地址，這裡建議fork整個倉庫，然後自己做一些修改即可，作者大大真的太強了。

2。基礎網站配置

主頁配置

開啟以下目錄的index。md，你可能會問咋是md格式的，不應該是html格式的嗎？彆著急，這個是開發中的，打包之後是index。html

以下欄位對應相關的圖，可以自行體會一下，對應導航欄下面的幾個欄位，其中涉及使用URL引入的，可以替換成路徑引用，具體欄位幫助請自行檢視fork過來的倉庫介紹，也可以到Vdoing官方文件查閱。

home： trueheroImage： https：//img。de7v。com/img/new_logo_2。png# heroImage：/img/web。png# 這個路徑在public下的img目錄中heroText： IT七劍客tagline： 網際網路中的持劍者actionText： 立刻進入 →actionLink： /wresource/bannerBg： none

透過路徑引用的圖片目錄，把你想要的圖片全放進去然後就可以引用了。

config。ts配置

進入config。ts介面

首先我們先找到head位置進行配置，開啟網站的小圖示，同樣也可以使用URL或者本地引用

找到location開頭的這段程式碼，網站的標題和描述寫一下，這個會在百度搜索的快照中展示。

locales： { ‘/’： {//代表baseurl，即網站所有的引用的根路徑，預設是沒有的，如果資料夾有需要可以修改 lang： ‘zh-CN’， title： “IT七劍客”， description： ‘網際網路中的持劍者，七劍客帶你斬斷一切bug’， }}，

下面這些程式碼主要是配置導航欄和其他全域性功能，其中logo是最左側顯示的圖片，repro是自己的github名，用於直接跳轉github主頁，其他的取預設即可。

sidebarDepth： 2， // 側邊欄顯示深度，預設1，最大2（顯示到h3標題）logo： ‘https：//img。de7v。com/img/new_logo_2。png’， // 導航欄logorepo： ‘xyh-fu’， // 導航欄右側生成Github連結searchMaxSuggestions： 10， // 搜尋結果顯示最大數lastUpdated： ‘上次更新’， // 開啟更新時間，並配置字首文字 string | boolean （取值為git提交時間）docsDir： ‘docs’， // 編輯的資料夾// docsBranch： ‘master’， // 編輯的檔案所在分支，預設master。 注意：如果你的分支是main則修改為maineditLinks： true， // 啟用編輯editLinkText： ‘編輯’，

footer：{ // 頁尾資訊 createYear： 2022， // 部落格建立年份 //部落格版權資訊，支援a標籤 copyrightInfo：‘IT七劍客 | MIT License

閩ICP備2021006579號-4

閩公網安備 35012102500470號

至此基本配置已經大功告成，接下來我們談談文章是怎麼配置和主頁路由的規則。

文章謄寫和路由設定

首先配置目錄頁，這個是文章的導航介面，可以分別檢視各個目錄下的文章列表

——-pageComponent： name： Catalogue data： path： 01。wresource 安卓 imgUrl： https：//img。de7v。com/img/wresource。png description： Android，Kotlin，Jetpack等技術title： wresource 安卓date： 2020-03-11 21：50：53permalink： /wresourcesidebar： falsearticle： falsecomment： falseeditLink： falseauthor： name： wresource link： https：//github。com/xyh-fu——-

在這裡設定目錄的路由以及一些基礎的配置，放圖自行體會，這裡需要注意一點，path要和docs下面的相應文章目錄路徑名一致，這裡僅僅只是配置一下介面，真正的文章是放在docs下面的目錄中。

關於文章謄寫和命名規則具體檢視作者的這篇文章關於目錄和文章名稱約定（這裡偷懶一波）。

接下來再次回到之前得index。md中，可以配置主介面相關資訊了

features： # 可選的 - title： wresource 安卓 details： Android，Kotlin，Jetpack等技術 link： /wresource/ # 可選 imgUrl： https：//img。de7v。com/img/wresource。png # 可選

配置效果如下圖所示

3。外掛配置

這部分就屬於網站的內部配置了，與外觀沒有多大關係，如果覺得可以了，就不用配置了

站點資訊頁面

主要用於統計網站相關資訊的功能同時也增加文章字數統計以及閱讀量統計等等，這個配置參考kbt大大的部落格，這裡提醒一下readfile檔案在部落格中失效，建議去kbt大大的github專案主頁獲取最新的程式碼。站點資訊搭建

這裡給出當時踩坑的那個readfile檔案程式碼，如果有不同，以作者的為主。

import fs from ‘fs’； // 檔案模組import path from ‘path’； // 路徑模組import matter from ‘gray-matter’； // FrontMatter解析器 https：//github。com/jonschlinkert/gray-matterimport chalk from ‘chalk’ // 命令列列印美化const log = console。logconst docsRoot = path。join（__dirname， ‘。。’， ‘。。’， ‘。。’， ‘docs’）； // docs檔案路徑/** * 獲取本站的文章資料 * 獲取所有的 md 文件，可以排除指定目錄下的文件 */function readFileList（excludeFiles： Array = ［‘’］， dir： string = docsRoot， filesList： Array