TimelineJS嵌入教程：将时间轴无缝集成到你的网站

你是否曾想在网站中展示一段引人入胜的历史进程？ TimelineJS提供了一种简单高效的方式，让你无需复杂编程就能创建交互式时间轴。本教程将带你通过三种常用方式，在10分钟内完成时间轴的嵌入，无论你是内容创作者还是网站管理员，都能轻松掌握。

准备工作：获取TimelineJS资源

开始前需准备TimelineJS核心文件，有两种获取方式：

1. 本地部署：通过仓库克隆获取完整代码

git clone https://gitcode.com/gh_mirrors/tim/TimelineJS.git

项目结构中，嵌入相关文件位于examples/目录，核心JS文件为source/js/VMM.Timeline.js

2. 使用CDN：生产环境推荐使用国内CDN（需替换为实际可用地址）

<script src="https://cdn.example.com/storyjs-embed.js"></script>

方法一：基础JSON数据嵌入

JSON格式是最灵活的数据源方式，适合本地管理时间轴数据。

1. 创建数据文件：参照examples/example_json.json格式，创建包含时间节点的JSON文件

{
  "title": {
    "text": {
      "headline": "我的项目时间轴",
      "text": "记录重要发展节点"
    }
  },
  "events": [
    {
      "start_date": { "year": "2023", "month": "1" },
      "text": { "headline": "项目启动", "text": "开始规划阶段" }
    }
  ]
}

2. 嵌入HTML代码：在网页中添加容器和配置脚本

<div id="timeline-embed"></div>
<script type="text/javascript">
  var timeline_config = {
    width: "100%",
    height: "600px",
    source: "example_json.json"  // JSON文件路径
  }
</script>
<script src="source/js/VMM.Timeline.js"></script>

完整示例可参考examples/example_json.html

方法二：Google表格数据源

适合多人协作维护的时间轴，支持实时更新数据。

1. 准备表格：按模板创建Google表格，发布为网页（文件>发布到网络）

2. 获取表格ID：从发布URL中提取ID（如https://docs.google.com/spreadsheet/pub?key=TABLE_ID&output=html）

3. 嵌入代码：使用表格ID配置时间轴

<div id="timeline-embed"></div>
<script type="text/javascript">
  var timeline_config = {
    width: "100%",
    height: "600px",
    source: "https://docs.google.com/spreadsheet/pub?key=TABLE_ID&output=html"
  }
</script>
<script src="source/js/VMM.Timeline.js"></script>

完整实现见examples/example_googlespreadsheet.html

方法三：jQuery动态加载

适合需要动态控制时间轴的高级场景，支持事件绑定和参数修改。

1. 引入jQuery库：确保页面已加载jQuery

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

2. 动态初始化：使用JavaScript API创建时间轴

<div id="my-timeline"></div>
<script>
$(document).ready(function() {
  createStoryJS({
    type: 'timeline',
    width: '800',
    height: '600',
    source: 'example_json.json',
    embed_id: 'my-timeline'
  });
});
</script>

这种方式支持动态更新数据源，适合单页应用场景。示例代码位于examples/example_jquery_load.html

样式自定义与高级配置

主题切换

TimelineJS提供多种主题，通过修改CSS文件实现：

• 默认主题：source/css/timeline.css
• 深色主题：source/less/Theme/Dark.less

字体设置

通过修改source/less/Core/Font/目录下的LESS文件自定义字体，支持多种预设组合：

• AbrilFatface-Average.less
• BreeSerif-OpenSans.less

常见问题解决

跨域数据加载

当使用远程数据源时，需确保服务器支持CORS或使用JSONP格式。JSONP示例见examples/example_jsonp.html

响应式布局适配

添加视口设置确保移动端显示正常：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

性能优化

• 大型时间轴建议使用分页加载
• 图片资源使用懒加载，参考source/js/Library/LazyLoad.js

示例展示与资源

官方提供多个应用示例，可直接参考实现：

• ** Storify集成**：examples/example_storify.html
• 多语言支持：source/js/Core/Language/locale/目录包含30+种语言包

总结

通过本教程，你已掌握TimelineJS的三种嵌入方式，从简单的JSON文件到高级的动态加载。无论是个人博客、企业网站还是教育平台，都能通过时间轴清晰展示事件序列。更多高级功能可查阅DEVELOPER.md文档。

建议收藏本教程，关注项目更新获取最新功能。如有疑问，可参考tests/目录下的测试用例或提交issue反馈。