📅 时间线功能简介
时间线功能提供了一个优雅的可视化时间轴组件，非常适合展示项目历程、更新日志、个人经历、学习路线等按时间顺序排列的内容。
主要特性
- 📅 可视化时间轴：清晰的时间线展示
- 🎨 五种类型：default、success、warning、danger、info
- 🎯 六种图标：default、check、star、warning、info、plus
- 💫 动画效果：进入视口时的渐显动画
- 📱 响应式设计：完美适配各种设备
- 🌙 暗色模式：自动适配明暗主题
🚀 快速开始
基本语法
{{< timeline >}}
{{< timeline-item "日期" "标题" >}}
内容描述
{{< /timeline-item >}}
{{< /timeline >}}
完整参数
{{< timeline-item "日期" "标题" "类型" "图标" >}}
内容
{{< /timeline-item >}}
参数说明：
- 日期（必填）：显示的日期或时间
- 标题（必填）：时间线项目的标题
- 类型（可选）：default/success/warning/danger/info
- 图标（可选）：default/check/star/warning/info/plus
📝 基础示例
示例 1：简单时间线
2025-10-24
时间线功能发布
发布了全新的时间线功能，支持多种样式和图标。
2025-10-20
相册功能上线
添加了相册功能，支持分组管理和大图预览。
2025-10-15
折叠功能完成
实现了内容折叠功能，优化了长文章的阅读体验。
🎨 类型和图标
不同类型展示
2025-10-24
成功类型
使用 success 类型表示完成、成功的事项，配合 check 图标。
2025-10-23
信息类型
使用 info 类型展示一般信息，配合 info 图标。
2025-10-22
警告类型
使用 warning 类型表示需要注意的事项，配合 warning 图标。
2025-10-21
重要类型
使用 danger 类型表示重要或紧急的事项，配合 star 图标。
2025-10-20
默认类型
使用 default 类型作为默认样式，配合 default 图标。
💼 实用场景
场景 1：项目开发历程
2025-10-24
v2.0.0 正式发布
主要更新：
- ✨ 添加时间线功能
- ✨ 添加内容折叠功能
- ✨ 添加相册功能
- 🎨 优化整体视觉效果
2025-10-15
Beta 测试阶段
测试内容：
- 功能完整性测试
- 性能压力测试
- 兼容性测试
- 用户体验测试
2025-10-01
开发启动
项目启动：
- 确定功能需求
- 制定开发计划
- 组建开发团队
- 搭建开发环境
场景 2：学习路线图
第四阶段
高级进阶
学习内容：
- 性能优化技巧
- 架构设计模式
- 源码阅读分析
- 实战项目开发
第三阶段
框架学习
已完成：
- React 基础与进阶
- Vue.js 全家桶
- 状态管理方案
- 路由与导航
第二阶段
JavaScript 深入
已完成：
- ES6+ 新特性
- 异步编程
- 面向对象
- 函数式编程
第一阶段
基础入门
已完成：
- HTML5 语义化
- CSS3 布局
- JavaScript 基础
- DOM 操作
场景 3：个人履历
2024 - 至今
高级前端工程师
某某科技有限公司
主要职责：
- 负责公司核心产品的前端开发
- 带领团队完成重要项目
- 制定前端技术规范
- 参与架构设计与优化
2022 - 2024
前端工程师
某某互联网公司
主要工作：
- 参与多个项目的前端开发
- 负责组件库的开发与维护
- 优化页面性能
- 协助新人成长
2018 - 2022
计算机科学学士
某某大学
主要经历：
- GPA: 3.8/4.0
- 获得校级一等奖学金
- 参与多个科研项目
- 担任学生会技术部部长
🔧 高级用法
复杂内容展示
2025-10-24
功能详细说明
新增功能
-
时间线组件
- 可视化时间轴
- 多种类型和图标
- 响应式设计
-
技术实现
// 初始化时间线 window.initTimeline(); -
使用示例
日期标题
内容
特性说明
| 特性 | 支持 | 说明 |
|---|---|---|
| 动画效果 | ✅ | 进入视口动画 |
| 响应式 | ✅ | 移动端适配 |
| 暗色模式 | ✅ | 自动切换 |
🎯 最佳实践
1. 类型选择建议
Success（成功）：
- ✅ 已完成的任务
- ✅ 达成的目标
- ✅ 成功的里程碑
Info（信息）：
- ℹ️ 一般性说明
- ℹ️ 进行中的事项
- ℹ️ 普通更新信息
Warning（警告）：
- ⚠️ 需要注意的事项
- ⚠️ 待处理的问题
- ⚠️ 计划中的改进
Danger（重要）：
- 🔴 重要的里程碑
- 🔴 关键的决策点
- 🔴 紧急的事项
Default（默认）：
- 📌 普通事件
- 📌 常规更新
- 📌 一般记录
2. 图标选择建议
- check: 完成、勾选、确认
- star: 重要、精选、高亮
- warning: 警告、注意、提醒
- info: 信息、说明、提示
- plus: 新增、添加、扩展
- default: 普通、常规、默认
3. 日期格式建议
<!-- 完整日期 -->
{{< timeline-item "2025-10-24" "标题" >}}
<!-- 年月 -->
{{< timeline-item "2025年10月" "标题" >}}
<!-- 季度 -->
{{< timeline-item "2025 Q4" "标题" >}}
<!-- 时间段 -->
{{< timeline-item "2024-2025" "标题" >}}
<!-- 描述性时间 -->
{{< timeline-item "最近更新" "标题" >}}
📱 响应式展示
时间线在不同设备上都有良好的表现：
桌面端
完整体验
- 完整的视觉效果
- 流畅的动画
- 最佳的可读性
平板端
优化布局
- 自适应间距
- 调整图标大小
- 保持清晰度
移动端
紧凑设计
- 压缩时间线宽度
- 优化触摸区域
- 简化视觉元素
💡 组合使用
时间线 + 折叠
时间线项目内可以包含折叠内容，但需要注意shortcode的嵌套顺序。
建议：在时间线内使用简单的Markdown内容，避免复杂的嵌套shortcode。
正确示例：
{{< timeline >}}
{{< timeline-item "日期" "标题" >}}
内容描述（使用Markdown格式）
{{< /timeline-item >}}
{{< /timeline >}}
🎨 样式定制
如果需要自定义时间线样式，可以编辑CSS文件：
查看自定义CSS示例
🔍 常见问题
Q: 时间线不显示？
Q: 如何更改图标？
Q: 动画效果可以关闭吗？
📚 综合示例
完整的更新日志
2025-10-24
v2.0.0 重大更新
🎉 新增功能
- ✨ 时间线功能
- ✨ 内容折叠功能
- ✨ 相册功能
🎨 优化改进
- 性能优化
- 视觉统一
- 交互改善
🐛 问题修复
- 修复已知问题
- 提升稳定性
2025-10-20
v1.9.0 功能更新
新增
- 选项卡切换
- 视频嵌入支持
改进
- 代码块优化
- 移动端适配
2025-10-15
v1.8.0 持续优化
改进
- 加载速度提升
- SEO优化
- 无障碍改进
💡 使用技巧
技巧 1：突出重要节点
使用不同的类型和图标来突出重要的时间节点：
- 重大里程碑：danger + star
- 成功完成：success + check
- 重要信息：info + info
- 注意事项：warning + warning
技巧 2：保持一致性
在同一个时间线中：
- 日期格式保持统一
- 图标使用保持一致的规则
- 内容详细程度保持平衡
技巧 3：内容层次
合理组织内容层次：
- 标题：简洁明了
- 内容：详略得当
- 使用列表、表格等辅助说明
📊 总结
时间线功能为您提供了：
✅ 可视化展示：清晰的时间轴布局
✅ 灵活配置：多种类型和图标
✅ 优雅动画：流畅的视觉效果
✅ 响应式设计：完美适配各设备
✅ 易于使用：简单的shortcode语法
开始使用时间线功能来展示您的项目历程、学习路线或个人履历吧！
更新时间：2025-10-24
版本：v1.0.0
作者：Demius Theme
如有问题或建议，欢迎反馈！
