跳到主要内容

网站导航维护指南

概述​

本站的网站导航页面用于收藏常用网站和工具，支持分类筛选、响应式设计和深色/浅色主题切换。

如何添加书签​

1. 编辑书签数据文件​

书签数据存储在 src/pages/bookmarks.js 文件中，找到 bookmarksData 数组：

const bookmarksData = [
  {
    name: '网站名称',
    description: '网站简短描述',
    url: 'https://example.com',
    category: '分类名称',
    icon: '📚',  // emoji 图标
    isPinned: false,
    isStarred: false
  },
  // 添加更多书签...
];

2. 添加新书签​

在 bookmarksData 数组中添加新的对象，每个书签需要包含以下字段：

  • name (必填): 网站名称
  • description (必填): 网站简短描述（建议 50 字以内）
  • url (必填): 网站链接
  • category (必填): 分类名称
  • icon (必填): emoji 图标，用于视觉区分
  • isPinned (可选): 是否置顶，true 时优先展示
  • isStarred (可选): 是否星标推荐，true 时标题旁显示星标

3. 添加新分类​

如果需要添加新的分类，直接在书签数据中使用新的 category 值即可，分类会自动生成。

4. 示例​

添加一个开发工具书签：

{
  name: 'VS Code',
  description: '强大的代码编辑器',
  url: 'https://code.visualstudio.com/',
  category: '开发工具',
  icon: '💻',
  isPinned: false,
  isStarred: true
}

网站导航页面访问​

网站导航页面路径：/bookmarks

导航栏中会自动显示"📑导航"入口，点击即可访问。

设计特点​

  • 响应式设计: 自动适配桌面、平板、手机等不同设备
  • 主题适配: 支持深色/浅色主题，自动切换样式
  • 分类筛选: 点击分类标签可快速筛选书签
  • 统一排序: 全部和分类视图都会按置顶、星标优先展示
  • 卡片布局: 居中显示的网格布局，美观大方
  • 图标展示: 每个书签都有 emoji 图标，便于识别
  • 置顶高亮: 置顶卡片会显示“置顶”标签
  • 星标推荐: 星标书签会在标题旁显示星标
  • 新标签页打开: 点击书签在新标签页打开，不影响当前浏览

推荐的分类​

以下是常用的分类，你可以根据自己的需求调整：

  • 学习资源: 教程、文档、学习平台
  • 开发工具: 代码编辑器、版本控制、调试工具
  • 技术社区: 开发者社区、问答平台
  • 设计资源: 设计工具、灵感网站、素材库
  • AI 工具: 人工智能、机器学习相关工具
  • 实用工具: 在线工具、转换器、压缩工具
  • 文档参考: API 文档、技术规范
  • 媒体资源: 图片、视频、音频资源

图标选择建议​

使用 emoji 图标可以让导航更直观，以下是一些常用的图标：

  • 📚 - 文档、教程
  • 🎓 - 学习、教育
  • 💻 - 编程、开发
  • 🔧 - 工具、技术
  • 🎨 - 设计、创意
  • 🤖 - AI、人工智能
  • 📦 - 工具包、资源
  • 🔍 - 搜索、查找
  • 💡 - 想法、灵感
  • 🚀 - 启动、快速
  • 💎 - 珍贵、优质
  • ✨ - 特性、亮点

排序规则​

页面中的“全部”视图和分类视图都会执行统一排序，优先级如下：

  1. isPinned: true
  2. isStarred: true
  3. 其余项目保持原有顺序

这意味着：

  • 置顶书签会优先排到最前
  • 星标书签会比普通书签更靠前
  • 如果优先级一致，则保持原始书写顺序

注意事项​

  1. 链接有效性: 定期检查书签链接是否有效
  2. 内容质量: 只添加有价值和高质量的书签
  3. 分类合理: 确保分类名称准确反映网站性质
  4. 描述简洁: 描述文字尽量简短，一般不超过 50 字
  5. HTTPS: 优先使用 HTTPS 协议的链接
  6. 图标选择: 选择与网站内容相关的 emoji 图标
  7. 数量控制: 不要添加过多书签，保持页面整洁

与友链的区别​

特性友链 (/friends)网站导航 (/bookmarks)
用途展示个人好友的网站收藏常用工具网站
目标社交、展示实用、工具
分类技术博客、学习资源、个人主页学习资源、开发工具、技术社区、设计资源、AI 工具、实用工具
样式简洁卡片设计带图标的卡片设计
图标无每个书签都有 emoji 图标
打开方式当前页面打开新标签页打开

常见问题​

Q: 为什么我的书签没有显示？​

