用群晖搭建一个WEB 导航页面

45547.jpg

  去年组了个黑裙,技嘉 E350主板 + DDR3 1333 4G 内存,三块 3T 东芝盘,用到现在没出过任何问题,有人说黑裙不稳定的,其实是不存在的,只是相对白裙来说,黑裙可能多花一些心思和时间罢了。

目前黑裙能实现的功能:

  • 远程备份相片;
  • 远程播放音乐;
  • 远程播放视频;
  • 远程管理、备份文件;
  • 远程管理DownloadStation;
    等等...

地址:https://www.codess-yun.top

PS:2018.9 导航页面已加Bing 随机壁纸API,每次刷新都是一张新壁纸哦

2019.1 壁纸服务器到期没钱续费了233333,壁纸API已经暂停服务。

 2019.2 随机壁纸服务器已搬迁至本地NAS,详见:利用群晖WEBStation搭建一个随机壁纸API


开启WEB服务

打开控制面板=》WEB服务=》按照下图勾选“启动WEB服务”,并填写相应的端口号,注意:80端口已被运营商封锁,如果是HTTP访问,请更换成其他端口

4216.jpg

注意:此教程是根据5.2版本写的。群晖6.x版本之后,需要先在套件中心安装WebStation,安装WebStation之后再部署好Apache/NginxPHP环境,这一步相对容易,不展开讲解。

设置应用程序

这一步是将群晖里的VideoStationMusicStation
PhotoStationFileStationDownloadStation等应用程序映射到WEB服务里,也就是说,将群晖的应用程序映射到公网环境里。

选择设置项

75024.jpg

更改端口号

75147.jpg

选择登陆样式

75211.jpg


放行相关端口

在路由器上设置需要转发的端口,因我的路由器支持从群晖导入规则,所以可以直接在群晖里自动导入规则至路由器

设置方法:打开控制面板=》外部访问=》路由配置=》新增=》内置应用程序=》勾选刚刚设置的应用程序端口=》应用=》保存=》OK;


上传WEB源码

将WEB源码上传至群晖根目录 web文件夹下,编辑index.html文件,并将

<a href="https://xxx.com/file/" target="_blank"><img class="shake" src="img/png/iCloud-Drive.png" /><strong>我的云盘</strong></a>

https://xxx.com/file/ 更改为自己的黑群的外网链接,其他设置项同理。

有些同学不知道如何上传文件,其实方法很多,最简单的是登陆群晖之后,打开filestation=>web文件夹=>点击上传(上传-覆盖) 就可以。

还有如何更改壁纸链接的问题,在下面群晖web导航文件中,css文件夹内,style.css文件中,搜索关键字background,大约在3463行的位置,替换后面的链接为自己的背景图片或壁纸API即可。

101850.jpg

2019.7更 PS:导航文件中,已经预置为本站Bing随机壁纸API,如出现加载不出来,清空浏览器缓存即可。(当本地NAS关机或不在线时,会出现壁纸服务无法使用的情况,请知悉,建议在自己群晖上搭建随机壁纸服务)

关于如何设置自己专属的壁纸API,可参考文章:利用群晖WEBStation搭建一个随机壁纸API

注:源码已上传至本站文件分享站https://file.codess.cc
文件站的主机商跑路了23333,文件站暂时关闭!需要导航源码的朋友请复制下面链接提取。

导航文件:

此处内容需要评论回复后(审核通过)方可阅读。




——The End

最后修改:2019 年 08 月 10 日 11 : 53 AM
您的支持就是我持续更新的动力!

