跳至主要内容

如何拥有一个漂亮的故事线

一、背景介绍

最初发现 TimelineJS 是在 2014 年。为了制造一个惊喜，用它做了一个与爱人从相识到结婚的时间线。
转眼 2020，TimelineJS 也有了第三个版本。
对于平时有记录习惯的人来说，拥有一个关于自己的易读美观的故事线是一件非常有成就感的事，我自己便属于这类人。另一方面，TimelineJS 仍然非常小众，而且国内几乎没有对它的介绍和使用说明。本文的目的是便是能够把它的使用方法描述清晰。

TimelineJS 能做什么

TimelineJS 是 Northwestern University Knight Lab 社区的一个产品，它可以用来制作时间线（时间轴）的故事，元素支持文本、图片、音乐、视频、地图。官网罗列出的类型包括：
Twitter, Flickr, YouTube, Vimeo, Vine, Dailymotion, Google Maps, Wikipedia, SoundCloud, Document Cloud and more！
在官网上能看到几个示例，比如对美国歌手惠特妮·休斯顿的生平介绍：https://timeline.knightlab.com/examples/houston/index.html
whitneyhouston

本文适用的读者

TimelineJS 虽然适用简单，但如果你能够：
  • 懂点前端知识；
  • 懂点网站托管知识；
  • 最好熟悉 JSON 语法；
  • 最好能科学上网（不会也没关系，一样可以本地使用）；
那么，TimelineJS 对你来说毫无门槛。

二、几种使用方法

要想使用 TimelineJS 制作故事线，需要从以下两个方面考虑：
  • 故事线的数据存放到哪里
  • 故事线的网页运行在哪里
幸运的是，这两个方面官方都考虑到了，使用 Google docs 来存放故事线的数据，Knight Lab 提供页面托管。只要按照这里的 4 个步骤 https://timeline.knightlab.com/#make 就能生成 Knight Lab 给你的一个链接。对于想尝试一下的人来说，这样就足够了，简单么！
但是，它实际上是支持以下三种组合使用的：
  1. Knight Lab + Google docs # 官方推荐，需科学上网
  2. 自己的页面 + Google docs # 可个性化定制页面，需科学上网
  3. 自己的页面 + JSON 文件 # 可个性化定制页面
第一种是上面官方推荐的用法。对于想要个性化定制页面的用户来说，就需要使用后两种方法了。对于不能使用 Google 服务的用户来说，就只能选择第三种方法了。
从隐私方面来考虑，一旦使用 Google docs 这种组合，就意味着需要把文档公开，所以对于不想公开故事线信息的人来说，最好的办法就是使用本地的 JSON 文件，也就是第三种组合。
接下来详细介绍一下后两种组合的使用方法。

三、详细使用

1. 自己的页面 + Google docs

按照 https://timeline.knightlab.com/#make 这里前两个步骤：
第二步、把你的表格发布到网络后，复制表格的 URL；
第三步、创建一个自己的 HTML 页面，把第 16 行的链接替换为你自己表格的 URL：
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Timeline</title>
    <meta charset="utf-8">
    <link title="timeline-styles" rel="stylesheet"
        href="https://cdn.knightlab.com/libs/timeline3/latest/css/timeline.css">
</head>

<body>
    <script src="https://cdn.knightlab.com/libs/timeline3/latest/js/timeline.js"></script>
    <div id='timeline-embed' style="width: 100%; height: 600px"></div>
    <script type="text/javascript">
        timeline = new TL.Timeline('timeline-embed',
            'https://docs.google.com/spreadsheets/d/1cWqQBZCkX9GpzFtxCWHoqFXCHg-ylTVUWlnrdYMzKUI/pubhtml');
    </script>
</body>

</html>
这样，在本地打开这个页面，就可以看到自己的故事线了。

2. 自己的页面 + JSON 文件

