群暉/極空間創(chuàng)建屬于自己的Flame導(dǎo)航網(wǎng)站

時間：2023-08-04 19:18:01 | 來源：網(wǎng)站運營

時間：2023-08-04 19:18:01 來源：網(wǎng)站運營

群暉/極空間創(chuàng)建屬于自己的Flame導(dǎo)航網(wǎng)站：碼字不易，喜歡我的教程歡迎各位多多評論，各位的支持是我更新的最大動力

也歡迎各位可以加我微信討論：ajisna

破解類教程容易被和諧，歡迎大家關(guān)注我的公眾號防走丟：堅叔Evan

網(wǎng)頁端預(yù)覽效果：




移動端預(yù)覽效果：




之前講過一篇Flare導(dǎo)航頁、一篇Heimdall導(dǎo)航頁以及一篇Typecho個人博客的教程，沒看過的小伙伴可以去看看

Flare：堅叔：群暉/極空間創(chuàng)建屬于自己的導(dǎo)航網(wǎng)站

Heimdall：堅叔Evan：群暉/極空間搭建一個屬于自己的Heimdall個人導(dǎo)航網(wǎng)頁教程

Typecho：堅叔Evan：群暉/極空間搭建Typecho個人博客網(wǎng)頁教程




由于Heimdall官方的鏡像原因，優(yōu)化有點差，導(dǎo)致Heimdall創(chuàng)建的時候有的小伙伴會出現(xiàn)卡頓和報錯的情況，今天我來介紹一款優(yōu)化的比較好，而且界面也挺好看的個人導(dǎo)航網(wǎng)站——Flame導(dǎo)航網(wǎng)站的搭建教程




首先打開Docker倉庫，搜索

pawelmalak/flame

下載latest版




下載完成后雙擊打開鏡像

來到文件夾路徑

在根目錄下新建一個Docker文件夾

在Docker文件夾下新建一個flame文件夾

選中flame文件夾

裝載路徑填

/app/data




來到端口設(shè)置

本地端口填

9320

容器端口填

5005




來到環(huán)境設(shè)置

找到PASSWORD

右側(cè)的值改為自己想要設(shè)置的后臺密碼

我這里舉例填admin，自己可以改更具安全性的密碼

然后點應(yīng)用




等待三分鐘裝載完畢后，打開瀏覽器輸入：

http://自己Nas的IP:9320

即可進入自己剛剛搭建好的Flame個人導(dǎo)航網(wǎng)頁




接下來我們打開瀏覽器輸入：

http://自己Nas的IP:9320/settings

進入到導(dǎo)航頁設(shè)置

由于Flame沒有中文漢化，這里我附上中英文翻譯以方便大家進行自定義設(shè)置

第一個Theme是主題設(shè)置，大家可以自己選擇自己喜歡的配色，或者是自定義自己喜歡的配色

選擇好自己的主題之后記得最下方Default theme for new users這里也要設(shè)置相同的主題，不然其他訪客點擊進來也就無法看到你設(shè)定好的主題，會很糟糕




第二欄主要是詢問是否在同一選項卡中打開書簽之類的設(shè)置，一般不用動，其中默認搜索引擎這里我們可以選擇以下這些搜索




第三頁主要是界面，可以自定義是否隱藏搜索欄、問候語、日期格式等等設(shè)置

比如說你可以改掉他默認的Goodmorning問候語，但是要注意的是問候語必須用分號隔開，而且必須填寫所有 4 條消息，即使它們相同，例如我問候語改為Welcome，那么我們就必須要填：Welcome;Welcome;Welcome;Welcome;

還有就是網(wǎng)頁抬頭一般默認是Flame，你也可以改成你自己喜歡的抬頭




第四頁是天氣設(shè)置




我們點開這個天氣API




選擇FREE，點Get Started




注冊好個人賬號密碼之后，復(fù)制好這串API




粘貼到我們Flame的API上




由于我們無法一鍵獲取位置，我們需要借助第三方來獲取左邊，這里我用百度地圖來獲取，這里我附上鏈接：拾取坐標(biāo)系統(tǒng)

比如說我們用杭州五角場來作為舉例，查詢五角場，點擊圖中的位置，右上角就會出現(xiàn)我們的經(jīng)緯度坐標(biāo)了

像五角場的經(jīng)緯度左邊是：121.522746,31.306031

那么緯度就是31.306031

經(jīng)度就是121.522746




分別填入經(jīng)緯度即可，其他額外天氣可以根據(jù)自己的選中來定




基本設(shè)置我們就介紹到這里，我們嘗試進入Flame導(dǎo)航網(wǎng)頁看看我們剛剛的設(shè)置效果

還不錯，挺簡約的




其中這里我們可以進行各種搜索，調(diào)用的是我們剛剛基礎(chǔ)設(shè)置里設(shè)置的搜索引擎




