Website Bookmarks

一个面向日常工作的轻量级网址收藏夹，主要用于集中整理 网站建设、网站维护、SEO、开发工具、设计工具、网络服务、程序员工具箱、域名主机、AI 人工智能 等常用网站。

项目基于 HTML + CSS + 原生 JavaScript 开发，不依赖数据库、后台系统、构建工具或第三方前端框架。部署到 GitHub Pages 后即可作为个人网址导航页长期使用。

核心设计原则：页面功能保持简单，日常维护只需要修改 index.html 中的 websites 数组。

---

项目特点

• 纯静态页面，无服务器端依赖
• 无需数据库、登录系统或后台管理
• 所有网址数据集中维护在 index.html
• 自动根据 category 字段生成分类
• 自动生成顶部分类导航
• 点击分类可平滑定位到对应区域
• 自动统计网址总数与分类数量
• 自动显示每个分类包含的网址数量
• 卡片仅显示“网站名称 + 一行简介”，页面紧凑清晰
• 简介超出一行自动省略，不影响整体布局
• 整张卡片均可点击，并在新标签页打开目标网站
• 桌面、平板、手机均可自适应显示
• 不使用搜索、图标、Tags 等额外功能，减少长期维护成本
• 可直接部署到 GitHub Pages

---

当前版本

V1.0.2

当前示例数据共包含：

• 59 个常用网站
• 9 个分类

分类包括：

分类	数量	主要用途
网站建设	6	CMS、电商建站、可视化建站
网站维护	6	WordPress 管理、安全、监控
SEO	7	收录、关键词、性能、网站审计
开发工具	6	代码托管、开发文档、在线调试
设计工具	7	UI、配色、图片压缩、素材
网络服务	6	DNS、CDN、SSL、网络检测
程序员工具箱	7	JSON、正则、Diff、Cron 等
域名主机	7	域名注册、主机、云服务器
AI 人工智能	7	AI 对话、搜索、编程辅助

这些网址用于展示完整页面效果，也可以直接作为日常工具使用。后续可按实际需要自由删除、替换或扩充。

---

项目结构

website-bookmarks/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── app.js
├── README.md
└── LICENSE

各文件职责：

文件	作用	日常是否需要修改
index.html	页面结构及全部网址数据	是，日常主要维护这里
css/style.css	页面布局、卡片和响应式样式	仅调整视觉时修改
js/app.js	分类、统计和卡片渲染逻辑	通常无需修改
README.md	项目说明与维护文档	项目更新时修改
LICENSE	开源许可证	通常无需修改

这种结构将“经常变化的网址数据”与“相对稳定的功能代码”分开，方便长期维护。

---

快速开始

1. 下载项目

将项目文件下载到本地后，保持目录结构不变。

2. 本地预览

直接双击打开：

index.html

即可在浏览器中查看页面。

项目不依赖 PHP、Node.js、数据库或本地服务器，因此无需安装额外环境。

---

日常维护

添加一个网址

打开：

index.html

找到：

const websites = [
    // 网站数据
];

在对应分类中加入一个对象即可：

{
    name: "GitHub",
    url: "https://github.com/",
    category: "开发工具",
    description: "代码托管与项目协作平台"
},

保存文件并刷新页面，新网址会自动出现。

---

字段说明

每个网址只包含 4 个字段：

字段	是否必填	说明	示例
name	是	网站名称	GitHub
url	是	完整网址，建议使用 HTTPS	https://github.com/
category	是	所属分类	开发工具
description	是	简短的一行说明	代码托管与项目协作平台

推荐保持说明简短，例如：

代码托管与项目协作平台
WordPress 防火墙与安全扫描
网页速度与核心性能指标检测
DNS、CDN 与网站安全服务

页面只显示一行简介，内容过长会自动显示省略号。

---

删除网址

直接删除对应对象即可，例如：

{
    name: "Example",
    url: "https://example.com/",
    category: "开发工具",
    description: "示例网站"
},

不需要修改其他代码。

---

修改网址

直接修改对象中的字段：