131 条评论

  1. 猫猫

    如何固定壁纸,这样就不用搭壁纸本地服务器了

    1. Sakwe
      @猫猫

      在上面壁纸URL 处填入图片的相对路径就可以了;

  2. 猫猫

    很漂亮,也想装一个!!

  3. [...]本文链接:https://codess.cc/archives/67.html[...]

    1. Sakwe
      @用群晖搭建一个WEB 导航页面 R11; 牛牛的博客

      转载也写个出处吧,整篇复制,连我的打赏码都还在?

  4. 443

    支持博主,博主棒棒

  5. 570app.cn

    看看,是咋玩意

  6. wanglin

    感谢博主分享!

  7. ntren

    我要下载啊

  8. NailClipper

    不错,学习一下

  9. Joey

    不错,我很喜欢你的导航,我想下载

  10. xuer

    还能下载码

  11. 匹叔

    不错,很喜欢,需要下载啊

  12. 贫小子

    下载下来看看是不是我需要的

  13. ncufox

    好帖,值得学习珍藏OωO

  14. linlikesi

    来偷源码

  15. kskeq

    比较好看,就是不知道自己能不能搞明白

  16. w492280331

    问下为什么我改了HTML文件还是显示的原来的东西呢

    1. w492280331
      @w492280331

      已经知道原因,谢谢

  17. Zen

    谢谢,希望能下载

  18. 不赖

    老哥稳。要用别名是不是要买子域名?

    1. Sakwe
      @不赖

      不需要,在主域名下增加一条耳机域名解析就可以

      1. 不赖
        @Sakwe

        我的是免费动态域名,没有域名解析吧

      2. 不赖
        @Sakwe

        感谢楼主,还有为什么我外网访问photo页面。显示您要找的页面未找到。

        1. Sakwe
          @不赖

          因为photo页面必须走80端口,而运营商都封了80,你需要用别的端口反代本地80端口,博客有教程

          1. 不赖
            @Sakwe

            找到了,谢谢博主

            1. 不赖
              @不赖

              楼主,photo是可以了。怎么同时让导航也用443端口呢?

              1. Sakwe
                @不赖

                路由器上设置一条转发:外部: 443 => 群晖IP :443

  19. wxf870517

    首页的地址分享恩不错啊

  20. 博主链接打不开啊

    1. Sakwe
      @锌

      最近搬家,公网宽带暂时还未弄好

      1. Sakwe
        @Sakwe

        2019.8.6 宽带安装好了,文件访问正常

  21. 学习学习大佬

  22. Nicky

    现在是需要评论才能下载是吧?

    1. Sakwe
      @Nicky

      只是为了防止恶意下载

  23. wdc

    还能不能下啊

    1. Sakwe
      @wdc

      一直都可以 = =、

      1. Nicky
        @Sakwe
        该评论仅登录用户及评论双方可见
        1. Sakwe
          @Nicky

          这两天在搬家,家里没网了,暂时无法提供文件下载服务,博客底部有QQ群链接,加群获取吧,不好意思

          1. Nicky
            @Sakwe
            该评论仅登录用户及评论双方可见
  24. VillainGent

    感谢大大的辛勤付出

  25. 你好~~!! 怎么修改为 相对路径的背景图的,我想要icloud 原来的背景图片。

    1. Sakwe
      @陈

      相对路径是:“ ../img/icloud_old.png” 图片可自行替换

  26. 网站打不开,请看一下

  27. 看看先

  28. ALEX

    学习了

  29. 123

    厉害了我的哥 赶紧试试

  30. gyl

    1111

  31. 野比清一

    导航文件看不到,楼主

    1. Sakwe
      @野比清一

      清除浏览器缓存,刷新一下就有了

  32. 野比清一

    谢谢

  33. pzp

    楼主,导航页的背景图怎么没有了?变成白底了

    1. Sakwe
      @pzp

      需要自己将导航页壁纸更改一下,如何更改上面有写到。关于随机壁纸的搭建,博客有教程

      1. pzp
        @Sakwe

        要谷歌浏览器打开正常显示有背景图,但是用QQ浏览打开背景是白底的,为什么会这样?还有引用本地背景图是放在哪个目录下,web文件夹下面都没有找到用作背景的图片,background: url(../img/background.jpg),这路径下的背景图在哪个目录可以找到这图片

        1. Sakwe
          @pzp

          1、清除缓存试试;
          2、引用本地图片任意文件夹都可以,但是得在代码里指明该路径(注意相对路径与绝对路径),还要开放图片文件夹的读权限;
          3、资源包里默认的背景图,是我服务器上一张固定的图片链接;
          欢迎加入博客底部QQ群交流

  34. 爱的胡胡

    很漂亮的导航站

  35. pzptiger

    太好了,主要是壁纸可以换

  36. ssa

    谢谢分享 正好在折腾群晖

  37. tives

    好像下载不了啊

    1. Sakwe
      @tives

      可以鸭

  38. DEVIL

    不错的分享 谢谢楼主

  39. 明月初升

    跟着技术大神。努力学习实现自己的想法。 给个赞

  40. sky

    群号在哪里啊 ?我怎么没有看到!

    1. Sakwe
      @sky

      博客最下面

  41. Axian

    博主,话说我这边的443和80端口都被电信封了,是不是就没办法无端口访问了?

    1. Sakwe
      @Axian

      那就只能通过FRP、Ngrok或者花生壳等代理 进行内网穿透啦

  42. jimmg5202

    共享地址打不开呀

    1. Sakwe
      @jimmg5202

      可以的鸭,你看看是不是复制错了或者漏了?

  43. woo

    谢谢大佬,我的导航页面白板很久了(´இ皿இ`)

  44. 45share

    群晖的可玩性真的高φ( ̄∇ ̄o)

  45. hongh2

    楼主,能加个群聊吗

    1. Sakwe
      @hongh2

      可以鸭,页面底部有加群链接

  46. yoyo

    感谢分享,正在考虑弄个导航页

  47. cocx

    哪里还可以下到源文件么?

  48. cmd

    共享的文件打不开,麻烦楼主看下,风格非常喜欢

    1. Sakwe
      @cmd

      没问题呀,将连接复制到浏览器打开

      1. 700443
        @Sakwe

        还是不行打不开麻烦发一份给邮箱吧
        700443@qq.com

  49. f267355

    蟹蟹大佬

    1. star
      @f267355

      66666666666

  50. 刘东

    感谢楼主分享经验,太感谢了,谢谢

  51. wendbell

    这个,我想研究下群晖的源码是怎么制作的,都是json吗?

  52. carl

    感谢分享,太感谢了,谢谢

  53. Kenneth

    感谢分享,正在考虑弄个导航页。

  54. abc123

    蟹蟹分享

  55. 贺先生

    网盘链接打不开

    1. Sakwe
      @贺先生

      网址可以打开呀

  56. 思密达

    今天入手蜗牛,NAS放在主路由下 ,怎么都设置不好web!完全搞不明白原理啊,求好友ヾ(≧∇≦*)ゝ求助!

    1. Sakwe
      @思密达

      加群聊

  57. huseman

    博主,请问:
    我把家里的路由器做一个端口映射,把 外网的80端口映射程群晖的虚拟web主机5050端口,是不是就可以,不用加端口号就可以直接使用 xxxx.com 来 访问webstation内的网页了.

    1. Sakwe
      @huseman

      对的,是这样。但是.....你家真的还有80端口嘛,运营商基本都封掉了80端口

    2. huseman
      @huseman

      ps:我已经做好了花生壳的ddns

      1. Sakwe
        @huseman

        有花生壳穿透的话,就可以完美实现

        1. huseman
          @Sakwe

          我刚刚试了一下,运营商貌似果然把80端口给封锁了...,那我该如何是好 啊

          实在不想在域名后面再加一个端口号,感觉那样好傻.

          1. Sakwe
            @huseman

            用你的花生壳就可以实现,登陆花生壳后台,设置一条转发,80->5050

            1. huseman
              @Sakwe

              刚刚看了一下,花生壳太坑了,在花生壳上设置转发每个月有1G流量的限制,而且限速1Mbps.
              我可以在群晖上设置反向代理5050到 80 吗⌇●﹏●⌇

              1. Sakwe
                @huseman

                可以,但前提是你的IP是公网

  58. 主要看气质。

    楼主请问下能帮做下nas导航页吗,看了你的教程,但是源码不会改

    1. Sakwe
      @主要看气质。

      加一下博客底部QQ群,我把改好的发给你

  59. aini50563

    请楼主原谅我的挖坟,为了学习我还专门注册了个id,我也是服了。
    其他步骤和操作我都能理解和执行,但我的黑裙6.1.7,在设置应用程序端口的时候,我的地址是默认的内网地址,例如file station,可自定义为file,但链接地址是默认的内网192.168.x.x/file,但是你的教程里却是外网的域名,不知道是不是我别的地方的设置没有设置好。
    教程里将WEB源码上传至群晖根目录 web文件夹下,编辑index.html文件,并将图中https://xxx.com/file/ 更改为自己的黑群的外网链接,其他设置项同理。如果按这个设置的话,就必须带端口号和密码验证了
    望指教

    1. Sakwe
      @aini50563

      抱歉现在才回复你:
      1、“但链接地址是默认的内网192.168.x.x/file”,这是因为你没有启用自定义域,如果你指定了自定义域,就会显示你自己的域名;
      2、“如果按这个设置的话,就必须带端口号和密码验证了”,这一句我不太理解,如果你的公网IP的80、443端口都被封了的话,无论如何都是要使用端口才能访问到的,除非另外用VPS做FRP转发。如果没有被封,想要无端口访问,请移步我的另一篇博客“解决群晖PhotoStation远程访问80端口被封的问题”,按照上面的设置就能实现无端口访问了

  60. 必应API挂了

    1. Sakwe
      @雷

      服务器到期了(主要是穷。。。),现在正把图床搬到本地,服务器还没组装好>﹏<

  61. teemo

    漂亮又实用!ヾ(≧∇≦*)ゝ
    请问可以删除

    以达到减少图标的效果吗?(☆ω☆)

    1. Sakwe
      @teemo

      可以呀,编辑HTML文件,注释掉不用的就行|´・ω・)ノ

  62. 文件下载失效了,可以给个地址吗

    1. Sakwe
      @里

      链接还在呀,0:30—7:30这个时间段我的NAS是关机的,所以链接会打不开呢OωO

  63. 安安

    开启WEB服务
    这个步骤应该怎么做呀?装了个6.2的版本,没有看到这个界面设置哦!

    1. Sakween
      @安安

      6.2版本需要先在 套件中心 里面找到WebStation ,安装,安装完成之后再进入WebStation,按照提示安装Apache/Nginx、PHP等环境,然后再按照上面教程 “设置应用程序” 进行设置。

      1. 安安
        @Sakween

        谢谢,现在设置好可以进了,只是用你的模板后,文件链接可以进去,音乐和电影的链接点进去就是404错误,这个链接应该怎么搞?

        1. Sakween
          @安安

          最下方有群链接,加群讨论吧

          1. 安安
            @Sakween

            老大,通过下吧!谢谢

  64. 黑眼睛

    导航源码 地址打不开

    1. Sakween
      @黑眼睛

      共享地址:http://nas.codess-yun.top:6860/index.php?share/file&user=1&sid=ciavxeWQ 提取密码:YIj7F

      1. 黑眼睛
        @Sakween

        谢谢 博主 非常好 !

  65. 1

    OωO

  66. stary

    博主你好我想请问下你的这个网址怎么做到https://nas.codess-yun.top/无端口访问的。路由里面我也映射了80,443端口到内网的80 443端口在外网还是不能访问。内网外换成其他自定义端口就能重新访问了。

    1. Tony
      @stary

      你好,请问你的宽带运营商是否封了443端口呢?如果没有封,那么可以在路由器上做一个外部443 =》内部443 的端口映射,不是443 =》80,是 443 =》443,我就是利用443端口实现无端口访问的,但前提得在群晖里添加域名SSL 证书。

      因为浏览器对80、443端口的请求会省略其后缀的,如果443也被封禁了的话,那就只能带端口访问了

  67. xqc100

    老大已经用了你的模板,但是有个问题背景图片不能更换,已经修改style.css中background: url(https://img.codess.cc/index.php) 还是没用。请问应该怎么修改

    1. xqc100
      @xqc100

      web文件在本地运行可以随机图片,上传到群辉后再访问就不行

      1. xqc100
        @xqc100

        更换chrome浏览器可以随机了,但是360浏览器、手机上还是不行,是否有解决办法?

        1. pzp
          @xqc100

          我也是这样,用QQ浏览器打开背景是白板,用chrome浏览器打开有背景图但是是固定的图片

        2. Tony
          @xqc100

          清除一下浏览器缓存,单独打开 https://img.codess.cc 看看。如果没问题可能是你的群晖设置的原因,我这里用手机自带浏览器,Safari,IE,Firefox,搜狗,谷歌,Edge测试了均没有问题哦

          测试地址:https://nas.codess-yun.top

          1. xqc100
            @Tony

            老大,已经好了,修改为https登录即可

            1. Tony
              @xqc100

              嗯嗯,弄个证书,建议全部启用 https

  68. 五千万啊

    用iis也可以吧,没必要非要群晖的

    1. Tony
      @五千万啊

      嗯嗯,用windows 做存储服务器也行。只是群晖在存储管理方面,可能会更专业一点,而且群晖可玩性也更高呢

  69. 是我啦

    老大,找来找去,只有你这个主页最漂亮,能否将文件发我一份呢,万分谢谢!
    xuecqcn@qq.com

    1. Tony
      @是我啦

      已发,导航文件已经上传至本站文件站 https://file.codess.cc ,需要的朋友请自取呦ヾ(≧∇≦*)ゝ

      1. 0.01km
        @Tony

        地址打不开啊!

        1. Sakween
          @0.01km

          共享地址:http://nas.codess-yun.top:6860/index.php?share/file&user=1&sid=ciavxeWQ 提取密码:YIj7F

        2. Sakween
          @0.01km

          额,不好意思,文件站被墙了23333 ,重新上传一份

发表评论

为了博客更好地生产内容,请将本站加入广告屏蔽插件的白名单,感谢您的支持。 具体方法
X