🔘 悬浮按钮功能简介

Demius 主题的悬浮按钮功能为您提供了一组强大且便捷的页面操作按钮。通过现代化的图标设计和流畅的动画效果，这些悬浮按钮可以帮助用户快速访问常用功能，提升浏览体验。

主要特性

  • 🔝 返回顶部：滚动页面后自动显示，快速返回页面顶部
  • 📊 阅读进度：实时显示文章阅读进度（0-100%）
  • ⚙️ 设置菜单：点击展开更多功能按钮
  • 🌙 主题切换：一键切换亮色/暗色主题
  • 📚 侧栏切换：快速显示/隐藏左右侧栏
  • 📖 沉浸阅读：隐藏干扰元素，专注阅读
  • 💬 评论弹幕：将评论转换为弹幕形式展示
  • 📱 响应式设计：完美适配各种设备尺寸
  • 🎨 现代化图标：使用 SVG 图标，清晰美观
  • ⚡ 流畅动画：悬停和点击动画流畅自然

🚀 快速开始

1. 基础配置

在 hugo.toml 文件中配置：

[params.floatButtons]
  position = "right"          # 浮动按钮位置：left 或 right
  showBackToTop = true        # 是否显示返回顶部按钮
  showThemeToggle = true      # 是否显示主题切换按钮
  showSidebarToggle = true    # 是否显示侧边栏切换按钮

2. 重新构建

hugo server

3. 查看效果

访问网站查看悬浮按钮效果。

📝 配置详解

悬浮按钮配置

[params.floatButtons]
  position = "right"          # 浮动按钮位置：left（左侧）或 right（右侧）
  showBackToTop = true        # 是否显示返回顶部按钮
  showThemeToggle = true      # 是否显示主题切换按钮
  showSidebarToggle = true    # 是否显示侧边栏切换按钮

评论弹幕配置

[params.danmaku]
  enable = true              # 是否启用弹幕功能
  scope = "all"              # 弹幕范围：all（全站）、page（当前页面）、post（当前文章）
  speed = 3                  # 弹幕速度（1-5，数字越大越快）
  fontSize = 16              # 弹幕字体大小（px）
  opacity = 0.9              # 弹幕不透明度（0.1-1）
  maxCount = 50              # 最多显示弹幕数量
  updateInterval = 30000     # 更新间隔（毫秒，30000 = 30秒）
  showAvatar = true          # 是否显示头像
  showTime = true            # 是否显示时间
  loop = true                # 是否循环播放弹幕
  randomPosition = true      # 是否随机Y轴位置
  colorful = true            # 是否启用彩色弹幕
  antiOverlap = true         # 是否启用防重叠

📦 按钮列表

1. 返回顶部按钮（back-to-top）

  • 图标：向上箭头
  • 功能：点击返回页面顶部，带平滑滚动动画
  • 显示时机：滚动页面后自动显示
  • 优先级：与设置按钮在同一位置，优先级更高
  • 配置：通过 showBackToTop 控制显示

2. 阅读进度按钮（reading-progress）

  • 显示内容：0-100% 的数字
  • 功能：实时显示文章阅读进度
  • 位置：始终显示在底部（设置按钮上方）
  • 自动更新：根据滚动位置自动更新

3. 设置按钮（fab-settings）

  • 图标：齿轮图标
  • 功能：点击展开/收起其他功能按钮
  • 位置：始终显示在最底部
  • 展开内容：主题切换、侧栏切换、沉浸阅读、评论弹幕

4. 主题切换按钮（theme-toggle）

  • 图标：月亮/太阳图标
  • 功能：一键切换亮色/暗色主题
  • 状态保存：主题选择自动保存到本地存储
  • 配置：通过 showThemeToggle 控制显示

5. 侧栏切换按钮（sidebar-toggle）

  • 图标：网格图标
  • 功能：快速显示/隐藏左右侧栏
  • 状态保存：侧栏显示状态自动保存
  • 配置：通过 showSidebarToggle 控制显示

