内容折叠功能使用示例

这是一个基本的折叠内容示例。

您可以在这里放置任何Markdown格式的内容，包括：

• 文本段落
• 列表项
• 粗体和斜体
• 代码

Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档。

主要特点：

• 简单易学
• 纯文本格式
• 可转换为HTML
• 广泛支持

标题示例

这是一个包含多种元素的折叠块。

列表示例

无序列表：

• 第一项
• 第二项
  • 子项1
  • 子项2
• 第三项

有序列表：

1. 步骤一
2. 步骤二
3. 步骤三

引用示例

这是一段引用文本。

可以包含多行内容。

表格示例

A: 在 hugo.toml 中修改 accentColor 参数：

[params]
  accentColor = "#0066cc"

支持任何有效的CSS颜色值（hex、rgb、rgba等）。

A: 主题支持所有现代浏览器：

• ✅ Chrome/Edge (最新版本)
• ✅ Firefox (最新版本)
• ✅ Safari (最新版本)
• ✅ 移动端浏览器

不支持IE浏览器。

A: 更新步骤：

1. 备份当前主题配置
2. 下载最新版本
3. 替换themes目录下的文件
4. 检查配置文件变更
5. 测试并重新构建

建议使用Git进行版本管理。

创建新站点

hugo new site my-blog
cd my-blog

初始化Git

git init
git add .
git commit -m "Initial commit"

下载主题

git submodule add https://github.com/example/demius.git themes/demius

配置主题

编辑 hugo.toml:

theme = "demius"

getUserInfo 函数

获取用户信息

语法：

getUserInfo(userId)

参数：

• userId (String): 用户ID，必填

返回值：

• Promise: 用户信息对象

示例：

const user = await getUserInfo('123');
console.log(user.name);

错误处理：

• 用户不存在: 返回null
• 网络错误: 抛出Error异常

MySQL配置

database:
  type: mysql
  host: localhost
  port: 3306
  username: root
  password: your_password
  database: my_db

PostgreSQL配置

database:
  type: postgresql
  host: localhost
  port: 5432
  username: postgres
  password: your_password
  database: my_db

新功能

• ✨ 添加相册功能
• ✨ 添加Lightbox查看器

改进

• 🎨 优化图片加载
• 📱 改进响应式布局

在桌面端，折叠块有完整的交互效果：

• 鼠标悬停时背景色变化
• 点击时平滑的动画过渡
• 充足的内边距保证可读性

在移动端，折叠功能自动优化：

• 触摸友好的点击区域
• 适当的字体大小调整
• 优化的间距和留白
• 更快的动画速度

无障碍支持：

• 使用 role="button" 标记可点击元素
• 使用 aria-expanded 表示展开状态
• 使用 aria-controls 关联内容区域
• 支持屏幕阅读器

编辑 themes/demius/assets/css/_collapse.css：

/* 修改折叠头部背景色 */
.collapse-header {
  background: #f5f5f5;
}

/* 修改激活状态颜色 */
.collapse-header.active {
  background: #your-color;
}

/* 修改动画时间 */
.collapse-content {
  transition: max-height 0.5s ease;
}

展开所有折叠

window.expandAllCollapses();

折叠所有折叠

window.collapseAllCollapses();

展开特定折叠

window.expandCollapseById('collapse-id');

重新初始化

window.initCollapse();

可能的原因：

1. JavaScript未正确加载
2. 浏览器缓存问题
3. CSS文件缺失

解决方法：

1. 检查浏览器控制台是否有错误
2. 清除浏览器缓存（Ctrl+F5）
3. 确认 _collapse.js 和 _collapse.css 已导入
4. 重新构建网站：hugo --cleanDestinationDir

可能的原因：

1. 折叠内容过多
2. 设备性能限制
3. 浏览器兼容性问题

解决方法：

1. 拆分大型折叠块为多个小块
2. 减少嵌套层级
3. 使用较新版本的浏览器
4. 在CSS中禁用动画（如需要）

检查项：

1. 确认shortcode语法正确
2. 检查是否有未闭合的标签
3. 确认嵌套层级不超过3层

正确的嵌套语法：

  

    
    外层
  
  

    

      
外层内容

    
  

使用折叠功能可以：

1. 隐藏详细说明：将详细的技术说明折叠起来
2. 组织相关内容：将相关的小节放入折叠块
3. 提供可选信息：将补充信息、参考资料折叠
4. 创建目录效果：使用多个折叠块模拟章节目录

这样可以让文章更简洁，读者可以按需展开感兴趣的部分。

对于包含多个代码示例的文章：

1. 按语言分组：每种语言一个折叠块
2. 按功能分组：相同功能的不同实现放在一起
3. 提供完整代码：在折叠块中放置完整可运行的代码
4. 添加说明文字：在代码前后添加必要的说明

示例：

  

    
    Python实现
  
  

    

      完整的Python代码
    
  





  

    
    JavaScript实现
  
  

    

      完整的JavaScript代码
    
  

• ✅ 支持所有Markdown内容
• ✅ 三种图标样式可选
• ✅ 可设置默认展开/折叠
• ✅ 支持嵌套使用
• ✅ 键盘快捷键支持
• ✅ 无障碍优化
• ✅ 响应式设计
• ✅ 暗色模式支持
• ✅ 平滑动画效果
• ✅ PJAX兼容
• ✅ 打印友好
• ✅ 高性能