为了直接能从本地引用 timeline.js 和 css 文件，从这里 https://cdn.knightlab.com/libs/timeline3/latest/timeline3.zip 下载官方的编译后压缩包，解压到本地网页目录，重命名为 build。这时，你的网页目录应该是这样的：
.
└── build
    ├── css
    │   ├── fonts
    │   ├── icons
    │   ├── themes
    │   └── timeline.css
    ├── embed
    │   └── index.html
    └── js
        ├── library
        ├── locale
        ├── timeline-embed-cdn.js
        ├── timeline-embed.js
        ├── timeline-min.js
        └── timeline.js
接下来，创建一个时间线的 JSON 文件，可以直接下载 惠特妮·休斯顿 的示例，放到网页目录中，重命名为 data.json。
接下来，创建一个 HTML 文件，名字为 index.html，内容如下：
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Timeline</title>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">

    <!-- build:css https://cdn.knightlab.com/libs/timeline3/latest/css/timeline.css -->
    <link title="timeline-styles" rel="stylesheet" href="./build/css/timeline.css">
    <!-- endbuild -->
    <!-- build:js https://cdn.knightlab.com/libs/timeline3/latest/js/timeline-min.js.js -->
    <script src="./build/js/timeline-min.js"></script>
    <!-- endbuild -->

    <!-- Style-->
    <style>
        html, body {
        height:100%;
        padding: 0px;
        margin: 0px;
        }
      </style>
</head>

<body>

    <div id="timeline-embed">
        <div id="timeline"></div>
    </div>

    <script>
        $(document).ready(function () {
            var embed = document.getElementById('timeline-embed');
            embed.style.height = getComputedStyle(document.body).height;
            window.timeline = new TL.Timeline('timeline-embed', 'data.json', {
                hash_bookmark: false
            });
            window.addEventListener('resize', function () {
                var embed = document.getElementById('timeline-embed');
                embed.style.height = getComputedStyle(document.body).height;
                timeline.updateDisplay();
            })
        });
    </script>

</body>

</html>
这时，你的页面目录结构应该为：
.
├── build
│   ├── css
│   ├── embed
│   └── js
├── data.json
└── index.html
如果本地直接打开 index.html，会在页面的调试工具中看到跨域的错误：
Access to XMLHttpRequest at 'file:///path/to/your/data.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
cors
跨域错误的原因是 timeline.js 读取的 json 文件是本地文件，不是 http 这种 URL 的。要解决这个问题，可以考虑使用 http server 把页面托管起来。Windows 用户可以选择 Web Server for Chrome 扩展，把网页目录托管起来。当然 Linux 和 Mac 用户也可以这样用，既然你都用 Linux 或 Mac 了，就跟着我一起折腾吧。
接下来，我们尝试一下 Nginx 来托管静态页面，无需编译安装 Nginx，直接用 Docker 来运行即可。（前置条件：你要自己安装 Docker for Linux or Docker for Mac）
在网页目录新建一个 start-nginx-docker.sh 文件，内容如下：
docker run --name timeline-nginx -v ${PWD}:/usr/share/nginx/html -p 8080:80 -d nginx
这时，你的网页目录应该是这样的：
.
├── build
│   ├── css
│   ├── embed
│   └── js
├── data.json
├── index.html
└── start-nginx-docker.sh
在该目录下，运行 sh start-nginx-docker.sh 命令，会自动下载 Nginx 最新的镜像并运行。
打开 http://127.0.0.1:8080 就能浏览了。
剩下的事，就是去修改你的 json 文件。
TimelineJS 的 JSON 中字段的意思都在这里进行了说明 https://timeline.knightlab.com/docs/json-format.html

四、个性化页面

自定义字体