6. 沉浸阅读按钮（immersive-mode）

  • 图标：书本图标
  • 功能：隐藏导航栏、侧栏、页脚等干扰元素，专注阅读
  • 隐藏元素：
    • 🧭 导航栏
    • 📚 左侧栏
    • 📋 右侧栏
    • 🦶 页脚
  • 状态保存：沉浸模式状态自动保存

7. 评论弹幕按钮（danmaku-mode）

  • 图标：弹幕图标
  • 功能：将评论转换为弹幕形式，从右向左滚动显示
  • 显示条件：需要配置 Artalk 评论系统
  • 配置：通过 [params.danmaku] 配置弹幕行为

📍 按钮布局

按钮位置顺序

从底部向上：

7️⃣ 评论弹幕  ← 展开后最顶部（如果启用）
6️⃣ 沉浸阅读
5️⃣ 侧栏切换
4️⃣ 主题切换
3️⃣ 设置按钮  ← 点击展开/收起其他按钮
2️⃣ 阅读进度  ← 始终显示
1️⃣ 返回顶部  ← 滚动后显示（与设置按钮同一位置）

按钮堆叠说明

  • 设置按钮：始终显示在最底部，点击可展开/收起其他功能按钮
  • 返回顶部按钮：滚动页面后出现，与设置按钮在同一位置，优先级更高
  • 阅读进度按钮：始终显示在设置按钮上方
  • 其他功能按钮：点击设置按钮后展开，从下往上依次显示

💡 使用示例

示例 1：基础配置

[params.floatButtons]
  position = "right"          # 右侧显示
  showBackToTop = true        # 显示返回顶部按钮
  showThemeToggle = true      # 显示主题切换按钮
  showSidebarToggle = true    # 显示侧栏切换按钮

效果： 显示所有基础悬浮按钮，位于页面右侧

示例 2：左侧显示

[params.floatButtons]
  position = "left"           # 左侧显示
  showBackToTop = true
  showThemeToggle = true
  showSidebarToggle = true

效果： 悬浮按钮位于页面左侧

示例 3：禁用部分按钮

[params.floatButtons]
  position = "right"
  showBackToTop = true        # 显示返回顶部
  showThemeToggle = false      # 隐藏主题切换
  showSidebarToggle = false   # 隐藏侧栏切换

效果： 只显示返回顶部按钮和基础功能（阅读进度、设置、沉浸阅读、评论弹幕）

示例 4：完整配置（包含弹幕）

# 悬浮按钮配置
[params.floatButtons]
  position = "right"
  showBackToTop = true
  showThemeToggle = true
  showSidebarToggle = true

# 评论弹幕配置
[params.danmaku]
  enable = true              # 启用弹幕功能
  scope = "all"              # 全站评论弹幕
  speed = 3                  # 中等速度
  fontSize = 16              # 字体大小 16px
  opacity = 0.9              # 不透明度 90%
  maxCount = 50              # 最多显示 50 条弹幕
  updateInterval = 30000     # 每 30 秒更新一次
  showAvatar = true          # 显示头像
  showTime = true            # 显示时间
  loop = true                # 循环播放
  randomPosition = true      # 随机位置
  colorful = true            # 彩色弹幕
  antiOverlap = true         # 防重叠

# Artalk 评论系统配置（弹幕需要）
[params.comment.artalk]
  server = "https://site.demius.tech"
  site = "demius"

效果： 显示所有悬浮按钮，并启用评论弹幕功能

🎨 样式特性

按钮样式

  • 现代化图标：使用 SVG 图标，清晰美观
  • 渐变色悬停：每个按钮有独特的渐变色悬停效果
  • 毛玻璃效果：支持背景模糊效果（backdrop-filter）
  • 流畅动画：悬停、点击、展开动画流畅自然
  • 智能定位：自动避让侧栏，不会遮挡内容

