Via：我給自己做了一個導航網站?|?BioIT愛好者

📢 讓更多人的人制作自己的導航網站。如果你覺得本主題對你有所幫助，歡迎請作者?喝杯咖啡?>.<

主題開源地址

GitHub?|?Gitee?|?GitCode

主題展示地址

WebStack-Hugo 網址導航?|?生信網址導航

為什么做這個網站

之所以想著要給自己倒騰一個導航網站，主要有幾個原因：

• 購買了一個域名，且也備案成功了，總想折騰點跟它有關的事情；
• 經常在公司、家里（有時候還有其他的臨時場所）更換電腦，每次同步書簽（或者登陸一些導航網站）需要各種登陸，麻煩。

說干就干，從?WebStack 的開源項目開始，斷斷續續的折騰了好幾天，終于把輪子造起來了。

跟其他導航網站有什么區別

這是 Hugo 版 WebStack 主題。可以借助 Github/Gitee Pages 或者云平臺直接托管部署，無需服務器。

本項目是基于純靜態的網址導航網站?webstack.cc?制作的?Hugo?主題，其中部分代碼參考了以下幾個開源項目：

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

總體說一下特點：

• 采用了一直以來最喜歡的 hugo 部署方式，方便高效。
• 主要的配置信息都集成到了?config.toml，一鍵完成各種自定義的配置。
• 導航的各個信息都集成在?data/webstack.yml?文件中，方便后續增刪改動。

- taxonomy: 科研辦公icon: fas fa-flask fa-lglist:- term: 生物信息links:- title: NCBIlogo: n/ncbi.jpgurl: https://www.ncbi.nlm.nih.gov/description: National Center for Biotechnology Information.- title: Biocondalogo: b/bioconda.jpgurl: https://anaconda.org/bioconda/description: "Bioconda :: Anaconda.org."- term: 云服務器links:- title: 阿里云logo: a/aliyun.jpgurl: https://www.aliyun.com/description: 上云就上阿里云。- title: 騰訊云logo: c/cloud-tencent.jpgurl: https://cloud.tencent.com/description: 產業智變，云啟未來。

• 做了手機電腦自適應以及夜間模式。
• 增加了搜索功能，以及下拉的熱詞選項（基于百度 API）。
• 增加了一言、和風天氣的 API（和風天氣 API 已經官方已經不再支持，目前還沒到到替代）。

Windows 下安裝部署

本安裝部署在 Windows 7 x64 上測試沒問題，相關操作同樣適用于 Windows 10，如有任何問題，歡迎留言或者微信與我聯系。

第一，下載 hugo

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

第二，解壓

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

解壓完成后，在該目錄會多出?hugo.exe、LICENSE、README.md?三個文件：

第三，檢測是否安裝成功

通過下面的方法，檢測?hugo?是否安裝成功。

🏷? 溫馨提示：

Windows 命令運行窗口中可以使用 Tab 進行命令行補全，例如你當前目錄下有一個 WebStack-Hugo 目錄，你在命令行窗口中輸入一個 w 后按下 Tab 鍵，命令行就會自動出現 WebStack-Hugo！

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

1. 在 Windows 中使用?Win+R?打開“運行”對話框，在對話框中輸入“cmd”，點擊確認。

   

2. 在 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 可以啟動一個 Web 服務器，同時構建站點內容到內存中并在檢測到文件更改后重新渲染，方便我們在開發環境實時預覽對站點所做的更改。

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 主題
git clone https://github.com/shenweiyan/WebStack-Hugo.git themes/WebStack-Hugo# 將 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

也可以參考?@jetsung?在?pull 15?所用的方法安裝部署：

