73 lines
2.2 KiB
Markdown
73 lines
2.2 KiB
Markdown
# MeNav 资源目录
|
||
|
||
## 目录
|
||
|
||
- [目录概述](#目录概述)
|
||
- [资源列表](#资源列表)
|
||
- [资源使用说明](#资源使用说明)
|
||
- [添加新资源](#添加新资源)
|
||
|
||
## 目录概述
|
||
|
||
`assets` 目录包含 MeNav 项目所需的所有静态资源文件，包括样式表、图标、图片等。这些资源文件直接被复制到生成的站点中，用于网站的展示和功能实现。
|
||
|
||
## 资源列表
|
||
|
||
目录包含以下主要资源：
|
||
|
||
- **style.css**: 网站的主样式表文件
|
||
- 定义了网站的整体样式、布局和主题
|
||
- 包含响应式设计和动画效果的实现
|
||
|
||
- **menav.svg**: 网站图标和项目logo
|
||
- 显示在浏览器标签页、书签和收藏夹中
|
||
- 作为网站的标识符
|
||
- SVG格式，包含黑色字母"M"和蓝色向上箭头设计
|
||
|
||
- **preview_light.png**: 明亮主题预览图
|
||
- 用于README文档中展示网站明亮主题效果
|
||
- 作为项目展示素材
|
||
|
||
- **preview_dark.png**: 暗黑主题预览图
|
||
- 用于README文档中展示网站暗黑主题效果
|
||
- 作为项目展示素材
|
||
|
||
## 资源使用说明
|
||
|
||
### 样式表
|
||
|
||
`style.css` 文件包含网站的所有样式定义，遵循以下组织结构：
|
||
|
||
- 基础样式 - 通用元素样式定义
|
||
- 布局样式 - 页面结构和布局定义
|
||
- 组件样式 - 特定UI组件的样式定义
|
||
- 响应式样式 - 适配不同设备屏幕的媒体查询
|
||
- 主题样式 - 明亮和暗黑主题的颜色方案
|
||
|
||
样式表支持主题切换功能，通过CSS变量实现不同主题下的颜色变换。
|
||
|
||
### 图标与图片
|
||
|
||
- 网站图标 (`menav.svg`) 自动应用于生成的网站
|
||
- 预览图片用于项目文档和宣传
|
||
|
||
## 添加新资源
|
||
|
||
向资源目录添加新文件时，请遵循以下指南：
|
||
|
||
1. **文件命名**:
|
||
- 使用小写字母和连字符 (`-`)
|
||
- 避免使用空格和特殊字符
|
||
- 名称应清晰表达文件用途
|
||
|
||
2. **图片优化**:
|
||
- 压缩图片以减小文件大小
|
||
- 使用适合web的格式 (PNG, JPG, WebP)
|
||
- 考虑添加合适的分辨率版本
|
||
|
||
3. **样式扩展**:
|
||
- 新的样式应该添加到 `style.css` 的合适部分
|
||
- 遵循现有的命名规范和组织结构
|
||
- 确保添加响应式设计支持
|
||
|
||
添加新资源后，构建系统会自动将这些文件复制到生成的网站中。 |