响应式设计

  • 桌面端 (>1024px)：按钮尺寸 3rem，距离边缘 1.5rem
  • 平板端 (768-1023px)：按钮尺寸 2.75rem，距离边缘 0.75rem
  • 手机端 (<768px)：按钮尺寸 2.5rem，距离边缘 0.5rem
  • 超小屏 (<480px)：按钮尺寸 2.25rem，紧贴边缘

主题适配

  • 亮色模式：按钮使用主题色背景，图标使用深色
  • 暗色模式：按钮使用深色背景，图标使用浅色
  • 自动切换：主题切换时按钮样式自动适配

💡 使用技巧

1. 按钮位置选择

  • 右侧（推荐）：适合大多数网站，符合用户阅读习惯
  • 左侧：适合左侧导航的网站或特殊布局需求

2. 按钮显示控制

  • 返回顶部：建议始终显示，提升用户体验
  • 主题切换：如果只使用一种主题，可以隐藏
  • 侧栏切换：如果不需要侧栏功能，可以隐藏

3. 评论弹幕配置

  • 弹幕范围：
    • all：适合展示整个网站的活跃度
    • page：适合当前页面的评论互动
    • post：适合文章详情页的专属讨论
  • 弹幕速度：建议设置为 3（中等速度），太快或太慢都会影响体验
  • 弹幕数量：建议设置为 30-50，过多会影响阅读体验
  • 更新频率：建议设置为 30 秒，频繁更新会增加服务器负担

4. 沉浸阅读模式

  • 适用场景：长文阅读、专注学习
  • 使用方法：点击沉浸阅读按钮即可开启/关闭
  • 注意事项：沉浸模式下仍可以通过悬浮按钮切换主题和侧栏

5. 移动端优化

  • 按钮尺寸自动适配屏幕大小
  • 按钮位置自动调整，避免遮挡内容
  • 触摸优化，按钮点击区域足够大

📋 完整配置示例

# ===== 浮动按钮配置 =====
[params.floatButtons]
  position = "right"          # 浮动按钮位置：left 或 right
  showBackToTop = true        # 是否显示返回顶部按钮
  showThemeToggle = true      # 是否显示主题切换按钮
  showSidebarToggle = true    # 是否显示侧边栏切换按钮

# ===== 评论弹幕配置 =====
[params.danmaku]
  enable = true              # 是否启用弹幕功能
  scope = "all"              # 弹幕范围：all（全站）、page（当前页面）、post（当前文章）
  speed = 3                  # 弹幕速度（1-5，数字越大越快）
  fontSize = 16              # 弹幕字体大小（px）
  opacity = 0.9              # 弹幕不透明度（0.1-1）
  maxCount = 50              # 最多显示弹幕数量
  updateInterval = 30000     # 更新间隔（毫秒，30000 = 30秒）
  showAvatar = true          # 是否显示头像
  showTime = true            # 是否显示时间
  loop = true                # 是否循环播放弹幕（评论播放完后重新开始）
  randomPosition = true      # 是否随机Y轴位置（false则按固定轨道）
  colorful = true            # 是否启用彩色弹幕（false则使用主题色）
  antiOverlap = true         # 是否启用防重叠（智能检测避免弹幕碰撞）

# ===== Artalk 评论系统配置（弹幕需要） =====
[params.comment]
  enable = true

[params.comment.artalk]
  server = "https://site.demius.tech"    # Artalk 后端地址
  site = "demius"                        # 站点名称（与 Artalk 后台一致）
  placeholder = "说点什么吧~"             # 输入框提示语
  darkMode = true                        # 是否启用暗色模式适配
  locale = "zh-CN"                       # 语言
  gravatar = "mp"                        # Gravatar 头像源
  pageSize = 10                          # 每页评论数
  emoticons = true                       # 是否启用表情包
  heightLimit = 500                      # 评论区最大高度（px）

