介绍

  • #主页 #引导页 ⭐️多模式个人主页展示页,🌈带pwa模式,多组件效果,可随时切换的引导🎉 添加右键弹出菜单,RSS动态文章卡片,📫ADS广告位

  • NOISE主页分两个主要部分-index首页和home页,它们为不断改善和魔改ZYYO666和Zac517两位开发过的页面而最终呈现的效果。

  • 从去年其实一直有更新(在聊天室内可以看到部分更新记录),但总感觉不完善,在之后肯定还会处于不断改善中

  • 你可以像我一样合并使用,也可以分开单独拿一个主题作为引导页,它很简单又很复杂,简单是因为它就是由html而组成,复杂是因为添加了很多组件效果,部分朋友在配置和修改时可能会遇到很多问题,不过在经过修改和配置后,效果一定会令你满意。

特性

  • 个性化支持:将各类组件以js形式引入。使一个页面包含多种功能

  • 多模式:加入不同页面去构成一个统一的模式框架。

  • 广告位支持:引入了侧边广告位及横幅标语式文字通告

  • 相册支持: 你可以在home页引入更多相关相册。

  • 音乐组件个性化:修改了音乐的css样式。让页面整体更统一

  • API组件支持:通过请求api响应的json,可以加入如每日60秒看世界及摸鱼日历的引入

  • 移动端适配:完美支持移动端,实现自适应布局。

  • 主页还在持续更新中,本项目欢迎您的参与,共同维护,逐步完善,将项目做得更完善

  • 如果你想提供一些好的建议或者提交 pr,欢迎随时联系作者或留言

基础文件引入

  • 右键菜单【Right.js,Right.css】

  • 聊天室组件【emb.js】

  • loading载入效果【loading.css;loading.js]

  • 随机背景+随机前景【suiji-picture.js】

  • 侧边圈形按钮菜单【tb.css;tab.js】

  • PWA【service-worker.js】

  • 广告位图文弹窗【AD.css;AD.js】

  • 弹入弹出式侧边文字【Text.css;Text.js】

  • RSS信息动态展示【rss.css;rss.js】

预览

  • 首页

  • Home页

  • index首页

  • Home页

部署教程

演示环境

  • 群晖NAS系统

  • 型号通用

下载项目文件

  1. 前往项目地址进行下载最新版本

    https://github.com/rcy1314/noisework/releases
  2. 演示直接下载压缩包文件

  3. 将文件上传到群晖任意文件夹内,右键选择将压缩包解压出来。

添加网页文件

  1. 打开群晖套件中心,安装Web Station套件应用。

  2. 打开安装的Web Station套件应用,点击网页服务,新增。

  3. 选择静态网站,点击下一步。

  4. 名称:自行设置一个,用于给你的这个网页服务定义一个标签名称,用于分类。
    描述:对你的这个网页服务进行一个备注描述
    文档根目录:选择你需要部署的home页/index页文件夹(选择文件夹即可)
    然后点击下一步

    演示添加的Home页,文档根目录则选择到noise-homepageV1.4上面即可。

  5. 点击新增

  6. 点击确定

  7. 添加成功

通过端口方式访问

  1. 使用此方式的好处是指定了端口,方便我们进行映射服务,只需要将端口绑定到其他网络服务上,即可进行对外访问。

  2. 点击网络门户--新增

  3. 选择网页服务门户

  4. 服务:选择刚才创建的网页服务
    门户类型:基于端口
    端口:自行选择http、https这些,演示只使用http协议,设置一个空闲的端口。
    然后点击新增

  5. 创建完成,点击跳转访问。

  6. 访问成功

通过别名进行访问

  1. 此方式将通过IP/域名后的自定义名称进行访问,无需使用端口。

  2. 点击网络门户--新增

  3. 选择网页服务门户

  4. 服务:选择刚才创建的网页服务
    门户类型:别名门户
    别名:随意输入一个
    然后点击新增

  5. 添加完成,点击跳转访问。

  6. 访问成功,默认是HTTPS协议。

通过自定义网站名称(可加端口)进行访问

  1. 此方式将通过自定义网站名称(可加端口)进行访问,无需使用端口。
    适合局域网内创建网站,纯内部网站。

  2. 点击网络门户--新增

  3. 选择网页服务门户

  4. 服务:选择刚才创建的网页服务
    门户类型:基于名称
    主机名:自定义一个任意英文/英文+数字的名称(不可使用域名!)
    端口:默认勾选80/443端口(你也可以使用其他的端口)
    然后点击应用

  5. 创建完成,点击跳转访问测试。

  6. 访问成功

修改NOISE主页配置

安装文本工具

  1. 群晖套件中心安装文本编辑器套件

修改NOISE主页显示配置

  1. 打开你使用的NOISE文件所在的文件夹,点击选中index.html文件,右键选择用文本编辑器打开。
    (你用哪个主题的,就进哪个文件夹,演示使用的是home的。)

  2. 按照文末的官方说明修改后点击保存即可。
    修改很简单,按个人所需去修改代码内的文字即可。

项目地址

功德+1(狗子).gif

👇👇👇