青禾动态地址发布页源码+部署教程

青禾动态网址发布页 | 功能介绍 & 部署教程

这是一个轻量级、无需数据库、功能全面的动态网址发布页系统。它允许您通过一个美观、现代化的后台
轻松管理一个带有随机背景、实时状态检测的网址导航前台页面。

# 青禾动态网址发布页系统文档

## 一、核心功能概览

### (一) 前台页面 (index.php)

*   **动态内容展示**: 网站的标题、简介以及所有的导航卡片都由后台动态生成，告别手动修改HTML。
*   **实时状态检测**: 自动检测每个网站的在线状态（在线/离线（通过访问网站的`/favicon.ico`））和大致延
迟，并以不同颜色的指示灯展示，一目了然。
*   **随机背景图**: 每次刷新页面，都会从壁纸库中随机加载一张图片作为背景，保持新鲜感。
*   **自定义字体**: 可在后台一键开启或关闭自定义字体（`1.woff2`），在个性和兼容性之间自由切换。
*   **响应式布局**: 页面在桌面、平板和手机上都能良好地展示，自动调整每行显示的卡片数量。
*   **安全保护**: 前台页面依赖一个核心JS文件 (`core.js`)，如果该文件被恶意删除，页面将无法加载，并显示错误提示。

### (二) 后台管理系统 (admin.php)

*   **安全密码登录**: 通过访问特定URL (`?admin`) 进入后台，需要输入预设密码才能登录。
*   **美化界面**: 后台登录页和管理页均采用与前台一致的随机背景图和毛玻璃效果，视觉体验统一且舒适。
*   **全局信息配置**:
    *   自由修改网站的主标题和副标题。
    *   一键开启/关闭前台的自定义字体加载。
*   **强大的网站管理**:
    *   以列表形式清晰展示所有已添加的网站。
    *   添加新网站，包括名称、简介和URL。
    *   编辑任意一个已存在网站的全部信息。
    *   删除不再需要的网站。
*   **灵活的图标 (Logo) 管理**:
    *   **自动抓取**: 添加或编辑网站时，若不上传图标，系统会自动尝试抓取目标网站的 `favicon.ico`。
    *   **手动上传**: 支持手动上传 `.ico` 或 `.png` 格式的图片作为网站的自定义图标，拥有最高优先级。
*   **完善的壁纸库管理**:
    *   **列表展示与预览**: 自动扫描 `images` 文件夹，展示所有符合命名规范的壁纸图片。
    *   **智能折叠**: 当壁纸数量超过6张时，列表会自动折叠，点击“展开全部”按钮可查看所有壁纸，保持界面整洁。
    *   **轻松上传**: 提供壁纸上传功能，您只需选择本地的 `.jpg` 图片，系统会自动将其重命名为下一个序
号（如 `background30.jpg`）并保存，无需手动改名。

---

## 二、部署教程

部署本系统非常简单，只需要您的服务器支持 PHP 即可，无需数据库。

### (一) 文件结构

请确保您的服务器网站根目录下包含以下文件和文件夹：

```plaintext
/
|-- index.php         # 核心入口文件（前台页面）
|-- admin.php         # 后台管理系统文件
|-- core.js           # JavaScript文件
|-- data.json         # 数据存储文件
|-- 1.woff2           # (可选) 自定义字体文件
|-- /images/          # 存放背景图的文件夹
|   |-- background1.jpg
|   |-- background2.jpg
|   |-- ...
|
|-- /icons/           # 存放网站图标的文件夹 (系统自动创建和管理)

部署步骤

1. 上传文件: 将上述所有文件（index.php, admin.php, core.js, data.json）和文件夹（images）上传到您的服务器网站根目录。
2. 设置后台密码:

   • 打开 admin.php 文件。
   • 找到这一行：define("ADMIN_PASSWORD", "123456");
   • 将 "123456" 修改为您自己的复杂密码，并保存文件。

3. 检查文件夹权限:

   • 请确保 images 和 icons 这两个文件夹对于PHP脚本是可写的。通常，您可以将它们的权限设置为 755 或 775。这是必需的，否则后台将无法上传壁纸和保存网站图标。

4. 准备壁纸和字体:

   • 将您喜欢的 .jpg 格式的背景图片，按 background1.jpg, background2.jpg, background3.jpg… 的顺序命名，然后放入 images 文件夹。
   • 如果您希望使用自定义字体，请将字体文件 1.woff2 放在网站根目录。

(三) 开始使用

• 访问前台: 直接访问您的网站域名，例如 https://www.yourdomain.com 。
• 访问后台: 访问 https://www.yourdomain.com/index.php?admin ，输入您设置的密码即可登录并开始管理您的发布页。

下载源码（包含壁纸库）：