{
    name: "新的名称",
    url: "https://example.com/",
    category: "新的分类",
    description: "新的简短说明"
},

页面会自动按照新的数据重新生成。

---

分类管理

新增分类

项目没有单独维护分类配置。

如果需要新增一个分类，只需要给网址填写新的 category：

{
    name: "Example Tool",
    url: "https://example.com/",
    category: "图片工具",
    description: "在线图片处理工具"
},

页面会自动生成：

图片工具

以及对应的顶部分类导航。

这意味着无需额外修改 HTML、CSS 或 JavaScript 渲染逻辑。

---

分类排序规则

分类顺序取决于该分类 第一次出现在 websites 数组中的位置。

例如：

const websites = [
    {
        name: "ChatGPT",
        url: "https://chatgpt.com/",
        category: "AI 人工智能",
        description: "AI 对话与工作助手"
    },
    {
        name: "GitHub",
        url: "https://github.com/",
        category: "开发工具",
        description: "代码托管与项目协作平台"
    }
];

页面分类顺序就是：

AI 人工智能
开发工具

如果希望调整分类顺序，只需要移动对应分类整组数据的位置。

---

分类内部排序

同一个分类中的网址，会按照它们在数组中的先后顺序显示。

因此如果希望某个常用网站排在最前面，只需要把它移动到该分类数据的顶部。

无需添加额外的 order 或 sort 字段。

---

推荐的数据整理方式

为了后续维护方便，建议按照分类分组，并保留注释：

const websites = [

    // =========================
    // 网站建设
    // =========================

    {
        name: "WordPress.org",
        url: "https://wordpress.org/",
        category: "网站建设",
        description: "开源网站内容管理系统"
    },

    {
        name: "WooCommerce",
        url: "https://woocommerce.com/",
        category: "网站建设",
        description: "WordPress 电商建站平台"
    },


    // =========================
    // SEO
    // =========================

    {
        name: "Google Search Console",
        url: "https://search.google.com/search-console/",
        category: "SEO",
        description: "Google 搜索收录与流量分析"
    }

];

这样即使网址数量逐渐增加到几十个甚至几百个，也能快速定位和维护。

---

页面布局

页面采用紧凑型卡片布局。

桌面端内容区最大宽度约为：

1200px

卡片布局大致为：

桌面端       4 列
中等屏幕     3 列
平板         2 列
手机         1 列

每张卡片只显示：

网站名称
一行简介

不显示网址、Icon 或其他冗余信息，以保证页面整体紧凑。

---

修改页面名称

如果需要修改浏览器标题，编辑 index.html：

<title>我的网址收藏夹</title>

如果需要修改页面主标题，找到对应的：

<h1>我的网址收藏夹</h1>

修改文字即可。

---

样式调整

页面视觉样式统一位于：

css/style.css

例如可以调整：

• 页面最大宽度
• 卡片高度
• 卡片间距
• 字体大小
• 圆角
• 边框
• Hover 效果
• 分类之间的间距
• 移动端列数

如果只是添加、删除或修改网址，不要修改 style.css。

---

功能逻辑

页面渲染逻辑位于：

js/app.js

主要负责：

1. 读取 websites 数据
2. 自动提取分类
3. 统计网址总数
4. 统计分类数量
5. 生成顶部分类导航
6. 生成分类标题
7. 生成网址卡片
8. 实现分类平滑定位

正常使用过程中无需修改该文件。

只有在需要改变页面功能逻辑时，才建议编辑 app.js。

---

部署到 GitHub Pages

1. 创建 GitHub 仓库

推荐仓库名称：

website-bookmarks

将项目全部文件上传到仓库根目录。

例如：

website-bookmarks/
├── index.html
├── css/
├── js/
├── README.md
└── LICENSE

---

2. 开启 GitHub Pages

进入 GitHub 仓库：

Settings
→ Pages

在 Build and deployment 中设置：

Source: Deploy from a branch
Branch: main
Folder: / (root)

保存即可。

GitHub Pages 发布完成后，访问地址通常类似：

https://你的用户名.github.io/website-bookmarks/

---

3. 后续更新

以后新增网址时，只需要：

