min

MeNav 资源目录

目录概述

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 会：

解析 style.css 中的 @import 语句
合并所有模块为单文件
压缩输出到 dist/style.css

开发提示：修改 CSS 后运行 npm run build 或 npm run dev 查看效果。

添加新资源

文件命名规范

使用小写字母和连字符 (-)
避免使用空格和特殊字符
名称应清晰表达文件用途

CSS 扩展指南

找到合适的模块：根据功能选择对应的 _*.css 文件
遵循命名规范：使用 BEM 风格或现有选择器模式
添加响应式支持：在同一模块内添加 @media 查询
变量优先：优先使用 _variables.css 中定义的变量

图片优化

压缩图片以减小文件大小
使用 PNG、JPG、WebP 等 web 友好格式
考虑添加合适的分辨率版本

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

This site is open source. Improve this page.