TimelineJS 提供了几个预选字体集，如果使用内置的字体，可以在 HTML 中这样写：
<link title="timeline-styles" rel="stylesheet" href="https://cdn.knightlab.com/libs/timeline3/latest/css/timeline.css">
<link title="timeline-styles" rel="stylesheet" href="https://cdn.knightlab.com/libs/timeline3/latest/css/fonts/font.abril-droidsans.css">
font.abril-droidsans.css 可以替换为下面其他的字体：
font.abril-droidsans.css
font.amatic-andika.css
font.bevan-pontanosans.css
font.bitter-raleway.css
font.clicker-garamond.css
font.dancing-ledger.css
font.default.css
font.fjalla-average.css
font.georgia-helvetica.css
font.knightlab.css
font.lustria-lato.css
font.medula-lato.css
font.oldstandard.css
font.opensans-gentiumbook.css
font.playfair-faunaone.css
font.playfair.css
font.pt.css
font.roboto-megrim.css
font.rufina-sintony.css
font.ubuntu.css
font.unicaone-vollkorn.css

自定义选项

定义 additionalOptions 并在实例化 Timeline 的时候作为第三个参数传入。详细的个性化选项可以参考 https://timeline.knightlab.com/docs/options.html
<script type="text/javascript">
    var additionalOptions = {
        start_at_end: true,
        default_bg_color: {
            r: 0,
            g: 0,
            b: 0
        },
        timenav_height: 250
    }

    timeline = new TL.Timeline('timeline-embed',
        'https://docs.google.com/spreadsheets/d/1cWqQBZCkX9GpzFtxCWHoqFXCHg-ylTVUWlnrdYMzKUI/pubhtml',
        additionalOptions);
</script>

五、还有什么

页面 + JSON 文件方式除了可以本地浏览，也可以部署到网络上，比如 github pages。

六、参考

Timeline 个性化选项说明 https://timeline.knightlab.com/docs/options.html
​
标签：

评论

发表评论

此博客中的热门博文

VMware Workstation 10安装Mac OS X Mountain Lion 10.8.5

关于原版OS X Mountain Lion 10.8.5 Mac OS X Mountain Lion 10.8.5作为Mountain Lion的最后一个稳定版本值得我们收藏。可能大家有所不知，10.8.5版本是分为两个Build的，一个是在2013年9月13日发布的 10.8.5 Build 12F37 ，另一个是2013年10月3日发布的 10.8.5 Build 12F45 。也就是说， 10.8.5 Build 12F45 才是Mountain Lion的最终版本。 OS X Mountain Lion的维基百科 不幸的是，网友们和论坛中分享的 OS X Mountain Lion 10.8.5 正式版 原版完整DMG安装镜像 大多数是Build 12F37版本（从发帖日期就可以看出来），网上搜索到的种子文件也是Build 12F37的种子。要想下载原版Build 12F45，可以搜索 OSX1085-12F45-ESD.dmg ，或者从这里下载： http://pan.baidu.com/s/1f68Vv 怎么知道下载了哪个版本？ 通过文件的MD5等校验值来辨别。使用软件： Hash 或者 HashTab 。 OS X Mountain Lion 10.8.5 Build 12F37.dmg 信息如下： 大小: 4469250353 字节 MD5: 5568B4DDE00A64F765EF00858B538078 SHA1: ECF68C2119C71825839D2A58E0D619E9CCF7C026 CRC32: F4DFCE4D 从中提取出的InstallESD.dmg： MD5: 2C77151BE45C820B02A9ACE05434693D SHA1: 2919B519142E2119197BFFD678F15F603E84970F CRC32: A9DCAE18 OSX1085-12F45-ESD.dmg 信息如下： 大小: 4448808132 字节 MD5: 3FCEBFC81D00767D1ACEF1CB166F88CC SHA1: 98E52D0FC443940265780539A311833EE5814DDD CRC32: C82F14C1 从中提取出的InstallESD.dmg： 大小: 443...
1 条评论
阅读全文

为Github的Hexo博客启用SSL/TLS