# 創建項目
mkdir navsites
cd $_# 初始化項目
git init# 將 WebStack-Hugo 源下載到 themes/WebStack-Hugo 文件夾
git submodule add https://github.com/shenweiyan/WebStack-Hugo.git themes/WebStack-Hugo
cp -r themes/WebStack-Hugo/exampleSite/* ./# 安裝 hugo
go install github.com/gohugoio/hugo@latest# 本地測試
hugo server# 生成 docs 文件夾，將并靜態內容生成至此處
hugo -D

導出 HTML 靜態資源

Windows/Linux 下執行的?hugo server?命令將會通過熱加載的方式臨時啟動一個 Hugo 服務器（Hugo 可以啟動一個 Web 服務器，同時構建站點內容到內存中并在檢測到文件更改后重新渲染，方便我們在開發環境實時預覽對站點所做的更改），這個時候我們打開瀏覽器?http://127.0.0.1:1313/，就可以看到我們站點的樣子了。

如果我們想要把我們的站點部署到 GitHub/Gitee Pages（或者本地的服務器），我們可以：

1. 生成靜態頁面內容

可以通過下面的命令，生成(構建)靜態頁面內容。

hugo -D 或者 hugo --minify

這個命令會默認在?public/?目錄中生成您的網站，當然您可以通過改變站點配置中的?publishDir?選項來配置這個輸出目錄。

🏷? Hugo 小知識 - 草案、未來和過期內容

Hugo 允許您在網站內容的前言設定中設置文檔的draft，publishdate甚至expirydate字段。默認情況下，Hugo 不會發布下面內容：

1. publishdate?發布日期值設定在未來的內容；
2. draft:true?草案狀態設置為真的內容；
3. expirydate?過期日期值設置為過去某事件的內容。

這三個可以在本地開發和部署編譯時通過對hugo和hugo server分別添加如下參數來重新設定，或者在配置文件中設定對應(不包含--)域的 boolean 值：

1. -F, --buildFuture include content with publishdate in the future
2. -D, --buildDrafts include content marked as draft
3. -E, --buildExpired include expired content

2. 部署站點

把生成的?public/?靜態內容目錄上傳到 GitHub，開啟 GitHub/Gitee Pages，并且綁定 cname 域名即可。

使用說明與技巧

這是一個開源的公益項目，你可以拿來制作自己的網址導航，也可以做與導航無關的網站。

左導航欄圖標

左側、頂部導航欄圖標用的都是?Font Awesome?圖標庫?v5?版本?Free?的圖標。鏈接如下：

🔗?Find the Perfect Icon for Your Project in Font Awesome 5 | Font Awesome

調整頭部搜索欄

頭部搜索欄的默認位置可以通過下面的方法進行修改。

1. 直接修改?layouts/partials/content_search.html，調整對應部分的位置。
2. 調整默認的搜索（即點擊"常用/搜索/工具 ...." 時下指箭頭的指向），把對應的 id 添加到對應的 label 里面。

自定義頭部導航

WebStack-Hugo?把頭部的導航菜單的各個信息集成在了?data/header.yml?文件中，每個人可以根據自己的需要調整。

- item: 首頁icon: fa fa-homelink: "./"- item: 作者icon: fa fa-booklink: https://www.yuque.com/shenweiyan- item: 配置icon: fa fa-coglink: ""list:- name: 源碼url: "#"- name: 圖標url: "#"

獲取網站圖標

Bio & IT 網址導航默認使用的是個人收集的網站圖標，主要是查看網站源碼、百度、谷歌等途徑把對應導航的圖標下載下來，這個方法比較原始繁瑣，適合導航不是很多的情況。

一為

你也可以使用一為提供的的?Favicon?圖標?API：獲取網站 Favicon - 免費 API 數據接口調用服務平臺。

使用方法：

1. 獲取 Favicon 圖標

https://api.iowen.cn/favicon/www.iowen.cn.png

1. 刷新緩存

https://api.iowen.cn/favicon/www.iowen.cn.png?refresh=true

1. 將上方代碼中的?www.iowen.cn?替換為你需要獲取的網址域名。

Favicon.im

除了一為的 API，你也可以使用?Favicon.im: Instant Website Favicon Fetcher?來在網頁中插入其他網站的 Favicon 圖片，可以放大顯示。

Favicon Extractor

類似網站?Favicon Downloader，代碼開源。

已知問題

1. 日間模式與夜間模式切換時候，頭部搜索欄的背景圖片切換不夠流暢（個人的 js 知識有限，在 footer.html 做了一些簡單的調整來實現），如果你有更好的想法，歡迎 PR 或者交流。

感謝墻

本主題的部分代碼參考了以下幾個開源項目，特此感謝。

• WebStackPage/WebStackPage.github.io
• liutongxu/liutongxu.github.io
• iplaycode/webstack-hugo

感謝?WebStack?的作者?Viggo?的肯定和推廣宣傳。

感謝以下所有朋友對本主題所做出的貢獻。
@yanbeiyinhanghang
@jetsung

贊賞

如果你覺得本項目對你有所幫助，歡迎請作者喝杯熱咖啡 >.<

反饋與交流

最后，最重要的，秉承 WebStack 的宗旨，這是一個開源的公益項目，你可以拿來制作自己的網址導航，也可以做與導航無關的網站。

WebStack 有非常多的魔改版本，這是其中一個。

如果你對本主題進行了一些個性化調整，歡迎在本項目中?issues?中一起分享交流！

如果參考本主題構建了屬于你自己的網址導航，歡迎在本評論區（或源碼?issues?區）留下你網站的訪問鏈接 >.<

Built in 35 ms
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at?http://localhost:1313/?(bind address 127.0.0.1)
Press Ctrl+C to stop

CMD顯示了這個，但是打開http://127.0.0.1:1313/?顯示的是Page Not Found

我有重命名對應文件夾，但是全部放在E盤，然后下載的是hugo_0.120.4_windows-amd64 （沒有）

重新下載了hugo_0.89.4_Windows-64bit.zip

名字一模一樣 問題 解決

問題解決就好 >.<

是為什么，我也有這樣的問題。

非常好，感謝感謝

用hugo server啟動的時候 一切都是正常的，但是hugo -D 生成靜態之后左側、頂部導航欄圖標不能顯示了，變成了一個方塊。大佬這個怎么解決，感謝。

F12 看一下對應圖標的 url 鏈接是不是正常的，如果不正常，可以參考?shenweiyan/WebStack-Hugo#24?去排查一下。

希望安裝步驟寫完整一點，linux 的安裝方法寫詳細一點。生成的網站樣式錯誤，圖片文件和樣式文件加載全是404。

linux 的安裝方法寫詳細一點，想問一下具體指的是哪個步驟？針對 404 的問題建議使用 F12 先對有問題的資源排查一下。

linux 的安裝方法寫詳細一點，想問一下具體指的是哪個步驟？針對 404 的問題建議使用 F12 先對有問題的資源排查一下。

按照步驟，在命令行中操作，已經重新安裝成功了。
建議增加鏈接跳轉確認頁面，像知乎那樣。

想修改一下網格背景，但是為什么修改了custom-style.css這個文件后，網站樣式沒有變化啊。

我的地址NavNest

有可能跟其他的樣式發生了沖突，建議使用 F12 開發者模式調試一下，看一下具體是哪里出問題了。

這文檔可以寫得再清晰一點，看著有點暈啊