A: 请检查：

  • bookmarksData 数组中的数据格式是否正确
  • URL 是否以 http:// 或 https:// 开头
  • 所有必填字段是否都已填写

Q: 如何删除书签？​

A: 直接在 bookmarksData 数组中删除对应的对象即可

Q: 如何修改书签顺序？​

A: 现在页面会优先按以下字段排序：

  • isPinned
  • isStarred

如果这些字段相同，再按 bookmarksData 中的原始书写顺序展示。也就是说：

  • 想固定排到前面，用 isPinned: true
  • 想作为推荐但不必置顶，用 isStarred: true
  • 普通同级项目之间，才通过数组中的先后顺序控制

Q: 分类太多怎么办？​

A: 分类标签支持横向滚动，用户可以左右滑动查看所有分类

Q: 如何更改页面标题？​

A: 在 src/pages/bookmarks.js 文件中修改 Layout 组件的 title 属性

Q: 如何修改页面描述？​

A: 在 src/pages/bookmarks.js 文件中修改 Layout 组件的 description 属性

样式定制​

如果需要自定义样式，可以编辑 src/pages/bookmarks.module.css 文件：

  • 卡片宽度: 修改 .bookmarksGrid 中的 minmax(300px, 1fr)
  • 卡片间距: 修改 .bookmarksGrid 中的 gap: 1.5rem
  • 卡片颜色: 修改 .bookmarkCard 中的背景色和边框色
  • 悬停效果: 修改 .bookmarkCard:hover 中的样式
  • 主题颜色: 修改深色主题相关的样式

最佳实践​

  1. 定期整理: 每月检查一次书签，删除失效链接
  2. 分类清晰: 使用明确的分类名称，便于查找
  3. 图标统一: 同一分类使用风格相似的图标
  4. 描述准确: 描述应该简明扼要地说明网站用途
  5. 质量优先: 宁缺毋滥，只收藏真正有用的网站

更新日志​

  • 2025-04-26: 初始版本，支持基础书签功能
  • 支持分类筛选
  • 支持响应式设计
  • 支持深色/浅色主题
  • 支持图标展示
  • 支持新标签页打开

首页文案维护​

如果需要修改首页个人信息展示，请编辑 src/pages/index.js：

删除 PERSONAL LANDING PAGE​

该英文文案原先位于首页头像右侧标题区，对应结构如下：

<div className={styles.identityText}>
  <span className={styles.eyebrow}>PERSONAL LANDING PAGE</span>
  <h1 className={styles.name}>ZERO_POINT_NINE</h1>
  <p className={styles.tagline}>叹隙中驹，石中火，梦中身</p>
</div>

如果不需要这句英文，直接删除这一行即可：

<span className={styles.eyebrow}>PERSONAL LANDING PAGE</span>

这样会保留头像、昵称和身份信息，不影响其余首页布局。

删除“通信工程 / 大三”但保留“身份”对象​

首页右侧资料卡片的数据在 profileHighlightList 数组里维护，例如：

const profileHighlightList = [
  {
    label: '身份',
    value: '学生 / 折腾爱好者',
  },
]

如果你想保留“身份”这一项，但替换展示内容，只需要修改 value。 如果你想彻底隐藏这一项，则删除对应整个对象即可。

文档展示顺序维护​

当前文档侧边栏使用 Docusaurus 自动排序，也就是按目录结构自动生成，不需要额外维护排序脚本。

自动排序的维护方式​

  1. 新增文章时，直接把 Markdown 文件放进对应目录
  2. 新增分类时，直接创建新的文件夹
  3. 侧边栏会根据 docs/ 目录结构自动更新
  4. 不需要额外修改 sidebars.js 之外的排序配置

建议做法​

  • 想让文章归到同一类，就放进同一个文件夹
  • 想让分类层级更清晰，就用目录来表达结构
  • 文件名尽量有语义，方便后续自己维护和查找

当前配置说明​

sidebars.js 目前使用的是自动生成配置：

tutorialSidebar: [{ type: 'autogenerated', dirName: '.' }]

这意味着后续添加新文章和新文件夹时，维护成本最低。

相关文件​

  • src/pages/bookmarks.js - 书签数据、置顶/星标逻辑和页面渲染
  • src/pages/bookmarks.module.css - 页面样式（含置顶与星标视觉效果）
  • src/pages/index.js - 首页个人信息文案
  • src/css/custom.css - 全站样式（含 footer Contact 横向展示）
  • sidebars.js - 文档侧边栏自动生成配置
  • docusaurus.config.js - Docusaurus 主配置

技术支持​

如果在使用过程中遇到问题，请：

  1. 检查本文档的常见问题部分
  2. 查看浏览器控制台是否有错误信息
  3. 确认所有文件路径和数据格式正确