Talkie.js 开源项目最佳实践教程

2025-05-19 18:48:09作者：柯茵沙

1. 项目介绍

Talkie.js 是一个基于 Web Components 的简单幻灯片库，支持 Markdown 格式，具备响应式缩放、键盘和触摸控制等功能。该项目使用 TypeScript 和 ReactiveX/rxjs 进行开发，适用于构建网页端的演示文稿。

2. 项目快速启动

以下是快速启动 Talkie.js 的步骤：

首先，确保你的开发环境中安装了 Node.js 和 npm。

# 克隆项目
git clone https://github.com/ahomu/Talkie.git

# 进入项目目录
cd Talkie

# 安装依赖
npm install

# 启动开发服务器
npm start

启动成功后，你可以在浏览器中访问 http://localhost:3000 查看示例幻灯片。

以下是简单的 HTML 示例代码：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="./dist/talkie.css">
  <link rel="stylesheet" href="./dist/talkie.theme-default.css">
</head>
<body>
  <tk-slide layout>
    <h1>Slide 1</h1>
  </tk-slide>
  <tk-slide layout type="text/x-markdown">
    # Slide 2
  </tk-slide>
  <script src="./dist/webcomponents-loader.js"></script>
  <script src="./dist/talkie.js"></script>
  <script>
    window.addEventListener('WebComponentsReady', function(e) {
      document.body.className += ' webcomponents-ready';
      talkie.run();
    });
  </script>
</body>
</html>

3. 应用案例和最佳实践

代码高亮

如果你的幻灯片中需要代码高亮，请确保加载以下文件：

<link rel="stylesheet" href="https://cdn.example.com/ajax/libs/highlight.js/9.12.0/styles/monokai-sublime.min.css">
<script src="//cdn.example.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>

幻灯片比例

默认幻灯片比例为 4:3（宽度 1024px，高度 768px）。如果你希望使用 16:9 的比例，可以在 talkie.run 方法中设置 wide: true：

talkie.run({ wide: true });

滚动方向

默认滚动方向为垂直。如果你希望水平滚动，可以在 talkie.run 方法中设置 horizontal: true：

talkie.run({ horizontal: true });

背景图片和滤镜

你可以在每个幻灯片中添加 backface 属性来设置背景图片和滤镜：

<tk-slide layout backface="background-image.jpg" backface-filter="blur(1px) brightness(.8)">
  <h1>Title</h1>
  <p>foo, bar, baz, qux...</p>
</tk-slide>