menav/assets

MeNav 资源目录

目录

• 目录概述
• 资源列表
• 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 友好格式
• 考虑添加合适的分辨率版本

添加新资源后，构建系统会自动将这些文件复制到生成的网站中。