使用 Timeline JS 一段时间后的更新

Sample 项目

我以前读书的时候历史课就经常记不住年份,现在会用 Timeline JS,读历史书先找事件年表,拉出一条时间轴给自己参考非常实用,想想就自我感觉良好。

参考维基百科,选择「英法百年战争」为主题,做了一条时间轴,拿来作为使用 Timeline JS 的参考项目。因为一些译名翻译挺纠结的,就用英语来做了,然后这个坑比我预期的要大,所以仍然是进行中的项目

零零碎碎

Timeline JS 的 JSON 可以包含一个 eras 对象数组,顾名思义,可以用来表示时代跨度。但是 era 对象用于描述信息的只有 headline 属性,所以还是用 events 对象数组比较灵活。

events 数组里的 slide 对象可以设置 group 属性进行分组,分组出现的顺序取决于该分组中时间最早的 slide。如果时间相同,则取决于在 json 文件中的先后顺序。

官方的建议,一个时间轴不要超过 20 slides,但这个数字很容易超过。slide 数量多了之后载入速度还好,JSON 文件编辑比较麻烦。时间轴的粒度需要做一定的规划,比如,相比一条巨大的「中国历史」时间轴列出各种人物、事件,可以用简略的「中国朝代」时间轴分别再链接到各个朝代的子时间轴,当然这样也有时间轴组织的复杂度。

slide 对象的 text 属性支持 html,但是在 json 里不方便预览。应该可以扔在一个 html 文件里面然后载入的时候动态替换,不过不熟悉会对速度有怎样的影响。有点需求蔓延了,我就先想想。

本地调试用 node.js 装一个 live-server,手指会比较不那么累。发布用 GitHub Pages,但是它的 CDN 刷新有时你得等。

JSON 编辑

VS Code 支持 JSON 语法高亮,但本质上还是文本编辑。文件大了以后,查找内容不直观。出错了 Timeline JS 直接白板,都是些复制粘贴出错,漏了逗号括号之类的活,改一点就刷新一下又琐碎得很。

Smart JSON Editor 是 macOS 平台上免费的 JSON 编辑器,可以避免直接以文本格式编辑出现的错误,也支持复制粘贴对象,省去重复创建对象结构的麻烦,但是查看数据仍然不直观(也可能这工具我不太会用)

Sqlite to JSON converter

直观的数据查看方式,比如二维的表格。创建一张表格,愉快地输入数据,然后用程序转换为符合格式需要的 JSON,这样似乎能省点力气。

Timeline JS 本来就支持用 Google spreadsheet 输入数据,参照它的数据结构用在 sqlite 里创建表格(DB Browser for SQLite),用刚学会的 node.js 做点笨拙的体力活,得到一个用于 Timeline JS 的 Sqlite to JSON 数据转换工具

这样输入数据的体验也不算是十全十美,不过至少让自己舒服一点了

打包成 npm global package 使用应该更加方便,不过暂时还不会,先这样了。