📦 侧栏组件功能简介

Demius 主题的侧栏组件功能为您提供了一个强大且灵活的侧边栏管理系统。通过丰富的组件库和灵活的配置选项，您可以轻松地自定义侧边栏的内容、布局和样式，让您的博客更加个性化和实用。

主要特性

  • 📚 丰富组件：13+ 种侧栏组件，涵盖信息展示、导航、内容推荐、分类聚合、互动等多个类别
  • 🎨 灵活布局：左右侧栏独立配置，自由排序
  • 🔧 精细控制：单独开关每个组件，自定义显示数量
  • 🎨 背景配置：每个组件支持独立的背景图片、背景色、文字颜色等配置
  • 📱 响应式设计：移动端自动隐藏/折叠，完美适配各种设备
  • 🌙 暗色模式：自动适配明暗主题
  • ⚡ PJAX 兼容：页面切换无刷新，提供流畅体验
  • 📊 一体化模式：支持侧栏一体化容器或分割卡片两种模式

🚀 快速开始

1. 基础配置

在 hugo.toml 文件中配置：

[params.aside]
  # 左侧栏组件（从上到下排列）
  left  = ["author", "announcement", "social-Media"]
  
  # 右侧栏组件（从上到下排列）
  right = ["toc", "tags", "recent-Posts"]
  
  # 组件开关
  showAuthor = true
  showToc = true
  showTags = true

2. 重新构建

hugo server

3. 查看效果

访问网站查看侧栏布局效果。

📝 配置详解

左右侧栏配置

[params.aside]
  # 侧栏一体化模式
  unifiedMode = false  # true=一体化容器，false=分割卡片
  
  # 左侧栏组件顺序
  left  = [
    "author",
    "announcement",
    "social-Media",
    "recent-Comments",
    "popular-Posts",
    "advertisement"
  ]
  
  # 右侧栏组件顺序
  right = [
    "toc",
    "tags",
    "series-posts",
    "related-Posts",
    "recent-Posts",
    "categories",
    "archive"
  ]

说明：

  • 数组顺序 = 组件显示顺序（从上到下）
  • 移除组件：从数组中删除对应的组件名称
  • 添加组件：在数组中添加对应的组件名称

组件开关控制

[params.aside]
  # 各组件显示开关（默认true表示不配置时默认显示）
  showAuthor = true          # 作者信息卡片
  showToc = true            # 目录组件
  showTags = true           # 标签云
  showRecent = true         # 最新文章
  showCategories = true     # 分类组件
  showArchive = true        # 归档组件
  showPopularPosts = true   # 热门文章
  showRelatedPosts = true   # 相关文章
  showSocialMedia = true    # 社交媒体
  showAdvertisement = false  # 广告位
  showAnnouncement = true   # 公告栏

组件显示数量控制

[params.aside]
  # 组件显示数量控制
  popularCount = 5    # 热门文章显示数量
  recentCount = 5     # 最新文章显示数量
  relatedCount = 5    # 相关文章显示数量
  tagsCount = 20      # 标签云显示数量（0表示显示全部）

组件背景配置

所有侧栏组件均支持统一的背景配置参数，默认不启用：

[params.aside.组件名]
  enableBackground = false             # 是否启用背景（默认false）
  backgroundImage = ""                 # 背景图片URL
  backgroundColor = ""                 # 背景色（支持渐变）
  backgroundSize = "cover"             # 背景图尺寸：cover（覆盖）| contain（包含）| auto（自动）
  backgroundPosition = "center"        # 背景图位置：center | top | bottom | left | right
  backgroundRepeat = "no-repeat"       # 背景图重复：no-repeat | repeat | repeat-x | repeat-y
  textColor = ""                       # 文字颜色（留空则使用默认颜色）
  textShadow = false                   # 是否为文字添加阴影（提高在背景图上的可读性）
  overlayColor = ""                    # 遮罩层颜色（在背景图上添加半透明遮罩，例如："rgba(0, 0, 0, 0.3)"）
  borderRadius = ""                    # 圆角大小（留空则使用默认圆角）

示例： 为热门文章启用渐变背景

[params.aside.popular-Posts]
  enableBackground = true
  backgroundColor = "linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
  textColor = "#ffffff"
  textShadow = true

