TimelineJS嵌入教程：将时间轴无缝集成到你的网站
【免费下载链接】TimelineJS 
项目地址: https://gitcode.com/gh_mirrors/tim/TimelineJS
你是否曾想在网站中展示一段引人入胜的历史进程？ TimelineJS提供了一种简单高效的方式，让你无需复杂编程就能创建交互式时间轴。本教程将带你通过三种常用方式，在10分钟内完成时间轴的嵌入，无论你是内容创作者还是网站管理员，都能轻松掌握。
准备工作：获取TimelineJS资源
开始前需准备TimelineJS核心文件，有两种获取方式：
- 本地部署：通过仓库克隆获取完整代码
git clone https://gitcode.com/gh_mirrors/tim/TimelineJS.git
项目结构中，嵌入相关文件位于examples/目录，核心JS文件为source/js/VMM.Timeline.js
- 使用CDN：生产环境推荐使用国内CDN（需替换为实际可用地址）
<script src="https://cdn.example.com/storyjs-embed.js"></script>
方法一：基础JSON数据嵌入
JSON格式是最灵活的数据源方式，适合本地管理时间轴数据。
- 创建数据文件：参照examples/example_json.json格式，创建包含时间节点的JSON文件
{
"title": {
"text": {
"headline": "我的项目时间轴",
"text": "记录重要发展节点"
}
},
"events": [
{
"start_date": { "year": "2023", "month": "1" },
"text": { "headline": "项目启动", "text": "开始规划阶段" }
}
]
}
- 嵌入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表格数据源
适合多人协作维护的时间轴，支持实时更新数据。
-
准备表格：按模板创建Google表格，发布为网页（文件>发布到网络）
-
获取表格ID：从发布URL中提取ID（如
https://docs.google.com/spreadsheet/pub?key=TABLE_ID&output=html） -
嵌入代码：使用表格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动态加载
适合需要动态控制时间轴的高级场景，支持事件绑定和参数修改。
- 引入jQuery库：确保页面已加载jQuery
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
- 动态初始化：使用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文件自定义字体，支持多种预设组合：
常见问题解决
跨域数据加载
当使用远程数据源时，需确保服务器支持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反馈。
【免费下载链接】TimelineJS 项目地址: https://gitcode.com/gh_mirrors/tim/TimelineJS
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
