1. CSS 主题预加载: 浅色变量同时应用到 html.theme-preload,避免首帧读取到暗色变量导致的错色与闪烁 2. transition: - 移除会引起首帧抖动的相关transition:侧边栏的 width/transform 和 .content 的 transition - 新增作用域类 .with-anim,仅在交互(点击折叠按钮)时启用侧边栏transition,首屏不加载动画 3. 页面与分类卡片动画: - 移除 .page.active 的位移动画,保留透明度过渡 - 移除 .category 的进入动画(opacity:0 + fadeIn),避免分类卡片在切页时产生浮动效果 脚本调整: 在 toggleSidebarCollapse 时添加 documentElement.with-anim,使布局过渡仅在用户交互时生效 Fixes #17
MeNav 资源目录
目录
目录概述
assets 目录包含 MeNav 项目所需的所有静态资源文件,包括样式表、图标、图片等。这些资源文件直接被复制到生成的站点中,用于网站的展示和功能实现。
资源列表
目录包含以下主要资源:
-
style.css: 网站的主样式表文件
- 定义了网站的整体样式、布局和主题
- 包含响应式设计和动画效果的实现
-
favicon.ico: 网站图标
- 显示在浏览器标签页、书签和收藏夹中
- 作为网站的标识符
-
preview_light.png: 明亮主题预览图
- 用于README文档中展示网站明亮主题效果
- 作为项目展示素材
-
preview_dark.png: 暗黑主题预览图
- 用于README文档中展示网站暗黑主题效果
- 作为项目展示素材
资源使用说明
样式表
style.css 文件包含网站的所有样式定义,遵循以下组织结构:
- 基础样式 - 通用元素样式定义
- 布局样式 - 页面结构和布局定义
- 组件样式 - 特定UI组件的样式定义
- 响应式样式 - 适配不同设备屏幕的媒体查询
- 主题样式 - 明亮和暗黑主题的颜色方案
样式表支持主题切换功能,通过CSS变量实现不同主题下的颜色变换。
图标与图片
- 网站图标 (
favicon.ico) 自动应用于生成的网站 - 预览图片用于项目文档和宣传
添加新资源
向资源目录添加新文件时,请遵循以下指南:
-
文件命名:
- 使用小写字母和连字符 (
-) - 避免使用空格和特殊字符
- 名称应清晰表达文件用途
- 使用小写字母和连字符 (
-
图片优化:
- 压缩图片以减小文件大小
- 使用适合web的格式 (PNG, JPG, WebP)
- 考虑添加合适的分辨率版本
-
样式扩展:
- 新的样式应该添加到
style.css的合适部分 - 遵循现有的命名规范和组织结构
- 确保添加响应式设计支持
- 新的样式应该添加到
添加新资源后,构建系统会自动将这些文件复制到生成的网站中。