📦 可用组件列表

信息展示类

author - 作者信息卡片

  • 功能：显示作者头像、昵称、简介、社交链接
  • 位置：通常固定在左侧栏顶部
  • 配置：在 [params.author] 中配置作者信息

announcement - 公告栏

  • 功能：显示站点公告信息，支持重要公告样式，带链接跳转
  • 配置：在 [params.announcement] 中配置公告内容
  • 功能：推广内容展示，图片 + 标题 + 描述，点击跳转链接
  • 配置：在 [params.advertisement] 中配置广告内容

导航类

toc - 文章目录

  • 功能：自动生成文章目录，高亮当前章节，点击平滑滚动
  • 显示位置：仅在文章详情页显示
  • 特殊配置：
    • mobilePopupMode：手机端弹出模式（sidebar 或 toc-only）

archive - 归档组件

  • 功能：按年月归档文章，折叠/展开功能，显示文章数量统计
  • 配置：
    • defaultOpenCurrentYear：默认展开当前年份
    • defaultOpenCurrentMonth：是否默认展开当前月份
    • showStats：显示统计信息
    • groupBy：分组方式（year、month、day）

内容推荐类

recent-Posts - 最新文章

  • 功能：显示最新发布的文章，可自定义显示数量，带封面图和日期
  • 配置：通过 recentCount 控制显示数量

popular-Posts - 热门文章

  • 功能：显示浏览量最高的文章，可自定义显示数量，按热度排序
  • 配置：通过 popularCount 控制显示数量

related-Posts - 相关文章

  • 功能：根据标签/分类推荐，自动计算相关性
  • 显示位置：仅在文章详情页显示
  • 配置：在 [related] 中配置相关性计算规则

series-posts - 系列文章

  • 功能：系列内容组织，支持多系列轮播，智能检测当前系列
  • 配置：
    • enable：是否启用系列文章组件
    • enableCarousel：是否启用轮播功能（多个系列时）
    • carouselInterval：轮播间隔（毫秒）
    • series：系列文章列表配置

分类聚合类

tags - 标签云

  • 功能：显示热门标签（按文章数量排序），可自定义显示数量，显示每个标签的文章数量，点击查看相关文章
  • 配置：通过 tagsCount 控制显示数量（0表示显示全部）

categories - 分类组件

  • 功能：显示所有分类，显示文章数量，列表或网格布局

互动类

recent-Comments - 最新评论

  • 功能：显示最新评论，评论者头像 + 内容，点击跳转到评论
  • 配置：
    • enable：是否启用最新评论组件
    • count：显示的评论数量

social-Media - 社交媒体

  • 功能：社交平台链接，图标 + 颜色自定义，支持自定义内容
  • 配置：在 [params.socialMedia] 中配置社交链接

💡 使用示例

示例 1：基础配置

[params.aside]
  # 左侧栏组件
  left  = ["author", "announcement", "social-Media"]
  
  # 右侧栏组件
  right = ["toc", "tags", "recent-Posts"]
  
  # 组件开关
  showAuthor = true
  showToc = true
  showTags = true
  showRecent = true
  
  # 数量控制
  recentCount = 5
  tagsCount = 20

效果： 简洁的侧栏布局，只显示最常用的组件

示例 2：完整配置