修改 index.html
→ Commit
→ Push 到 GitHub

GitHub Pages 会自动重新发布，无需重新部署项目。

---

建议的维护流程

日常维护建议保持简单：

1. 打开 index.html
2. 找到 websites 数组
3. 新增 / 删除 / 修改网址
4. 本地打开 index.html 检查
5. 提交到 GitHub
6. GitHub Pages 自动更新

如果只是维护收藏网址，不建议修改 CSS 和 JS 功能代码。

---

修改时的注意事项

1. URL 使用完整地址

推荐：

url: "https://github.com/"

不推荐：

url: "github.com"

---

2. 字符串使用引号

正确：

name: "GitHub"

错误：

name: GitHub

---

3. 注意对象之间的逗号

多个网址对象之间需要使用逗号：

{
    name: "GitHub",
    url: "https://github.com/",
    category: "开发工具",
    description: "代码托管与项目协作平台"
},
{
    name: "GitLab",
    url: "https://gitlab.com/",
    category: "开发工具",
    description: "代码仓库与 DevOps 协作平台"
},

如果 JavaScript 语法错误，页面可能无法正常生成卡片。

---

4. 分类名称保持一致

例如：

开发工具

不要同时出现：

开发工具
开发类工具
开发 工具

因为系统会把它们识别为不同分类。

---

5. Description 尽量保持简短

推荐控制在一句话以内。

页面虽然会自动隐藏超出内容，但过长的说明会降低数据本身的可维护性。

---

设计原则

本项目不追求功能数量，而更注重长期使用和维护成本。

因此 V1.x 阶段默认不加入：

• 搜索系统
• 在线新增 / 编辑 / 删除
• 登录系统
• 后台管理
• 数据库
• 用户账户
• 云同步
• Tags
• 网站图标
• 点击统计
• 拖拽排序
• 前端框架
• Node.js 构建流程

原因很简单：这个项目本质上是一个 个人常用网址导航页。

只要保持：

数据简单
结构稳定
维护方便
部署可靠

就能长期使用，而无需把一个轻量工具逐渐变成需要持续维护的复杂系统。

---

后续扩展建议

如果未来网址数量明显增加，可以优先考虑以下低成本扩展：

方案一：继续使用当前结构

适合几十到两三百个网址。

优点：

• 最简单
• 无额外依赖
• 数据和项目一起版本管理
• GitHub 修改记录清晰

方案二：将网址数据独立为 JSON

只有当网址数量非常多，或需要由其他程序生成数据时再考虑。

例如：

data/websites.json

但这会增加文件数量和数据加载逻辑，因此当前版本没有采用。

方案三：增加后台或数据库

只有在出现以下需求时才值得考虑：

• 多人共同维护
• 在线新增网址
• 用户登录
• 权限管理
• 收藏同步
• 大量动态数据

对于普通个人网址收藏夹，不建议过早增加这些功能。

---

版本记录

V1.0.2

• 扩充常用网址示例数据
• 当前包含 59 个网址、9 个分类
• 覆盖网站建设、维护、SEO、开发、设计、网络、域名主机和 AI 等方向
• 保持原有轻量架构与数据维护方式不变

V1.0.1

• 缩小网址卡片尺寸
• 优化页面整体间距
• 卡片改为紧凑型布局
• 移除网址文字显示
• 移除额外跳转图标
• 卡片只显示网站名称和一行简介
• 超出内容自动省略

V1.0.0

• 建立基础网址收藏夹页面
• 支持自动分类
• 支持分类导航
• 支持分类数量统计
• 支持网址数量统计
• 支持响应式卡片布局
• 支持 GitHub Pages 部署

---

License

本项目采用 MIT License。

详情请查看：

LICENSE

---

项目定位总结

Website Bookmarks 的目标不是做一个复杂的“导航网站系统”，而是提供一个：

简单、快速、清晰、低维护成本，并且可以长期托管在 GitHub Pages 上的个人网址收藏夹。

对于日常使用，绝大多数情况下只需要维护：

const websites = [ ... ];

其余代码可以长期保持不变。