2bebefbfe8
- 为所有站点卡片添加 data-tooltip 属性，包含完整的标题和描述信息 - tooltip 显示逻辑： * 鼠标悬停在整个卡片上即可触发（触发区域大，操作自然） * 跟随鼠标移动，实时更新位置 * 智能边界检测，避免 tooltip 超出视口范围 * 鼠标移出时自动隐藏 - 解决文本截断问题，用户可通过悬停查看完整内容 实现： - 模板层：在 site-card.hbs 中为卡片添加 data-tooltip 属性 - 交互层：在 script.js 中实现 tooltip 的创建、显示、移动和隐藏逻辑 - 样式层：通过 CSS 类控制 tooltip 的可见性和位置 Issue: #31
MeNav 资源目录
目录
目录概述
assets 目录包含 MeNav 项目所需的所有静态资源文件，包括样式表、图标、图片等。这些资源文件直接被复制到生成的站点中，用于网站的展示和功能实现。
资源列表
目录包含以下主要资源：
-
style.css: 网站的主样式表文件
- 定义了网站的整体样式、布局和主题
- 包含响应式设计和动画效果的实现
-
menav.svg: 网站图标和项目logo
- 显示在浏览器标签页、书签和收藏夹中
- 作为网站的标识符
- SVG格式，包含黑色字母"M"和蓝色向上箭头设计
-
preview_light.png: 明亮主题预览图
- 用于README文档中展示网站明亮主题效果
- 作为项目展示素材
-
preview_dark.png: 暗黑主题预览图
- 用于README文档中展示网站暗黑主题效果
- 作为项目展示素材
资源使用说明
样式表
style.css 文件包含网站的所有样式定义，遵循以下组织结构：
- 基础样式 - 通用元素样式定义
- 布局样式 - 页面结构和布局定义
- 组件样式 - 特定UI组件的样式定义
- 响应式样式 - 适配不同设备屏幕的媒体查询
- 主题样式 - 明亮和暗黑主题的颜色方案
样式表支持主题切换功能，通过CSS变量实现不同主题下的颜色变换。
图标与图片
- 网站图标 (
menav.svg) 自动应用于生成的网站 - 预览图片用于项目文档和宣传
添加新资源
向资源目录添加新文件时，请遵循以下指南：
-
文件命名:
- 使用小写字母和连字符 (
-) - 避免使用空格和特殊字符
- 名称应清晰表达文件用途
- 使用小写字母和连字符 (
-
图片优化:
- 压缩图片以减小文件大小
- 使用适合web的格式 (PNG, JPG, WebP)
- 考虑添加合适的分辨率版本
-
样式扩展:
- 新的样式应该添加到
style.css的合适部分 - 遵循现有的命名规范和组织结构
- 确保添加响应式设计支持
- 新的样式应该添加到
添加新资源后，构建系统会自动将这些文件复制到生成的网站中。