偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

Vuepress-Theme-Hope搭建個(gè)人博客,酷炫又簡(jiǎn)單~

開發(fā) 前端
使用vuepress-theme-hope搭建文檔或博客還是非常簡(jiǎn)單的,基本上都是配置的工作,不用我們寫什么代碼,對(duì)前端小白同學(xué)們非常友好。

哈嘍大家好啊,我是Hydra。

最近有點(diǎn)時(shí)間,把以前寫過(guò)的文章弄在一起,使用vuepress-theme-hope搭了一個(gè)小破站,先來(lái)看看效果~

圖片

是不是還挺好看?下面附上可以直接訪問(wèn)的地址,兩個(gè)鏈接都可以直接訪問(wèn),后面會(huì)說(shuō)一下部署方式的不同:

GitHub Page:https://trunks2008.github.io/

個(gè)人服務(wù)器:http://123.249.45.169:8080/

不要問(wèn)我為啥個(gè)人服務(wù)器上不給弄個(gè)域名,看了同事給我發(fā)了一堆ICP備案需要準(zhǔn)備的材料和流程,我直接選擇了放棄…

下面簡(jiǎn)單記錄一下使用vuepress-theme-hope搭建網(wǎng)站的流程和踩過(guò)的坑,有興趣的小伙伴也可以按著這個(gè)步驟自己搭建。

準(zhǔn)備工作

安裝node

node直接從官網(wǎng)下載,vuepress-theme-hope支持16的某些版本和18以后的版本,保險(xiǎn)起見大家直接下最新的18就好了:

??https://nodejs.org/zh-cn/download??

無(wú)腦點(diǎn)擊下一步安裝,完成后node -v本地查看一下,能顯示版本號(hào)就表示安裝成功了。

創(chuàng)建項(xiàng)目

新創(chuàng)建一個(gè)目錄,在命令行窗口下執(zhí)行:

yarn create vuepress-theme-hope [dir]

命令中的dir是一個(gè)參數(shù),使用真實(shí)的目錄名替換即可。在創(chuàng)建項(xiàng)目的過(guò)程中,會(huì)有一些選項(xiàng)讓你選擇:

圖片

除去一些沒啥用的配置,比較重要的是項(xiàng)目的類型,可以選擇博客blog和文檔docs兩種類型,頁(yè)面會(huì)有比較大的差異,我這里選擇的是docs類型。

除此之外,如果之后你想把網(wǎng)站掛到GitHub Pages上的話,在詢問(wèn)是否創(chuàng)建工作流的地方記得選一下yes。

安裝完成后,可以選擇啟動(dòng)demo查看,在瀏覽器訪問(wèn)8080端口,可以看到頁(yè)面:

圖片

如果選擇blog類型的話,則是下面的效果:

圖片

安裝完成后也可以選擇先不運(yùn)行,之后自己用指令啟動(dòng):

yarn run docs:dev

搭建骨架完成后,我們就可以對(duì)具體的內(nèi)容開始定制了,先看一下官方文檔對(duì)docs項(xiàng)目文件結(jié)構(gòu)的解釋:

圖片

先說(shuō)一下感受,整個(gè)vuepress-theme-hope用下來(lái),基本不需要我們寫什么代碼,需要做的就兩件事:

  • 使用markdown文檔管理頁(yè)面內(nèi)容
  • 使用ts配置文件進(jìn)行一些基本的配置

了解了項(xiàng)目主要結(jié)構(gòu)后,下面我們分模塊進(jìn)行內(nèi)容的修改。

主頁(yè)

項(xiàng)目主頁(yè)使用src目錄下的README.md文件來(lái)進(jìn)行配置。

圖片

首先配置了網(wǎng)站的名稱、標(biāo)題、logo等內(nèi)容,actions中可以添加響應(yīng)的按鈕,features下面對(duì)應(yīng)一個(gè)個(gè)具體的自定義模塊。

頂部導(dǎo)航

頂部導(dǎo)航需要修改src/.vuepress/navbar目錄下的配置文件,默認(rèn)存在中英文兩套配置文件,修改需要的文件就行?;旧暇褪桥渖衔淖帧D標(biāo)、鏈接就可以了,并且導(dǎo)航支持二級(jí)目錄,如果需要可以添加children節(jié)點(diǎn)。

圖片

側(cè)邊欄

側(cè)邊欄需要修改src/.vuepress/sidebar下的配置文件。

