前言
一款基于 WebStackPage 的 Hexo 主題锄奢。本人選擇的是 hexo-theme-webstack奢讨。
效果預(yù)覽
具體效果請(qǐng)移步 個(gè)人網(wǎng)址導(dǎo)航菇绵。
步驟
- 在目標(biāo)路徑（我這里選的路徑為【D:/studytype/My_Blog】）打開cmd命令窗口，執(zhí)行
hexo init初始化項(xiàng)目省古。
hexo init Nav_Tzy(項(xiàng)目名)
- 進(jìn)入
Nav_Tzy，輸入npm i安裝相關(guān)依賴蓄氧。
cd Nav_Tzy //進(jìn)入Nav_Tzy文件夾
npm i
執(zhí)行完命令之后疟位，文件目錄大概如下圖：
【node_modules】：依賴包
【scaffolds】：生成文章的一些模板
【source】：用來存放你的文章
【themes】：主題
【.npmignore】：發(fā)布時(shí)忽略的文件（可忽略）
【_config.landscape.yml】：主題的配置文件
【_config.yml】：博客的配置文件
【package.json】：項(xiàng)目名稱、描述版扩、版本废离、運(yùn)行和開發(fā)等信息
- 安裝主題
# hexo >= 4.0
git clone https://github.com/HCLonely/hexo-theme-webstack themes/webstack
# hexo >= 5.0
npm install hexo-theme-webstack -S
- 應(yīng)用主題
修改站點(diǎn)配置文件_config.yml，把主題改為webstack礁芦，注意這里初始值是landscape蜻韭。
theme: webstack
將根目錄下_config.landscape.yml改名為_config.webstack.yml。
將【D:/studytype/My_Blog/Nav_Tzy/node_modules/hexo-theme-webstack】下的_config.example.yml中的內(nèi)容復(fù)制到根目錄下的_config.webstack.yml柿扣。
- 編譯運(yùn)行
hexo g && hexo s
打開瀏覽器肖方，輸入地址：http://localhost:4000/，即可看到如下效果:
配置
網(wǎng)站圖標(biāo)
favicon: /favicon.ico
banner
banner: /images/webstack_banner_cn.png
網(wǎng)站 logo
- expanded: 側(cè)邊欄展開式左上角的 logo
- collapsed: 側(cè)邊欄收起式左上角的 logo
- dark: 頂欄為暗色時(shí)左上角的 logo, 僅 about 頁面生效
logo:
expanded: /images/logo@2x.png
collapsed: /images/logo-collapsed@2x.png
dark: /images/logo_dark@2x.png
flag
語言標(biāo)識(shí)未状。
- icon: 語言圖標(biāo)俯画，默認(rèn)僅有flag-cn和flag-us, 其他圖標(biāo)自行尋找存放于主題目錄/source/images/flags/
- name: 語言名稱
- default: 該語言是否為默認(rèn)語言
- index: 頁面鏈接
flag:
- name: Chinese
default: true
icon: flag-cn
index: /index.html
search
是否顯示搜索框臀栈。
search: true
userDefinedSearchData
自定義搜索引擎冻记。
- custom: 是否啟用自定義配置
- thisSearch: 當(dāng)前搜索引擎的搜索鏈接
- thisSearchIcon: 當(dāng)前搜索引擎的圖標(biāo)鏈接瘩例，格式為url(圖片鏈接)
- hotStatus: 是否啟用搜熱詞功能
- data: 多搜索引擎配置
- name: 搜索引擎名字 img: 搜索引擎的搜索鏈接 url: 搜索引擎的圖標(biāo)鏈接氯窍，格式為url(圖片鏈接)
userDefinedSearchData:
custom: true
thisSearch: https://www.baidu.com/s?wd=
thisSearchIcon: url(https://www.baidu.com/favicon.ico)
hotStatus: true
data:
- name: 百度
img: url(https://www.baidu.com/favicon.ico)
url: https://www.baidu.com/s?wd=
- name: 谷歌
img: url(https://www.google.com/favicon.ico)
url: https://www.google.com/search?q=
githubCorner
右上角的 github corner 阐枣， 將 href 的屬性改為自己的 github 地址即可忿檩。
githubCorner: '<a class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>'
since
建站年份届搁，顯示在頁面底部帕识。
since: 2020
menu
側(cè)邊欄菜單設(shè)置搔课。
- name: 分組名
- icon: 分組圖標(biāo)
config: [主要]分組內(nèi)容(詳細(xì)設(shè)置查看Config)拉宗，如果有二級(jí)菜單則不需要此項(xiàng)！ - submenu: 二級(jí)菜單，如果有二級(jí)菜單則不需要
config, 此選項(xiàng)內(nèi)容包含name,icon,config選項(xiàng)
menu:
- name: 常用工具
icon: far fa-star
config: hotTools
- name: 其他工具
icon: fas fa-tools
submenu:
- name: 開發(fā)工具
icon: fas fa-tools
config: devTools
- name: 我的博客
icon: fas fa-blog
config: myBlog
expandAll
是否將側(cè)邊欄全部展開旦事。
expandAll: true
about
側(cè)邊欄的關(guān)于本站魁巩。
- url: 關(guān)于頁面鏈接
- name: 在側(cè)邊欄顯示的文字
- icon: 圖標(biāo)
about:
url: /about/
icon: far fa-heart
name: 關(guān)于本站
busuanzi
不蒜子統(tǒng)計(jì)。
- enable: 是否啟用不蒜子統(tǒng)計(jì)
- position: 訪問量顯示位置, footer顯示在頁腳, sidebar顯示在側(cè)邊欄
- pv: 訪問量顯示的內(nèi)容, $pv會(huì)被替換為訪問量
- uv: 訪客數(shù)顯示的內(nèi)容, $uv會(huì)被替換為訪客數(shù)
busuanzi:
enable: true
position: sidebar
pv: 本站總訪問量$pv
uv: 本站總訪客數(shù)$uv
config
網(wǎng)站內(nèi)容設(shè)置姐浮。
- name: 網(wǎng)站名稱
- url: 網(wǎng)站鏈接
- img: 網(wǎng)站圖標(biāo)
- description: 網(wǎng)站描述
- name: Ethan.Tzy
url: https://fe32.top/
img: https://bu.dusays.com/2022/05/17/6283c38e6368f.ico
description: 不忘初心谷遂，方得始終。
關(guān)聯(lián)設(shè)置名稱并添加網(wǎng)站
在menu和submenu中設(shè)置的config的內(nèi)容為此選項(xiàng)的名稱卖鲤。
例menu：
menu:
- name: 常用工具
icon: far fa-star
config: hotTools
則常用工具分組里的網(wǎng)站有以下兩種添加方式：
- 在主題的_config.yml里添加：
hotTools:
- name: Ethan.Tzy
url: https://fe32.top/
img: https://bu.dusays.com/2022/05/17/6283c38e6368f.ico
description: 不忘初心肾扰，方得始終。
- name: Github
url: https://github.com/
img: /images/logos/github.png
description: 面向開源及私有軟件項(xiàng)目的托管平臺(tái)蛋逾。
- 在站點(diǎn)根目錄/source/_data/(沒有自行創(chuàng)建)內(nèi)新建hotTools.yml文件集晚，文件內(nèi)容如下：
- name: Ethan.Tzy
url: https://fe32.top/
img: https://bu.dusays.com/2022/05/17/6283c38e6368f.ico
description: 不忘初心，方得始終区匣。
- name: Github
url: https://github.com/
img: /images/logos/github.png
description: 面向開源及私有軟件項(xiàng)目的托管平臺(tái)偷拔。
以上兩種方式任選一種即可，建議使用第二種亏钩。
這里只寫了部分配置莲绰，更多詳細(xì)配置 請(qǐng)參考 hexo-theme-webstack 。
部署
如果你了解過【Hexo + Butterfly】的搭建流程姑丑，想必【Hexo + Webstack】對(duì)于你來說也不會(huì)太難蛤签。
你可以將編譯出來的文件夾【D:/studytype/My_Blog/Nav_Tzy/public】丟進(jìn)你的服務(wù)器目錄。也可以部署到 Github 上栅哀，方法同【Hexo + Butterfly】一樣震肮。
例如，我的個(gè)人站的地址是【fe32.top】留拾，個(gè)人導(dǎo)航站的地址【nav.fe32.top】戳晌，我只需將【個(gè)人導(dǎo)航站】以外鏈的形式嵌入【個(gè)人站】即可。
如果你沒有服務(wù)器间驮，沒有多余的 Github（不想那么麻煩的話），可以使用下面本站所使用的方法:
將編譯出來的【D:/studytype/My_Blog/Nav_Tzy/public/index.html】直接丟進(jìn)【Hexo + Butterfly】項(xiàng)目中马昨。然后跳過 Hexo 的編譯即可竞帽。
在這里需要將【index.html】重新命名(xxx.html)，避免與【Hexo + Butterfly】項(xiàng)目的根頁面沖突鸿捧。
將【xxx.html】文件丟進(jìn)【BlogRoot/soruce】文件夾中屹篓，然后在站點(diǎn)配置文件【BlogRoot/_config.yml】，修改skip_render屬性即可匙奴。
skip_render: ['xxx.html'] # 跳過多個(gè)目錄堆巧，或者多個(gè)文件
最后在【Hexo + Butterfly】主題配置文件中的menu將頁面嵌入即可。例如：
首頁: / || fas fa-home
其他||fa-fw fas fa-coffee:
需求墻: /demandWall/ || fa fa-bug
網(wǎng)址收藏: https://fe32.top/nav.html || fa-fw fas fa-infinity
到此，你學(xué)廢了嗎谍肤？
有問題記得及時(shí)留言啦租！
