98 lines
3.4 KiB
Markdown
98 lines
3.4 KiB
Markdown
# MeNav 资源目录
|
||
|
||
## 目录
|
||
|
||
- [目录概述](#目录概述)
|
||
- [资源列表](#资源列表)
|
||
- [CSS 模块化架构](#css-模块化架构)
|
||
- [添加新资源](#添加新资源)
|
||
|
||
## 目录概述
|
||
|
||
`assets` 目录包含 MeNav 项目所需的所有静态资源文件，包括样式表、图标、图片等。这些资源文件直接被复制到生成的站点中，用于网站的展示和功能实现。
|
||
|
||
## 资源列表
|
||
|
||
目录包含以下主要资源：
|
||
|
||
- **style.css**: 样式入口文件
|
||
- 通过 `@import` 聚合所有模块化 CSS
|
||
- 构建时由 esbuild 合并压缩为单文件
|
||
|
||
- **styles/**: CSS 模块目录（详见下方）
|
||
|
||
- **menav.svg**: 网站图标和项目logo
|
||
- 显示在浏览器标签页、书签和收藏夹中
|
||
- SVG格式，包含黑色字母"M"和蓝色向上箭头设计
|
||
|
||
- **preview_light.png / preview_dark.png**: 主题预览图
|
||
- 用于 README 文档展示
|
||
|
||
## CSS 模块化架构
|
||
|
||
样式采用模块化组织，构建时自动合并：
|
||
|
||
```
|
||
assets/
|
||
├── style.css # 入口文件（@import 聚合）
|
||
└── styles/
|
||
├── _variables.css # CSS 变量、主题色
|
||
├── _base.css # 全局重置、滚动条
|
||
├── _animations.css # @keyframes 动画
|
||
├── _layout.css # 页面容器布局
|
||
├── _sidebar.css # 侧边栏组件
|
||
├── _search.css # 搜索框组件
|
||
├── _cards.css # 卡片组件（站点卡片、tooltip）
|
||
├── _modal.css # 模态框、表单
|
||
├── _content.css # Markdown 内容页
|
||
├── _dashboard.css # 仪表盘（时钟/Todo）
|
||
└── _main.css # 兜底样式（分类、热力图、响应式）
|
||
```
|
||
|
||
### 模块说明
|
||
|
||
| 模块 | 职责 |
|
||
|------|------|
|
||
| `_variables.css` | CSS 变量、深色/浅色主题、间距/圆角系统 |
|
||
| `_base.css` | 全局重置、滚动条、遮罩层、主题切换按钮 |
|
||
| `_animations.css` | 所有 `@keyframes` 定义 |
|
||
| `_layout.css` | 页面容器、欢迎区域、模板布局 |
|
||
| `_sidebar.css` | 侧边栏、导航项、折叠状态、子菜单 |
|
||
| `_search.css` | 搜索框、引擎下拉、快捷键提示 |
|
||
| `_cards.css` | 站点卡片、网格布局、tooltip、编辑按钮 |
|
||
| `_modal.css` | 模态框、表单控件、按钮样式 |
|
||
| `_content.css` | Markdown 渲染（标题、代码块、表格等） |
|
||
| `_dashboard.css` | 仪表盘网格、时钟卡片、Todo 列表 |
|
||
| `_main.css` | 分类层级、GitHub 热力图、全局响应式 |
|
||
|
||
### 构建流程
|
||
|
||
构建时 esbuild 会：
|
||
1. 解析 `style.css` 中的 `@import` 语句
|
||
2. 合并所有模块为单文件
|
||
3. 压缩输出到 `dist/style.css`
|
||
|
||
> **开发提示**：修改 CSS 后运行 `npm run build` 或 `npm run dev` 查看效果。
|
||
|
||
## 添加新资源
|
||
|
||
### 文件命名规范
|
||
|
||
- 使用小写字母和连字符 (`-`)
|
||
- 避免使用空格和特殊字符
|
||
- 名称应清晰表达文件用途
|
||
|
||
### CSS 扩展指南
|
||
|
||
1. **找到合适的模块**：根据功能选择对应的 `_*.css` 文件
|
||
2. **遵循命名规范**：使用 BEM 风格或现有选择器模式
|
||
3. **添加响应式支持**：在同一模块内添加 `@media` 查询
|
||
4. **变量优先**：优先使用 `_variables.css` 中定义的变量
|
||
|
||
### 图片优化
|
||
|
||
- 压缩图片以减小文件大小
|
||
- 使用 PNG、JPG、WebP 等 web 友好格式
|
||
- 考虑添加合适的分辨率版本
|
||
|
||
添加新资源后，构建系统会自动将这些文件复制到生成的网站中。 |