[params.aside]
  # 侧栏一体化模式
  unifiedMode = false
  
  # 左侧栏组件顺序
  left  = [
    "author",
    "announcement",
    "social-Media",
    "recent-Comments",
    "popular-Posts",
    "advertisement"
  ]
  
  # 右侧栏组件顺序
  right = [
    "toc",
    "tags",
    "series-posts",
    "related-Posts",
    "recent-Posts",
    "categories",
    "archive"
  ]
  
  # 组件开关
  showAuthor = true
  showToc = true
  showTags = true
  showRecent = true
  showCategories = true
  showArchive = true
  showPopularPosts = true
  showRelatedPosts = true
  showSocialMedia = true
  showAdvertisement = false
  showAnnouncement = true
  
  # 数量控制
  popularCount = 5
  recentCount = 5
  relatedCount = 5
  tagsCount = 20
  
  # 目录组件配置
  [params.aside.toc]
    enableBackground = true
    backgroundImage = "/img/bg.jpg"
    backgroundColor = "linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
    textColor = "#ffffff"
    textShadow = true
    mobilePopupMode = "toc-only"  # 手机端仅弹出目录
  
  # 热门文章组件配置
  [params.aside.popular-Posts]
    enableBackground = true
    backgroundColor = "linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%)"
    textColor = "#ffffff"
    textShadow = true
  
  # 最新评论组件配置
  [params.aside.recentComments]
    enable = true
    count = 5
    enableBackground = true
    backgroundColor = "linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)"
    textColor = "#ffffff"
    textShadow = true
  
  # 归档组件配置
  [params.aside.archive]
    defaultOpenCurrentYear = true
    defaultOpenCurrentMonth = false
    showStats = true
    groupBy = "month"
  
  # 系列文章组件配置
  [params.aside.seriesPosts]
    enable = true
    enableCarousel = false
    carouselInterval = 8000
    
    [[params.aside.seriesPosts.series]]
      name = "Hugo 博客搭建系列"
      description = "从零开始搭建 Hugo 博客"
      slugs = ["post-1-slug", "post-2-slug", "post-3-slug"]
    
    [[params.aside.seriesPosts.series]]
      name = "Demius 主题使用"
      description = "Demius 主题功能详解"
      slugs = ["guide-1-slug", "guide-2-slug"]

效果： 完整的侧栏布局，所有组件启用，并配置了精美的背景样式

示例 3：自定义背景样式

[params.aside]
  # 标签组件配置 - 渐变背景
  [params.aside.tags]
    enableBackground = true
    backgroundColor = "linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
    textColor = "#ffffff"
    textShadow = true
    overlayColor = "rgba(0, 0, 0, 0.2)"
  
  # 分类组件配置 - 图片背景
  [params.aside.categories]
    enableBackground = true
    backgroundImage = "/img/categories-bg.jpg"
    backgroundSize = "cover"
    backgroundPosition = "center"
    textColor = "#ffffff"
    textShadow = true
    overlayColor = "rgba(0, 0, 0, 0.4)"
  
  # 相关文章组件配置 - 纯色背景
  [params.aside.related-Posts]
    enableBackground = true
    backgroundColor = "#f5f5f5"
    textColor = "#333333"

效果： 不同组件使用不同的背景样式，增强视觉层次感

示例 4：移动端优化配置

[params.aside]
  # 目录组件配置 - 手机端仅弹出目录
  [params.aside.toc]
    enableBackground = true
    backgroundColor = "linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
    textColor = "#ffffff"
    textShadow = true
    mobilePopupMode = "toc-only"  # 手机端仅弹出目录，不显示其他组件

效果： 手机端点击目录按钮时，只弹出目录内容，而不是整个右侧栏

🎨 组件背景配置详解

背景模式

每个组件支持两种背景模式：

  1. 背景图片：使用 backgroundImage 设置背景图片
  2. 背景色：使用 backgroundColor 设置背景色（支持纯色和渐变）

背景色示例

# 纯色背景
backgroundColor = "#f5f5f5"

# 渐变背景
backgroundColor = "linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
backgroundColor = "linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%)"
backgroundColor = "linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)"
backgroundColor = "linear-gradient(135deg, #fa709a 0%, #fee140 100%)"

背景图片配置

[params.aside.tags]
  enableBackground = true
  backgroundImage = "/img/tags-bg.jpg"  # 背景图片URL
  backgroundSize = "cover"               # 覆盖整个组件
  backgroundPosition = "center"         # 居中显示
  backgroundRepeat = "no-repeat"        # 不重复
  overlayColor = "rgba(0, 0, 0, 0.3)"   # 添加遮罩层提高可读性
  textColor = "#ffffff"                  # 白色文字
  textShadow = true                      # 文字阴影

文字颜色和阴影

当使用背景图片或深色背景时，建议：

textColor = "#ffffff"  # 白色文字
textShadow = true      # 启用文字阴影，提高可读性

💡 使用技巧

1. 组件选择

必备组件：

  • ✅ author（作者信息）
  • ✅ toc（文章目录）
  • ✅ tags（标签云）
  • ✅ recent-Posts（最新文章）

