群晖/极空间创建属于自己的Flame导航网站

时间：2023-08-04 19:18:01 | 来源：网站运营

时间：2023-08-04 19:18:01 来源：网站运营

群晖/极空间创建属于自己的Flame导航网站：码字不易，喜欢我的教程欢迎各位多多评论，各位的支持是我更新的最大动力

也欢迎各位可以加我微信讨论：ajisna

破解类教程容易被和谐，欢迎大家关注我的公众号防走丢：坚叔Evan

网页端预览效果：




移动端预览效果：




之前讲过一篇Flare导航页、一篇Heimdall导航页以及一篇Typecho个人博客的教程，没看过的小伙伴可以去看看

Flare：坚叔：群晖/极空间创建属于自己的导航网站

Heimdall：坚叔Evan：群晖/极空间搭建一个属于自己的Heimdall个人导航网页教程

Typecho：坚叔Evan：群晖/极空间搭建Typecho个人博客网页教程




由于Heimdall官方的镜像原因，优化有点差，导致Heimdall创建的时候有的小伙伴会出现卡顿和报错的情况，今天我来介绍一款优化的比较好，而且界面也挺好看的个人导航网站——Flame导航网站的搭建教程




首先打开Docker仓库，搜索

pawelmalak/flame

下载latest版




下载完成后双击打开镜像

来到文件夹路径

在根目录下新建一个Docker文件夹

在Docker文件夹下新建一个flame文件夹

选中flame文件夹

装载路径填

/app/data




来到端口设置

本地端口填

9320

容器端口填

5005




来到环境设置

找到PASSWORD

右侧的值改为自己想要设置的后台密码

我这里举例填admin，自己可以改更具安全性的密码

然后点应用




等待三分钟装载完毕后，打开浏览器输入：

http://自己Nas的IP:9320

即可进入自己刚刚搭建好的Flame个人导航网页




接下来我们打开浏览器输入：

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

进入到导航页设置

由于Flame没有中文汉化，这里我附上中英文翻译以方便大家进行自定义设置

第一个Theme是主题设置，大家可以自己选择自己喜欢的配色，或者是自定义自己喜欢的配色

选择好自己的主题之后记得最下方Default theme for new users这里也要设置相同的主题，不然其他访客点击进来也就无法看到你设定好的主题，会很糟糕




第二栏主要是询问是否在同一选项卡中打开书签之类的设置，一般不用动，其中默认搜索引擎这里我们可以选择以下这些搜索




第三页主要是界面，可以自定义是否隐藏搜索栏、问候语、日期格式等等设置

比如说你可以改掉他默认的Goodmorning问候语，但是要注意的是问候语必须用分号隔开，而且必须填写所有 4 条消息，即使它们相同，例如我问候语改为Welcome，那么我们就必须要填：Welcome;Welcome;Welcome;Welcome;

还有就是网页抬头一般默认是Flame，你也可以改成你自己喜欢的抬头




第四页是天气设置




我们点开这个天气API




选择FREE，点Get Started




注册好个人账号密码之后，复制好这串API




粘贴到我们Flame的API上




由于我们无法一键获取位置，我们需要借助第三方来获取左边，这里我用百度地图来获取，这里我附上链接：拾取坐标系统

比如说我们用杭州五角场来作为举例，查询五角场，点击图中的位置，右上角就会出现我们的经纬度坐标了

像五角场的经纬度左边是：121.522746,31.306031

那么纬度就是31.306031

经度就是121.522746




分别填入经纬度即可，其他额外天气可以根据自己的选中来定




基本设置我们就介绍到这里，我们尝试进入Flame导航网页看看我们刚刚的设置效果

还不错，挺简约的




其中这里我们可以进行各种搜索，调用的是我们刚刚基础设置里设置的搜索引擎




接下来开始添加我们的应用导航和书签导航

应用导航编辑我们点击这里




点击Add




App name填写导航抬头，比如我这里做一个Z4登录页面导航，抬头填Z4

App URL填网页链接，如果你做的是外网导航页，这里也必须要填外网链接，具体穿透教程可以看我往期Cloudflared的免费穿透教程：坚叔Evan：群晖/极空间无公网IP搭建Cloudflared-阿里云免费隧道穿透教程

App description是简介备注，可填可不填

App icon是导航图标，Flame默认使用MDI的导航图标，也可以自行上传自定义图标，比如我这里就上传一个极空间的图标

App visibility是可见性，可选自己可见或者是开放（这里我建议是选开放，这样我们就不用每到一个地方需要登录才能看到自己的导航页）

完成之后点Add new application




进入我的Flame导航页就能看见刚刚做好的应用导航了，极空间的图标也能正常显示（我这里用内网地址是为了方便演示，大家务必用外网地址域名来进行链接）




我们建立多个应用之后点击Edit然后拖动应用即可进行排序




接下来讲讲怎么添加书签导航，点击BOOKMARKS




点击Add Catgory新建一个类别




比如说我这里新建一个搜索引擎的类别

点Add new category




然后点Add Bookmark，添加书签




这里我新建一个百度引擎来举例

Bookmark Name填写自己的书签名

Bookmark URL填写网址，也是填写外网地址

Bookmark Category选择自己的类别，这里我选刚刚创建的搜索引擎类别

Bookmark Icon这里选择图标，由于我刚刚已经讲过如何上传自定义的图标，这里我就讲一下如何选用MDI的自带图标，点击橙色的Click here for reference




然后搜索B相关的图标




选中自己喜欢的图标点击进去




复制上面这个名称




粘贴到Bookmark Icon里即可

点击Add new bookmark我们的百度引擎书签导航也做好了




看看效果




稍微补充一下，可以看到已经有个雏形了




但是一个没有背景的导航页是不完整的，接下来我们把背景也安排上

首先我们找到一个自己喜欢的背景

我这里就用这个背景图来举例子，链接：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复制好，然后回到我们的Flame设置页面

进入CSS设置，粘贴下面这行命令

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




其中将自己复制的图片URL替换掉命令中间的中文字

点保存




回到我们的Flame看看效果

效果还是蛮不错的




但是如果你的壁纸分辨率比访问者的分辨率低的话，有可能会出现以下情况




这时候我建议你可以换更大分辨率的图片

或者是改一下命令，将图片做个拉伸，将命令行body { background: url('图片的URL替换掉这行中文') no-repeat; background-size: 1920px; }最后的1920px改大一点，比如说2560或者是3840，我们的图片就可以按照分辨率进行拉伸了，就完美匹配了




后面我全部替换成了自己下载PS的图标，这下完整了




最后，我们将我们的导航页推到外网上，DDNS或者是各种方法都可以，不懂的小伙伴也可以看我之前讲的Cloudflared免费隧道穿透教程：坚叔Evan：群晖/极空间无公网IP搭建Cloudflared-阿里云免费隧道穿透教程

记得端口改为：9320




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

好了，接下来开始你们的创作吧

码字不易，喜欢我的教程欢迎各位多多评论，各位的支持是我更新的最大动力
也欢迎各位可以加我微信讨论：ajisna
破解类教程容易被和谐，欢迎大家关注我的公众号防走丢：坚叔Evan

更多教程可以点入我的导航页进行查看：坚叔Evan：教程导航页