diff --git a/HomePage/bookmarks/README.md b/HomePage/bookmarks/README.md new file mode 100755 index 0000000..969d840 --- /dev/null +++ b/HomePage/bookmarks/README.md @@ -0,0 +1,134 @@ +# MeNav 书签目录 + +## 目录 + +- [目录概述](#目录概述) +- [书签导入功能](#书签导入功能) +- [配置加载优先级（完全替换）](#配置加载优先级完全替换) +- [MarksVault 扩展集成](#marksvault-扩展集成) +- [书签导入流程](#书签导入流程) +- [确定性输出](#确定性输出) +- [支持的浏览器](#支持的浏览器) +- [书签格式要求](#书签格式要求) +- [文件处理机制](#文件处理机制) + +## 目录概述 + +`bookmarks` 目录是 MeNav 项目中用于存放浏览器导出的书签文件的专用目录。该目录与书签导入功能直接关联，用于自动将浏览器书签转换为 MeNav 配置文件，从而快速生成个人导航站点。 + +## 书签导入功能 + +书签导入功能允许用户： + +- 从浏览器导出书签为 HTML 文件 +- 将书签文件放入此目录 +- 通过自动处理将书签转换为网站配置 +- 无需手动编辑即可批量导入网站链接 + +这一功能极大简化了网站内容的初始设置过程，特别适合需要迁移大量书签的用户。 + +## 配置加载优先级（完全替换） + +书签页配置同样遵循项目的“完全替换”策略：系统只会选择一套配置目录加载，不会把 `user` 与 `_default` 混合合并。 + +- 若存在 `config/user/`：书签页配置应位于 `config/user/pages/bookmarks.yml`（通常由导入脚本生成） +- 否则：使用 `config/_default/pages/bookmarks.yml`（默认示例） + +> 提示：一旦创建 `config/user/`，`config/_default/` 会被完全忽略，因此不要指望从默认配置“兜底补齐缺失项”。 + +## MarksVault 扩展集成 + +[MarksVault](https://github.com/rbetree/MarksVault) 浏览器扩展可与 MeNav 集成，实现书签自动同步： + +- **一键推送书签**：扩展将书签 HTML 文件推送到仓库的 `bookmarks/` 目录 +- **自动化处理**：GitHub Actions 检测到书签文件后自动运行导入脚本生成配置 +- **自动清理**：处理完成后会删除已导入的 HTML 文件，避免重复处理 + +## 书签导入流程 + +完整的书签导入流程如下： + +1. 在浏览器中导出书签为 HTML 文件 +2. 将导出的书签文件放入 `bookmarks` 目录 +3. 运行书签处理工具： + ```bash + npm run import-bookmarks + ``` + - 若 `config/user/` 不存在，导入脚本会先从 `config/_default/` 初始化一份用户配置（因为配置采用“完全替换”策略，需要完整配置才能正常生成站点）。 + （可选）若希望生成结果保持确定性（便于版本管理，减少时间戳导致的无意义 diff）： + ```bash + MENAV_BOOKMARKS_DETERMINISTIC=1 npm run import-bookmarks + ``` +4. 系统自动解析书签文件内容 +5. 根据书签文件夹结构生成分类 +6. 生成配置文件保存到 `config/user/pages/bookmarks.yml` +7. 构建网站应用新配置： + ```bash + npm run build + ``` + +> **重要说明**：在本地开发中，`npm run dev` 命令**不会**自动处理书签文件。您必须先手动运行 `npm run import-bookmarks` 命令处理书签，然后再运行 `npm run dev` 查看效果。这与 GitHub Actions 中的自动处理流程不同，请务必注意。 + +## 确定性输出 + +默认情况下，导入脚本会在生成的 `bookmarks.yml` 顶部写入时间戳注释，导致每次导入都会产生 diff。 + +若你希望生成结果尽量稳定（只有书签内容变化才产生 diff），可使用环境变量开启确定性输出： + +```bash +MENAV_BOOKMARKS_DETERMINISTIC=1 npm run import-bookmarks +``` + +## 支持的浏览器 + +MeNav 书签导入功能支持从以下浏览器导出的书签文件： + +- **Chrome** - 通过书签管理器导出 +- **Firefox** - 通过书签库导出 +- **Edge** - 通过收藏夹导出 +- **Safari** - 通过书签菜单导出 +- 其他支持标准 HTML 书签格式的浏览器 + +## 书签格式要求 + +导入的书签文件需满足以下要求： + +- 文件格式：HTML（标准网络书签格式） +- 文件编码：UTF-8 +- 文件结构：包含 `
`、`
` 和 `` 标签的标准书签结构 +- 文件大小：建议不超过 5MB（约数千个书签） +- 支持处理位于文件夹内的书签 +- 支持处理不在任何文件夹内的根路径书签（自动归入"根目录书签"分类） +- 空文件夹会被忽略 + +## 文件处理机制 + +书签处理器 (`src/bookmark-processor.js`) 对书签文件进行以下处理： + +1. **解析文件结构**： + - 读取书签 HTML 文件 + - 解析 DOM 结构获取书签层次 + - 提取文件夹和链接信息 + +2. **分类提取**： + - 将书签文件夹转换为网站分类 + - 提取链接URL、标题和添加日期 + +3. **根路径书签处理**： + - **自动分类**：根路径书签会被自动归入名为"根目录书签"的特殊分类 + - **显示位置**：该分类始终位于所有其他分类之前（第一位） + - **图标标识**：使用星标图标（fas fa-star） + - **条件生成**：只有存在根路径书签时才会创建该分类 + - **自动映射**：根路径书签同样支持基于URL的自动图标映射功能 + +4. **图标分配**： + - 根据URL自动匹配合适的 Font Awesome 图标 + - 为每个链接和分类分配图标 + - 当 `icons.mode: favicon` 时，页面通常会优先显示站点 favicon；配置里的 `icon` 主要用于回退显示或在 `icons.mode: manual` 时使用（详见 `config/README.md`） + +5. **配置生成**： + - 创建符合 MeNav 配置格式的 YAML 文件 + - 按层级组织分类和链接 + - 应用自动生成的元数据 + +将书签放入此目录后，您可以立即利用 MeNav 的书签处理功能，快速将书签转化为个性化导航站点。 diff --git a/HomePage/config/README.md b/HomePage/config/README.md new file mode 100755 index 0000000..0c1c106 --- /dev/null +++ b/HomePage/config/README.md @@ -0,0 +1,382 @@ +# MeNav 配置目录 + +## 目录 + +- [目录概述](#目录概述) +- [配置目录结构](#配置目录结构) +- [配置加载机制](#配置加载机制) +- [推荐用法](#推荐用法) +- [模块化配置文件](#模块化配置文件) + - [网站基础配置](#网站基础配置) + - [页面配置](#页面配置) +- [配置详解](#配置详解) + - [site.yml 常用字段](#siteyml-常用字段) + - [pages/ 页面配置](#pages-页面配置) + - [多层级嵌套配置（2-4层）](#多层级嵌套配置2-4层) +- [配置优先级](#配置优先级) +- [配置示例](#配置示例) +- [最佳实践](#最佳实践) + +## 目录概述 + +`config` 目录包含 MeNav 项目的所有配置文件，采用模块化的 YAML 格式组织。这些配置文件定义了网站的内容、结构、布局和功能，是定制个人导航站的核心。 + +## 配置目录结构 + +配置系统采用分层结构，清晰分离默认配置和用户配置： + +``` +config/ +├── _default/ # 默认配置目录 +│ ├── site.yml # 默认网站基础配置（含导航配置） +│ └── pages/ # 默认页面配置 +│ ├── common.yml # 示例：默认首页（navigation 第一项） +│ ├── projects.yml # 项目页 +│ ├── articles.yml # 文章页 +│ └── bookmarks.yml # 书签页 +└── user/ # 用户配置目录（覆盖默认配置） + ├── site.yml # 用户自定义网站配置（含导航配置） + └── pages/ # 用户自定义页面配置 + ├── common.yml # 示例：与 navigation 第一项对应 + └── ... +``` + +## 配置加载机制 + +MeNav 配置系统采用“完全替换”策略（不合并），按以下优先级选择**唯一**的一套配置目录： + +1. 若存在 `config/user/`，则只加载该目录下的配置，并**完全忽略** `config/_default/` +2. 否则加载 `config/_default/` 作为默认配置 + +也就是说：`config/user/` 一旦存在，就需要包含一套完整的配置（例如 `site.yml` 与必要的 `pages/*.yml`），系统不会把缺失部分从默认配置补齐。 + +## 推荐用法 + +为避免文档与配置字段长期不同步，建议按以下方式使用与维护： + +1. **首次使用**：完整复制 `config/_default/` 到 `config/user/`，再按需修改。 +2. **字段与结构的权威参考**： + - 全局配置：[`_default/site.yml`](_default/site.yml) + - 页面配置：[`_default/pages/`](_default/pages/) +3. **多层级嵌套书签示例**：[`_default/pages/bookmarks.yml`](_default/pages/bookmarks.yml)（包含2层、3层、4层结构示例；`subgroups` 可参考下方说明或由导入脚本生成） + +## 模块化配置文件 + +### 网站基础配置 + +`site.yml` 定义网站的基本信息和全局设置： + +- 网站标题、描述和关键词 +- 作者信息和版权声明 +- 字体配置、图标模式等全局设置 +- 全局元数据和站点参数 +- 个人资料和社交媒体链接 +- 导航菜单配置（侧边栏导航项、页面标题和图标、页面顺序和可见性） + +> **注意**：导航配置仅支持写在 `site.yml` 的 `navigation` 字段中。 + +### 页面配置 + +`pages/` 目录下的配置文件定义各个页面的内容： + +- `common.yml`: 示例首页（本质上是普通页面；首页由 navigation 第一项决定，不要求必须叫 home） +- `projects.yml`: 项目展示配置 +- `articles.yml`: 文章列表配置 +- `bookmarks.yml`: 书签页面配置 +- 其他自定义页面配置（可按需新增/删除；与 `site.yml -> navigation[].id` 对应） + +## 配置详解 + +本章节用于补齐“怎么配才是对的”这类细节说明。为了避免示例长期过时，字段与结构的权威参考始终以默认配置为准： + +- 全局配置：[`_default/site.yml`](_default/site.yml) +- 页面配置：[`_default/pages/`](_default/pages/) + +### site.yml 常用字段 + +`site.yml` 中字段较多，以下是常用项的解释与注意点（完整字段请以默认配置为准）： + +1. **基础信息** + - `title`：站点标题 + - `description`：站点描述（SEO/分享） + - `author`：作者/署名 + - `favicon`、`logo_text`：站点图标与左上角 Logo 文本 + +2. **图标模式（隐私相关）** + - `icons.mode: favicon | manual` + - `favicon`：会请求第三方服务（Google）获取站点 favicon，失败自动回退到 Font Awesome 图标 + - `manual`：完全使用手动 Font Awesome 图标，不发起外部请求（适合内网/离线/隐私敏感场景） + - `icons.region: com | cn`（默认 `com`） + - `com`：优先使用 `gstatic.com`（国际版），失败后回退到 `gstatic.cn`（中国版） + - `cn`：优先使用 `gstatic.cn`（中国版），失败后回退到 `gstatic.com`（国际版） + - 说明：如果你在中国大陆且访问 gstatic.com 较慢，建议设置为 `cn` 以提升图标加载速度 + - 站点级覆盖（可选，写在 `pages/*.yml` 的每个 `sites[]` 节点上）： + - `faviconUrl`：为单个站点指定图标链接（可远程或本地相对路径；本地建议以 `assets/` 开头，构建会复制到 `dist/` 同路径），优先级最高 + - `forceIconMode: favicon | manual`：强制该站点使用指定模式（不设置则跟随全局 `icons.mode`） + - 优先级：`faviconUrl` > `forceIconMode` > 全局 `icons.mode` + - 示例： + ```yml + sites: + - name: 'Ant Design' + url: 'https://ant.design/' + icon: 'fas fa-th' + forceIconMode: manual # 强制使用手动图标，绕过 favicon 默认"地球"图标 + - name: 'Example' + url: 'https://example.com/' + faviconUrl: 'https://example.com/favicon.png' # 单站点自定义 favicon + ``` + +3. **安全策略（链接白名单）** + - `security.allowedSchemes`：允许在页面中渲染为可点击链接的 URL scheme 白名单 + - 默认仅允许：`http/https/mailto/tel` + 所有相对链接（`#`、`/`、`./`、`../`、`?` 开头） + - 其他 scheme 会被安全降级为 `#` 并输出告警；如需支持 `obsidian://`、`vscode://` 等协议，可在此显式放行 + +4. **字体** + - `fonts`：单一字体配置项，用于设置全站基础字体（`body` 等） + - 支持 `source: css | google | system`（分别表示第三方 CSS、Google Fonts、系统字体） + - 可选 `fonts.preload: true`：用 `preload + onload` 的方式非阻塞加载外链字体 CSS（更利于首屏性能） + - 首页副标题（渐变发光样式）使用全站基础字体（跟随 `fonts` 配置） + +5. **主题（默认明暗模式）** + - `theme.mode: dark | light | system` + - `dark/light`：首屏默认主题；用户点击按钮切换后会写入 localStorage 并覆盖该默认值 + - `system`：跟随系统 `prefers-color-scheme`；用户手动切换后同样会写入 localStorage 并停止跟随 + +6. **顶部欢迎信息与社交链接** + - `profile`：首页顶部欢迎信息 + - `social`：侧边栏底部社交链接 + - `profile.title` / `profile.subtitle`：分别对应首页顶部主标题与副标题 + +7. **导航** + - `navigation[]`：页面入口列表，`id` 需唯一，并与 `pages/.yml` 对应（例如 `id: common` 对应 `pages/common.yml`） + - 默认首页由 `navigation` 数组顺序决定：**第一项即为首页（默认打开页）**，不再使用 `active` 字段 + - 图标使用 Font Awesome 类名字符串（例如 `fas fa-home`、`fab fa-github`） + - 导航显示顺序与数组顺序一致，可通过调整数组顺序改变导航顺序 + +8. **RSS（articles Phase 2）** + - `rss.*`：仅用于 `npm run sync-articles`（联网抓取 RSS/Atom 并写入缓存） + - `npm run build` 默认不联网；无缓存时 `articles` 页面会回退到 Phase 1 的站点入口展示 + - articles 页面会按 `articles.yml` 的分类进行聚合展示：某分类下配置的来源站点，其文章会显示在该分类下 + - 抓取条数默认：每个来源站点抓取最新 8 篇（可通过 `site.yml -> rss.articles.perSite` 或 `RSS_ARTICLES_PER_SITE` 调整） + - 默认配置已将 `rss.cacheDir` 设为 `dev`（仓库默认 gitignore），避免误提交缓存文件；可按需改为自定义目录 + - GitHub Pages 部署工作流会在构建前自动执行 `npm run sync-articles`，并支持定时触发（默认每天 UTC 02:00；可在 `.github/workflows/deploy.yml` 调整） + +9. **GitHub（projects 热力图，可选）** + - `github.username`：你的 GitHub 用户名（用于 projects 页面标题栏右侧贡献热力图） + - `github.heatmapColor`：热力图主题色（不带 `#`，例如 `339af0`） + - `github.cacheDir`：projects 仓库元信息缓存目录（默认 `dev`，仓库默认 gitignore） + - projects 仓库统计信息（language/stars/forks）由 `npm run sync-projects` 自动抓取并写入缓存；`npm run build` 默认不联网 + - GitHub Pages 部署工作流会在构建前自动执行 `npm run sync-projects`，并支持定时触发（默认每天 UTC 02:00；可在 `.github/workflows/deploy.yml` 调整） + +### pages/ 页面配置 + +页面配置位于 `pages/*.yml`，每个文件对应一个页面内容，文件名与导航 `id` 对应： + +- `pages/common.yml`：示例首页（通常是 `categories -> sites`） +- `pages/projects.yml` / `articles.yml`：示例页面（可按需删改） +- `pages/bookmarks.yml`：书签页（通常由导入脚本生成，也可以手动维护） + +> 提示：自定义页面时，先在 `site.yml` 的 `navigation` 中增加一个 `id`，再创建同名的 `pages/.yml`。 +> +> 支持“可删除”：如果 `navigation` 中存在某个页面 `id`，但 `pages/.yml` 不存在，构建仍会生成该页面（标题回退为导航名称、分类为空、模板默认使用通用 `page`）。 +> +> 站点描述建议简洁（例如不超过 30 个字符），以保证卡片展示更美观。 + +#### 通用 page 页面配置（推荐，用于 friends 等普通页面） + +对不需要特殊渲染的页面（例如“友链/朋友”页），建议使用通用 `page` 模板，并保持 `categories -> sites`（可选更深层级）： + +```yaml +title: 示例页面 +subtitle: 示例副标题 +template: page + +categories: + - name: 示例分类 + icon: fas fa-folder + sites: + - name: 示例站点 + url: https://example.com + icon: fas fa-link + description: 示例描述 +``` + +兼容说明： + +- 若历史配置仍使用顶层 `sites`（旧结构），系统会自动映射为一个分类容器以保持页面结构一致（当前仅对 friends/articles 提供该兼容）。 + +#### 内容页（template: content） + +内容页用于承载“关于 / 帮助 / 使用说明 / 更新日志 / 迁移指南 / 隐私说明”等纯文本内容。 + +配置要点： + +- `template: content` +- `content.file`：指向本地 Markdown 文件路径（推荐放在 `content/` 下） +- Markdown 会在**构建期**渲染为 HTML（不是运行时 fetch） +- 当前约束： + - 禁止 raw HTML（避免 XSS） + - 禁止图片（`![]()` 不会输出 ``；本期不支持图片/附件） + - 链接会按 URL scheme 白名单策略处理： + - 默认允许：`http/https/mailto/tel` + 所有相对链接（`#`、`/`、`./`、`../`、`?` 开头） + - 其他 scheme 会被安全降级为 `#`（可用 `site.yml -> security.allowedSchemes` 显式放行） + +示例（以 about 页面为例）： + +```yml +# config/user/pages/about.yml +title: 关于 +subtitle: 项目说明 +template: content + +content: + file: content/about.md +``` + +对应内容文件： + +```text +content/about.md +``` + +### 多层级嵌套配置（2-4层） + +书签与分类支持 2~4 层嵌套，用于更好组织大量站点。建议直接参考默认示例： + +- 多层级结构示例：[`_default/pages/bookmarks.yml`](_default/pages/bookmarks.yml)（包含2层、3层、4层结构示例） + +层级命名约定（自顶向下）： + +1. `categories`：顶层分类 +2. `subcategories`：子分类 +3. `groups`：分组 +4. `subgroups`：子分组 +5. `sites`：站点（叶子节点） + +若你需要第 4 层（`subgroups`），结构示例（片段）： + +```yaml +categories: + - name: 示例分类 + subcategories: + - name: 示例子分类 + groups: + - name: 示例分组 + subgroups: + - name: 示例子分组 + sites: + - name: 示例站点 + url: https://example.com +``` + +#### 向后兼容性 + +- 原有二层结构（`categories -> sites`）无需修改即可继续使用 +- 系统会自动识别层级结构并匹配对应的模板/样式 +- 允许在同一份配置中混用不同层级（例如某些分类是二层，某些分类是三/四层） + +## 配置优先级 + +MeNav 配置系统采用“完全替换”策略：只会选择一套目录加载，不会把 `user` 与 `_default` 混合合并。 + +- 若存在 `config/user/`：只加载 `config/user/`，并**完全忽略** `config/_default/` +- 否则：加载 `config/_default/` + +在“同一套目录”内，各文件的关系是： + +- `site.yml`：站点全局配置（包含 `navigation` 等） +- `pages/*.yml`：各页面配置（文件名需与 `navigation.id` 对应） + +## 配置示例 + +### 网站配置示例 (site.yml) + +```yaml +# 网站基本信息 +title: '我的个人导航' +description: '个人收藏的网站导航页' +keywords: '导航,网址,书签,个人主页' + +# 个人资料配置 +profile: + title: '个人导航站' + subtitle: '我收藏的精选网站' + +# 字体：全站基础字体 +fonts: + source: css + cssUrl: 'https://fontsapi.zeoseven.com/292/main/result.css' + preload: true + family: 'LXGW WenKai' + weight: normal + +# 社交媒体链接 +social: + - name: 'GitHub' + url: 'https://github.com/username' + icon: 'fab fa-github' + - name: 'Twitter' + url: 'https://twitter.com/username' + icon: 'fab fa-twitter' + +# 导航配置 +navigation: + - name: '常用' + icon: 'fas fa-star' + id: 'common' + - name: '项目' + icon: 'fas fa-project-diagram' + id: 'projects' + - name: '文章' + icon: 'fas fa-book' + id: 'articles' + - name: '书签' + icon: 'fas fa-bookmark' + id: 'bookmarks' +``` + +### 通用页面配置示例（例如 common.yml） + +```yaml +# 页面分类配置 +categories: + - name: '常用工具' + icon: 'fas fa-tools' + sites: + - name: 'Google' + url: 'https://www.google.com' + description: '全球最大的搜索引擎' + icon: 'fab fa-google' + - name: 'GitHub' + url: 'https://github.com' + description: '代码托管平台' + icon: 'fab fa-github' + + - name: '学习资源' + icon: 'fas fa-graduation-cap' + sites: + - name: 'MDN Web Docs' + url: 'https://developer.mozilla.org' + description: 'Web开发技术文档' + icon: 'fab fa-firefox-browser' +``` + +## 最佳实践 + +1. **目录结构**: + - 总是在 `user/` 目录下创建您的配置 + - 不要直接修改 `_default/` 中的文件 + +2. **文件命名**: + - 遵循现有的文件命名约定 + - 自定义页面配置应使用有意义的名称 + +3. **配置管理**: + - 利用模块化结构分类管理配置 + - 首次使用建议先完整复制 `config/_default/` 到 `config/user/`，再按需修改 + - 定期备份您的用户配置 + +4. **配置验证**: + - 修改配置后运行 `npm run check`（语法检查 + 单测 + 构建） + - 需要本地预览时运行 `npm run dev`（命令入口见 [`../README.md#快速开始`](../README.md#快速开始)） + - 确保 YAML 语法正确无误 diff --git a/HomePage/config/_default/pages/articles.yml b/HomePage/config/_default/pages/articles.yml new file mode 100755 index 0000000..de15291 --- /dev/null +++ b/HomePage/config/_default/pages/articles.yml @@ -0,0 +1,43 @@ +# 默认页面配置（请勿直接修改）。 +# 建议复制到 config/user/pages/articles.yml 并按需调整。 +title: 技术文章 # 页面标题 +subtitle: RSS 聚合文章列表 # 页面副标题 + +# 指定使用的模板文件名，现有页面模板可见 templates/pages（不含 .hbs） +template: articles + +# 当存在 RSS 缓存时，页面将优先渲染“文章条目卡片”（只读）。 +# - 本处的站点列表作为“来源站点”输入（url 填站点首页） +# - 显示时会将“该分类下配置的站点”抓取到的文章聚合展示在该分类下 +# 重要：url 应填写“站点首页 URL”（不是某一篇文章链接），系统会自动发现 RSS/Atom。 +categories: + - name: 个人博客 + icon: fas fa-rss + sites: + - name: 阮一峰的网络日志 + icon: fas fa-pen + description: 技术文章与随笔 + url: https://www.ruanyifeng.com/blog/ + - name: Coolzr's Blog + icon: fas fa-pen + description: 偶尔会写点什么 + url: https://blog.rzlnb.top/ + - name: 天仙子 + icon: fas fa-pen + description: tianxianzi + url: https://www.tianxianzi.me/ + - name: pseudoyu + icon: fas fa-pen + description: pseudoyu + url: https://www.pseudoyu.com/ + - name: 官方博客 + icon: fas fa-rss + sites: + - name: GitHub Blog + icon: fab fa-github + description: GitHub 官方博客（工程/产品/安全） + url: https://github.blog/ + - name: Cloudflare Blog + icon: fas fa-cloud + description: Cloudflare 工程与安全博客 + url: https://blog.cloudflare.com/ diff --git a/HomePage/config/_default/pages/bookmarks.yml b/HomePage/config/_default/pages/bookmarks.yml new file mode 100755 index 0000000..23d72be --- /dev/null +++ b/HomePage/config/_default/pages/bookmarks.yml @@ -0,0 +1,251 @@ +# 默认页面配置（请勿直接修改）。 +# 建议复制到 config/user/pages/bookmarks.yml 并按需调整。 +# 说明：该页面通常由“书签导入工具”自动生成，手工修改时请保持字段结构一致。 +title: 书签 +subtitle: bookmarks + +# 指定使用的模板文件名，现有页面模板可见 templates/pages（不含 .hbs） +# 提示：bookmarks 模板页面标题区会自动显示“内容更新：YYYY-MM-DD（git|mtime）”，无需额外配置 +template: bookmarks + +categories: + - name: '常用网站' + icon: 'fas fa-star' + sites: + - name: 'GitHub' + url: 'https://github.com/' + icon: 'fab fa-github' + description: '代码托管平台' + - name: 'Stack Overflow' + url: 'https://stackoverflow.com/' + icon: 'fab fa-stack-overflow' + description: '程序员问答社区' + - name: 'MDN Web Docs' + url: 'https://developer.mozilla.org/' + icon: 'fas fa-book' + description: 'Web开发文档' + + - name: '社交媒体' + icon: 'fas fa-share-alt' + groups: + - name: '国际平台' + icon: 'fas fa-globe' + sites: + - name: 'Twitter' + url: 'https://twitter.com/' + icon: 'fab fa-twitter' + description: '微博客社交平台' + - name: 'LinkedIn' + url: 'https://www.linkedin.com/' + icon: 'fab fa-linkedin' + description: '职业社交网络' + - name: 'Facebook' + url: 'https://www.facebook.com/' + icon: 'fab fa-facebook' + description: '社交网络服务' + - name: '国内平台' + icon: 'fas fa-map-marker-alt' + sites: + - name: '微博' + url: 'https://weibo.com/' + icon: 'fas fa-comment' + description: '中文社交媒体平台' + - name: '知乎' + url: 'https://www.zhihu.com/' + icon: 'fas fa-question-circle' + description: '中文问答社区' + - name: 'B站' + url: 'https://www.bilibili.com/' + icon: 'fas fa-video' + description: '弹幕视频网站' + + - name: '技术资源' + icon: 'fas fa-laptop-code' + subcategories: + - name: '前端开发' + icon: 'fas fa-code' + groups: + - name: '框架库' + icon: 'fas fa-cube' + sites: + - name: 'React' + url: 'https://reactjs.org/' + icon: 'fab fa-react' + description: 'React官方文档' + - name: 'Vue.js' + url: 'https://vuejs.org/' + icon: 'fab fa-vuejs' + description: 'Vue.js官方文档' + - name: 'Angular' + url: 'https://angular.io/' + icon: 'fab fa-angular' + description: 'Angular官方文档' + - name: '状态管理' + icon: 'fas fa-database' + sites: + - name: 'Redux' + url: 'https://redux.js.org/' + icon: 'fas fa-database' + description: 'Redux状态管理' + - name: 'Vuex' + url: 'https://vuex.vuejs.org/' + icon: 'fas fa-database' + description: 'Vue状态管理' + - name: 'MobX' + url: 'https://mobx.js.org/' + icon: 'fas fa-react' + description: '响应式状态管理' + - name: '构建工具' + icon: 'fas fa-tools' + sites: + - name: 'Webpack' + url: 'https://webpack.js.org/' + icon: 'fas fa-cube' + description: '模块打包工具' + - name: 'Vite' + url: 'https://vitejs.dev/' + icon: 'fas fa-bolt' + description: '下一代前端构建工具' + - name: 'Rollup' + url: 'https://rollupjs.org/' + icon: 'fas fa-compress' + description: '模块打包器' + - name: '后端开发' + icon: 'fas fa-server' + groups: + - name: 'Node.js生态' + icon: 'fab fa-node-js' + sites: + - name: 'Express' + url: 'https://expressjs.com/' + icon: 'fas fa-server' + description: 'Node.js Web框架' + - name: 'Koa' + url: 'https://koajs.com/' + icon: 'fas fa-leaf' + forceIconMode: manual + description: '下一代Node.js框架' + - name: 'NestJS' + url: 'https://nestjs.com/' + icon: 'fas fa-home' + description: 'Node.js企业级框架' + - name: 'Python框架' + icon: 'fab fa-python' + sites: + - name: 'Django' + url: 'https://www.djangoproject.com/' + icon: 'fab fa-python' + description: 'Python Web框架' + - name: 'Flask' + url: 'https://flask.palletsprojects.com/' + icon: 'fas fa-flask' + description: 'Python微框架' + - name: 'FastAPI' + url: 'https://fastapi.tiangolo.com/' + icon: 'fas fa-bolt' + description: '现代Python Web框架' + + - name: '设计资源' + icon: 'fas fa-palette' + subcategories: + - name: 'UI设计工具' + icon: 'fas fa-paint-brush' + groups: + - name: '原型设计' + icon: 'fas fa-drafting-compass' + sites: + - name: 'Figma' + url: 'https://www.figma.com/' + icon: 'fab fa-figma' + description: '协作式UI设计工具' + - name: 'Sketch' + url: 'https://www.sketch.com/' + icon: 'fab fa-sketch' + description: 'Mac平台UI设计工具' + - name: 'Adobe XD' + url: 'https://www.adobe.com/products/xd.html' + icon: 'fab fa-adobe' + description: 'Adobe UI设计工具' + - name: '设计系统' + icon: 'fas fa-th-large' + sites: + - name: 'Ant Design' + url: 'https://ant.design/' + icon: 'fas fa-th' + forceIconMode: manual + description: '企业级UI设计语言' + - name: 'Material Design' + url: 'https://material.io/design' + icon: 'fas fa-cube' + description: 'Google设计系统' + - name: 'Bootstrap' + url: 'https://getbootstrap.com/' + icon: 'fab fa-bootstrap' + description: '响应式CSS框架' + - name: '视觉资源' + icon: 'fas fa-image' + groups: + - name: '图标库' + icon: 'fas fa-icons' + sites: + - name: 'Font Awesome' + url: 'https://fontawesome.com/' + icon: 'fab fa-font-awesome' + description: '图标库' + - name: 'Iconfont' + url: 'https://www.iconfont.cn/' + icon: 'fas fa-icons' + description: '阿里巴巴图标库' + - name: 'Feather Icons' + url: 'https://feathericons.com/' + icon: 'fas fa-feather' + description: '简洁的图标库' + - name: '配色方案' + icon: 'fas fa-palette' + sites: + - name: 'Coolors' + url: 'https://coolors.co/' + icon: 'fas fa-palette' + description: '在线配色方案生成器' + - name: 'Adobe Color' + url: 'https://color.adobe.com/' + icon: 'fab fa-adobe' + description: 'Adobe配色工具' + - name: 'Paletton' + url: 'https://paletton.com/' + icon: 'fas fa-palette' + description: '配色方案设计工具' + + - name: '开发工具' + icon: 'fas fa-tools' + groups: + - name: '代码编辑器' + icon: 'fas fa-code' + sites: + - name: 'Visual Studio Code' + url: 'https://code.visualstudio.com/' + icon: 'fas fa-code' + description: '微软代码编辑器' + - name: 'Sublime Text' + url: 'https://www.sublimetext.com/' + icon: 'fas fa-file-code' + description: '轻量级代码编辑器' + - name: 'WebStorm' + url: 'https://www.jetbrains.com/webstorm/' + icon: 'fab fa-js' + description: 'JetBrains前端IDE' + - name: '版本控制' + icon: 'fas fa-code-branch' + sites: + - name: 'GitHub' + url: 'https://github.com/' + icon: 'fab fa-github' + description: '代码托管平台' + - name: 'GitLab' + url: 'https://gitlab.com/' + icon: 'fab fa-gitlab' + description: 'Git代码管理平台' + - name: 'Bitbucket' + url: 'https://bitbucket.org/' + icon: 'fab fa-bitbucket' + description: 'Atlassian代码托管' diff --git a/HomePage/config/_default/pages/common.yml b/HomePage/config/_default/pages/common.yml new file mode 100755 index 0000000..53da6c3 --- /dev/null +++ b/HomePage/config/_default/pages/common.yml @@ -0,0 +1,143 @@ +# 默认页面配置（请勿直接修改）。 +# 建议复制到 config/user/pages/common.yml 并按需调整。 +title: 常用网站 # 页面标题 +subtitle: Common website # 页面副标题 + +# 指定使用的模板文件名，现有页面模板可见 templates/pages（不含 .hbs） +# 说明：推荐使用通用模板 page；首页由“导航第一项”决定 +template: page + +# 页面分类与站点列表 +categories: + - name: 置顶 + icon: fas fa-star # 分类图标 + sites: + - name: Linux.do # 站点名称 + url: https://linux.do/ # http/https URL（favicon 模式将尝试加载站点图标） + icon: fab fa-linux # 手动图标：manual 模式使用；favicon 模式下作为回退 + description: 新的理想型社区 # 站点描述 + - name: Menav + url: https://rbetree.github.io/menav + icon: fas fa-star + description: 个人导航站 + faviconUrl: assets/menav.svg + - name: Google + url: https://www.google.com + icon: fab fa-google + description: 全球最大的搜索引擎 + - name: GitHub + url: https://www.github.com + icon: fab fa-github + description: 代码托管平台 + - name: Stack Overflow + url: https://stackoverflow.com + icon: fab fa-stack-overflow + description: 程序员问答社区 + - name: ChatGPT + url: https://chat.openai.com + icon: fas fa-robot + description: AI智能助手 + - name: YouTube + url: https://www.youtube.com + icon: fab fa-youtube + description: 视频分享平台 + - name: Twitter + url: https://twitter.com + icon: fab fa-twitter + description: 社交媒体平台 + - name: Reddit + url: https://www.reddit.com + icon: fab fa-reddit + description: 社区讨论平台 + - name: 学习资源 + icon: fas fa-graduation-cap + sites: + - name: 哔哩哔哩 + url: https://www.bilibili.com + icon: fas fa-play-circle + description: 视频学习平台 + - name: 掘金 + url: https://juejin.cn + icon: fas fa-book + description: 高质量技术社区 + - name: LeetCode + url: https://leetcode.cn + icon: fas fa-code + description: 算法刷题平台 + - name: 设计资源 + icon: fas fa-palette + sites: + - name: Figma + url: https://www.figma.com + icon: fab fa-figma + description: 在线设计工具 + - name: Dribbble + url: https://dribbble.com + icon: fab fa-dribbble + description: 设计师社区 + - name: IconFont + url: https://www.iconfont.cn + icon: fas fa-icons + description: 图标资源库 + - name: Adobe XD + url: https://www.adobe.com/products/xd.html + icon: fab fa-adobe + description: UI/UX设计工具 + - name: Sketch + url: https://www.sketch.com + icon: fas fa-pencil-ruler + description: 矢量设计工具 + - name: Canva + url: https://www.canva.com + icon: fas fa-paint-brush + description: 在线平面设计 + - name: 在线工具 + icon: fas fa-wrench + sites: + - name: JSON Editor + url: https://jsoneditoronline.org + icon: fas fa-code-branch + description: JSON在线编辑器 + - name: Can I Use + url: https://caniuse.com + icon: fas fa-browser + description: 浏览器兼容性查询 + - name: TinyPNG + url: https://tinypng.com + icon: fas fa-compress + description: 图片压缩工具 + - name: Carbon + url: https://carbon.now.sh + icon: fas fa-code + description: 代码图片生成器 + - name: Excalidraw + url: https://excalidraw.com + icon: fas fa-pencil-alt + description: 手绘风格图表工具 + - name: 云服务平台 + icon: fas fa-cloud + sites: + - name: Cloudflare + url: https://www.cloudflare.com + icon: fas fa-cloud + description: CDN与安全服务 + - name: Vercel + url: https://vercel.com + icon: fas fa-server + description: 前端部署平台 + - name: Netlify + url: https://www.netlify.com + icon: fas fa-globe + description: 静态网站托管 + - name: AWS + url: https://aws.amazon.com + icon: fab fa-aws + description: 亚马逊云服务 + - name: Azure + url: https://azure.microsoft.com + icon: fab fa-microsoft + description: 微软云平台 + - name: Google Cloud + url: https://cloud.google.com + icon: fab fa-google + description: 谷歌云平台 diff --git a/HomePage/config/_default/pages/content.yml b/HomePage/config/_default/pages/content.yml new file mode 100755 index 0000000..f395f2e --- /dev/null +++ b/HomePage/config/_default/pages/content.yml @@ -0,0 +1,12 @@ +# 默认页面配置（请勿直接修改）。 +# 建议复制到 config/user/pages/content.yml 并按需调整。 +title: 关于 +subtitle: 项目说明 + +# 指定使用的模板文件名，现有页面模板可见 templates/pages（不含 .hbs） +# 内容页模板（templates/pages/content.hbs） +template: content + +# 本期仅支持文件模式：读取本地 markdown 文件 +content: + file: content/about.md diff --git a/HomePage/config/_default/pages/projects.yml b/HomePage/config/_default/pages/projects.yml new file mode 100755 index 0000000..0791d07 --- /dev/null +++ b/HomePage/config/_default/pages/projects.yml @@ -0,0 +1,33 @@ +# 默认页面配置（请勿直接修改）。 +# 建议复制到 config/user/pages/projects.yml 并按需调整。 +title: 项目 # 页面标题 +subtitle: 项目展示 # 页面副标题 + +# 指定使用的模板文件名，现有页面模板可见 templates/pages（不含 .hbs） +template: projects + +# 页面分类与站点列表 +# +# projects 模板采用“代码仓库风”卡片（repo 风格）。 +# 统计信息（language/stars/forks）为自动获取数据： +# - 运行 `npm run sync-projects` 会联网抓取 GitHub 仓库信息，并写入 dev/ 缓存（仓库默认 gitignore） +# - `npm run build` 默认不联网；缓存缺失时卡片仅展示标题与描述 +categories: + - name: 个人项目 + icon: fas fa-code # 分类图标（Font Awesome） + sites: + - name: MeNav + icon: fab fa-github # 手动图标（manual 模式显示；favicon 模式下作为回退） + description: 一键部署的个人导航站生成器，支持书签导入与自动构建，轻松整理展示您的网络收藏 # 站点描述 + url: https://github.com/rbetree/menav + - name: MarksVault + icon: fab fa-github + description: 一个强大的浏览器扩展，用于智能管理、整理和安全备份您的书签数据 + url: 'https://github.com/rbetree/MarksVault' + - name: star + icon: fas fa-star + sites: + - name: CLIProxyAPI + icon: fab fa-github + description: Wrap Gemini CLI, Antigravity, ChatGPT Codex, Claude Code, Qwen Code, iFlow as an OpenAI/Gemini/Claude/Codex compatible API service, allowing you to enjoy the free Gemini 2.5 Pro, GPT 5, Claude, Qwen model through API + url: 'https://github.com/router-for-me/CLIProxyAPI' diff --git a/HomePage/config/_default/site.yml b/HomePage/config/_default/site.yml new file mode 100755 index 0000000..8e4ec50 --- /dev/null +++ b/HomePage/config/_default/site.yml @@ -0,0 +1,126 @@ +# 默认配置（请勿直接修改）。 +# 建议复制到 config/user/site.yml 并按需调整；用户配置采用“完全替换”策略，将覆盖默认配置。 + +# 网站基本信息 +title: MeNav +description: Personal Navigation Station +author: rbetree +favicon: menav.svg +logo_text: MeNav + +icons: + # 站点卡片图标模式： + # - favicon：自动根据 URL 加载站点 favicon（失败时回退到 Font Awesome 图标） + # - manual：始终使用手动指定的 Font Awesome 图标（不发起外部请求） + # 隐私提示：启用 favicon 模式会请求第三方服务以获取图标，可能将站点 URL 发送给服务商（详见 README"隐私说明"）。 + mode: favicon # 可选: favicon | manual（默认 favicon） + + # favicon 服务区域选择（仅在 mode: favicon 时生效）： + # - com：优先使用 gstatic.com（国际版），失败后回退到 gstatic.cn（中国版） + # - cn：优先使用 gstatic.cn（中国版），失败后回退到 gstatic.com（国际版） + # 说明：如果你在中国大陆且访问 gstatic.com 较慢，建议设置为 cn 以提升图标加载速度 + region: cn # 可选: com | cn（默认 com） + +# 安全策略（可选）：链接 URL scheme 白名单 +# - 默认允许：http/https/mailto/tel + 所有相对链接（# / ./ ../ ?） +# - 其他 scheme 会在页面中安全降级为 # 并输出告警（避免 javascript: 等危险链接变成可点击） +# - 如需支持 obsidian://、vscode:// 等自定义协议，可在此显式放行 +security: + allowedSchemes: + - http + - https + - mailto + - tel + # 示例： + # allowedSchemes: [http, https, mailto, tel, obsidian, vscode] + +# 主题设置：默认明暗模式（可选） +# - mode: dark | light | system +# - dark/light：首屏默认主题；用户点击按钮切换后会写入 localStorage 并覆盖该默认值 +# - system：跟随系统 prefers-color-scheme；用户手动切换后同样会写入 localStorage 并停止跟随 +theme: + mode: dark # 可选: dark | light | system（默认 dark） + +# 字体设置：全站基础字体 +# - source: css | google | system +# - css: 通过 cssUrl 引入第三方字体 CSS +# - google: 通过 Google Fonts 加载 family（weight 建议 100~900） +# - system: 只使用本地/系统字体，不额外发起请求 +fonts: + source: css + cssUrl: 'https://fontsapi.zeoseven.com/292/main/result.css' + preload: true # 可选：使用 preload+onload 的方式非阻塞加载字体 CSS（更利于首屏性能） + family: LXGW WenKai + weight: normal + +# 示例：切换到 Google Fonts +# fonts: +# source: google +# family: "Noto Sans SC" +# weight: 400 + +# 个人资料：显示在首页顶部的欢迎信息 +profile: + # 注意：首页（导航第一项）标题区优先使用 profile.title/profile.subtitle + # 因此建议把首页希望展示的文案写在这里，避免“改了 pages/<首页id>.yml 但首页不生效”的误会 + title: Hello, + subtitle: Welcome to My Navigation + +# RSS（Phase 2）：用于 articles 页面文章聚合 +# 说明： +# - `npm run build` 默认不联网；仅 `npm run sync-articles` 会联网抓取并写入缓存 +# - 缓存目录建议放在 dev/（仓库默认 gitignore），避免误提交 +rss: + enabled: true + cacheDir: dev + fetch: + timeoutMs: 10000 # 单请求超时（毫秒） + totalTimeoutMs: 60000 # 全流程总超时（毫秒） + concurrency: 5 # 并发抓取站点数 + maxRetries: 1 # 单站点重试次数（best-effort） + maxRedirects: 3 # 最大重定向次数 + articles: + perSite: 8 # 单站点最多抓取条数 + total: 50 # 全站聚合上限 + summaryMaxLength: 200 # 摘要最大长度（字符） + +# GitHub：用于 projects 页面右侧“贡献热力图”（可选） +# - username：你的 GitHub 用户名（例如 torvalds） +# - heatmapColor：热力图主题色（不带 #，例如 339af0） +github: + username: 'rbetree' # 你的 GitHub 用户名（例如 torvalds；为空则 projects 页不展示热力图） + heatmapColor: 37b24d + cacheDir: dev # projects 仓库元信息缓存目录（默认 dev，仓库默认 gitignore） + +# 社交媒体链接：显示在侧边栏底部；可按需增删 +social: + - name: GitHub + url: https://github.com + icon: fab fa-github + - name: Telegram + url: https://t.me + icon: fab fa-telegram + - name: Twitter + url: https://twitter.com + icon: fab fa-twitter + - name: Steam + url: https://steam.com + icon: fab fa-steam + +# 导航配置（顺序第一项即首页/默认打开页） +navigation: + - name: 常用 # 菜单名称 + icon: fas fa-star # Font Awesome 图标类 + id: common # 页面标识符（唯一，需与 pages/.yml 对应） + - name: 项目 + icon: fas fa-project-diagram + id: projects + - name: 文章 + icon: fas fa-book + id: articles + - name: 书签 + icon: fas fa-bookmark + id: bookmarks + - name: 关于 + icon: fas fa-file-alt + id: content diff --git a/HomePage/config/update-instructions-20251227.md b/HomePage/config/update-instructions-20251227.md new file mode 100755 index 0000000..f4d6598 --- /dev/null +++ b/HomePage/config/update-instructions-20251227.md @@ -0,0 +1,114 @@ +# 更新说明（2025-12-27） + +本文档用于说明“页面模板差异化改进”相关改动中，**配置层面的新增字段、减少字段与迁移要点**。内容与 [`README.md`](../README.md) 的“2025/12/27 更新记录”保持一致。 + +最后更新：2025-12-27 + +--- + +## 1. 新增/扩展的配置字段 + +### 1.1 `site.rss.*`（articles RSS 聚合 / 缓存） + +用途：为 `articles` 页面提供 RSS/Atom 文章聚合数据，供 `npm run sync-articles` 联网抓取并写入缓存；`npm run build` 默认不联网，只读取缓存渲染。 + +关键字段（默认示例见 `config/_default/site.yml`）： + +- `site.rss.enabled`：是否启用 RSS 抓取能力 +- `site.rss.cacheDir`：缓存目录（建议 `dev/`，仓库默认 gitignore） +- `site.rss.fetch.*`：抓取参数（超时、并发、重试、重定向等） +- `site.rss.articles.*`：抓取条数与摘要长度（例如每站点最多 8 篇） + +说明： + +- RSS 抓取只影响 `articles` Phase 2（文章条目只读展示），不会影响扩展对“来源站点（sites）”的写回能力（构建会保留影子写回结构）。 + +--- + +### 1.2 `site.github.*`（projects 仓库元信息 + 热力图） + +用途： + +- projects 卡片可展示仓库元信息（language/stars/forks 等，只读），由 `npm run sync-projects` 联网抓取并写入缓存。 +- projects 标题区右侧可选展示 GitHub 贡献热力图。 + +关键字段（默认示例见 `config/_default/site.yml`）： + +- `site.github.username`：GitHub 用户名；为空则不展示热力图 +- `site.github.heatmapColor`：热力图主题色（不带 `#`，如 `339af0`） +- `site.github.cacheDir`：仓库元信息缓存目录（建议 `dev/`） + +说明： + +- 仓库元信息来自 GitHub API，属于“时效性数据”，不会写回到 `pages/projects.yml`。 + +--- + +### 1.3 `pages/.yml -> template`（页面模板选择） + +用途：指定页面使用的模板（对应 `templates/pages/