本文章原文托管在 語(yǔ)雀，作者：史提芬先森
更多精彩與更新內(nèi)容，參考原文：https://www.yuque.com/shenweiyan/cookbook/webstack-hugo

為什么做這個(gè)網(wǎng)站

之所以想著要給自己倒騰一個(gè)導(dǎo)航網(wǎng)站，主要有幾個(gè)原因：
?

• 購(gòu)買(mǎi)了一個(gè)域名，且也備案成功了，總想折騰點(diǎn)跟它有關(guān)的事情；
• 經(jīng)常在公司、家里（有時(shí)候還有其他的臨時(shí)場(chǎng)所）更換電腦，每次同步書(shū)簽（或者登陸一些導(dǎo)航網(wǎng)站）需要各種登陸，麻煩。

?

說(shuō)干就干，從 WebStack 的開(kāi)源項(xiàng)目開(kāi)始，斷斷續(xù)續(xù)的折騰了好幾天，終于把輪子造起來(lái)了。

跟其他導(dǎo)航網(wǎng)站有什么區(qū)別

這是 Hugo 版 WebStack 主題。可以借助 Github Pages 或者 Coding 直接托管部署，無(wú)需服務(wù)器。
?

本項(xiàng)目是基于純靜態(tài)的網(wǎng)址導(dǎo)航網(wǎng)站 webstack.cc 制作的 Hugo 主題，其中部分代碼參考了以下幾個(gè)開(kāi)源項(xiàng)目：

• https://github.com/liutongxu/liutongxu.github.io
• https://github.com/iplaycode/webstack-hugo

總體說(shuō)一下特點(diǎn)：
?

• 采用了一直以來(lái)最喜歡的 hugo 部署方式，方便高效。
• 主要的配置信息都集成到了 config.toml，一鍵完成各種自定義的配置。
• 導(dǎo)航的各個(gè)信息都集成在 data/webstack.yml 文件中，方便后續(xù)增刪改動(dòng)。

- taxonomy: 科研辦公
  icon: fas fa-flask fa-lg
  list:
    - term: 生物信息
      links:
        - title: NCBI
          logo: ncbi.jpg
          url: https://www.ncbi.nlm.nih.gov/
          description: National Center for Biotechnology Information.
        - title: Bioconda
          logo: bioconda.jpg
          url: https://anaconda.org/bioconda/
          description: "Bioconda :: Anaconda.org."
    - term: 云服務(wù)器
      links:
        - title: 阿里云
          logo: 阿里云.jpg
          url: https://www.aliyun.com/
          description: 上云就上阿里云。
        - title: 騰訊云
          logo: 騰訊云.jpg
          url: https://cloud.tencent.com/
          description: 產(chǎn)業(yè)智變，云啟未來(lái)。

• 做了手機(jī)電腦自適應(yīng)以及夜間模式。
• 增加了搜索功能，以及下拉的熱詞選項(xiàng)（基于百度 API）。
• 增加了一言、和風(fēng)天氣的 API。

?

?

Windows 下安裝部署

本安裝部署在 Windows 7 x64 上測(cè)試沒(méi)問(wèn)題，相關(guān)操作同樣適用于 Windows 10，如有任何問(wèn)題，歡迎留言或者微信與我聯(lián)系。

第一，下載 Windows 版本的 hugo

下載鏈接：https://github.com/gohugoio/hugo/releases，在這里我們下載 hugo_0.89.4_Windows-64bit.zip。

第二，解壓

我們把 hugo_0.89.4_Windows-64bit.zip 下載到 F:\WebStack 目錄下，然后解壓到當(dāng)前文件夾。

第三，看 hugo 安裝是否安裝成功

:::tips
溫馨提示：
?

Windows 命令運(yùn)行窗口中可以使用 Tab 進(jìn)行命令行補(bǔ)全，例如你當(dāng)前目錄下有一個(gè) WebStack-Hugo 目錄，你在命令行窗口中輸入一個(gè) w 后按下 Tab 鍵，命令行就會(huì)自動(dòng)出現(xiàn) WebStack-Hugo！
?

使用命令行補(bǔ)全，可以減少代碼（或者文件名）的輸入，方便快捷，又能減少錯(cuò)誤！
:::

1. 在 Windows 中使用 Win+R 打開(kāi)“運(yùn)行”對(duì)話框，在對(duì)話框中輸入“cmd”，點(diǎn)擊確認(rèn)。

2. 在 Windows 運(yùn)行窗口，先切換盤(pán)符到 F 盤(pán)，然后進(jìn)入 hugo 的解壓縮目錄（F:\WebStack），具體操作如下。

• 在光標(biāo)處輸入F:，然后按回車(chē)；

• 我們就將盤(pán)符切換為 F 盤(pán)；

• 接著輸入 cd WebStack，回車(chē)，就進(jìn)入了 F:\WebStack 目錄；使用 ls 可以看到當(dāng)前目錄下的文件。

• 最后，輸入 hugo.exe version，回車(chē)，如圖所示，則代表安裝成功。

第四，下載 WebStack-Hugo

瀏覽器打開(kāi) https://github.com/shenweiyan/WebStack-Hugo，點(diǎn)擊 Code 下的 "Download ZIP"，把 WebStack-hugo-main.zip 下載到剛才 hugo 解壓縮的目錄（F:\WebStack）。

第五，解壓，重命名

把 WebStack-Hugo-main.zip 解壓到當(dāng)前目錄。

第六，安裝主題

