本文章原文托管在 語雀，作者：史提芬先森
更多精彩與更新內容，參考原文：https://www.yuque.com/shenweiyan/cookbook/webstack-hugo
為什么做這個網站
之所以想着要給自己倒騰一個導航網站，主要有幾個原因：
- 購買了一個域名，且也備案成功了，總想折騰點跟它有關的事情；
- 經常在公司、家里（有時候還有其他的臨時場所）更換電腦，每次同步書簽（或者登陸一些導航網站）需要各種登陸，麻煩。
說干就干，從 WebStack 的開源項目開始，斷斷續續的折騰了好幾天，終於把輪子造起來了。
跟其他導航網站有什么區別
這是 Hugo 版 WebStack 主題。可以借助 Github Pages 或者 Coding 直接托管部署，無需服務器。
本項目是基於純靜態的網址導航網站 webstack.cc 制作的 Hugo 主題，其中部分代碼參考了以下幾個開源項目：
總體說一下特點：
- 采用了一直以來最喜歡的 hugo 部署方式，方便高效。
- 主要的配置信息都集成到了 config.toml，一鍵完成各種自定義的配置。
- 導航的各個信息都集成在 data/webstack.yml 文件中，方便后續增刪改動。
- 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: 雲服務器
links:
- title: 阿里雲
logo: 阿里雲.jpg
url: https://www.aliyun.com/
description: 上雲就上阿里雲。
- title: 騰訊雲
logo: 騰訊雲.jpg
url: https://cloud.tencent.com/
description: 產業智變，雲啟未來。
- 做了手機電腦自適應以及夜間模式。
- 增加了搜索功能，以及下拉的熱詞選項（基於百度 API）。
- 增加了一言、和風天氣的 API。
Windows 下安裝部署
本安裝部署在 Windows 7 x64 上測試沒問題，相關操作同樣適用於 Windows 10，如有任何問題，歡迎留言或者微信與我聯系。
第一，下載 Windows 版本的 hugo
下載鏈接：https://github.com/gohugoio/hugo/releases，在這里我們下載 hugo_0.89.4_Windows-64bit.zip。
第二，解壓
我們把 hugo_0.89.4_Windows-64bit.zip 下載到 F:\WebStack 目錄下，然后解壓到當前文件夾。
第三，看 hugo 安裝是否安裝成功
:::tips
溫馨提示：
Windows 命令運行窗口中可以使用 Tab 進行命令行補全，例如你當前目錄下有一個 WebStack-Hugo 目錄，你在命令行窗口中輸入一個 w 后按下 Tab 鍵，命令行就會自動出現 WebStack-Hugo！
使用命令行補全，可以減少代碼（或者文件名）的輸入，方便快捷，又能減少錯誤！
:::
- 在 Windows 中使用 Win+R 打開“運行”對話框，在對話框中輸入“cmd”，點擊確認。
- 在 Windows 運行窗口，先切換盤符到 F 盤，然后進入 hugo 的解壓縮目錄（F:\WebStack），具體操作如下。
- 在光標處輸入F:，然后按回車；
- 我們就將盤符切換為 F 盤；
- 接着輸入 cd WebStack，回車，就進入了 F:\WebStack 目錄；使用 ls 可以看到當前目錄下的文件。
- 最后，輸入 hugo.exe version，回車，如圖所示，則代表安裝成功。
第四，下載 WebStack-Hugo
瀏覽器打開 https://github.com/shenweiyan/WebStack-Hugo，點擊 Code 下的 "Download ZIP"，把 WebStack-hugo-main.zip 下載到剛才 hugo 解壓縮的目錄（F:\WebStack）。
第五，解壓，重命名
把 WebStack-Hugo-main.zip 解壓到當前目錄。
第六，安裝主題
首先，進入 F:\WebStack 目錄；
然后，創建一個 themes 的文件夾；
接着，把解壓后的 WebStack-Hugo 整個文件夾移動到 themes 中。
第四，將 themes/WebStack-Hugo/exampleSite 目錄下的所有文件復制到 hugo 站點根目錄（即 F:\WebStack）。
第七，生成與預覽站點
在剛才已經打開的 Windows 命令運行窗口中，使用下面的命令執行 hugo server，啟動站點。
hugo.exe server
最后，在瀏覽器中打開 http://127.0.0.1:1313/，即可看到生成的站點。
Linux 下安裝部署
安裝完本 WebStack-Hugo 主題后，將 exampleSite 目錄下的文件復制到 hugo 站點根目錄，根據需要把 config.toml 的一些信息改成自己的，導航的網址信息可通過 data 目錄下 webstack.yml 修改。
具體執行步驟如下：
$ mkdir /home/shenweiyan/mysite
$ cd /home/shenweiyan/mysite
# 安裝 WebStack-Hugo 主題
$ mkdir themes
$ cd themes
$ git clone https://github.com/shenweiyan/WebStack-Hugo.git
# 將 exampleSite 目錄下的文件復制到 hugo 站點根目錄
$ cd /home/shenweiyan/mysite
$ cp -r themes/WebStack-Hugo/exampleSite/* ./
# 啟動 hugo 站點
$ hugo server
# 如果你知道你的公網 ip, 如下面的 132.76.230.31, 可以使用下面的方式執行 hugo server
$ hugo server --baseUrl=132.76.230.31 --bind=0.0.0.0
使用說明與技巧
這是一個開源的公益項目，你可以拿來制作自己的網址導航，也可以做與導航無關的網站。
主題開源地址：
https://github.com/shenweiyan/WebStack-Hugo
主題演示地址：
調整頭部搜索欄搜索位置
- 直接修改 layouts/partials/content_search.html，調整對應部分的位置。
- 調整默認的搜索（即點擊"常用/搜索/工具 ...." 時下指箭頭的指向），把對應的 id 添加到對應的 label 里面。
獲取網站圖標
Bio & IT 網址導航默認使用的是個人收集的網站圖標，主要是查看網站源碼、百度、谷歌等途徑把對應導航的圖標下載下來，這個方法比較原始繁瑣，適合導航不是很多的情況。
你也可以使用一為提供的的 Favicon 圖標 api：https://api.iowen.cn/doc/favicon.html。
接口地址：https://api.iowen.cn/favicon
返回格式：圖片
請求方式：get
請求示例：
- [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)
請求參數說明：
| 名稱 | 必填 | 類型 | 說明 | |
|---|---|---|---|---|
| url | 是 | string | 需要獲取圖標的URL地址，如：www.iowen.cn，確保URL能夠正常打開 | |
| 不需要 http(s)😕/ ，且結尾必須填 .png |
返回參數說明：
| 名稱 | 類型 | 說明 |
|---|---|---|
| 無 | 無 | 無 |
返回示例：返回網址圖標
已知問題
- 日間模式與夜間模式切換時候，頭部搜索欄的背景圖片切換不夠流暢（個人對 js 了解不多，在 footer.html 做了一些簡單的調整來實現），如果你有更好的想法，歡迎 PR 或者交流。
貢獻者牆
感謝以下所有朋友對本主題所做出的貢獻，特此致謝。
反饋與交流
最后，最重要的，秉承 WebStack 的宗旨，這是一個開源的公益項目，你可以拿來制作自己的網址導航，也可以做與導航無關的網站。
WebStack 有非常多的魔改版本，這是其中一個。如果你對本主題進行了一些個性化調整，歡迎來本項目中 issue 分享一下！