Resource页面美化指南 ## 概述 Resource部分已经完成了全面的视觉美化，从纯文字页面变成了具有卡片式布局、图标、色彩和交互效果的现代化页面。 ## 已完成的美化 ### 1. 主页面 (resource.md) 视觉特性：

  • 渐变色的Hero区域（蓝色渐变）
  • 三个主要类别的卡片布局，每个卡片有不同颜色： - Dataset - 蓝色 (#1e6bb8) - Tissue Type - 绿色 (#28a745) - Cell Type - 红色 (#dc3545)
  • 文件类型网格展示
  • 带编号的步骤列表
  • 代码示例框（深色主题）
  • 帮助信息框（绿色渐变）
  • 警告提示框（黄色） 特色：
  • 悬停效果：卡片上移、阴影加深
  • 图标和emoji增强视觉效果
  • 响应式网格布局 ### 2. 子页面索引 #### Dataset (_index.md)
  • 蓝色主题
  • 四个文件类型卡片
  • 带编号的下载步骤
  • 占位符用于将来添加具体数据集 #### Tissue Type (_index.md)
  • 绿色主题
  • 六个组织类型卡片，每个带有彩色emoji： - 🔴 Tumor - 🟢 Normal - 🟡 OPMD - 🔵 PBMC - 🟣 Lymph Node - 🟠 Cell Line
  • 文件类型网格
  • 信息提示框 #### Cell Type (_index.md)
  • 红色主题
  • 七个细胞类型卡片，每个带有独特emoji： - 🦠 T Cell - ⚔️ NK Cell - 🫧 B/Plasma Cell - 🛡️ Myeloid Cell - 🩸 Endothelial Cell - 🧵 Fibroblast - 🧱 Epithelial Cell
  • 显示细胞亚型信息
  • 文件类型网格 ### 3. 具体下载页面示例 (Tumor.md) 已创建美化模板，包含：
  • 红色渐变Hero区域
  • 数据集信息面板
  • 四个文件下载卡片
  • 文件格式说明
  • 代码使用示例（Seurat和Scanpy）
  • 提示信息框 ## CSS文件 ### 主要样式文件 1. 内联样式 - 每个页面包含自己的 <style> 标签
  1. download-page.css - 通用下载页面样式（已创建但可选使用） ### 设计系统 颜色方案：
Dataset主题: #1e6bb8 (蓝色)
Tissue Type主题: #28a745 (绿色)
Cell Type主题: #dc3545 (红色)
Info/提示: #17a2b8 (青色)
警告: #ffc107 (黄色)
代码背景: #2d3748 (深灰)
``` **间距系统：**
- 小间距: 0.5rem - 1rem
- 中间距: 1.5rem - 2rem
- 大间距: 2.5rem - 3rem **圆角：**
- 小圆角: 6px - 8px
- 标准圆角: 10px - 12px
- 大圆角: 15px **阴影：**
- 浅阴影: `0 2px 8px rgba(0, 0, 0, 0.08)`
- 中阴影: `0 3px 12px rgba(0, 0, 0, 0.1)`
- 深阴影: `0 6px 20px rgba(0, 0, 0, 0.15)` ## 如何应用美化到其他下载页面 ### 方法1：复制Tumor.md模板 1. 打开 `Tissue type/Tumor.md`
2. 复制整个内容
3. 粘贴到其他下载页面
4. 修改以下内容： - 标题和描述 - 文件名（例如：`Tumor_` 改为 `Normal_`） - 下载链接 - 数据集信息 ### 方法2：使用相同的样式结构 每个下载页面应包含： ```markdown
---
title: "页面标题"
date: 2025-10-10
layout: single
categories: ["分类"]
---
<style>
[复制Tumor.md中的<style>标签内容]
</style> <div class="download-hero"> [Hero区域内容]
</div> <div class="info-panel"> [信息面板]
</div> ## 📥 Download Files <div class="download-grid"> [文件卡片]
</div> ## 📖 File Format Information <div class="info-panel"> [格式说明]
</div> <div class="usage-section"> [使用说明和代码示例]
</div>
``` ## 响应式设计 所有页面都包含响应式布局： - **桌面 (>768px)**: 多列网格布局
- **平板 (768px - 480px)**: 2列或单列
- **手机 (<480px)**: 单列布局 ## 交互效果 所有卡片和按钮包含以下效果： 1. **悬停效果 (hover)**: - 卡片上移 (`translateY(-5px)` 到 `translateY(-8px)`) - 阴影加深 - 按钮放大或平移 2. **过渡动画**: - 所有效果使用 `transition: all 0.3s ease` - 流畅自然的视觉反馈 ## 需要更新的内容 所有下载页面中需要填充实际数据的占位符： 1. **文件大小**: `[To be updated]`
2. **细胞数量**: `[To be updated]`
3. **样本数量**: `[To be updated]`
4. **GitHub链接**: `https://github.com/YOUR_REPO/...` ## 建议的下一步 1. **批量应用美化**： - 将Tumor.md的样式应用到其他5个Tissue type页面 - 将相同模板应用到所有7个Cell type页面 2. **添加实际数据**： - 更新所有占位符 - 添加真实的GitHub下载链接 3. **创建Dataset页面**： - 为具体的数据集创建独立页面 - 使用相同的美化模板 4. **可选增强**： - 添加数据预览图表 - 添加下载统计 - 添加数据质量指标 ## 技术说明 - 使用内联CSS而不是外部样式表，确保样式独立性
- 使用HTML和Markdown混合，充分利用Hugo的灵活性
- 保持与现有custom.css的兼容性
- 所有样式都是纯CSS，无需JavaScript ## 浏览器兼容性 样式经过测试，兼容：
- Chrome/Edge (推荐)
- Firefox
- Safari
- 移动浏览器 ## 维护建议 1. 保持一致的颜色方案
2. 新增页面使用现有模板
3. 定期检查响应式布局
4. 保持代码简洁易读 --- **创建日期**: 2025-10-10 **最后更新**: 2025-10-10