chill/menav
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

整理项目结构

Browse Source
This commit is contained in:
Zuoling Rong
2025-05-01 03:18:17 +08:00
parent 3600e83b54
commit 7f82481076
14 changed files with 251 additions and 809 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
.github/workflows/deploy.yml vendored
View File

@@ -40,11 +40,11 @@ jobs:
- name: Check favicon
run: |
if [ -f favicon.ico ]; then
if [ -f dist/favicon.ico ]; then
echo "Favicon exists"
ls -l favicon.ico
ls -l dist/favicon.ico
else
echo "Warning: favicon.ico not found"
echo "Warning: favicon.ico not found in dist directory"
exit 1
fi
@@ -54,7 +54,7 @@ jobs:
- name: Upload artifact
uses: actions/upload-pages-artifact@v3
with:
path: '.'
path: 'dist'
deploy:
environment:

23
.gitignore vendored
View File

@@ -1,29 +1,16 @@
# 依赖目录
# 依赖相关
node_modules/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# IDE 配置
# 构建输出
dist/
# IDE/编辑器配置
.vscode/
.idea/
*.sublime-project
*.sublime-workspace
.specstory
.cursorindexingignore
# 系统文件
.DS_Store
Thumbs.db
# 环境变量
.env
.env.local
.env.*.local
# 日志文件
*.log
logs/
# 用户配置文件
config.user.yml

66
CHANGELOG.md
View File