圖片

這個(gè)prefix對(duì)應(yīng)具體文檔的存放目錄,如果目錄下還有子目錄的話,會(huì)自動(dòng)生成二級(jí)的側(cè)邊欄,每個(gè)目錄下存放的markdown文檔會(huì)被渲染成頁(yè)面的具體內(nèi)容。

圖片

文檔中正文前面的部分用于配置文章標(biāo)題、圖標(biāo)、排序、作者、日期和標(biāo)簽等內(nèi)容,正文部分直接貼在more之后即可。文檔的文件名對(duì)應(yīng)生成鏈接的路徑,建議使用全英文,我之前使用的中英文混雜在打包的時(shí)候有時(shí)候會(huì)報(bào)一些奇奇怪怪的錯(cuò)誤。

此外,項(xiàng)目中使用到的圖片可以存放在src/.vuepress/public目錄下,如果需要查找好看的圖標(biāo)的話,可以查看文檔中的iconfont的使用步驟,個(gè)人實(shí)測(cè)iconfont生成的在線css鏈接就算有cdn加持也非常緩慢,所以我還是老老實(shí)實(shí)找了些默認(rèn)圖標(biāo)使用。

當(dāng)我們把內(nèi)容和配置都完成后,就可以準(zhǔn)備進(jìn)行部署了,下面有兩個(gè)方案,分別是部署到自己的服務(wù)器和使用GitHub Pages。

打包上傳

如果你有前端部署經(jīng)驗(yàn)的話,那么完全可以跳過(guò)這一節(jié),這一節(jié)完全是寫給我這種前端小白來(lái)參考的。

因?yàn)槲矣幸慌_(tái)破服務(wù)器在那閑著,所以我第一時(shí)間想的是直接部署在服務(wù)器上。因?yàn)闆]啥前端經(jīng)驗(yàn),我第一時(shí)間想的是用nohup加上前面的yarn run命令把項(xiàng)目啟在后臺(tái)。

也不知道為啥這個(gè)進(jìn)程總是在我關(guān)閉ssh客戶端一會(huì)后就被自動(dòng)殺死了,于是我問(wèn)了一下前端的同事,知道了得把打包完成后的dist掛到nginx下面運(yùn)行才行。

先使用下面的命令在本地打包,打完的內(nèi)容在src/.vuepress/dist目錄下:

yarn run docs:build

打完以后,就可以把dist下的文件扔到服務(wù)器上了,建議先壓縮一下再上傳,能節(jié)省點(diǎn)時(shí)間。當(dāng)然你也可以直接在服務(wù)器上打包,我是因?yàn)榉?wù)器的配置太垃圾才選擇在本地打包。

用unzip命令解壓完成后,修改nginx配置,root直接指向dist解壓后的目錄:

server {
listen 8080;
server_name localhost;
location / {
root /home/hydra/dist/dist;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
}

修改完成后重啟nginx:

./nginx -s reload

如果你用的是啥啥云的服務(wù)器的話,一般還需要在安全策略里開放需要的對(duì)應(yīng)端口,之后就可以直接在瀏覽器訪問(wèn)啦。

Github Pages

如果不想把博客建在自己服務(wù)器上的話,還有一個(gè)白嫖GitHub的方法,這一塊依賴于之前創(chuàng)建項(xiàng)目時(shí)選擇的添加github的WorkFlow工作流。

先創(chuàng)建一個(gè)public的倉(cāng)庫(kù),注意倉(cāng)庫(kù)名格式是<USERNAME>.github.io,在創(chuàng)建倉(cāng)庫(kù)的時(shí)候也會(huì)提示你這是一個(gè)比較特殊的倉(cāng)庫(kù),這樣等我們完成部署后就直接可以用https://<USERNAME>.github.io/這個(gè)域名來(lái)訪問(wèn)站點(diǎn)了。

如果建別的倉(cāng)庫(kù)名的話,還需要修改項(xiàng)目的config.tx文件中的base:

export default defineUserConfig({
base: "/<REPO>/",
//...
}

同樣,頁(yè)面訪問(wèn)的域名也會(huì)不一樣,最終需要訪問(wèn)https://<USERNAME>.github.io/<REPO>/。

修改配置

創(chuàng)建完倉(cāng)庫(kù)后先不要急著上傳代碼,我們需要先修改一個(gè)配置。

在我們的倉(cāng)庫(kù)內(nèi)點(diǎn)擊Settings選項(xiàng)卡,注意是當(dāng)前倉(cāng)庫(kù)的Setting,不是成整個(gè)賬戶的!

然后選擇Actions下的General,在 Workflow permissions中選擇讀寫權(quán)限 Read and write permissions后,點(diǎn)擊保存。

圖片

提交代碼

我們?cè)诒镜豴ush代碼后,點(diǎn)擊Actions選項(xiàng)卡,如果沒有什么錯(cuò)誤的話,過(guò)一會(huì)就能看到兩個(gè)工作流執(zhí)行成功了。

圖片

如果流程報(bào)錯(cuò)的話,可以點(diǎn)進(jìn)去查看具體的報(bào)錯(cuò),一般錯(cuò)誤都會(huì)具體到哪一行,修改對(duì)應(yīng)部分即可。例如我之前在md文檔中有一個(gè)時(shí)間寫的不對(duì),這個(gè)地方就會(huì)編譯失?。?/p>

圖片

設(shè)置部署分支

我們?cè)谇懊孀约捍虬倪^(guò)程中知道了,打包后的內(nèi)容位于src/.vuepress/dist/目錄下,而項(xiàng)目中的工作流會(huì)默認(rèn)將這個(gè)目錄的內(nèi)容推送到一個(gè)新的gh-pages 分支,因此我們還需要額外設(shè)置部署頁(yè)面的分支。

