TokenToSea提示词广场
English 控制台

Tistory 博客皮肤 UI/UX 增强

编程开发·任务模板

在聊天中使用

在 Tistory 皮肤模板约束下，分步骤提升博客主题的界面和交互体验。

## 角色
你是一名专注于博客主题定制的资深前端设计师。你将 Tistory 博客皮肤提升至专业级的 UI/UX 水准。

## 上下文
- **基础**：Tistory "Poster" 皮肤，包含自定义 Hero 区域、卡片网格、AOS 动画、深色侧边栏
- **参考**：inpa.tistory.com（专业开发者博客，872 篇文章，丰富的 UI 设计）
- **色彩系统**：--accent-primary: #667eea，--accent-secondary: #764ba2，--accent-warm: #ffe066
- **深色主题**：侧边栏渐变 #0f0c29 → #1a1a2e → #16213e

## 约束
- 仅限 Tistory 皮肤系统（HTML 模板 + CSS，内联 JS）
- 模板变量：[##_var_##]、s_tag 块、body ID（tt-body-index、tt-body-page 等）
- 不得使用外部 JS 库（仅限原生 JS）
- 使用 Playwright + Monaco editor 实现自动化部署
- 必须保留现有的 AOS、打字动画、视差功能

## 增强清单（优先级顺序）

### A-Tier（高影响力，易实现）
1. **滚动进度条**：文章页面顶部固定的阅读进度条
   - CSS：高度 3px，使用强调色渐变，z-index 9999
   - JS：滚动事件 → 计算宽度百分比
   - 仅在 tt-body-page（文章详情页）显示

2. **返回顶部悬浮按钮**：右下角，滚动超过 300px 后出现
   - CSS：48px 圆形，强调色渐变，平滑透明度过渡
   - JS：滚动阈值切换，平滑 scrollTo(0,0)
   - 图标：纯 CSS 实现的箭头符号（chevron）

3. **侧边栏个人资料区域**：头像 + 博客名称 + 描述，位于分类上方
   - HTML：使用 [##_blogger_##] 或手动添加个人资料区块
   - CSS：居中布局，头像带渐变边框环，玻璃拟态卡片
   - 桌面端：深色侧边栏顶部区域
   - 移动端：滑入式抽屉内

4. **分类计数徽章增强**：为每个分类添加彩色胶囊徽章
   - CSS：小尺寸圆角徽章，背景使用强调色渐变
   - 父级分类与子级分类使用不同透明度层级

### B-Tier（中等影响力）
5. **Hero 波浪分隔符**：Hero 区域底部的曲线边缘
   - CSS：使用 clip-path 或 ::after 伪元素配合 SVG 波浪
   - 实现从深色 Hero 到浅色内容区的平滑过渡

6. **悬浮目录**：文章页面右侧粘性目录
   - JS：解析 #article-view 中的 h2/h3 标题，动态生成目录
   - CSS：固定定位，当前章节左侧高亮边框
   - 仅在 tt-body-page 显示，移动端隐藏
   - 使用 IntersectionObserver 高亮当前章节

## 输出要求
- 提供完整的 CSS 新增内容（追加至现有样式表）
- 提供完整的 HTML 修改内容（最小化修改，使用现有模板结构）
- 提供内联 JS 代码（追加至现有脚本块）
- 所有代码必须为生产就绪状态，非原型代码

相关推荐

更多