推荐组件：

  • ⭕ series-posts（系列文章）
  • ⭕ related-Posts（相关文章）
  • ⭕ archive（归档）

可选组件：

  • ⭕ popular-Posts（热门文章）
  • ⭕ recent-Comments（最新评论）
  • ⭕ advertisement（广告位）

2. 性能优化

  • 限制组件数量：左侧 3-5 个，右侧 5-8 个
  • 控制显示数量：文章列表建议 5-10 篇
  • 禁用不需要的组件：减少 DOM 元素和渲染时间

3. 用户体验

  • 重要组件放上方：作者信息、目录等常用组件放在顶部
  • 相关组件分组：将功能相似的组件放在一起
  • 保持视觉一致性：使用统一的背景样式和颜色方案

4. 移动端优化

  • 使用 toc-only 模式：手机端目录按钮只弹出目录，而不是整个右侧栏
  • 减少移动端组件：可以通过 CSS 隐藏部分组件在移动端的显示

5. 背景样式设计

  • 渐变背景：使用渐变背景可以增加视觉层次感
  • 遮罩层：使用 overlayColor 添加遮罩层可以提高文字可读性
  • 文字阴影：启用 textShadow 可以增强文字在背景图上的可读性

📋 完整配置示例

[params.aside]
  # 侧栏一体化模式
  unifiedMode = false
  
  # 左侧栏组件顺序
  left  = [
    "author",
    "announcement",
    "social-Media",
    "recent-Comments",
    "popular-Posts",
    "advertisement"
  ]
  
  # 右侧栏组件顺序
  right = [
    "toc",
    "tags",
    "series-posts",
    "related-Posts",
    "recent-Posts",
    "categories",
    "archive"
  ]
  
  # 组件开关
  showAuthor = true
  showToc = true
  showTags = true
  showRecent = true
  showCategories = true
  showArchive = true
  showPopularPosts = true
  showRelatedPosts = true
  showSocialMedia = true
  showAdvertisement = false
  showAnnouncement = true
  
  # 数量控制
  popularCount = 5
  recentCount = 5
  relatedCount = 5
  tagsCount = 20
  
  # 作者组件配置
  [params.aside.author]
    enableBackground = false
  
  # 公告组件配置
  [params.aside.announcement]
    enableBackground = false
  
  # 社交媒体组件配置
  [params.aside.social-Media]
    enableBackground = false
  
  # 最新文章组件配置
  [params.aside.recent-Posts]
    enableBackground = false
  
  # 相关文章组件配置
  [params.aside.related-Posts]
    enableBackground = true
    backgroundImage = "/img/bg.jpg"
    backgroundColor = "linear-gradient(135deg, #fa709a 0%, #fee140 100%)"
    textColor = "#ffffff"
    textShadow = true
  
  # 目录组件配置
  [params.aside.toc]
    enableBackground = true
    backgroundImage = "/img/bg.jpg"
    backgroundColor = "linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
    textColor = "#ffffff"
    textShadow = true
    mobilePopupMode = "toc-only"
  
  # 标签组件配置
  [params.aside.tags]
    enableBackground = true
    backgroundImage = "/img/bj.jpg"
    backgroundColor = "linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
    textColor = "#ffffff"
    textShadow = true
  
  # 分类组件配置
  [params.aside.categories]
    enableBackground = true
    backgroundImage = "/img/bj.jpg"
    backgroundColor = "linear-gradient(135deg, #ff8a65 0%, #fee140 100%)"
    textColor = "#ffffff"
    textShadow = true
  
  # 广告组件配置
  [params.aside.advertisement]
    enableBackground = true
    backgroundImage = "/img/bj.jpg"
    backgroundColor = "linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%)"
    textColor = "#ffffff"
    textShadow = true
  
  # 热门文章组件配置
  [params.aside.popular-Posts]
    enableBackground = false
  
  # 最新评论组件配置
  [params.aside.recentComments]
    enable = true
    count = 5
    enableBackground = false
  
  # 归档组件配置
  [params.aside.archive]
    defaultOpenCurrentYear = true
    defaultOpenCurrentMonth = false
    showStats = true
    groupBy = "month"
    enableBackground = false
  
  # 系列文章组件配置
  [params.aside.seriesPosts]
    enable = true
    enableCarousel = false
    carouselInterval = 8000
    
    [[params.aside.seriesPosts.series]]
      name = "Hugo 博客搭建系列"
      description = "从零开始搭建 Hugo 博客"
      slugs = ["post-1-slug", "post-2-slug", "post-3-slug"]
    
    [[params.aside.seriesPosts.series]]
      name = "Demius 主题使用"
      description = "Demius 主题功能详解"
      slugs = ["guide-1-slug", "guide-2-slug"]