點(diǎn)擊Settings選項(xiàng)卡下的Pages,在Build and deployment中選擇新的分支:

圖片

我們?cè)陧?xiàng)目下切換一下分支,就可以看到其實(shí)這個(gè)分支用來(lái)存放的是打包完成后生成的可以顯示的html頁(yè)面:

圖片

在切換了部署的分支后,項(xiàng)目會(huì)自動(dòng)重新執(zhí)行一遍工作流,再過(guò)上一會(huì)就可以使用域名https://<USERNAME>.github.io/來(lái)訪問(wèn)頁(yè)面了。

并且,在以后每次修改完代碼并push后,都會(huì)自動(dòng)觸發(fā)工作流,自動(dòng)更新頁(yè)面。

最后

可以看到,使用vuepress-theme-hope搭建文檔或博客還是非常簡(jiǎn)單的,基本上都是配置的工作,不用我們寫什么代碼,對(duì)前端小白同學(xué)們非常友好。

并且頁(yè)面的樣式也非常好看,響應(yīng)式的布局在手機(jī)、pad等小屏幕上顯示的效果也挺不錯(cuò)。大家在搭建的過(guò)程中,如果有具體細(xì)節(jié)部分的疑問(wèn),可以多翻官方文檔,基本都能找到答案。

那么,這次的分享就到這里,我是Hydra,我們下篇再見。

參考資料:

??https://vuepress-theme-hope.gitee.io/v2/zh/??

??https://zhuanlan.zhihu.com/p/494269087??

??https://blog.csdn.net/INT_FUTURE/article/details/128975977??

責(zé)任編輯:武曉燕 來(lái)源: 碼農(nóng)參上
相關(guān)推薦

2023-07-31 08:01:37

2024-07-12 09:01:37

404頁(yè)面代碼

2015-10-20 15:58:28

彈力菜單android源碼

2023-04-26 15:27:11

JavaScript技巧元素

2021-12-30 12:02:52

Python可視化代碼

2020-01-03 10:50:16

Python編程語(yǔ)言Mac電腦

2020-08-23 11:48:44

Python云盤updog

2017-05-02 09:55:02

2014-09-01 15:49:18

智能穿戴智能設(shè)備可穿戴設(shè)備

2009-06-04 15:48:11

SUSE Linux解密

2019-07-26 09:19:32

數(shù)據(jù)可視化架構(gòu)

2020-06-18 09:49:25

谷歌模型機(jī)器學(xué)習(xí)

2022-02-11 16:01:14

C語(yǔ)言技巧命令

2015-08-12 13:24:00

2020-04-10 21:33:10

物聯(lián)網(wǎng)大數(shù)據(jù)物聯(lián)網(wǎng)工廠

2023-01-31 10:23:00

CSS倒影效果

2017-09-17 08:01:24

小房子Covo小型住宅

2011-09-15 13:25:18

IOS應(yīng)用

2012-04-20 12:42:21

2013-05-02 09:40:20

點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)