整理项目结构
This commit is contained in:
Zuoling Rong
8
.github/workflows/deploy.yml
vendored
8
.github/workflows/deploy.yml
vendored
@@ -40,11 +40,11 @@ jobs:
|
|||||||
|
|
||||||
- name: Check favicon
|
- name: Check favicon
|
||||||
run: |
|
run: |
|
||||||
if [ -f favicon.ico ]; then
|
if [ -f dist/favicon.ico ]; then
|
||||||
echo "Favicon exists"
|
echo "Favicon exists"
|
||||||
ls -l favicon.ico
|
ls -l dist/favicon.ico
|
||||||
else
|
else
|
||||||
echo "Warning: favicon.ico not found"
|
echo "Warning: favicon.ico not found in dist directory"
|
||||||
exit 1
|
exit 1
|
||||||
fi
|
fi
|
||||||
|
|
||||||
@@ -54,7 +54,7 @@ jobs:
|
|||||||
- name: Upload artifact
|
- name: Upload artifact
|
||||||
uses: actions/upload-pages-artifact@v3
|
uses: actions/upload-pages-artifact@v3
|
||||||
with:
|
with:
|
||||||
path: '.'
|
path: 'dist'
|
||||||
|
|
||||||
deploy:
|
deploy:
|
||||||
environment:
|
environment:
|
||||||
|
|||||||
23
.gitignore
vendored
23
.gitignore
vendored
@@ -1,29 +1,16 @@
|
|||||||
# 依赖目录
|
# 依赖相关
|
||||||
node_modules/
|
node_modules/
|
||||||
npm-debug.log*
|
npm-debug.log*
|
||||||
yarn-debug.log*
|
|
||||||
yarn-error.log*
|
|
||||||
|
|
||||||
# IDE 配置
|
# 构建输出
|
||||||
|
dist/
|
||||||
|
|
||||||
|
# IDE/编辑器配置
|
||||||
.vscode/
|
.vscode/
|
||||||
.idea/
|
.idea/
|
||||||
*.sublime-project
|
|
||||||
*.sublime-workspace
|
|
||||||
.specstory
|
.specstory
|
||||||
.cursorindexingignore
|
.cursorindexingignore
|
||||||
|
|
||||||
# 系统文件
|
# 系统文件
|
||||||
.DS_Store
|
.DS_Store
|
||||||
Thumbs.db
|
Thumbs.db
|
||||||
|
|
||||||
# 环境变量
|
|
||||||
.env
|
|
||||||
.env.local
|
|
||||||
.env.*.local
|
|
||||||
|
|
||||||
# 日志文件
|
|
||||||
*.log
|
|
||||||
logs/
|
|
||||||
|
|
||||||
# 用户配置文件
|
|
||||||
config.user.yml
|
|
||||||
66
CHANGELOG.md
66
CHANGELOG.md
@@ -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
82
README.md
@@ -22,6 +22,23 @@
|
|||||||
- Font Awesome 图标
|
- Font Awesome 图标
|
||||||
- GitHub Pages / Cloudflare Pages 托管
|
- 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. 克隆仓库
|
1. 克隆仓库
|
||||||
@@ -41,12 +58,14 @@ npm install
|
|||||||
```
|
```
|
||||||
|
|
||||||
3. 修改配置
|
3. 修改配置
|
||||||
编辑 `config.yml` 文件，根据你的需求修改网站内容：
|
- 复制 `config.yml` 为 `config.user.yml`
|
||||||
- 修改网站基本信息
|
- 在 `config.user.yml` 中根据你的需求修改网站内容：
|
||||||
- 添加/修改导航链接
|
- 修改网站基本信息
|
||||||
- 自定义社交媒体链接
|
- 添加/修改导航链接
|
||||||
- 更新个人项目展示
|
- 自定义社交媒体链接
|
||||||
- 添加友情链接等
|
- 更新个人项目展示
|
||||||
|
- 添加友情链接等
|
||||||
|
|
||||||
|
|
||||||
4. 本地预览
|
4. 本地预览
|
||||||
```bash
|
```bash
|
||||||
@@ -82,7 +101,7 @@ npm run dev
|
|||||||
1. 创建个人配置文件:
|
1. 创建个人配置文件:
|
||||||
- 复制 `config.yml` 为 `config.user.yml`
|
- 复制 `config.yml` 为 `config.user.yml`
|
||||||
- 在 `config.user.yml` 中修改配置
|
- 在 `config.user.yml` 中修改配置
|
||||||
- 这样在后续同步更新时,您的配置不会被覆盖
|
- 提交 `config.user.yml` 到您的仓库，这样GitHub Actions才能使用您的自定义配置进行构建
|
||||||
|
|
||||||
2. 修改配置信息:
|
2. 修改配置信息:
|
||||||
- 修改网站基本信息
|
- 修改网站基本信息
|
||||||
@@ -93,7 +112,7 @@ npm run dev
|
|||||||
|
|
||||||
完成以上步骤后,系统会自动部署您的网站。部署完成后,您可以在 Settings -> Pages 中找到您的网站地址。
|
完成以上步骤后,系统会自动部署您的网站。部署完成后,您可以在 Settings -> Pages 中找到您的网站地址。
|
||||||
|
|
||||||
> 重要提示: 请务必使用 `config.user.yml` 进行配置,这样在同步上游更新时不会丢失您的个人设置。
|
> 重要提示: 请务必使用 `config.user.yml` 进行配置,这样在同步上游更新时不会丢失您的个人设置。同时注意不要在配置文件中包含敏感信息，因为它将被提交到公开仓库。
|
||||||
|
|
||||||
#### 故障排除
|
#### 故障排除
|
||||||
|
|
||||||
@@ -116,25 +135,29 @@ npm run dev
|
|||||||
- 构建输出目录: `/`
|
- 构建输出目录: `/`
|
||||||
- Node.js 版本: `16`或更高
|
- Node.js 版本: `16`或更高
|
||||||
|
|
||||||
## 自定义配置
|
|
||||||
|
|
||||||
### 配置文件说明
|
### 模板说明
|
||||||
|
|
||||||
本项目提供两种配置文件:
|
本项目使用模板与配置文件分离的方式生成网站:
|
||||||
1. `config.yml` - 默认配置模板,会随项目更新
|
|
||||||
2. `config.user.yml` - 用户个人配置,不会被项目更新覆盖
|
|
||||||
|
|
||||||
建议使用步骤:
|
1. `templates/index.html` 是不包含具体内容的HTML骨架模板:
|
||||||
1. 复制 `config.yml` 为 `config.user.yml`
|
- 使用占位符 (如 `{{SITE_TITLE}}`, `{{NAVIGATION}}`, `{{HOME_CONTENT}}`) 标记动态内容的位置
|
||||||
2. 在 `config.user.yml` 中进行个性化配置
|
- 只包含页面结构、CSS引用和基本Javascript引用
|
||||||
3. 原始的 `config.yml` 保持不变
|
|
||||||
4. 后续同步更新时,您的个人配置不会被覆盖
|
2. 工作原理:
|
||||||
|
- `generator.js` 读取配置文件 (优先使用 `config.user.yml`)
|
||||||
|
- 将配置内容注入到模板中的占位符位置
|
||||||
|
- 生成最终的静态HTML网站
|
||||||
|
|
||||||
|
3. 优点:
|
||||||
|
- 清晰分离结构与内容
|
||||||
|
- 用户只需修改配置文件,不需要编辑HTML
|
||||||
|
- 便于更新与维护
|
||||||
|
|
||||||
> 注意: `config.user.yml` 已添加到 .gitignore 中,不会被提交到仓库
|
|
||||||
|
|
||||||
### 配置文件结构
|
### 配置文件结构
|
||||||
|
|
||||||
`config.yml` 包含以下主要部分：
|
`config.user.yml` 应包含以下主要部分：
|
||||||
|
|
||||||
```yaml
|
```yaml
|
||||||
# 网站基本信息
|
# 网站基本信息
|
||||||
@@ -210,28 +233,28 @@ fonts:
|
|||||||
1. 准备图标文件:
|
1. 准备图标文件:
|
||||||
- 支持.ico、.png等格式
|
- 支持.ico、.png等格式
|
||||||
- 建议尺寸为32x32或16x16像素
|
- 建议尺寸为32x32或16x16像素
|
||||||
- 将图标文件放在仓库根目录
|
- 将图标文件放在assets目录下
|
||||||
- 例如: `favicon.ico` 或 `favicon.png`
|
- 例如: `assets/favicon.ico` 或 `assets/favicon.png`
|
||||||
|
|
||||||
2. 配置图标:
|
2. 配置图标:
|
||||||
- 在`config.yml`或`config.user.yml`的site部分设置favicon
|
- 在`config.yml`或`config.user.yml`的site部分设置favicon
|
||||||
- 使用相对于仓库根目录的路径
|
- 使用相对于仓库根目录的路径
|
||||||
- 例如: `favicon: favicon.ico`
|
- 例如: `favicon: favicon.ico`（generator会自动从assets目录查找）
|
||||||
- 也可以使用在线图标URL
|
- 也可以使用在线图标URL
|
||||||
|
|
||||||
3. 生成和部署:
|
3. 生成和部署:
|
||||||
- 运行 `npm run generate` 时会自动复制图标文件
|
- 运行 `npm run generate` 时会自动复制图标文件到dist目录
|
||||||
- 确保图标文件存在于指定位置
|
- 确保图标文件存在于assets目录中
|
||||||
- 部署后图标会自动显示在浏览器标签页
|
- 部署后图标会自动显示在浏览器标签页
|
||||||
|
|
||||||
> 提示: 如果图标没有显示,请检查:
|
> 提示: 如果图标没有显示,请检查:
|
||||||
> 1. 图标文件是否存在于正确位置
|
> 1. 图标文件是否存在于assets目录
|
||||||
> 2. 配置文件中的路径是否正确
|
> 2. 配置文件中的路径是否正确
|
||||||
> 3. 是否重新运行了生成命令
|
> 3. 是否重新运行了生成命令
|
||||||
|
|
||||||
### 添加新的网站链接
|
### 添加新的网站链接
|
||||||
|
|
||||||
在 `config.yml` 中相应的分类下添加新站点：
|
在 `config.user.yml` 中相应的分类下添加新站点：
|
||||||
|
|
||||||
```yaml
|
```yaml
|
||||||
categories:
|
categories:
|
||||||
@@ -244,11 +267,6 @@ categories:
|
|||||||
description: 网站描述
|
description: 网站描述
|
||||||
```
|
```
|
||||||
|
|
||||||
## 版本
|
|
||||||
|
|
||||||
当前版本: v1.2.3
|
|
||||||
|
|
||||||
查看 [CHANGELOG.md](./CHANGELOG.md) 了解详细的更新历史。
|
|
||||||
|
|
||||||
## 贡献
|
## 贡献
|
||||||
|
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 30 KiB |
@@ -4,6 +4,7 @@ site:
|
|||||||
description: 个人网络导航站
|
description: 个人网络导航站
|
||||||
author: Your Name
|
author: Your Name
|
||||||
favicon: favicon.ico # 网站图标,支持ico、png等格式
|
favicon: favicon.ico # 网站图标,支持ico、png等格式
|
||||||
|
logo_text: 导航站 # 左侧导航栏Logo文字
|
||||||
|
|
||||||
# 字体设置
|
# 字体设置
|
||||||
fonts:
|
fonts:
|
||||||
@@ -62,6 +63,10 @@ categories:
|
|||||||
- name: 常用网站
|
- name: 常用网站
|
||||||
icon: fas fa-star
|
icon: fas fa-star
|
||||||
sites:
|
sites:
|
||||||
|
- name: Linux.do
|
||||||
|
url: https://linux.do/
|
||||||
|
icon: fab fa-linux
|
||||||
|
description: 新的理想型社区
|
||||||
- name: Google
|
- name: Google
|
||||||
url: https://www.google.com
|
url: https://www.google.com
|
||||||
icon: fab fa-google
|
icon: fab fa-google
|
||||||
|
|||||||
678
index.html
678
index.html
@@ -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
12
package.json
@@ -2,12 +2,14 @@
|
|||||||
"name": "menav",
|
"name": "menav",
|
||||||
"version": "1.2.3",
|
"version": "1.2.3",
|
||||||
"description": "A personal navigation website",
|
"description": "A personal navigation website",
|
||||||
"main": "generator.js",
|
"main": "src/generator.js",
|
||||||
"homepage": "https://rbetree.github.io/menav",
|
"homepage": "https://rbetree.github.io/menav",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"generate": "node generator.js",
|
"generate": "node src/generator.js",
|
||||||
"dev": "node generator.js && serve .",
|
"dev": "node src/generator.js && serve dist",
|
||||||
"clean": "rm -rf index.html"
|
"clean": "rm -rf dist",
|
||||||
|
"build": "npm run clean && npm run generate",
|
||||||
|
"restructure": "node restructure.js"
|
||||||
},
|
},
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"navigation",
|
"navigation",
|
||||||
@@ -29,4 +31,4 @@
|
|||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"serve": "^14.2.1"
|
"serve": "^14.2.1"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -108,6 +108,17 @@ function generateSocialLinks(social) {
|
|||||||
</a>`).join('\n');
|
</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) {
|
function generatePageContent(pageId, data) {
|
||||||
return `
|
return `
|
||||||
@@ -286,12 +297,36 @@ ${generateSearchResultsPage(config)}
|
|||||||
|
|
||||||
// 复制静态文件
|
// 复制静态文件
|
||||||
function copyStaticFiles(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，确保文件存在并复制
|
// 如果配置了favicon，确保文件存在并复制
|
||||||
if (config.site.favicon) {
|
if (config.site.favicon) {
|
||||||
try {
|
try {
|
||||||
if (fs.existsSync(config.site.favicon)) {
|
if (fs.existsSync(`assets/${config.site.favicon}`)) {
|
||||||
fs.copyFileSync(config.site.favicon, path.basename(config.site.favicon));
|
fs.copyFileSync(`assets/${config.site.favicon}`, `dist/${path.basename(config.site.favicon)}`);
|
||||||
console.log(`Copied favicon: ${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 {
|
} else {
|
||||||
console.warn(`Warning: Favicon file not found: ${config.site.favicon}`);
|
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() {
|
function main() {
|
||||||
const config = loadConfig();
|
const config = loadConfig();
|
||||||
const html = generateHTML(config);
|
|
||||||
|
|
||||||
try {
|
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
|
// 生成HTML
|
||||||
fs.writeFileSync('index.html', html);
|
fs.writeFileSync('dist/index.html', htmlContent);
|
||||||
console.log('Successfully generated index.html');
|
console.log('Successfully generated dist/index.html');
|
||||||
|
|
||||||
// 复制静态文件
|
// 复制静态文件
|
||||||
copyStaticFiles(config);
|
copyStaticFiles(config);
|
||||||
89
templates/index.html
Normal file
89
templates/index.html
Normal 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>
|
||||||
Reference in New Issue
Block a user