【Typst】纵向时间轴

概述

6月10日实验了一个纵向时间轴排版效果，当时没有做成单独的模块，也存在一些Bug。

今天(6月29日)在原基础上进行了一些改进，并总结为模块。

目前暂时发布出来，可用，后续可能会进行大改。

使用案例

• 导入模块
• 使用time_line_page()创建时间轴页面
• 在时间轴页面内用time_node()创建时间节点，包括日期、标题和内容三部分

#import "TimeLine.typ":*   // 导入模块// 创建时间轴页面
#time_line_page[
#time_node[2005-06-29][整理几何图形绘制][今天花时间对一些内容进行了整理，包括几何图形绘制函数。增加了很多像下面这样的表格。#image("image-2.png")]#time_node[2005-06-29][TimeLine改进][- 将TimeLine设计为了单独的模块- 改进换页的Bug- 实现页面函数，改进默认风格]
]

效果：

模块代码

/*
* 名称：TimeLine
* 描述：用于创建竖向时间轴的自定义模块
* 作者：巽星石
* 创建时间：2025年6月10日
* 最后修改：2025年6月29日
*/ // 页面函数
#let time_line_page = page.with(background: [#place(top,dx:5cm,dy:2.5cm)[#line(start:(0cm,0cm),angle: 90deg,length: 100% - 5cm,stroke: (dash: "dashed",paint: gray))]]
)// 纵向时间轴的时间节点
#let time_node(date,title,ctn) = [#table(columns: 3,stroke: none,inset: 0pt)[#block(width: 2cm,clip: true,inset: 5pt,fill: luma(220))[#date]][#block(width: 1cm,inset: 5pt)[#align(center+horizon)[#place(dy:4pt)[ #line(start: (-5pt,0pt), length: 100%+10pt,stroke: luma(200))]#circle(radius: 4pt,fill:gray.darken(50%))]]][// 内容#block(width: 100%,fill: luma(87.84%),radius: 2pt,inset: 10pt)[#(if title!="" [#block[#text(size: 16pt)[#title]]])#ctn]]
]