本篇主題：首發(fā)！在Docker、群暉、威聯(lián)通、綠聯(lián)NAS上搭建精美的HomePage個人導(dǎo)航頁，保姆級教程，打造你的專屬導(dǎo)航頁
大家好，又到新的一篇文章，本期主題在上方已經(jīng)說明，前面我已經(jīng)演示了如何搭建Flare、Dashy等個人導(dǎo)航頁，相信不少朋友也成功用上了。
用NAS打造專屬個人導(dǎo)航頁，一鍵直達后臺！NAS安裝Flare導(dǎo)航頁！
最近發(fā)現(xiàn)HomePage導(dǎo)航頁更加精美和強大，除了常規(guī)顯示書簽外，還可以顯示你的容器信息，官方演示的界面非常精美，大家來看看。
左上角顯示宿主機空間、CPU、內(nèi)存占用情況，右上是搜索欄，可配置天氣等信息。
中間是常規(guī)書簽欄，可顯示宿主機已安裝的各種容器的運行狀態(tài)，下方同樣可顯示自定義書簽。
因為是初上手，簡單研究了一下，我最終搭建了我的專屬HomePage導(dǎo)航頁，如下。
Docker狀態(tài)這些因配置繁瑣，后續(xù)各位感興趣的話可以再出一篇進階使用的，主要是我也沒開始細致去研究，因為HomePage的配置是通yaml文件配置的，建議配合VS Code等開發(fā)工具使用。
雖說配置麻煩，但不難，在本文中會一步步演示如何去配置，達到和我一樣的效果，真的不難，各位跟著步驟來即可操作，在NAS上搭建使用還是非常不錯的。
手機上界面如下，各位覺得好看嗎，并且添加了Ping值顯示。
如果你有影音服務(wù)器之類，比如Jellyfin，甚至可以在此配置，查看此時Jellyfin運行狀態(tài)、播放狀態(tài)等，很強大。
好的，廢話不多說，進入正題。
常規(guī)Docker即通用命令可在官方開源界面看到，記得將圖中路徑替換成你機器的真實路徑即可，最好新建一個文件夾來保存此容器的文件。
接著來演示威聯(lián)通和群暉部署；
威聯(lián)通使用的是TS-462C，N4505處理器，升級了8G內(nèi)存，運行虛擬機和Docker也是極為流暢，并且4K解碼非常流暢，有需要朋友可了解下。
群暉的話依舊是這臺使用兩年半的蝸牛星際，安裝了群暉，非常穩(wěn)定，J1900也滿足基礎(chǔ)需求。
威聯(lián)通進入后臺，打開控制臺，搜索并打開SSH功能，點擊應(yīng)用。
如是群暉，一樣，進入后臺，找到控制面板，搜索SSH并打開。
使用putty等相關(guān)軟件，通過SSH登錄進入命令行界面。群暉和威聯(lián)通操作一樣的，地址填寫NAS的IP地址，端口默認(rèn)是22，輸入登錄NAS后臺的賬密，使用一個有管理權(quán)限的賬號登錄。
不知道怎么用這些軟件的朋友請去查PUTTY如何連接之類的，非常簡單，此處不多說，如果這些PUTTY連接都登錄不上，后續(xù)Homepage的操作會更難。
登錄后，如果是admin賬戶，會出現(xiàn)一個框框警告之類的，按Q，再輸入Y，返回正常界面即可，此處做一個提示。登錄成功后字眼大概如下提示。
返回群暉或威聯(lián)通文件總管，威聯(lián)通的話在Container文件夾下新建homepage文件夾，然后在homepage文件夾中新建config文件夾，然后右鍵config文件夾-屬性，復(fù)制此路徑，然后加上config。記得，開頭要添加/share才是完整，即最終完整路徑即是：/share/Container/homepage/config
群暉在docker文件夾中新建homepage文件夾，然后在homepage文件夾中新建config文件夾。選中config文件夾，右鍵屬性，復(fù)制路徑。完整路徑即是圖中：/volume1/docker/homepgae/config
注意，一切以你實際顯示路徑為準(zhǔn)，復(fù)制粘貼，新建文件保存此路徑即可，后續(xù)安裝會用到。
返回開源界面，找到With Docker，復(fù)制圖中紅框中的命令，完整復(fù)制，新建一個文件把它保存下來。
保存好的原始命令如下圖，完善一下原始命令，在.sock和ghcr中間添加--restart=always命令，注意，在英文狀態(tài)下輸入，且--restart=always命令前后各有一個空格；這樣，NAS重啟后，導(dǎo)航頁也會跟著重啟的意思。
然后繼續(xù)編輯安裝命令，圖中原始命令是前面復(fù)制的，把原始命令中的/path/to/config替換成你得到的config路徑屬性即可，就得到最終命令。然后復(fù)制這個最終命令。
注意，默認(rèn)是映射了3000端口，如主機的3000端口被占用，可自定義端口，如6999:3000即可，改動第一個3000數(shù)值代表自定義主機端口，我3000端口未占用，就不改動了，按3000來使用。
回到SSH命令界面，復(fù)制粘貼得到的最終命令，回車運行。會提示Unable開頭，表示在本地沒鏡像，會去鏡像庫中拉取，等它拉取完成，不要急，快慢取決于你網(wǎng)絡(luò)。
威聯(lián)通、群暉均是如此操作。流程一樣。
注意，剛運行命令可能提示docker：Got permission denied，說明沒管理權(quán)限，運行sudo -i，然后回車輸入密碼，獲取管理權(quán)限，再次運行安裝命令即可正常下載和安裝鏡像，此處需要注意一下。
網(wǎng)絡(luò)有點慢，第一層鏡像拉了好久，沒辦法，等吧。
當(dāng)你看到一長串?dāng)?shù)字，說明部署成功，返回Docker后臺即可看到鏡像，可進行開啟等操作。如提示bind端口占用等，記得把3000端口替換成未占用端口即可。
OK，在威聯(lián)通或群暉后臺即可看到鏡像，如未啟動，就開啟。
注意，威聯(lián)通不要在安裝完容器后做任何編輯，不然會失效，無法啟動后臺，所以威聯(lián)通安裝完成后，不要再次編輯容器，默認(rèn)讓它運行即可，群暉也是。
在瀏覽器中加上NAS的IP地址，加上你自定義的端口，即可進入homepage后臺了。威聯(lián)通、群暉下部署成功。
綠聯(lián)使用的是旗艦級DX4600，N5105處理器+8G內(nèi)存，可擴展內(nèi)存+雙M2+4盤位，配置拉滿，玩Docker之類也是輕輕松松了。全金屬機身，質(zhì)感非常不錯，憑借著易用性，這兩年也是收藏不少用戶，感興趣朋友可了解下。
在綠聯(lián)電腦版APP中打開Docker。
點擊鏡像管理-添加-私有庫（注意是私有庫，這個鏡像未發(fā)布在Docker Hub），URL地址處輸入：ghcr.io/benphelps/homepage:latest
找到剛下載好的鏡像，點擊創(chuàng)建容器。打開高級設(shè)置，點擊下一步。
設(shè)置重啟策略、勾選創(chuàng)建后啟動容器。
網(wǎng)絡(luò)處，選擇brideg，如你的3000端口未被占用，可直接選擇Host；如選擇brideg，點擊端口設(shè)置，在本地端口處自定義一個未占用端口即可，此處我使用6999端口。
返回文件管理處，新建一個homepage文件夾，專門保存此容器目錄，再在homepage文件夾中新建config文件夾。
返回Docker，點擊存儲空間，按下圖，添加文件夾，選擇剛創(chuàng)建的config文件夾，裝載路徑請照抄，類型為可讀寫。
本來還要映射docker.sock，進行容器狀態(tài)查看、整合之類的，但綠聯(lián)未開放SSH，無法選擇此目錄，幸好此選項是可選，最多不能查看各容器狀態(tài)信息，不影響正常使用。
點擊下一步，確認(rèn)，確認(rèn)，直到完成容器創(chuàng)建。
點擊快捷訪問，即可進入homepage后臺，成功部署。
首先，homepage的配置修改是在yaml文件夾上進行修改的，參考官方說明未找到圖形化修改形式。大家可在homepage開源界面中找到相關(guān)操作文檔。如果英文不錯的同學(xué)可能很容易看懂。
我這里演示常用的書簽和服務(wù)添加的操作，返回文件管理、文件總管，找到安裝時創(chuàng)建的homepage下的config文件夾，下載services.yaml文件。
然后電腦上安裝VS Code這個軟件，把下載的services.yaml文件拖入即可打開，初始長這樣。
比如書簽形式，第一次我的修改如下。也就是把這些格式的字眼按下圖形式替換成你的書簽。
可以看到，我將書簽分成外內(nèi)訪問類、內(nèi)網(wǎng)書簽類、常用工具類，共3大類書簽，并且每一類下都添加了一個書簽。
將保存好的services.yaml文件重新上傳到homepage下的config文件夾下，替換原有的services.yaml文件即可。群暉威聯(lián)通也是一樣，替換即可。
返回容器管理界面，重啟一下homepage容器。最好重啟一下，雖然不重啟好像也是可即時生效的。
返回Homepage后臺，刷新一下吧。OK，前面修改的yaml文件生效了，界面如下，成功展示我的3大類書簽。
如果想添加圖標(biāo)怎么添加呢？如下圖，在書簽處添加一行icon:的標(biāo)簽，后接需要的圖標(biāo)的網(wǎng)址，比如下圖的測速圖標(biāo)，搜圖引擎中搜索，復(fù)制圖片地址，粘貼地址即可。
其它幾個書簽也是同樣如此填寫。
將保存好的services.yaml重新上傳到config文件夾，刷新后臺?？梢钥吹?，成功顯示書簽圖標(biāo)了。
如果想在每個分類書簽中添加多個書簽，怎么操作。請看下圖，沒錯，就是復(fù)制粘貼大法，有規(guī)律可循，復(fù)制框中，粘貼到第二排，修改書簽名、圖標(biāo)地址、書簽地址，依次操作即可。
第二類書簽也是可以如此操作。如果想添加第4分類書簽，直接一整個大類復(fù)制粘貼即可，就添加了第4類書簽。
上傳修好好的yaml文件替換，刷新，效果出現(xiàn)了。是不是就出現(xiàn)多條書簽了。
你甚至還可以添加ping功能，測試延遲。
保存修改，替換yaml文件后，刷新，效果圖如下。只要添加了ping的，都出現(xiàn)延遲數(shù)值了。
好的，書簽以及添加分類就完成了，各位就按前面步驟操作。
支持小組件，如下圖，在官方文檔中找到Service Widgets，支持哪些小組件也列出來了，比如Jellyfin、EMBY等，點擊即可跳轉(zhuǎn)，復(fù)制它的文本。
如下圖，處于一級類目中的Jellyfin書簽中添加widget即可，然后填寫url地址和API（Jellyfin后臺可開啟API，獲取即可）。
效果如下圖所示，當(dāng)我在Jellyfin后臺播放影片時，homepage剛添加的widget就會顯示在播放哪部影片、以及目前播放進度，是不是很強。當(dāng)然，不止支持Jellyfin，也支持EMBY、PLEX等許多容器，支持?jǐn)?shù)十個常見的鏡像，各位去官方文檔查看，就按我前面的yaml配置方法套用上去即可。
可以發(fā)現(xiàn)，底部還默認(rèn)有一些書簽，同樣可編輯，在homepage的config文件夾中找到bookmarks.ymal，下載下來，使用VS Code打開編輯。
默認(rèn)是右圖，左圖是我在此基礎(chǔ)上修改的，和前面一樣，如果要添加多條書簽，復(fù)制第二條—開始的整個部分，粘貼后，設(shè)置書簽即可，不再贅述了。
保存后，更新上傳bookmarks.ymal文件后，刷新，可以發(fā)現(xiàn)成功變動了。
同樣，左上角的信息也是可以自定義的，請看官方文檔。
最終，初步研究和上手之后，我的HomePage導(dǎo)航頁暫定這樣，我感覺美觀度還是可以的。