❓ 常见问题

Q: 悬浮按钮不显示？

A: 检查以下几点：

  1. ✅ 检查 hugo.toml 中是否有 [params.floatButtons] 配置
  2. ✅ 检查布局模板是否包含悬浮按钮组件
  3. ✅ 清除缓存并重新构建网站

Q: 返回顶部按钮不显示？

A: 检查以下几点：

  1. ✅ 设置 showBackToTop = true
  2. ✅ 页面需要滚动一定距离后才会显示
  3. ✅ 确保页面内容足够高，可以滚动

Q: 主题切换按钮不生效？

A: 检查以下几点：

  1. ✅ 设置 showThemeToggle = true
  2. ✅ 检查主题是否配置了暗色模式支持
  3. ✅ 清除浏览器缓存

Q: 评论弹幕不显示？

A: 检查以下几点：

  1. ✅ 设置 [params.danmaku] enable = true
  2. ✅ 配置了 Artalk 评论系统
  3. ✅ Artalk 服务器可以正常访问
  4. ✅ 网站有评论数据
  5. ✅ 检查浏览器控制台是否有错误信息

Q: 沉浸阅读模式不生效？

A: 检查以下几点：

  1. ✅ 点击沉浸阅读按钮后，页面元素应该被隐藏
  2. ✅ 确保没有 CSS 冲突
  3. ✅ 清除浏览器缓存

Q: 悬浮按钮位置不对？

A: 检查以下几点：

  1. ✅ 设置 position = "right" 或 position = "left"
  2. ✅ 检查是否有自定义 CSS 覆盖了按钮位置
  3. ✅ 清除缓存并重新构建

Q: 移动端按钮遮挡内容？

A: 悬浮按钮会自动调整位置，但如果仍有遮挡：

  1. ✅ 检查是否有自定义 CSS 影响按钮定位
  2. ✅ 检查页面内容区域的 padding 是否足够
  3. ✅ 按钮会自动避让侧栏，无需手动调整

Q: 如何自定义按钮样式？

A: 可以通过以下方式：

  1. 修改主题 CSS：编辑 themes/demius/assets/css/_float-buttons.css
  2. 添加自定义 CSS：在 static/css/ 目录下创建自定义样式文件
  3. 覆盖样式：使用更高优先级的选择器覆盖默认样式

Q: 评论弹幕更新不及时？

A: 调整 updateInterval 参数：

  • 更频繁更新：设置为 10000（10秒）
  • 推荐设置：30000（30秒）
  • 低频更新：60000（60秒）

Q: 弹幕速度太快或太慢？

A: 调整 speed 参数：

  • 1-2：慢速（适合长文阅读）
  • 3：中等速度（推荐）
  • 4-5：快速（适合快节奏内容）

🔗 相关文档

🔘 技术说明

按钮列表

Demius 主题提供了 7 种悬浮按钮：

  1. back-to-top - 返回顶部按钮（可选）
  2. reading-progress - 阅读进度按钮（始终显示）
  3. fab-settings - 设置按钮（始终显示）
  4. theme-toggle - 主题切换按钮（可选）
  5. sidebar-toggle - 侧栏切换按钮（可选）
  6. immersive-mode - 沉浸阅读按钮（始终显示）
  7. danmaku-mode - 评论弹幕按钮（始终显示，需要配置）

功能特性

  • ✅ 按钮位置：左侧或右侧可选
  • ✅ 按钮开关：独立控制每个按钮的显示
  • ✅ 响应式设计：完美适配各种设备尺寸
  • ✅ 主题适配：自动适配明暗主题
  • ✅ 状态保存：按钮状态自动保存到本地存储
  • ✅ PJAX 兼容：支持无刷新切换页面
  • ✅ 评论弹幕：集成评论弹幕功能（需要 Artalk）

希望这个悬浮按钮功能能够帮助您打造一个更加便捷和有趣的浏览体验！🔘