TimelineJS3 项目样式自定义完全指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00389/article/details/148755328

TimelineJS3 项目样式自定义完全指南

TimelineJS3 TimelineJS v3: A Storytelling Timeline built in JavaScript. http://timeline.knightlab.com 项目地址: https://gitcode.com/gh_mirrors/ti/TimelineJS3

前言

TimelineJS3 是一个功能强大的时间轴可视化工具，它允许用户通过简单的配置创建精美的交互式时间轴。虽然 TimelineJS3 提供了默认的样式设置，但开发者可能需要根据项目需求进行更深度的样式定制。本文将全面介绍如何覆盖和扩展 TimelineJS3 的样式系统。

基础样式修改

字体与排版

对于简单的排版调整，如加粗或斜体文本，可以直接在以下字段中使用基本HTML标签：

headline（标题）
text（正文）
media credit（媒体来源）
media caption（媒体说明）

支持的HTML标签包括：

<b>, <strong>（加粗）
<i>, <em>（斜体）
<p>, <span>, <div>（支持style属性）

注意：出于安全考虑，TimelineJS可能会过滤某些潜在的恶意HTML标记

字体更换方法

简单方法：使用TimelineJS作者工具第三步"可选设置"中提供的字体组合
高级方法：创建自定义字体CSS文件
- 从CDN获取基础字体CSS模板
- 使用CSS格式化工具美化代码
- 编辑字体定义
- 将文件托管到可访问的URL

深度样式定制

CSS预处理技术

TimelineJS3 使用Less CSS预处理器来管理复杂的样式规则。这意味着：

样式规则通常具有高度特异性
直接覆盖可能比较困难
建议编辑Less源文件并重新编译

自定义CSS实现路径

直接编辑法：
- 下载主CSS文件副本
- 修改所需样式规则
- 托管修改后的文件
开发环境法：
- 设置npm开发环境
- 编辑src/less目录下的源文件
- 运行npm run dist重新编译
- 使用生成的CSS文件

应用自定义样式

对于iframe嵌入方式：

修改iframe的src属性
添加theme参数指向自定义CSS URL

对于JavaScript实例化方式：

可以直接在页面中使用<style>标签覆盖CSS
或通过配置选项指定自定义样式表

核心CSS类参考

幻灯片相关类

| 类名 | 元素类型 | 说明 | |------|---------|------| | tl-timeline | div | 包含整个时间轴的容器 | | tl-slider-container-mask | div | 幻灯片包装器，可设置背景 | | tl-slide | div | 单个幻灯片容器 | | tl-media-content-container | div | 媒体内容容器（含媒体、来源和说明） | | tl-text | div | 文本区域（含内边距） | | tl-headline | h2 | 幻灯片标题（标题幻灯片有额外类.tl-headline-title） |

时间导航相关类

| 类名 | 元素类型 | 说明 | |------|---------|------| | tl-timenav | div | 时间轴导航条 | | tl-timemarker | div | 时间标记（当前幻灯片有.tl-timemarker-active类） | | tl-timemarker-content-container | div | 标记旗帜（可设置背景和文本颜色） | | tl-timemarker-timespan | div | 时间跨度指示器 |

导航控件类

| 类名 | 元素类型 | 说明 | |------|---------|------| | tl-slidenav-next/tl-slidenav-previous | div | 前进/后退导航容器 | | tl-slidenav-icon::before | div | 导航箭头图标 | | tl-slidenav-title | div | 下一张/上一张幻灯片标题 | | tl-slidenav-description | div | 悬停时显示的描述文本 |