CloudFlare的免费套餐提供了SSL，可以用它为我们独立域名的博客启用HTTPS。本文以 http://g2ex.me 为例。 主要步骤 注册CloudFlare，添加个人网站，获取CLoudFlare提供的 Nameservers ; 修改自己的域名提供商，把 站点的Nameservers 修改为 CloudFlare提供的Nameservers ； 等待CloudFlare添加的网站为激活状态，使用 https 打开个人网站； 修改网站模版，使 http 跳转到 https 。 详细步骤 一、注册CloudFlare 首先注册CloudFlare，注册后按照提示 Add Websites ，输入域名后点击 Begin Scan ： 到达最后一步，会提示把自己网站的域名 Name Server 更换为： charles.ns.cloudflare.com ivy.ns.cloudflare.com 二、修改域名提供商的Nameservers 本站使用了Godaddy域名提供商，登录Godaddy，在域名的 SETTINGS 中，点击 Nameservers 下的 Manage : 勾选 Custom 并点击 ADD NAMESERVER ，添加上边CloudFlare给的两个Name Servers。 三、等待CloudFlare确认 稍等片刻（几分钟到十几分钟），在CloudFlare中点击 Recheck Nameservers ，可以看到网站已经处于激活状态了。 之后，便可以用 https://g2ex.me 访问站点了。 四、强制跳转 至此，必须手动输入 https 前缀才能访问加密的站点，要想在任何情况下都以加密方式访问网站，可以在网站模版的头中加入 http 到 https 的强制跳转。 以当前Hexo的 NexT主题 为例，打开 layout 目录下的 _layout.swig ，在 <head> 标签中加入以下代码，注意把 yoursite.com 替换为你的域名，这里为 g2ex.me 。 < script type = "text/javascri...
2 条评论
阅读全文

Android 电视折腾记

要从 BBC 放出的几段《 Planet Earth II 》说起，突发奇想地打算在小米电视上看 YouTube 视频，电视的系统基于 Android 5.1，最终通过 Kodi + Youtube 插件成功实现目的。 0x00 介绍 Kodi 原名 XBMC，是一个开源跨平台的多媒体播放平台，支持视频、音乐、图片、直播、本地和在线媒体、网络服务等等。Kodi 最让人称奇的是它众多的插件，通过对应的插件，网络上的各种资源就可以完美地在 Kodi 中播放。 不过，在国内，要想观看 YouTube，还要考虑的一个问题是让电视自动翻墙。 这里以小米电视为例，当然也可以是其他 Android 电视，也可以是各种盒子。 0x01 让电视科学上网 有以下选择（前提是你有一台海外 VPS，搭建了 Shadowsocks 服务端，或者是配置了 VPN）： 家用路由器翻墙。目前用的是小米路由器，需要刷开发版 ROM 获取 root 权限，才能安装 Shadowsocks 客户端实现自动翻墙，比较麻烦；现在小米 WiFi App 可以设置 智能 VPN ，支持 选择地址限流 和 选择设备限流 ，如果选择电视限流的话，电视相当于是全局 VPN 了。 不想折腾路由器的，可以用一台局域网电脑作为家庭代理，安装上 Shadowsocks 和 Privoxy（支持局域网的 SOCKS/http/https 代理）。按照这种思路最好弄个树莓派做家庭代理。 电视上安装翻墙 App，可选 Shadowsocks 和 Postern。 这里选择在电视安装 Postern App 。最主要原因是 Postern 的自动翻墙配置利用了 GEOIP 库可以精准地实现「国内流量直连，国外流量走代理」。Shadowsocks 设置里因为用 8.8.8.8 DNS（或其他） 去解析域名，国内的某些提供了海外加速的服务就会被解析到国外 IP 上，反而更慢了。另外，Postern 还能在配置里过滤广告。 具体的过程： 下载 Postern App https://github.com/postern-overwal/postern-stuff 下载自动翻墙配置文件 https://github.com/postern-overwal/postern-stuff/b...
发表评论
阅读全文