接下來開始添加我們的應(yīng)用導(dǎo)航和書簽導(dǎo)航

應(yīng)用導(dǎo)航編輯我們點擊這里




點擊Add




App name填寫導(dǎo)航抬頭，比如我這里做一個Z4登錄頁面導(dǎo)航，抬頭填Z4

App URL填網(wǎng)頁鏈接，如果你做的是外網(wǎng)導(dǎo)航頁，這里也必須要填外網(wǎng)鏈接，具體穿透教程可以看我往期Cloudflared的免費穿透教程：堅叔Evan：群暉/極空間無公網(wǎng)IP搭建Cloudflared-阿里云免費隧道穿透教程

App description是簡介備注，可填可不填

App icon是導(dǎo)航圖標(biāo)，F(xiàn)lame默認使用MDI的導(dǎo)航圖標(biāo)，也可以自行上傳自定義圖標(biāo)，比如我這里就上傳一個極空間的圖標(biāo)

App visibility是可見性，可選自己可見或者是開放（這里我建議是選開放，這樣我們就不用每到一個地方需要登錄才能看到自己的導(dǎo)航頁）

完成之后點Add new application




進入我的Flame導(dǎo)航頁就能看見剛剛做好的應(yīng)用導(dǎo)航了，極空間的圖標(biāo)也能正常顯示（我這里用內(nèi)網(wǎng)地址是為了方便演示，大家務(wù)必用外網(wǎng)地址域名來進行鏈接）




我們建立多個應(yīng)用之后點擊Edit然后拖動應(yīng)用即可進行排序




接下來講講怎么添加書簽導(dǎo)航，點擊BOOKMARKS




點擊Add Catgory新建一個類別




比如說我這里新建一個搜索引擎的類別

點Add new category




然后點Add Bookmark，添加書簽




這里我新建一個百度引擎來舉例

Bookmark Name填寫自己的書簽名

Bookmark URL填寫網(wǎng)址，也是填寫外網(wǎng)地址

Bookmark Category選擇自己的類別，這里我選剛剛創(chuàng)建的搜索引擎類別

Bookmark Icon這里選擇圖標(biāo)，由于我剛剛已經(jīng)講過如何上傳自定義的圖標(biāo)，這里我就講一下如何選用MDI的自帶圖標(biāo)，點擊橙色的Click here for reference




然后搜索B相關(guān)的圖標(biāo)




選中自己喜歡的圖標(biāo)點擊進去




復(fù)制上面這個名稱




粘貼到Bookmark Icon里即可

點擊Add new bookmark我們的百度引擎書簽導(dǎo)航也做好了




看看效果




稍微補充一下，可以看到已經(jīng)有個雛形了




但是一個沒有背景的導(dǎo)航頁是不完整的，接下來我們把背景也安排上

首先我們找到一個自己喜歡的背景

我這里就用這個背景圖來舉例子，鏈接：https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2017-11-06%2F5a000f1a91122.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654927978&t=0d7cbbb37f8ebd04c2a50956a5f573d6




把這個背景圖的URL復(fù)制好，然后回到我們的Flame設(shè)置頁面

進入CSS設(shè)置，粘貼下面這行命令

body { background: url('圖片的URL替換掉這行中文') no-repeat; background-size: 1920px; }




其中將自己復(fù)制的圖片URL替換掉命令中間的中文字

點保存




回到我們的Flame看看效果

效果還是蠻不錯的




但是如果你的壁紙分辨率比訪問者的分辨率低的話，有可能會出現(xiàn)以下情況




這時候我建議你可以換更大分辨率的圖片

或者是改一下命令，將圖片做個拉伸，將命令行body { background: url('圖片的URL替換掉這行中文') no-repeat; background-size: 1920px; }最后的1920px改大一點，比如說2560或者是3840，我們的圖片就可以按照分辨率進行拉伸了，就完美匹配了




后面我全部替換成了自己下載PS的圖標(biāo)，這下完整了




最后，我們將我們的導(dǎo)航頁推到外網(wǎng)上，DDNS或者是各種方法都可以，不懂的小伙伴也可以看我之前講的Cloudflared免費隧道穿透教程：堅叔Evan：群暉/極空間無公網(wǎng)IP搭建Cloudflared-阿里云免費隧道穿透教程

記得端口改為：9320




上面我只講了一部分功能，更多功能歡迎各位自己探索

好了，接下來開始你們的創(chuàng)作吧

碼字不易，喜歡我的教程歡迎各位多多評論，各位的支持是我更新的最大動力
也歡迎各位可以加我微信討論：ajisna
破解類教程容易被和諧，歡迎大家關(guān)注我的公眾號防走丟：堅叔Evan

更多教程可以點入我的導(dǎo)航頁進行查看：堅叔Evan：教程導(dǎo)航頁