TimelineJS咖啡饮品：从拿铁到氮气冷萃时间轴

TimelineJS咖啡饮品：从拿铁到氮气冷萃时间轴

【免费下载链接】TimelineJS 项目地址: https://gitcode.com/gh_mirrors/tim/TimelineJS

你是否曾想过用时间轴展示咖啡饮品的演变历程？本文将使用TimelineJS创建一个从传统拿铁到现代氮气冷萃的咖啡饮品发展时间轴，无需编程基础，30分钟即可完成。读完本文你将掌握：JSON数据结构设计、时间轴样式定制、本地图片集成及完整嵌入流程。

准备工作

TimelineJS是一款开源的时间轴生成工具，支持通过JSON数据创建交互式时间轴。项目核心文件位于examples/example_json.html，通过引入JS库和配置数据源实现时间轴渲染。

主要开发依赖：

• 数据文件：JSON格式，定义时间轴标题、日期和媒体资源
• 渲染引擎：source/js/VMM.Timeline.js
• 样式文件：source/css/timeline.css（编译自LESS文件）

数据结构设计

咖啡饮品时间轴采用JSON格式定义，包含 headline（主标题）、startDate（起始日期）和 date 数组（事件序列）。每个事件需指定：

• startDate/endDate：时间范围（YYYY,MM,DD格式）
• headline：事件标题
• text：描述文本（支持HTML格式）
• asset：媒体资源（图片/视频）

基础结构示例：

{
  "timeline": {
    "headline": "咖啡饮品进化史",
    "startDate": "1980,1,1",
    "date": [
      {
        "startDate": "1980,5,15",
        "headline": "拿铁咖啡流行",
        "text": "<p>意大利浓缩咖啡与蒸汽牛奶的经典组合</p>",
        "asset": {
          "media": "website/static/img/examples/thumbs/thumb_hats.jpg",
          "credit": "咖啡博物馆",
          "caption": "传统拿铁制作工艺"
        }
      }
    ]
  }
}

时间轴实现步骤

1. 创建数据文件

在项目根目录新建 coffee_timeline.json，定义5个关键咖啡饮品节点：

• 1980年代：拿铁咖啡(Latte)
• 1990年代：卡布奇诺(Cappuccino)
• 2000年代：冰滴咖啡(Dutch Coffee)
• 2010年代：冷萃咖啡(Cold Brew)
• 2020年代：氮气冷萃(Nitro Cold Brew)

2. 配置HTML页面

复制examples/example_json.html为 coffee_timeline.html，修改数据源指向新创建的JSON文件：

<script type="text/javascript">
  var timeline_config = {
    width: "100%",
    height: "600px",
    source: 'coffee_timeline.json'
  }
</script>
<script type="text/javascript" src="source/js/storyjs-embed.js"></script>

3. 定制视觉样式

通过修改source/less/Core/Variables.less调整配色方案：

• @timeline-background: #f8f5f0; /* 咖啡米色背景 */
• @timeline-line-color: #8b5a2b; /* 棕色时间轴线 */
• @event-card-bg: #ffffff; /* 白色事件卡片 */

编译LESS为CSS：lessc source/less/VMM.Timeline.less source/css/timeline.css

高级功能

多语言支持

项目提供40+种语言包，通过引入source/js/Core/Language/locale/zh-cn.js实现中文界面：

<script src="source/js/Core/Language/locale/zh-cn.js"></script>
<script>
  VMM.Language.setLocale('zh-cn');
</script>

响应式设计

通过CSS媒体查询适配移动设备，修改source/css/timeline.css：

@media (max-width: 768px) {
  .timeline-event {
    width: 90% !important;
    left: 5% !important;
  }
}

部署与分享

1. 本地预览：直接打开 coffee_timeline.html
2. 发布到网络：将HTML、JSON和图片文件上传至服务器
3. 嵌入到博客：使用iframe标签引入，设置宽度100%和自适应高度

完整示例代码可参考tests/test_jsonp.html，包含跨域数据加载和高级媒体处理功能。

扩展与优化

• 性能优化：使用source/js/Core/Library/LazyLoad.js实现图片懒加载
• 主题切换：通过source/less/Theme/Dark.less启用深色模式
• 数据分析：集成Google Analytics跟踪时间轴交互事件

通过TimelineJS不仅能展示咖啡饮品历史，还可应用于产品迭代记录、项目里程碑等场景。项目源码托管于GitCode：https://gitcode.com/gh_mirrors/tim/TimelineJS，欢迎贡献代码或报告issues。

【免费下载链接】TimelineJS 项目地址: https://gitcode.com/gh_mirrors/tim/TimelineJS