@@ -1,66 +0,0 @@
# 更新日志
本项目遵循 [语义化版本](https://semver.org/lang/zh-CN/) 规范。
## [1.0.0] - 2024-03-20
### 新增
- 基础导航页面结构
- 深色主题设计
- 响应式布局
- 搜索功能
- 多页面管理（首页、项目、文章、朋友）
- 动画效果
### 功能模块
- 左侧固定导航栏
- 主导航菜单
- 社交媒体链接
- 右侧内容区域
- 搜索框
- 分类展示
- 网站卡片
### 技术实现
- 使用HTML5语义化标签
- CSS3现代特性
- Flexbox布局
- Grid系统
- 响应式设计
- 过渡动画
- 原生JavaScript实现
- 页面切换
- 搜索过滤
- 动画控制
### 优化
- 移动端适配
- 性能优化
- 代码结构优化
### 文档
- 添加README.md
- 添加开发文档
- 添加贡献指南
- 添加更新日志
## [0.1.0] - 2025-01-31
### 新增
- 项目初始化
- 基础文件结构
- 开发环境配置
## [1.2.3] - 2024-03-21
### 优化
- 改进GitHub Pages部署流程
- 使用官方推荐的部署方式
- 添加自动化部署配置
- 优化构建缓存
- 更新依赖管理
- 添加开发服务器支持
- 优化依赖版本控制
- 改进项目配置
- 优化.gitignore规则
- 添加homepage配置

82
README.md
View File

@@ -22,6 +22,23 @@
- Font Awesome 图标
- GitHub Pages / Cloudflare Pages 托管
## 项目结构
```
menav/
├── assets/ # 静态资源文件
│ ├── style.css # 样式表
│ └── favicon.ico # 网站图标
├── src/ # 源代码
│ ├── generator.js # 静态网站生成器
│ └── script.js # 前端JavaScript脚本
├── templates/ # HTML模板
│ └── index.html # HTML骨架模板文件
├── dist/ # 生成的静态网站（由generator.js生成）
├── config.yml # 默认配置文件
└── config.user.yml # 用户自定义配置文件
```
## 快速开始
1. 克隆仓库
@@ -41,12 +58,14 @@ npm install
```
3. 修改配置
编辑 `config.yml` 文件，根据你的需求修改网站内容：
- 修改网站基本信息
- 添加/修改导航链接
- 自定义社交媒体链接
- 更新个人项目展示
- 添加友情链接等
- 复制 `config.yml` 为 `config.user.yml`
- 在 `config.user.yml` 中根据你的需求修改网站内容：
- 修改网站基本信息
- 添加/修改导航链接
- 自定义社交媒体链接
- 更新个人项目展示
- 添加友情链接等
4. 本地预览
```bash
@@ -82,7 +101,7 @@ npm run dev
1. 创建个人配置文件:
- 复制 `config.yml` 为 `config.user.yml`
- 在 `config.user.yml` 中修改配置
- 这样在后续同步更新时,您的配置不会被覆盖
- 提交 `config.user.yml` 到您的仓库，这样GitHub Actions才能使用您的自定义配置进行构建
2. 修改配置信息:
- 修改网站基本信息
@@ -93,7 +112,7 @@ npm run dev
完成以上步骤后,系统会自动部署您的网站。部署完成后,您可以在 Settings -> Pages 中找到您的网站地址。
> 重要提示: 请务必使用 `config.user.yml` 进行配置,这样在同步上游更新时不会丢失您的个人设置。
> 重要提示: 请务必使用 `config.user.yml` 进行配置,这样在同步上游更新时不会丢失您的个人设置。同时注意不要在配置文件中包含敏感信息，因为它将被提交到公开仓库。
#### 故障排除
@@ -116,25 +135,29 @@ npm run dev
- 构建输出目录: `/`
- Node.js 版本: `16`或更高
## 自定义配置
### 配置文件说明
### 模板说明
本项目提供两种配置文件:
1. `config.yml` - 默认配置模板,会随项目更新
2. `config.user.yml` - 用户个人配置,不会被项目更新覆盖
本项目使用模板与配置文件分离的方式生成网站:
建议使用步骤:
1. 复制 `config.yml` 为 `config.user.yml`
2. 在 `config.user.yml` 中进行个性化配置
3. 原始的 `config.yml` 保持不变
4. 后续同步更新时,您的个人配置不会被覆盖
1. `templates/index.html` 是不包含具体内容的HTML骨架模板:
- 使用占位符 (如 `{{SITE_TITLE}}`, `{{NAVIGATION}}`, `{{HOME_CONTENT}}`) 标记动态内容的位置
- 只包含页面结构、CSS引用和基本Javascript引用
2. 工作原理:
- `generator.js` 读取配置文件 (优先使用 `config.user.yml`)
- 将配置内容注入到模板中的占位符位置
- 生成最终的静态HTML网站
3. 优点:
- 清晰分离结构与内容
- 用户只需修改配置文件,不需要编辑HTML
- 便于更新与维护
> 注意: `config.user.yml` 已添加到 .gitignore 中,不会被提交到仓库
### 配置文件结构
`config.yml` 包含以下主要部分：
`config.user.yml` 应包含以下主要部分：
```yaml
# 网站基本信息
@@ -210,28 +233,28 @@ fonts:
1. 准备图标文件:
- 支持.ico、.png等格式
- 建议尺寸为32x32或16x16像素
- 将图标文件放在仓库根目录
- 例如: `favicon.ico` 或 `favicon.png`
- 将图标文件放在assets目录下
- 例如: `assets/favicon.ico` 或 `assets/favicon.png`
2. 配置图标:
- 在`config.yml`或`config.user.yml`的site部分设置favicon
- 使用相对于仓库根目录的路径
- 例如: `favicon: favicon.ico`
- 例如: `favicon: favicon.ico`（generator会自动从assets目录查找）
- 也可以使用在线图标URL
3. 生成和部署:
- 运行 `npm run generate` 时会自动复制图标文件
- 确保图标文件存在于指定位置
- 运行 `npm run generate` 时会自动复制图标文件到dist目录
- 确保图标文件存在于assets目录中
- 部署后图标会自动显示在浏览器标签页
> 提示: 如果图标没有显示,请检查:
> 1. 图标文件是否存在于正确位置
> 1. 图标文件是否存在于assets目录
> 2. 配置文件中的路径是否正确
> 3. 是否重新运行了生成命令
### 添加新的网站链接
在 `config.yml` 中相应的分类下添加新站点：
在 `config.user.yml` 中相应的分类下添加新站点：
```yaml
categories:
@@ -244,11 +267,6 @@ categories:
description: 网站描述
```
## 版本
当前版本: v1.2.3
查看 [CHANGELOG.md](./CHANGELOG.md) 了解详细的更新历史。
## 贡献

0
favicon.ico → assets/favicon.ico
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 30 KiB

0
style.css → assets/style.css
View File

5
config.yml
View File

@@ -4,6 +4,7 @@ site:
description: 个人网络导航站
author: Your Name
favicon: favicon.ico # 网站图标,支持ico、png等格式
logo_text: 导航站 # 左侧导航栏Logo文字
# 字体设置
fonts:
@@ -62,6 +63,10 @@ categories:
- name: 常用网站
icon: fas fa-star
sites:
- name: Linux.do
url: https://linux.do/
icon: fab fa-linux
description: 新的理想型社区
- name: Google
url: https://www.google.com
icon: fab fa-google

0
CONTRIBUTING.md → docs/CONTRIBUTING.md
View File

0
DEVELOPMENT.md → docs/DEVELOPMENT.md
View File

678
index.html
View File

@@ -1,678 +0,0 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的导航</title>
<link rel="icon" href="./favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&family=Quicksand:wght@500&family=Noto Sans SC:wght@400&display=swap" rel="stylesheet">
<style>
:root {
--font-title: Poppins;
--font-weight-title: 600;
--font-subtitle: Quicksand;
--font-weight-subtitle: 500;
--font-body: Noto Sans SC;
--font-weight-body: 400;
}
</style>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body class="loading">
<div class="layout">
<!-- 移动端按钮 -->
<div class="mobile-buttons">
<button class="menu-toggle" aria-label="切换菜单">
<i class="fas fa-bars"></i>
</button>
<button class="search-toggle" aria-label="切换搜索">
<i class="fas fa-search"></i>
</button>
</div>
<!-- 遮罩层 -->
<div class="overlay"></div>
<!-- 左侧导航 -->
<nav class="sidebar">
<div class="logo">
<h1>导航站</h1>
</div>
<div class="nav-section">
<a href="#" class="nav-item active" data-page="home">
<div class="icon-container">
<i class="fas fa-home"></i>
</div>
<span class="nav-text">首页</span>
</a>
<a href="#" class="nav-item" data-page="projects">
<div class="icon-container">
<i class="fas fa-project-diagram"></i>
</div>
<span class="nav-text">项目</span>
</a>
<a href="#" class="nav-item" data-page="articles">
<div class="icon-container">
<i class="fas fa-book"></i>
</div>
<span class="nav-text">文章</span>
</a>
<a href="#" class="nav-item" data-page="friends">
<div class="icon-container">
<i class="fas fa-users"></i>
</div>
<span class="nav-text">朋友</span>
</a>
</div>
<div class="nav-section">
<div class="section-title">
<i class="fas fa-link"></i>
</div>
<a href="https://github.com" class="nav-item" target="_blank">
<div class="icon-container">
<i class="fab fa-github"></i>
</div>
<span class="nav-text">GitHub</span>
<i class="fas fa-external-link-alt external-icon"></i>
</a>
<a href="https://t.me" class="nav-item" target="_blank">
<div class="icon-container">
<i class="fab fa-telegram"></i>
</div>
<span class="nav-text">Telegram</span>
<i class="fas fa-external-link-alt external-icon"></i>
</a>
<a href="https://twitter.com" class="nav-item" target="_blank">
<div class="icon-container">
<i class="fab fa-twitter"></i>
</div>
<span class="nav-text">Twitter</span>
<i class="fas fa-external-link-alt external-icon"></i>
</a>
<a href="https://steam.com" class="nav-item" target="_blank">
<div class="icon-container">
<i class="fab fa-steam"></i>
</div>
<span class="nav-text">Steam</span>
<i class="fas fa-external-link-alt external-icon"></i>
</a>
</div>
<!-- 导入/导出功能 -->
<div class="nav-section">
<div class="section-title">
<i class="fas fa-cog"></i>
</div>
<div class="nav-item import-export-btn" id="exportDataBtn">
<div class="icon-container">
<i class="fas fa-download"></i>
</div>
<span class="nav-text">导出数据</span>
</div>
<div class="nav-item import-export-btn" id="importDataBtn">
<div class="icon-container">
<i class="fas fa-upload"></i>
</div>
<span class="nav-text">导入数据</span>
</div>
<!-- 隐藏的文件上传输入 -->
<input type="file" id="importFileInput" style="display: none;" accept=".json,.yml,.yaml">
</div>
<div class="copyright">
<p>© 2025 <a href="https://github.com/rbetree/menav" target="_blank">MeNav</a></p>
<p>by <a href="https://github.com/rbetree" target="_blank">rbetree</a></p>
</div>
</nav>
<!-- 右侧内容区 -->
<main class="content">
<!-- 搜索框容器 -->
<div class="search-container">
<div class="search-box">
<input type="text" id="search" placeholder="搜索...">
<i class="fas fa-search"></i>
</div>
</div>
<!-- 首页 -->
<div class="page active" id="home">
<div class="welcome-section">
<h2>Hello,</h2>
<h3>Welcome to My Navigation</h3>
<p class="subtitle">导航菜单</p>
</div>
<section class="category">
<h2><i class="fas fa-star"></i> 常用网站</h2>
<div class="sites-grid">
<a href="https://www.google.com" class="site-card">
<i class="fab fa-google"></i>
<h3>Google</h3>
<p>全球最大的搜索引擎</p>
</a>
<a href="https://www.github.com" class="site-card">
<i class="fab fa-github"></i>
<h3>GitHub</h3>
<p>代码托管平台</p>
</a>
<a href="https://stackoverflow.com" class="site-card">
<i class="fab fa-stack-overflow"></i>
<h3>Stack Overflow</h3>
<p>程序员问答社区</p>
</a>
<a href="https://chat.openai.com" class="site-card">
<i class="fas fa-robot"></i>
<h3>ChatGPT</h3>
<p>AI智能助手</p>
</a>
</div>
</section>
<section class="category">
<h2><i class="fas fa-graduation-cap"></i> 学习资源</h2>
<div class="sites-grid">
<a href="https://www.bilibili.com" class="site-card">
<i class="fas fa-play-circle"></i>
<h3>哔哩哔哩</h3>
<p>视频学习平台</p>
</a>
<a href="https://www.zhihu.com" class="site-card">
<i class="fas fa-question-circle"></i>
<h3>知乎</h3>
<p>问答社区</p>
</a>
<a href="https://juejin.cn" class="site-card">
<i class="fas fa-book"></i>
<h3>掘金</h3>
<p>高质量技术社区</p>
</a>
<a href="https://leetcode.cn" class="site-card">
<i class="fas fa-code"></i>
<h3>LeetCode</h3>
<p>算法刷题平台</p>
</a>
</div>
</section>
<section class="category">
<h2><i class="fas fa-tools"></i> 开发工具</h2>
<div class="sites-grid">
<a href="https://code.visualstudio.com" class="site-card">
<i class="fas fa-code"></i>
<h3>VS Code</h3>
<p>强大的代码编辑器</p>
</a>
<a href="https://www.postman.com" class="site-card">
<i class="fas fa-paper-plane"></i>
<h3>Postman</h3>
<p>API调试工具</p>
</a>
<a href="https://git-scm.com" class="site-card">
<i class="fab fa-git-alt"></i>
<h3>Git</h3>
<p>版本控制工具</p>
</a>
<a href="https://www.docker.com" class="site-card">
<i class="fab fa-docker"></i>
<h3>Docker</h3>
<p>容器化平台</p>
</a>
</div>
</section>
<section class="category">
<h2><i class="fas fa-palette"></i> 设计资源</h2>
<div class="sites-grid">
<a href="https://www.figma.com" class="site-card">
<i class="fab fa-figma"></i>
<h3>Figma</h3>
<p>在线设计工具</p>
</a>
<a href="https://dribbble.com" class="site-card">
<i class="fab fa-dribbble"></i>
<h3>Dribbble</h3>
<p>设计师社区</p>
</a>
<a href="https://www.behance.net" class="site-card">
<i class="fab fa-behance"></i>
<h3>Behance</h3>
<p>创意设计平台</p>
</a>
<a href="https://www.iconfont.cn" class="site-card">
<i class="fas fa-icons"></i>
<h3>IconFont</h3>
<p>图标资源库</p>
</a>
</div>
</section>
<section class="category">
<h2><i class="fas fa-wrench"></i> 在线工具</h2>
<div class="sites-grid">
<a href="https://jsoneditoronline.org" class="site-card">
<i class="fas fa-code-branch"></i>
<h3>JSON Editor</h3>
<p>JSON在线编辑器</p>
</a>
<a href="https://caniuse.com" class="site-card">
<i class="fas fa-browser"></i>
<h3>Can I Use</h3>
<p>浏览器兼容性查询</p>
</a>
<a href="https://tinypng.com" class="site-card">
<i class="fas fa-compress"></i>
<h3>TinyPNG</h3>
<p>图片压缩工具</p>
</a>
<a href="https://carbon.now.sh" class="site-card">
<i class="fas fa-code"></i>
<h3>Carbon</h3>
<p>代码图片生成器</p>
</a>
</div>
</section>
</div>
<!-- 项目页 -->
<div class="page" id="projects">
<div class="welcome-section">
<h2>我的项目</h2>
<p class="subtitle">这里展示了我的一些个人项目和开源贡献</p>
</div>
<section class="category">
<h2><i class="fas fa-code"></i> 个人项目</h2>
<div class="sites-grid">
<a href="#" class="site-card">
<i class="fas fa-compass"></i>
<h3>个人导航站</h3>
<p>一个简洁美观的个人导航页面</p>
</a>
<a href="#" class="site-card">
<i class="fas fa-tasks"></i>
<h3>Todo List</h3>
<p>基于Vue3的待办事项管理器</p>
</a>
<a href="#" class="site-card">
<i class="fas fa-blog"></i>
<h3>个人博客</h3>
<p>使用Hexo搭建的技术博客</p>
</a>
</div>
</section>
<section class="category">
<h2><i class="fas fa-code-branch"></i> 开源贡献</h2>
<div class="sites-grid">
<a href="#" class="site-card">
<i class="fab fa-github"></i>
<h3>Project A</h3>
<p>开源项目贡献</p>
</a>
<a href="#" class="site-card">
<i class="fab fa-github"></i>
<h3>Project B</h3>
<p>开源项目贡献</p>
</a>
</div>
</section>
</div>
<!-- 文章页 -->
<div class="page" id="articles">
<div class="welcome-section">
<h2>技术文章</h2>
<p class="subtitle">分享我的技术文章和学习笔记</p>
</div>
<section class="category">
<h2><i class="fas fa-pen"></i> 最新文章</h2>
<div class="sites-grid">
<a href="#" class="site-card">
<i class="fab fa-vuejs"></i>
<h3>Vue3最佳实践</h3>
<p>Vue3组合式API的使用技巧</p>
</a>
<a href="#" class="site-card">
<i class="fab fa-js"></i>
<h3>JavaScript进阶</h3>
<p>JavaScript高级特性解析</p>
</a>
<a href="#" class="site-card">
<i class="fab fa-git-alt"></i>
<h3>Git使用技巧</h3>
<p>Git常用命令和工作流</p>
</a>
<a href="#" class="site-card">
<i class="fab fa-docker"></i>
<h3>Docker入门</h3>
<p>Docker基础知识和实践</p>
</a>
</div>
</section>
<section class="category">
<h2><i class="fas fa-book"></i> 学习笔记</h2>
<div class="sites-grid">
<a href="#" class="site-card">
<i class="fab fa-react"></i>
<h3>React Hooks</h3>
<p>React Hooks最佳实践</p>
</a>
<a href="#" class="site-card">
<i class="fab fa-node-js"></i>
<h3>Node.js实战</h3>
<p>Node.js服务端开发笔记</p>
</a>
<a href="#" class="site-card">
<i class="fab fa-css3"></i>
<h3>CSS技巧</h3>
<p>CSS常用技巧总结</p>
</a>
<a href="#" class="site-card">
<i class="fas fa-database"></i>
<h3>数据库设计</h3>
<p>数据库架构和优化笔记</p>
</a>
</div>
</section>
<section class="category">
<h2><i class="fas fa-code"></i> 源码解析</h2>
<div class="sites-grid">
<a href="#" class="site-card">
<i class="fab fa-vuejs"></i>
<h3>Vue源码解析</h3>
<p>Vue.js核心原理解析</p>
</a>
<a href="#" class="site-card">
<i class="fab fa-react"></i>
<h3>React原理</h3>
<p>React核心机制解析</p>
</a>
</div>
</section>
</div>
<!-- 朋友页 -->
<div class="page" id="friends">
<div class="welcome-section">
<h2>友情链接</h2>
<p class="subtitle">优秀的博主和朋友们</p>
</div>
<section class="category">
<h2><i class="fas fa-user-friends"></i> 技术博主</h2>
<div class="sites-grid">
<a href="#" class="site-card">
<i class="fas fa-code"></i>
<h3>小明的博客</h3>
<p>全栈开发工程师，分享技术心得</p>
</a>
<a href="#" class="site-card">
<i class="fas fa-paint-brush"></i>
<h3>小红的前端</h3>
<p>专注前端开发与设计</p>
</a>
<a href="#" class="site-card">
<i class="fas fa-server"></i>
<h3>小张的后端</h3>
<p>分享后端开发经验</p>
</a>
<a href="#" class="site-card">
<i class="fas fa-mobile-alt"></i>
<h3>小李的移动端</h3>
<p>移动应用开发专家</p>
</a>
</div>
</section>
<section class="category">
<h2><i class="fas fa-laptop-code"></i> 技术社区</h2>
<div class="sites-grid">
<a href="https://github.com" class="site-card">
<i class="fab fa-github"></i>
<h3>GitHub</h3>
<p>开源代码托管平台</p>
</a>
<a href="https://stackoverflow.com" class="site-card">
<i class="fab fa-stack-overflow"></i>
<h3>Stack Overflow</h3>
<p>程序员问答社区</p>
</a>
<a href="https://juejin.cn" class="site-card">
<i class="fas fa-book"></i>
<h3>掘金</h3>
<p>高质量技术社区</p>
</a>
<a href="https://v2ex.com" class="site-card">
<i class="fas fa-comments"></i>
<h3>V2EX</h3>
<p>创意工作者社区</p>
</a>
</div>
</section>
<section class="category">
<h2><i class="fas fa-coffee"></i> 休闲娱乐</h2>
<div class="sites-grid">
<a href="https://www.bilibili.com" class="site-card">
<i class="fas fa-play-circle"></i>
<h3>哔哩哔哩</h3>
<p>视频弹幕网站</p>
</a>
<a href="https://www.zhihu.com" class="site-card">
<i class="fas fa-question-circle"></i>
<h3>知乎</h3>
<p>问答社区</p>
</a>
<a href="https://www.douban.com" class="site-card">
<i class="fas fa-film"></i>
<h3>豆瓣</h3>
<p>文艺生活社区</p>
</a>
<a href="https://music.163.com" class="site-card">
<i class="fas fa-music"></i>
<h3>网易云音乐</h3>
<p>音乐平台</p>
</a>
</div>
</section>
</div>
<!-- 搜索结果页 -->
<div class="page" id="search-results">
<div class="welcome-section">
<h2>搜索结果</h2>
<p class="subtitle">在所有页面中找到的匹配项</p>
</div>
<section class="category search-section" data-section="home" style="display: none;">
<h2><i class="fas fa-home"></i> 首页匹配项</h2>
<div class="sites-grid"></div>
</section>
<section class="category search-section" data-section="projects" style="display: none;">
<h2><i class="fas fa-project-diagram"></i> 项目匹配项</h2>
<div class="sites-grid"></div>
</section>
<section class="category search-section" data-section="articles" style="display: none;">
<h2><i class="fas fa-book"></i> 文章匹配项</h2>
<div class="sites-grid"></div>
</section>
<section class="category search-section" data-section="friends" style="display: none;">
<h2><i class="fas fa-users"></i> 朋友匹配项</h2>
<div class="sites-grid"></div>
</section>
</div>
</main>
</div>
<script src="script.js"></script>
<script>
// 从localStorage加载用户数据
document.addEventListener('DOMContentLoaded', function() {
try {
const userData = localStorage.getItem('menav_user_data');
if (userData) {
const data = JSON.parse(userData);
console.log('Loading user data from localStorage');
// 应用用户配置
applyUserData(data);
}
} catch (error) {
console.error('Error loading user data:', error);
}
// 应用用户数据到页面
function applyUserData(data) {
try {
// 应用分类和网站
if (data.categories && data.categories.length > 0) {
const homePage = document.getElementById('home');
if (homePage) {
// 保留欢迎区域
const welcomeSection = homePage.querySelector('.welcome-section');
// 清除当前分类
const oldCategories = homePage.querySelectorAll('.category');
oldCategories.forEach(cat => {
if (!cat.classList.contains('welcome-section')) {
cat.remove();
}
});
// 添加新分类
data.categories.forEach(category => {
const categoryElem = document.createElement('section');
categoryElem.className = 'category';
categoryElem.innerHTML = `
<h2><i class="${category.icon}"></i> ${category.name}</h2>
<div class="sites-grid"></div>
`;
const sitesGrid = categoryElem.querySelector('.sites-grid');
// 添加站点
category.sites.forEach(site => {
const siteCard = document.createElement('a');
siteCard.className = 'site-card';
siteCard.href = site.url;
siteCard.innerHTML = `
<i class="${site.icon}"></i>
<h3>${site.name}</h3>
<p>${site.description}</p>
`;
sitesGrid.appendChild(siteCard);
});
homePage.appendChild(categoryElem);
});
}
}
// 应用社交链接
if (data.social && data.social.length > 0) {
const socialSection = document.querySelector('.nav-section:has(.section-title i.fa-link)');
if (socialSection) {
// 清除当前社交链接
const oldLinks = socialSection.querySelectorAll('.nav-item');
oldLinks.forEach(link => link.remove());
// 添加新社交链接
data.social.forEach(link => {
const linkElem = document.createElement('a');
linkElem.className = 'nav-item';
linkElem.href = link.url;
linkElem.target = '_blank';
linkElem.innerHTML = `
<div class="icon-container">
<i class="${link.icon}"></i>
</div>
<span class="nav-text">${link.name}</span>
<i class="fas fa-external-link-alt external-icon"></i>
`;
socialSection.appendChild(linkElem);
});
}
}
// 重新初始化搜索索引
if (window.initSearchIndex) {
window.initSearchIndex();
}
} catch (error) {
console.error('Error applying user data:', error);
}
}
});
</script>
</body>
</html>

12
package.json
View File

@@ -2,12 +2,14 @@
"name": "menav",
"version": "1.2.3",
"description": "A personal navigation website",
"main": "generator.js",
"main": "src/generator.js",
"homepage": "https://rbetree.github.io/menav",
"scripts": {
"generate": "node generator.js",
"dev": "node generator.js && serve .",
"clean": "rm -rf index.html"
"generate": "node src/generator.js",
"dev": "node src/generator.js && serve dist",
"clean": "rm -rf dist",
"build": "npm run clean && npm run generate",
"restructure": "node restructure.js"
},
"keywords": [
"navigation",
@@ -29,4 +31,4 @@
"devDependencies": {
"serve": "^14.2.1"
}
}
}

97
generator.js → src/generator.js
View File

@@ -108,6 +108,17 @@ function generateSocialLinks(social) {
</a>`).join('\n');
}
// 生成欢迎区域和首页内容
function generateHomeContent(config) {
return `
<div class="welcome-section">
<h2>${escapeHtml(config.profile.title)}</h2>
<h3>${escapeHtml(config.profile.subtitle)}</h3>
<p class="subtitle">${escapeHtml(config.profile.description)}</p>
</div>
${generateCategories(config.categories)}`;
}
// 生成页面内容
function generatePageContent(pageId, data) {
return `
@@ -286,12 +297,36 @@ ${generateSearchResultsPage(config)}
// 复制静态文件
function copyStaticFiles(config) {
// 确保dist目录存在
if (!fs.existsSync('dist')) {
fs.mkdirSync('dist', { recursive: true });
}
// 复制CSS文件
try {
fs.copyFileSync('assets/style.css', 'dist/style.css');
console.log('Copied style.css to dist/');
} catch (e) {
console.error('Error copying style.css:', e);
}
// 复制JavaScript文件
try {
fs.copyFileSync('src/script.js', 'dist/script.js');
console.log('Copied script.js to dist/');
} catch (e) {
console.error('Error copying script.js:', e);
}
// 如果配置了favicon，确保文件存在并复制
if (config.site.favicon) {
try {
if (fs.existsSync(config.site.favicon)) {
fs.copyFileSync(config.site.favicon, path.basename(config.site.favicon));
console.log(`Copied favicon: ${config.site.favicon}`);
if (fs.existsSync(`assets/${config.site.favicon}`)) {
fs.copyFileSync(`assets/${config.site.favicon}`, `dist/${path.basename(config.site.favicon)}`);
console.log(`Copied favicon: ${config.site.favicon} to dist/`);
} else if (fs.existsSync(config.site.favicon)) {
fs.copyFileSync(config.site.favicon, `dist/${path.basename(config.site.favicon)}`);
console.log(`Copied favicon: ${config.site.favicon} to dist/`);
} else {
console.warn(`Warning: Favicon file not found: ${config.site.favicon}`);
}
@@ -301,15 +336,65 @@ function copyStaticFiles(config) {
}
}
// 处理模板文件，替换占位符
function processTemplate(template, config) {
const currentYear = new Date().getFullYear();
const googleFontsLink = generateGoogleFontsLink(config);
const fontVariables = generateFontVariables(config);
// 创建替换映射
const replacements = {
'{{SITE_TITLE}}': escapeHtml(config.site.title),
'{{SITE_LOGO_TEXT}}': escapeHtml(config.site.logo_text || '导航站'), // 从配置中获取，如果不存在则使用默认值
'{{GOOGLE_FONTS}}': googleFontsLink,
'{{{FONT_VARIABLES}}}': fontVariables,
'{{NAVIGATION}}': generateNavigation(config.navigation),
'{{SOCIAL_LINKS}}': generateSocialLinks(config.social),
'{{CURRENT_YEAR}}': currentYear,
'{{HOME_CONTENT}}': generateHomeContent(config),
'{{PROJECTS_CONTENT}}': generatePageContent('projects', config.projects),
'{{ARTICLES_CONTENT}}': generatePageContent('articles', config.articles),
'{{FRIENDS_CONTENT}}': generatePageContent('friends', config.friends),
'{{SEARCH_RESULTS}}': generateSearchResultsPage(config)
};
// 执行替换
let processedTemplate = template;
for (const [placeholder, value] of Object.entries(replacements)) {
processedTemplate = processedTemplate.replace(placeholder, value);
}
return processedTemplate;
}
// 主函数
function main() {
const config = loadConfig();
const html = generateHTML(config);
try {
// 确保dist目录存在
if (!fs.existsSync('dist')) {
fs.mkdirSync('dist', { recursive: true });
}
// 读取模板文件
const templatePath = 'templates/index.html';
let htmlContent = '';
if (fs.existsSync(templatePath)) {
// 读取模板并处理
const template = fs.readFileSync(templatePath, 'utf8');
htmlContent = processTemplate(template, config);
console.log(`Using template from ${templatePath} and injecting content`);
} else {
// 如果没有模板文件，使用生成的HTML
htmlContent = generateHTML(config);
console.log('No template file found, using generated HTML');
}
// 生成HTML
fs.writeFileSync('index.html', html);
console.log('Successfully generated index.html');
fs.writeFileSync('dist/index.html', htmlContent);
console.log('Successfully generated dist/index.html');
// 复制静态文件
copyStaticFiles(config);

0
script.js → src/script.js
View File

89
templates/index.html Normal file
View File

@@ -0,0 +1,89 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{SITE_TITLE}}</title>
<link rel="icon" href="./favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
{{GOOGLE_FONTS}}
<style>
{{{FONT_VARIABLES}}}
</style>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body class="loading">
<div class="layout">
<!-- 移动端按钮 -->
<div class="mobile-buttons">
<button class="menu-toggle" aria-label="切换菜单">
<i class="fas fa-bars"></i>
</button>
<button class="search-toggle" aria-label="切换搜索">
<i class="fas fa-search"></i>
</button>
</div>
<!-- 遮罩层 -->
<div class="overlay"></div>
<!-- 左侧导航 -->
<nav class="sidebar">
<div class="logo">
<h1>{{SITE_LOGO_TEXT}}</h1>
</div>
<div class="nav-section">
{{NAVIGATION}}
</div>
<div class="nav-section">
<div class="section-title">
<i class="fas fa-link"></i>
</div>
{{SOCIAL_LINKS}}
</div>
<div class="copyright">
<p>© {{CURRENT_YEAR}} <a href="https://github.com/rbetree/menav" target="_blank">MeNav</a></p>
<p>by <a href="https://github.com/rbetree" target="_blank">rbetree</a></p>
</div>
</nav>
<!-- 右侧内容区 -->
<main class="content">
<!-- 搜索框容器 -->
<div class="search-container">
<div class="search-box">
<input type="text" id="search" placeholder="搜索...">
<i class="fas fa-search"></i>
</div>
</div>
<!-- 首页 -->
<div class="page active" id="home">
{{HOME_CONTENT}}
</div>
<!-- 项目页 -->
<div class="page" id="projects">
{{PROJECTS_CONTENT}}
</div>
<!-- 文章页 -->
<div class="page" id="articles">
{{ARTICLES_CONTENT}}
</div>
<!-- 朋友页 -->
<div class="page" id="friends">
{{FRIENDS_CONTENT}}
</div>
{{SEARCH_RESULTS}}
</main>
</div>
<script src="script.js"></script>
</body>
</html>