首先，進(jìn)入 F:\WebStack 目錄；
?

然后，創(chuàng)建一個(gè) themes 的文件夾；

接著，把解壓后的 WebStack-Hugo 整個(gè)文件夾移動(dòng)到 themes 中。

第四，將 themes/WebStack-Hugo/exampleSite 目錄下的所有文件復(fù)制到 hugo 站點(diǎn)根目錄（即 F:\WebStack）。

第七，生成與預(yù)覽站點(diǎn)

在剛才已經(jīng)打開(kāi)的 Windows 命令運(yùn)行窗口中，使用下面的命令執(zhí)行 hugo server，啟動(dòng)站點(diǎn)。

hugo.exe server 

最后，在瀏覽器中打開(kāi) http://127.0.0.1:1313/，即可看到生成的站點(diǎn)。

Linux 下安裝部署

安裝完本 WebStack-Hugo 主題后，將 exampleSite 目錄下的文件復(fù)制到 hugo 站點(diǎn)根目錄，根據(jù)需要把 config.toml 的一些信息改成自己的，導(dǎo)航的網(wǎng)址信息可通過(guò) data 目錄下 webstack.yml 修改。
?

具體執(zhí)行步驟如下：

$ mkdir /home/shenweiyan/mysite 
$ cd /home/shenweiyan/mysite

# 安裝 WebStack-Hugo 主題
$ mkdir themes
$ cd themes
$ git clone https://github.com/shenweiyan/WebStack-Hugo.git

# 將 exampleSite 目錄下的文件復(fù)制到 hugo 站點(diǎn)根目錄
$ cd /home/shenweiyan/mysite
$ cp -r themes/WebStack-Hugo/exampleSite/* ./

# 啟動(dòng) hugo 站點(diǎn)
$ hugo server 
# 如果你知道你的公網(wǎng) ip, 如下面的 132.76.230.31, 可以使用下面的方式執(zhí)行 hugo server
$ hugo server --baseUrl=132.76.230.31 --bind=0.0.0.0 

使用說(shuō)明與技巧

這是一個(gè)開(kāi)源的公益項(xiàng)目，你可以拿來(lái)制作自己的網(wǎng)址導(dǎo)航，也可以做與導(dǎo)航無(wú)關(guān)的網(wǎng)站。
?

主題開(kāi)源地址：
https://github.com/shenweiyan/WebStack-Hugo
?

主題演示地址：

• https://nav.bioitee.com
• https://shenweiyan.github.io/WebStack-Hugo

?

調(diào)整頭部搜索欄搜索位置

1. 直接修改 layouts/partials/content_search.html，調(diào)整對(duì)應(yīng)部分的位置。
2. 調(diào)整默認(rèn)的搜索（即點(diǎn)擊"常用/搜索/工具 ...." 時(shí)下指箭頭的指向），把對(duì)應(yīng)的 id 添加到對(duì)應(yīng)的 label 里面。

獲取網(wǎng)站圖標(biāo)

Bio & IT 網(wǎng)址導(dǎo)航默認(rèn)使用的是個(gè)人收集的網(wǎng)站圖標(biāo)，主要是查看網(wǎng)站源碼、百度、谷歌等途徑把對(duì)應(yīng)導(dǎo)航的圖標(biāo)下載下來(lái)，這個(gè)方法比較原始繁瑣，適合導(dǎo)航不是很多的情況。

你也可以使用一為提供的的 Favicon 圖標(biāo) api：https://api.iowen.cn/doc/favicon.html。
?

接口地址：https://api.iowen.cn/favicon
返回格式：圖片
請(qǐng)求方式：get
請(qǐng)求示例：

  - [https://api.iowen.cn/favicon/www.iowen.cn.png](https://api.iowen.cn/favicon/www.iowen.cn.png)
  - [https://api.iowen.cn/favicon/www.baidu.com.png](https://api.iowen.cn/favicon/www.baidu.com.png)

請(qǐng)求參數(shù)說(shuō)明：

名稱(chēng)	必填	類(lèi)型	說(shuō)明
	url	是	string	需要獲取圖標(biāo)的URL地址，如：www.iowen.cn，確保URL能夠正常打開(kāi)
不需要 http(s)??/ ，且結(jié)尾必須填 .png

返回參數(shù)說(shuō)明：

名稱(chēng)	類(lèi)型	說(shuō)明
無(wú)	無(wú)	無(wú)

返回示例：?返回網(wǎng)址圖標(biāo)
?

已知問(wèn)題

1. 日間模式與夜間模式切換時(shí)候，頭部搜索欄的背景圖片切換不夠流暢（個(gè)人對(duì) js 了解不多，在 footer.html 做了一些簡(jiǎn)單的調(diào)整來(lái)實(shí)現(xiàn)），如果你有更好的想法，歡迎 PR 或者交流。

貢獻(xiàn)者墻

感謝以下所有朋友對(duì)本主題所做出的貢獻(xiàn)，特此致謝。
?

@yanbeiyinhanghang

反饋與交流

最后，最重要的，秉承 WebStack 的宗旨，這是一個(gè)開(kāi)源的公益項(xiàng)目，你可以拿來(lái)制作自己的網(wǎng)址導(dǎo)航，也可以做與導(dǎo)航無(wú)關(guān)的網(wǎng)站。
?

WebStack 有非常多的魔改版本，這是其中一個(gè)。如果你對(duì)本主題進(jìn)行了一些個(gè)性化調(diào)整，歡迎來(lái)本項(xiàng)目中 issue 分享一下！