❓ 常见问题

Q: 组件不显示？

A: 检查以下几点：

  1. ✅ 配置中有该组件（在 left 或 right 数组中）
  2. ✅ 开关为 true（对应的 showXxx = true）
  3. ✅ 模板文件存在（组件对应的模板文件在 themes/demius/layouts/partials/aside/widgets/ 目录下）
  4. ✅ 清除缓存并重新构建

Q: 组件顺序不对？

A: 调整 left 或 right 数组中的顺序即可。数组中的顺序就是组件显示的顺序（从上到下）。

Q: 如何隐藏某个组件？

A: 有两种方式：

  1. 从 left 或 right 数组中移除该组件
  2. 将对应的开关设置为 false（如 showTags = false）

Q: 如何修改组件显示数量？

A: 通过数量控制参数修改：

  • popularCount：热门文章数量
  • recentCount：最新文章数量
  • relatedCount：相关文章数量
  • tagsCount：标签数量（0表示显示全部）

Q: 组件背景不生效？

A: 检查以下几点：

  1. ✅ enableBackground = true
  2. ✅ 设置了 backgroundImage 或 backgroundColor
  3. ✅ 图片路径正确（如果是相对路径，确保图片文件存在）
  4. ✅ 清除缓存并重新构建

Q: 移动端侧栏显示问题？

A: 移动端侧栏默认隐藏，点击按钮展开。如需修改：

  • 目录组件可以设置 mobilePopupMode = "toc-only" 仅弹出目录
  • 可以通过 CSS 自定义移动端显示行为

Q: 如何隐藏特定页面的侧栏？

A: 在页面 Front Matter 中使用 layout: "fullwidth" 即可隐藏侧栏。

Q: 目录组件不生效？

A: 检查以下几点：

  1. ✅ 文章内容中有标题（H2、H3 等）
  2. ✅ showToc = true
  3. ✅ 配置了 right 数组中包含 "toc"
  4. ✅ 在文章详情页（目录组件只在文章页显示）

Q: 系列文章组件不显示？

A: 检查以下几点：

  1. ✅ [params.aside.seriesPosts] enable = true
  2. ✅ 配置了 series 列表
  3. ✅ slugs 中的文章 slug 正确
  4. ✅ 配置了 right 数组中包含 "series-posts"

Q: 如何自定义组件样式？

A: 可以通过以下方式：

  1. 背景配置：使用组件背景配置参数
  2. CSS 自定义：修改 themes/demius/assets/css/ 目录下的对应样式文件
  3. 覆盖样式：在 static/css/ 目录下创建自定义样式文件

🔗 相关文档

📦 技术说明

组件列表

Demius 主题提供了 13 种侧栏组件：

  1. author - 作者信息卡片
  2. announcement - 公告栏
  3. advertisement - 广告位
  4. toc - 文章目录
  5. archive - 归档组件
  6. recent-Posts - 最新文章
  7. popular-Posts - 热门文章
  8. related-Posts - 相关文章
  9. series-posts - 系列文章
  10. tags - 标签云
  11. categories - 分类组件
  12. recent-Comments - 最新评论
  13. social-Media - 社交媒体

功能特性

  • ✅ 组件顺序：通过数组顺序控制
  • ✅ 组件开关：独立的开关控制
  • ✅ 数量控制：自定义显示数量
  • ✅ 背景配置：统一的背景配置接口
  • ✅ 响应式设计：完美适配各种设备
  • ✅ 暗色模式：自动适配明暗主题
  • ✅ PJAX 兼容：支持无刷新切换

希望这个侧栏组件功能能够帮助您打造一个个性化和实用的博客侧边栏！📦