sidebar-generator
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseComponents: Sidebar
组件：Sidebar
Guides sidebar design for content sites (blogs, docs). ~80% of users focus on the left; sidebars influence flow but can hurt conversion if overused. Posts without sidebars show 3.1x higher conversion; bottom-right sticky CTAs outperform sidebars (5.62% vs 0.58% CTR).
When invoking: On first use, if helpful, open with 1-2 sentences on what this skill covers and why it matters, then provide the main output. On subsequent use or when the user asks to skip, go directly to the main output.
为内容站点（博客、文档）提供侧边栏设计指南。约80%的用户注意力集中在左侧；侧边栏会影响用户浏览流，但过度使用会损害转化率。无侧边栏的文章转化率高出3.1倍；右下角固定CTA的表现远优于侧边栏（点击率分别为5.62%和0.58% CTR）。
调用规则：首次使用时，如有必要，先用1-2句话说明该技能的覆盖范围和价值，再提供核心输出。后续使用或用户要求跳过说明时，直接输出核心内容。
Initial Assessment
初始评估
Check for product marketing context first: If or exists, read it for content structure and conversion goals.
.claude/product-marketing-context.md.cursor/product-marketing-context.mdIdentify:
- Content type: Blog, docs, e-commerce
- Primary goal: Navigation, CTA, related content
- Mobile: Collapse to hamburger or hide on small screens
首先检查产品营销上下文：如果存在或文件，读取内容以了解内容结构和转化目标。
.claude/product-marketing-context.md.cursor/product-marketing-context.md需识别以下信息：
- 内容类型：博客、文档、电商
- 核心目标：导航、CTA、相关内容展示
- 移动端适配：小屏幕下折叠为汉堡菜单或隐藏
Best Practices
最佳实践
Placement
布局位置
- Left sidebar: Prime for nav; 80% of users focus left
- Right sidebar: Secondary content, ads, related posts
- Static vs sticky: Static for content-focused; sticky for persistent CTA (subscription, cart)
- 左侧侧边栏：导航的最优位置，80%的用户注意力集中在左侧
- 右侧侧边栏：适合放置次要内容、广告、相关文章
- 静态vs固定：内容导向页面使用静态侧边栏；用于持久化CTA（订阅、购物车）时使用固定侧边栏
Conversion Reality
转化效果数据
| Approach | Typical result |
|---|---|
| Sidebar CTA | <1% opt-in for blog sidebars |
| In-content CTA | 3x+ higher conversion |
| Bottom-right sticky | 5.62% CTR vs 0.58% sidebar |
| No sidebar | 3.1x higher conversion vs with sidebar |
Recommendation: Prefer in-content CTAs or bottom-right sticky over sidebar CTAs. Use sidebar for nav and discovery, not primary conversion.
| 方案 | 典型效果 |
|---|---|
| 侧边栏CTA | 博客侧边栏订阅率低于1% |
| 内容内CTA | 转化率高出3倍以上 |
| 右下角固定CTA | 点击率5.62%，侧边栏CTA仅为0.58% |
| 无侧边栏 | 对比带侧边栏的页面转化率高出3.1倍 |
建议：优先使用内容内CTA或右下角固定CTA，而非侧边栏CTA。侧边栏应用于导航和内容发现，而非核心转化路径。
Widget Guidelines
小部件使用准则
- One high-value CTA max; avoid clutter
- Social proof: Testimonials, logos
- Popular/related posts: Discovery, internal linking
- Avoid: Too many ads, affiliate links; reduces trust and speed
- 最多放置1个高价值CTA，避免页面杂乱
- 社会认同类内容：用户推荐、品牌标识
- 热门/相关文章：用于内容发现、内部链接建设
- 需避免：过多广告、联盟链接，会降低用户信任度和页面加载速度
Mobile
移动端适配
- Collapse: Hamburger or off-canvas drawer
- 57%+ mobile traffic: Responsive design non-negotiable
- Reduce clutter: Hide or simplify sidebar on small screens
- 折叠处理：使用汉堡菜单或侧边抽屉
- 移动端流量占比超57%：响应式设计是硬性要求
- 减少杂乱：小屏幕下隐藏或简化侧边栏
Output Format
输出格式
- Placement (left/right, static/sticky)
- Widget list (nav, CTA, related, social proof)
- Mobile behavior
- Conversion note (in-content vs sidebar CTA)
- 布局位置（左/右，静态/固定）
- 小部件列表（导航、CTA、相关内容、社会认同）
- 移动端适配行为
- 转化说明（内容内CTA vs 侧边栏CTA）
Related Skills
相关技能
- toc-generator: TOC often in sidebar for long content
- cta-generator: Sidebar CTA (use sparingly)
- newsletter-signup-generator: Sidebar signup; consider in-content instead
- internal-links: Related posts in sidebar
- toc-generator：长内容的目录通常放置在侧边栏中
- cta-generator：侧边栏CTA（建议谨慎使用）
- newsletter-signup-generator：侧边栏订阅入口，建议优先考虑放置在内容内
- internal-links：侧边栏中的相关文章配置