用 Trilium 制作可互动时间轴

起因

看到微信群里有人说「在整合历史时间轴方面，我目前还没发现有很好的工具」，于是想到了 trilium 的自定义 render note 也许可以通过引用第三方库来实现画时间轴。经过一些缝缝补补，合成了这么一个功能。

实现

参考 trilium 默认范例里的「体重统计」，我先写了一个 render note 来收集所有打了 timeline 标签的笔记，并渲染成表格。

<p>This table shows notes with label <code>timeline</code></p> 

<table class="table stats-table" style="font-size: 90%;">
    <tr>
        <th>Event</th>
        <th nowrap>Date</th>
    </tr>
</table>

const events = await api.runOnServer(async () => {
    // 搞到有这个标签的笔记
    const notes = await api.getNotesWithLabel('timeline');
    const events = [];

    for (const note of notes) {
        // 取到标签内容（即时间线上日期）
        const date = await note.getLabelValue('timeline');
        const id = note.noteId;
        const title = note.title;
        
        if (date) {
            events.push({ id, date, title });
        }
    }
		// 排序！！！
    events.sort((a, b) => a.date > b.date ? 1 : -1);

    return events;
});

const $statsTable = api.$container.find('.stats-table'); // 找到要插入数据的表格

for (const event of events) {     
    $statsTable.append(
        $("<tr>")
            .append( // 插入笔记标题
                $("<td>").append(await api.createNoteLink(event.id, {showNotePath: false}))
            ) 
            .append($("<td nowrap>").text(event.date)) // 插入笔记日期
    );
}

顺便建立了一些测试用笔记，给这些笔记的父笔记（题外话：为什么是父不是母呢？因为我对母的理解是「幻灯片模板」那样的内容上的 parent，而父给我的感觉是在结构上的 parent）增加一个可继承 label 定义：

这样在下面建立的子笔记都会自动带上这个可填写字段。

完成这一步后，效果就是图上第一部分的表格。

接下来，我做了一些调查，看中了 visjs 的可互动时间轴。

下载它的最小分发版，作为文件导入 trilium，并取消勾选自动转为 code note 的选项，然后模仿官方范例写一些代码：

const container = document.getElementById("visualization"); // 找到要插入表格的地方
const options = {};
const visData = [];
for (const event of events) {
    visData.push({start: event.date, content: event.title}); // 把数据放进去
}
const items = new vis.DataSet(visData);
const timeline = new vis.Timeline(container, items, options); // 新建时间轴

对了，render note 的 html 模板里要加上：