PageSourceSearch

https://blog.orangex4.workers.dev/post/touying/

html blog.orangex4.workers.dev collected 2026-10-03 08:06:16 UTC 64,657 bytes, 578 lines download raw bytes

1<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="format-detection" content="telephone=no"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link rel="icon" href="/images/icons/favicon-16x16.png?v=2.6.1" type="image/png" sizes="16x16"><link rel="icon" href="/images/icons/favicon-32x32.png?v=2.6.1" type="image/png" sizes="32x32"><meta name="description" content="基于 Typst 的新一代的学术幻灯片(Slides)神器 —— Touying        Typst 是为写作而诞生的基于标记的排版系统,Typst 的目标是成为功能强大的排版工具,并且让用户可以愉快地使用它。简单来说:Typst &#x3D; LaTeX 的排版能力 + Markdown 的简洁语法 + 强大且现代的脚本语言。具体介绍你可以参考这篇文章。 而 Touying 是">
2<meta property="og:type" content="article">
3<meta property="og:title" content="基于 Typst 的新一代的学术幻灯片(Slides)神器 —— Touying">
4<meta property="og:url" content="https://blog.orangex4.cool/post/touying/index.html">
5<meta property="og:site_name" content="OrangeX4&#39;s Blog">
6<meta property="og:description" content="基于 Typst 的新一代的学术幻灯片(Slides)神器 —— Touying        Typst 是为写作而诞生的基于标记的排版系统,Typst 的目标是成为功能强大的排版工具,并且让用户可以愉快地使用它。简单来说:Typst &#x3D; LaTeX 的排版能力 + Markdown 的简洁语法 + 强大且现代的脚本语言。具体介绍你可以参考这篇文章。 而 Touying 是">
7<meta property="og:locale" content="zh_CN">
8<meta property="og:image" content="https://picgo-1258602555.cos.ap-nanjing.myqcloud.com/20240530222510.png">
9<meta property="og:image" content="https://picgo-1258602555.cos.ap-nanjing.myqcloud.com/20240530230252.png">
10<meta property="og:image" content="https://picgo-1258602555.cos.ap-nanjing.myqcloud.com/20240530222308.png">
11<meta property="og:image" content="https://picgo-1258602555.cos.ap-nanjing.myqcloud.com/20240530234209.png">
12<meta property="og:image" content="https://picgo-1258602555.cos.ap-nanjing.myqcloud.com/20240530234340.png">
13<meta property="og:image" content="https://picgo-1258602555.cos.ap-nanjing.myqcloud.com/20240530234638.png">
14<meta property="og:image" content="https://picgo-1258602555.cos.ap-nanjing.myqcloud.com/20240530234516.png">
15<meta property="og:image" content="https://picgo-1258602555.cos.ap-nanjing.myqcloud.com/20240530235341.png">
16<meta property="og:image" content="https://picgo-1258602555.cos.ap-nanjing.myqcloud.com/20240530235446.png">
17<meta property="og:image" content="https://picgo-1258602555.cos.ap-nanjing.myqcloud.com/20240530235636.png">
18<meta property="og:image" content="https://picgo-1258602555.cos.ap-nanjing.myqcloud.com/20240530235650.png">
19<meta property="og:image" content="https://picgo-1258602555.cos.ap-nanjing.myqcloud.com/20240531171810.png">
20<meta property="og:image" content="https://picgo-1258602555.cos.ap-nanjing.myqcloud.com/20231223211411.png">
21<meta property="og:image" content="https://picgo-1258602555.cos.ap-nanjing.myqcloud.com/20231127180414.png">
22<meta property="og:image" content="https://picgo-1258602555.cos.ap-nanjing.myqcloud.com/20231127180437.png">
23<meta property="og:image" content="https://picgo-1258602555.cos.ap-nanjing.myqcloud.com/20240531173702.png">
24<meta property="og:image" content="https://picgo-1258602555.cos.ap-nanjing.myqcloud.com/20240531173932.png">
25<meta property="og:image" content="https://picgo-1258602555.cos.ap-nanjing.myqcloud.com/20240531174245.png">
26<meta property="og:image" content="https://picgo-1258602555.cos.ap-nanjing.myqcloud.com/20240531174252.png">
27<meta property="article:published_time" content="2024-05-30T16:00:00.000Z">
28<meta property="article:modified_time" content="2024-05-31T09:50:27.527Z">
29<meta property="article:author" content="OrangeX4">
30<meta property="article:tag" content="Study">
31<meta property="article:tag" content="VS Code">
32<meta property="article:tag" content="Math">
33<meta property="article:tag" content="Chinese">
34<meta property="article:tag" content="Typst">
35<meta property="article:tag" content="Slides">
36<meta property="article:tag" content="Presentation">
37<meta property="article:tag" content="Typesetting">
38<meta name="twitter:card" content="summary">
39<meta name="twitter:image" content="https://picgo-1258602555.cos.ap-nanjing.myqcloud.com/20240530222510.png"><title>基于 Typst 的新一代的学术幻灯片(Slides)神器 —— Touying | OrangeX4's Blog</title><link ref="canonical" href="https://blog.orangex4.cool/post/touying/"><link rel="alternate" href="/atom.xml" type="application/atom+xml"><link rel="dns-prefetch" href="https://cdn.jsdelivr.net"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css" type="text/css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@latest/dist/gitalk.min.css" type="text/css"><link rel="stylesheet" href="/css/index.css?v=2.6.1"><link rel="dns-prefetch" href="https://hm.baidu.com">
39<script>var _hmt = _hmt || [];
40(function() {
41  var hm = document.createElement('script');
42  hm.src = 'https://hm.baidu.com/hm.js?5da695d1427042af7e2e176caea247f2';
43  hm.async = true;
44
45  if (false) {
46    hm.setAttribute('data-pjax', '');
47  }
48  var s = document.getElementsByTagName('script')[0]; 
49  s.parentNode.insertBefore(hm, s);
50})();</script>
50<script>var Stun = window.Stun || {};
51var CONFIG = {
52  root: '/',
53  algolia: undefined,
54  assistSearch: ["google","bing","baidu"],
55  fontIcon: {"prompt":{"success":"fas fa-check-circle","info":"fas fa-arrow-circle-right","warning":"fas fa-exclamation-circle","error":"fas fa-times-circle"},"copyBtn":"fas fa-copy"},
56  sidebar: {"offsetTop":"20px","tocMaxDepth":6},
57  header: {"enable":true,"showOnPost":false,"scrollDownIcon":true},
58  postWidget: {"endText":true},
59  nightMode: {"enable":true},
60  back2top: {"enable":true},
61  codeblock: {"style":"simple","highlight":"dark","wordWrap":false},
62  reward: false,
63  fancybox: false,
64  zoomImage: {"gapAside":"20px"},
65  galleryWaterfall: undefined,
66  lazyload: true,
67  pjax: undefined,
68  externalLink: {"icon":{"enable":true,"name":"fas fa-external-link-alt"}},
69  shortcuts: undefined,
70  prompt: {"copyButton":"复制","copySuccess":"复制成功","copyError":"复制失败"},
71  sourcePath: {"js":"js","css":"css","images":"images"},
72};
73
74window.CONFIG = CONFIG;</script>
74<meta name="generator" content="Hexo 5.3.0"></head><body><div class="container" id="container"><header class="header" id="header"><div class="header-inner header-inner--height header-inner--bgcolor"><nav class="header-nav header-nav--sticky"><div class="header-nav-inner"><div class="header-nav-menubtn"><i class="fas fa-bars"></i></div><div class="header-nav-menu"><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/"><span class="header-nav-menu-item__icon"><i class="fas fa-home"></i></span><span class="header-nav-menu-item__text">首页</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="javascript:;" onclick="return false;"><span class="header-nav-menu-item__icon"><i class="fas fa-layer-group"></i></span><span class="header-nav-menu-item__text">分类</span></a><div class="header-nav-submenu"><div class="header-nav-submenu-item"><a class="header-nav-submenu-item__link" href="/categories/Product/"><span class="header-nav-submenu-item__icon"><i class="fas fa-coffee"></i></span><span class="header-nav-submenu-item__text">产品</span></a></div><div class="header-nav-submenu-item"><a class="header-nav-submenu-item__link" href="/categories/Technology/"><span class="header-nav-submenu-item__icon"><i class="fas fa-keyboard"></i></span><span class="header-nav-submenu-item__text">技术</span></a></div><div class="header-nav-submenu-item"><a class="header-nav-submenu-item__link" href="/categories/Study/"><span class="header-nav-submenu-item__icon"><i class="fas fa-book"></i></span><span class="header-nav-submenu-item__text">学习</span></a></div><div class="header-nav-submenu-item"><a class="header-nav-submenu-item__link" href="/categories/Thoughts/"><span class="header-nav-submenu-item__icon"><i class="fas fa-lightbulb"></i></span><span class="header-nav-submenu-item__text">想法</span></a></div><div class="header-nav-submenu-item"><a class="header-nav-submenu-item__link" href="/categories/Lesson/"><span class="header-nav-submenu-item__icon"><i class="fas fa-pen"></i></span><span class="header-nav-submenu-item__text">第零课</span></a></div></div></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" target="_blank" rel="noopener" href="https://notes.orangex4.cool/"><span class="header-nav-menu-item__icon"><i class="fas fa-book"></i></span><span class="header-nav-menu-item__text">笔记</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/friends/"><span class="header-nav-menu-item__icon"><i class="fas fa-users"></i></span><span class="header-nav-menu-item__text">友链</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="javascript:;" onclick="return false;"><span class="header-nav-menu-item__icon"><i class="fas fa-flask"></i></span><span class="header-nav-menu-item__text">演示</span></a><div class="header-nav-submenu"><div class="header-nav-submenu-item"><a class="header-nav-submenu-item__link" target="_blank" rel="noopener" href="https://ch.orangex4.cool/"><span class="header-nav-submenu-item__icon"><i class="fas fa-book"></i></span><span class="header-nav-submenu-item__text">小抄</span></a></div><div class="header-nav-submenu-item"><a class="header-nav-submenu-item__link" target="_blank" rel="noopener" href="https://orangex.orangex4.cool/"><span class="header-nav-submenu-item__icon"><i class="fas fa-times"></i></span><span class="header-nav-submenu-item__text">橙式</span></a></div><div class="header-nav-submenu-item"><a class="header-nav-submenu-item__link" href="/demo/warma/"><span class="header-nav-submenu-item__icon"><i class="fas fa-flask"></i></span><span class="header-nav-submenu-item__text">沃玛</span></a></div><div class="header-nav-submenu-item"><a class="header-nav-submenu-item__link" href="/demo/guesswords/"><span class="header-nav-submenu-item__icon"><i class="far fa-question-circle"></i></span><span class="header-nav-submenu-item__text">猜猜猜</span></a></div><div class="header-nav-submenu-item"><a class="header-nav-submenu-item__link" href="/demo/truthtable/"><span class="header-nav-submenu-item__icon"><i class="fas fa-table"></i></span><span class="header-nav-submenu-item__text">
74真值表</span></a></div><div class="header-nav-submenu-item"><a class="header-nav-submenu-item__link" target="_blank" rel="noopener" href="http://1.15.246.22/"><span class="header-nav-submenu-item__icon"><i class="fas fa-adjust"></i></span><span class="header-nav-submenu-item__text">黑白棋</span></a></div><div class="header-nav-submenu-item"><a class="header-nav-submenu-item__link" target="_blank" rel="noopener" href="http://1.15.246.22:3367/"><span class="header-nav-submenu-item__icon"><i class="fas fa-keyboard"></i></span><span class="header-nav-submenu-item__text">拼音</span></a></div></div></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/about/"><span class="header-nav-menu-item__icon"><i class="fas fa-fingerprint"></i></span><span class="header-nav-menu-item__text">关于</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="javascript:;" onclick="return false;"><span class="header-nav-menu-item__icon"><i class="far fa-caret-square-down"></i></span><span class="header-nav-menu-item__text">更多</span></a><div class="header-nav-submenu"><div class="header-nav-submenu-item"><a class="header-nav-submenu-item__link" target="_blank" rel="noopener" href="https://github.com/OrangeX4"><span class="header-nav-submenu-item__icon"><i class="fab fa-github"></i></span><span class="header-nav-submenu-item__text">GitHub</span></a></div><div class="header-nav-submenu-item"><a class="header-nav-submenu-item__link" href="/archives/"><span class="header-nav-submenu-item__icon"><i class="fas fa-folder-open"></i></span><span class="header-nav-submenu-item__text">归档</span></a></div><div class="header-nav-submenu-item"><a class="header-nav-submenu-item__link" href="/tags/"><span class="header-nav-submenu-item__icon"><i class="fas fa-tags"></i></span><span class="header-nav-submenu-item__text">标签</span></a></div></div></div></div><div class="header-nav-search"><span class="header-nav-search__icon"><i class="fas fa-search"></i></span><span class="header-nav-search__text">搜索</span></div><div class="header-nav-mode"><div class="mode"><div class="mode-track"><span class="mode-track-moon"></span><span class="mode-track-sun"></span></div><div class="mode-thumb"></div></div></div></div></nav></div></header><main class="main" id="main"><div class="main-inner"><div class="content-wrap" id="content-wrap"><div class="content" id="content"><!-- Just used to judge whether it is an article page--><div id="is-post"></div><div class="post"><header class="post-header"><h1 class="post-title">基于 Typst 的新一代的学术幻灯片(Slides)神器 —— Touying</h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2024-05-31</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2024-05-31</span></span><span class="post-meta-item post-meta-item--wordcount"><span class="post-meta-item__icon"><i class="far fa-file-word"></i></span><span class="post-meta-item__info">字数统计</span><span class="post-meta-item__value">2.8k</span></span><span class="post-meta-item post-meta-item--readtime"><span class="post-meta-item__icon"><i class="far fa-clock"></i></span><span class="post-meta-item__info">阅读时长</span><span class="post-meta-item__value">17分</span></span></div></header><div class="post-body">
75        <h1 id="基于-typst-的新一代的学术幻灯片slides神器-touying"   >
76          <a href="#基于-typst-的新一代的学术幻灯片slides神器-touying" class="heading-link"><i class="fas fa-link"></i></a>基于 Typst 的新一代的学术幻灯片(Slides)神器 —— Touying</h1>
77      
78<p><span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://github.com/typst/typst" >Typst</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span> 是为写作而诞生的基于标记的排版系统,Typst 的目标是成为功能强大的排版工具,并且让用户可以愉快地ä
78½¿ç”¨å®ƒã€‚简单来说:Typst = LaTeX 的排版能力 + Markdown 的简洁语法 + 强大且现代的脚本语言。具体介绍你可以参考这篇文章。</p>
79<p>而 <span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://github.com/touying-typ/touying" >Touying</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span> 是为 Typst 开发的幻灯片/演示文稿包。Touying 也类似于 LaTeX 的 Beamer,但是得益于 Typst,你可以拥有更快的渲染速度与更简洁的语法。</p>
80<p>Touying 取自中文里的「投影」。相较而言,LaTeX 中的 Beamer 就是德文的投影仪的意思。</p>
81<a id="more"></a>
82
83        <h2 id="为什么使用-touying"   >
84          <a href="#为什么使用-touying" class="heading-link"><i class="fas fa-link"></i></a>为什么使用 Touying</h2>
85      
86<ul>
87<li>相较于 PowerPoint,Touying 并非「所示即所得的」,你可以使用一种「内容与样式分离」的方式编写你的 slides,尤其是 Typst 作为一个新兴的排版语言,提供了简洁但强大的语法,对于代码块、数学公式和定理等内容有着更好的支持。另一个优势是,在有着模板的情况下,用 Touying 编写 slides 要比 PowerPoint 快得多。因此 Touying 相较于 PowerPoint,更适合有着「学术写作」需求的用户使用。</li>
88<li>相较于 Markdown Slides,Touying 所依托的 Typst 有着更强大的排版控制能力,例如页眉、页脚、布局和便捷的自定义函数,而这是 Markdown 很难具备、或者说很难做好的能力。并且 Touying 提供了 <code>#pause</code> 和 <code>#meanwhile</code> 标记,提供了更为便捷的动态 slides 能力。</li>
89<li>相较于 Beamer,Touying 有着更快的编译速度、更简洁的语法,以及更简单的自定义主题的能力。相较于 Beamer 动辄几秒几十秒的编译时间,Touying 的编译速度基本上能够维持在几毫秒几十毫秒的即时渲染。并且 Touying 的语法相较于 Beamer 更为简洁,也更容易更改模板主题,以及创建你自己的模板。在功能上,Touying 支持了 Beamer 大部分的能力,并且还提供了一些 Beamer 所没有的便利功能。</li>
90<li>相较于 Polylux,Touying 提供了一种 oop 风格的语法,能够通过全局单例模拟提供「全局变量」的能力,进而可以方便地编写主题。并且 Touying 并不依赖 <code>counter</code> 和 <code>locate</code> 来实现 <code>#pause</code>,因此能有更好的性能。Touying 还提供了许多独特的功能,例如多种多样的动画能力。</li>
91</ul>
92<p><strong>一图流对比:</strong></p>
93<p>
94        <img   class="lazyload lazyload-gif"
95          src="/images/loading.svg" data-src="https://picgo-1258602555.cos.ap-nanjing.myqcloud.com/20240530222510.png"  alt="" />
96      </p>
97
98        <h2 id="环境搭建"   >
99          <a href="#环境搭建" class="heading-link"><i class="fas fa-link"></i></a>环境搭建</h2>
100      
101<p>开始使用 Typst 是十分简单的,你可以选择 <span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://typst.app/app/" >在线编辑</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span>,也可以选择本地编辑:</p>
102<ol>
103<li>安装 <span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://code.visualstudio.com/" >VS Code</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span> 作为本地 Typst 编辑工具。</li>
104<li>在 VS Code 中安装 <span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://marketplace.visualstudio.com/items?itemName=myriad-dreamin.tinymist" >Tinymist Typst</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span> 和 <span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://marketplace.visualstudio.com/items?itemName=mgt19937.typst-preview" >Typst Preview</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span> 插件。前者负责语法高亮和错误检查等功能,后者负责预览。
105<ul>
106<li>也推荐下载 <span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://marketplace.visualstudio.com/items?itemName=CalebFiggers.typst-companion" >Typst Companion</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span> 插件,其提供了例如 <code>Ctrl + B</code> 进行加粗等便捷的快捷键。</li>
107<li>你还可以下载我开发的 <span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://marketplace.visualstudio.com/items?itemName=OrangeX4.vscode-typst-sync" >Typst Sync</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span> 和 <span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://marketplace.visualstudio.com/items?itemName=OrangeX4.vscode-typst-sympy-calculator" >Typst Sympy Calculator</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span> 插件,前者提供了本地包的云同步功能,后者提供了基于 Typst 语法的科学计算器功能。</li>
108</ul>
109</li>
110<li>打开任意工作区,并新建一个  <code>.typ</code> 后缀的文件,例如 <code>main.typ</code>。</li>
111<li>最后用 VS Code 打开生成的目录,打开对应的 <code>.typ</code> 文件,并按下 <code>Ctrl + K V</code> 进行实时编辑和预览。</li>
112</ol>
113
114        <h2 id="示例代码"   >
115          <a href="#示例代码" class="heading-link"><i class="fas fa-link"></i></a>示例代码</h2>
116      
117<p>Touying 的语法很简单,你可以通过标题来划分 Slides。一个简单的示例:</p>
118<figure class="highlight plain"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">#import &quot;@preview&#x2F;touying:0.4.2&quot;: *</span><br><span class="line"></span><br><span class="line">#let s &#x3D; themes.simple.register(aspect-ratio: &quot;16-9&quot;)</span><br><span class="line">#let (init, slides) &#x3D; utils.methods(s)</span><br><span class="line">#show: init</span><br><span class="line"></span><br><span class="line">#let (slide, empty-slide) &#x3D; utils.slides(s)</span><br><span class="line">#show: slides</span><br><span class="line"></span><br><span class="line">&#x3D; Title</span><br><span class="line"></span><br><span class="line">&#x3D;&#x3D;
118 First Slide</span><br><span class="line"></span><br><span class="line">Hello, Touying!</span><br><span class="line"></span><br><span class="line">#pause</span><br><span class="line"></span><br><span class="line">Hello, Typst!</span><br></pre></td></tr></table></div></figure>
119<p>
120        <img   class="lazyload lazyload-gif"
121          src="/images/loading.svg" data-src="https://picgo-1258602555.cos.ap-nanjing.myqcloud.com/20240530230252.png"  alt="" />
122      </p>
123<p>更多的用法可以参考 <span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://touying-typ.github.io/touying/zh/" >Touying 中文文档</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span>。Touying 提供了许多内置主题模板,你可以在 <span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://touying-typ.github.io/touying/zh/docs/category/themes" >这里</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span> 找到。</p>
124<p>同时 Touying 通过 GitHub Wiki 提供了一个 <span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://github.com/touying-typ/touying/wiki" >Gallery</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span> 页面,可以在其中浏览由 Touying 用户创建的优雅幻灯片。例如 <span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://github.com/OrangeX4/typst-talk" >并不复杂的 Typst 讲座</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span> 就是使用 Touying 编写,你可以浏览 <span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://orangex4.github.io/typst-talk/" >在线版本</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span>。</p>
125<p>
126        <img   class="lazyload lazyload-gif"
127          src="/images/loading.svg" data-src="https://picgo-1258602555.cos.ap-nanjing.myqcloud.com/20240530222308.png"  alt="" />
128      </p>
129
130        <h2 id="学术幻灯片应有的特性"   >
131          <a href="#学术幻灯片应有的特性" class="heading-link"><i class="fas fa-link"></i></a>学术幻灯片应有的特性</h2>
132      
133<p>让我们思考一下一个好的学术 Slides 工具应该有哪些特性?</p>
134<ol>
135<li>可以在 Slides 里展示一个用户可见的进度条或当前剩余页数提示。</li>
136<li>易于加入代码块,要有正确的高亮,以及最好能够做到可复制,而不仅是截一张图片。</li>
137<li>能够通过脚本能力复用部分样式块,例如高亮、提示框或定理块等。</li>
138<li>易于编写数学公式,最好是能直接复用已有的数学公式源文件,且易于编辑。</li>
139<li>能够方便地设置文本样式,例如字号、字重和颜色。</li>
140<li>能够复用已有模板,用户只需要做一些填充工作。</li>
141<li>有「简单动画」能力,在 Powerpoint 指一部分动画效果,在 Beamer 里指 <code>\pause</code> 命令。</li>
142<li>有「演讲者视图」,可以展示仅演讲者可见的提示或笔记。</li>
143<li>能够方便地随意放置图片、以及图片之间的层叠覆盖,即基于页面的绝对定位布局。</li>
144<li>能够加入一些箭头、高亮或说明文本,对 Slides 的内容进行解释。</li>
145<li>能够加入 GIF 动图或者视频。</li>
146<li>能够通过在线链接进行更方便的分享和放映,也能分发普通 PDF 文件作为讲义。</li>
147<li>能有动态过渡动画效果,例如淡入淡出、平滑等。</li>
148</ol>
149<p>LaTeX 的 Beamer 能够实现 1~7,再使用类似于 <span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://pdfpc.github.io/" >pdfpc</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span> 这样的工具也能实现 8,但是 9~13 就很难做到了。</p>
150<p>PowerPoint 作为最老牌的所示即所得 Slides 软件,可以很方便地支持 5~11,也能一定程度上实现 4 数学公式支持,但是并不方便。而无论是行内代码、代码块或伪代码,PowerPoint 的表现都不尽人意,主要还是å
150œ¨äºŽä¸æ–¹ä¾¿ï¼Œä¸å¤Ÿè‡ªåŠ¨åŒ–ã€‚è€Œ 1 的自动化进度条更是难以找到解决方案,主要根源在于 PowerPoint 并不是一个可编程的 Slides 软件,也许只能靠插件实现这些功能。</p>
151<p>而 Typst 实际上能够实现 1~13 大部分能力,只有动态过渡动画效果目前还是难以实现。(后续支持 HTML 导出后 <span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://github.com/andreasKroepelin/polylux/issues/122" >可能就可以实现了</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span>,未来可期?)</p>
152<p>其中 1~6 可以通过定位类似于 Beamer 的 <span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://github.com/andreasKroepelin/polylux" >Polylux</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span> 实现,里面提供了一些简单的内置模板,当然你也可以实现一个自己的模板,相信使用 Typst 提供的简单语法,做到这件事并不难。</p>
153<p>而关于 8,你可以使用 <span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://github.com/touying-typ/touying-exporter" >Touying HTML 导出</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span> 来实现放映,还支持导出为 PPTX 格式。或者你也可以选择使用 Touying 的 <span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://touying-typ.github.io/touying/zh/docs/external/pdfpc" >Pdfpc</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span> 支持或 <span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://touying-typ.github.io/touying/zh/docs/external/pympress" >Pympress</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span> 支持。</p>
154<p>而关于 11,虽然 Typst 的 PDF 导出确实不支持 GIF 动图和视频,但是你可以使用 Typst Preview 插件实现 GIF 动图的预览,以及 <span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://github.com/touying-typ/touying-exporter" >Touying HTML 导出</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span> 也是支持 GIF 动图的。</p>
155<p>而关于 9 和 10,你可以使用我开发的一个 Typst 包 <span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://github.com/OrangeX4/typst-pinit/" >Pinit</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span>,其提供了一个基于页面绝对定位与基于「图钉」pins 相对定位的能力,可以很方便地实现箭头指示与解释说明的效果。</p>
156<p>下面我们具体介绍一下 Touying 的特殊且强大的能力。</p>
157
158        <h2 id="现代化的模板"   >
159          <a href="#现代化的模板" class="heading-link"><i class="fas fa-link"></i></a>现代化的模板</h2>
160      
161<p>Touying 内置的模板足够美观大方,你可以简单地开箱即用。Touying 提供了许多内置主题模板,你可以在 <span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://touying-typ.github.io/touying/zh/docs/category/themes" >这里</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span> 找到。</p>
162<p><span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://touying-typ.github.io/touying/zh/docs/themes/metropolis" >Metropolis 主题:</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span></p>
163<p>
164        <img   class="lazyload lazyload-gif"
165          src="/images/loading.svg" data-src="https://picgo-1258602555.cos.ap-nanjing.myqcloud.com/20240530234209.png"  alt="" />
166      </p>
167<p><span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://touying-typ.github.io/touying/zh/docs/themes/dewdrop" >Dewdrop 主题:</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span></p>
168<p>
169        <img   class="lazyload lazyload-gif"
170          src="/images/loading.svg" data-src="https://picgo-1258602555.cos.ap-nanjing.myqcloud.com/20240530234340.png"  alt="" />
171      </p>
172<p><span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://touying-typ.github.io/touying/zh/docs/themes/university" >University 主题:</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span></p>
173<p>
174        <img   class="lazyload lazyload-gif"
175          src="/images/loading.svg" data-src="https://picgo-1258602555.cos.ap-nanjing.myqcloud.com/20240530234638.png"  alt="" />
176      </p>
177<p><span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://touying-typ.github.io/touying/zh/docs/themes/aqua" >Aqua 主题:</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span></p>
178<p>
179        <img   class="lazyload lazyload-gif"
180          src="/images/loading.svg" data-src="https://picgo-1258602555.cos.ap-nanjing.myqcloud.com/20240530234516.png"  alt="" />
181      </p>
182<p>当然,基于 Typst 提供的简洁语法,你当然也可以自定义一个自己喜欢的主题。</p>
183
184        <h2 id="动画"   >
185          <a href="#动画" class="heading-link"><i class="fas fa-link"></i></a>动画</h2>
186      
187<p>Touying 支持各种各样的动画命令,最简单的动画命令是 <code>#pause</code> 和 <code>#meanwhile</code>。</p>
188<p><code>#pause</code> 的用途很简单,就是用于将后续的内容放到下一张子幻灯片中,并且可以使用多个 <code>#pause</code>
188 以创建多张子幻灯片,一个简单的例子:</p>
189<figure class="highlight plain"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">#slide[</span><br><span class="line">  First #pause Second</span><br><span class="line"></span><br><span class="line">  #pause</span><br><span class="line"></span><br><span class="line">  Third</span><br><span class="line">]</span><br></pre></td></tr></table></div></figure>
190<p>
191        <img   class="lazyload lazyload-gif"
192          src="/images/loading.svg" data-src="https://picgo-1258602555.cos.ap-nanjing.myqcloud.com/20240530235341.png"  alt="" />
193      </p>
194<p>有些情况下,我们需要在 <code>#pause</code> 的同时展示一些其他内容,这时候我们就可以用 <code>#meanwhile</code>。</p>
195<figure class="highlight plain"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">#slide[</span><br><span class="line">  First</span><br><span class="line">  </span><br><span class="line">  #pause</span><br><span class="line">  </span><br><span class="line">  Second</span><br><span class="line"></span><br><span class="line">  #meanwhile</span><br><span class="line"></span><br><span class="line">  Third</span><br><span class="line"></span><br><span class="line">  #pause</span><br><span class="line"></span><br><span class="line">  Fourth</span><br><span class="line">]</span><br></pre></td></tr></table></div></figure>
196<p>
197        <img   class="lazyload lazyload-gif"
198          src="/images/loading.svg" data-src="https://picgo-1258602555.cos.ap-nanjing.myqcloud.com/20240530235446.png"  alt="" />
199      </p>
200<p>Touying 还支持 <span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://touying-typ.github.io/touying/zh/docs/dynamic/equation" >数学公式</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span> 内部、CeTZ 和 Fletcher 等 <span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://touying-typ.github.io/touying/zh/docs/dynamic/other" >其他作图包</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span> 内部使用 <code>#pause</code> 和 <code>#meanwhile</code> 命令:</p>
201<p>
202        <img   class="lazyload lazyload-gif"
203          src="/images/loading.svg" data-src="https://picgo-1258602555.cos.ap-nanjing.myqcloud.com/20240530235636.png"  alt="" />
204      </p>
205<p>
206        <img   class="lazyload lazyload-gif"
207          src="/images/loading.svg" data-src="https://picgo-1258602555.cos.ap-nanjing.myqcloud.com/20240530235650.png"  alt="" />
208      </p>
209<p>其中 <span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://typst.app/universe/package/cetz" >CeTZ</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span> 和 <span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://typst.app/universe/package/fletcher" >Fletcher</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span> 是 Typst 里十分强大便捷的绘图包,可以对标 LaTeX 中的 TikZ。</p>
210
211        <h2 id="样式块"   >
212          <a href="#样式块" class="heading-link"><i class="fas fa-link"></i></a>样式块</h2>
213      
214<p>Typst 提供了许多样式块或者定理块包,例如 <span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://typst.app/universe/package/showybox" >
214showybox</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span> 和 <span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://typst.app/universe/package/ctheorems" >ctheorems</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span> 包:</p>
215<p>
216        <img   class="lazyload lazyload-gif"
217          src="/images/loading.svg" data-src="https://picgo-1258602555.cos.ap-nanjing.myqcloud.com/20240531171810.png"  alt="" />
218      </p>
219<p>可以很方便地为你的 Slides 加入美观的样式块,更好地突出你需要展示的内容。</p>
220
221        <h2 id="数学公式"   >
222          <a href="#数学公式" class="heading-link"><i class="fas fa-link"></i></a>数学公式</h2>
223      
224<p>Typst 的数学公式语法确实与 LaTeX 数学公式语法不同,这是为了实现更简洁易懂的数学公式语法,例如 <code>(x + 1) / x &gt;= 1 =&gt; 1/x &gt;= 0</code> 与 <code>\frac&#123;x + 1&#125;&#123;x&#125; \ge 1 \Rightarrow \frac&#123;1&#125;&#123;x&#125; \ge 0</code>,前者显然更为简洁易懂。</p>
225<p>但如果你需要在 Typst 里实时书写和渲染 LaTeX 公式,也可以做到,你可以使用 <span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://github.com/OrangeX4/mitex" >MiTeX</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span> 包,可以随时复用你已有的 LaTeX 数学公式。</p>
226<figure class="highlight plain"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">#import &quot;@preview&#x2F;mitex:0.2.4&quot;: *</span><br><span class="line"></span><br><span class="line">Write inline equations like #mi(&quot;x&quot;) or #mi[y].</span><br><span class="line"></span><br><span class="line">Also block equations (this case is from #text(blue.lighten(20%), link(&quot;https:&#x2F;&#x2F;katex.org&#x2F;&quot;)[katex.org])):</span><br><span class="line"></span><br><span class="line">#mitex(&#96;</span><br><span class="line">  f(x) &#x3D; \int_&#123;-\infty&#125;^\infty</span><br><span class="line">    \hat f(\xi)\,e^&#123;2 \pi i \xi x&#125;</span><br><span class="line">    \,d\xi</span><br><span class="line">&#96;)</span><br></pre></td></tr></table></div></figure>
227<p>
228        <img   class="lazyload lazyload-gif"
229          src="/images/loading.svg" data-src="https://picgo-1258602555.cos.ap-nanjing.myqcloud.com/20231223211411.png"  alt="" />
230      </p>
231
232        <h2 id="相对定位标注"   >
233          <a href="#相对定位标注" class="heading-link"><i class="fas fa-link"></i></a>相对定位标注</h2>
234      
235<p>你可以使用我开发的一个 Typst 包 <span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://github.com/OrangeX4/typst-pinit/" >Pinit</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span>,其提供了一个基于页面绝对定位与基于「图钉」pins 相对定位的能力,可以很方便地实现箭头指示与解释说明的效果。</p>
236<p>这种能力对编写 Slides 十分有帮助,你可以随意地对已有的内容使用箭头进行标注,达到和 PowerPoint 一样强大的任意布局能力。</p>
237<p>
238        <img   class="lazyload lazyload-gif"
239          src="/images/loading.svg" data-src="https://picgo-1258602555.cos.ap-nanjing.myqcloud.com/20231127180414.png"  alt="" />
240      </p>
241<p>
242        <img   class="lazyload lazyload-gif"
243          src="/images/loading.svg" data-src="https://picgo-1258602555.cos.ap-nanjing.myqcloud.com/20231127180437.png"  alt="" />
244      </p>
245
246        <h2 id="放映工具"   >
247          <a href="#放映工具" class="heading-link"><i class="fas fa-link"></i></a>放映工具</h2>
248      
249<p>Touying 支持多种放映工具,常见方式如下:</p>
250<p><strong>纯 PDF 格式</strong>:导出纯 PDF 格式,使用任意的 PDF Viewer 或浏览器进行放映。</p>
251<p><strong>Pdfpc 格式</strong>:导出 PDF 文件和 <code>.pdfpc</code> 文件,然后使用 <span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://touying-typ.github.io/touying/zh/docs/external/pdfpc" >Pdfpc</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span> 工具进行放映,可支持「演讲者视图」功能,但缺点是 Windows 上安装不方便。</p>
252<p><strong>Pympress 放映</strong>:导出右侧带有笔记的 PDF 文件,然后使用强大的 PDF 放映工具 <span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://touying-typ.github.io/touying/zh/docs/external/pympress" >pympress</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span> 进行放映。</p>
253<p>
254        <img   class="lazyload lazyload-gif"
255          src="/images/loading.svg" data-src="https://picgo-1258602555.cos.ap-nanjing.myqcloud.com/20240531173702.png"  alt="" />
256      </p>
257<p><strong>PowerPoint 放映</strong>:通过 <span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://github.com/touying-typ/touying-exporter" >Touying Exporter</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span> 工具导出为 PPTX 格式,其本质就是内嵌了许多 PNG 图片且带演讲者注释的 PPTX 打包文件,但用来放映也完全足够。</p>
258<p>
259        <img   class="lazyload lazyload-gif"
260          src="/images/loading.svg" data-src="https://picgo-1258602555.cos.ap-nanjing.myqcloud.com/20240531173932.png"  alt="" />
261      </p>
262<p><strong>HTML 导出与在线放映</strong>:通过 <span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://github.com/touying-typ/touying-exporter" >Touying Exporter</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span> 工具导出为 HTML 格式,其使用了 impress.js 框架,将 Slides 导出为 SVG 格式并封装成了一个独立的 HTML 文件,既可以直接打开 HTML 文件,也可以将其部署到 GitHub Pages 等地方,打开链接直接在线放映。<strong>由于支持 GIF 动图和演讲者视图,还能线下或线上分发,因此这是最推荐的放映方式。</strong></p>
263<p>你还可以使用 Touying 提供的 <span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://github.com/touying-typ/touying-template" >Template 仓库</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span>,只需要鼠标点击几下复制一个仓库,就能通过 GitHub Pages 创建一个你自己的 <span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://touying-typ.github.io/touying-template/" >在线放映链接</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span>。</p>
264<p>
265        <img   class="lazyload lazyload-gif"
266          src="/images/loading.svg" data-src="https://picgo-1258602555.cos.ap-nanjing.myqcloud.com/20240531174245.png"  alt="" />
267      </p>
268<p>
269        <img   class="lazyload lazyload-gif"
270          src="/images/loading.svg" data-src="https://picgo-1258602555.cos.ap-nanjing.myqcloud.com/20240531174252.png"  alt="" />
271      </p>
272</div><footer class="post-footer"><div class="post-ending ending"><div class="ending__text">------ 本文结束,感谢您的阅读 ------</div></div><div class="post-copyright copyright"><div class="copyright-author"><span class="copyright-author__name">本文作者: </span><span class="copyright-author__value"><a href="https://blog.orangex4.cool">OrangeX4</a></span></div><div class="copyright-link"><span class="copyright-link__name">本文链接: </span><span class="copyright-link__value"><a href="https://blog.orangex4.cool/post/touying/">https://blog.orangex4.cool/post/touying/</a></span></div><div class="copyright-notice"><span class="copyright-notice__name">版权声明: </span><span class="copyright-notice__value">本博客所有文章除特别声明外,均采用 <a href="https://creativecommons.org/licenses/by-nc/4.0/deed.en" rel="external nofollow" target="_blank">BY-NC</a> 许可协议。禁止商用,转载请注明出处!</span></div></div><div class="post-tags"><span class="post-tags-item"><span class="post-tags-item__icon"><i class="fas fa-tag"></i></span><a class="post-tags-item__link" href="https://blog.orangex4.cool/tags/Study/">Study</a></span><span class="post-tags-item"><span class="post-tags-item__icon"><i class="fas fa-tag"></i></span><a class="post-tags-item__link" href="https://blog.orangex4.cool/tags/VS-Code/">VS Code</a></span><span class="post-tags-item"><span class="post-tags-item__icon"><i class="fas fa-tag"></i></span><a class="post-tags-item__link" href="https://blog.orangex4.cool/tags/Math/">Math</a></span><span class="post-tags-item"><span class="post-tags-item__icon"><i class="fas fa-tag"></i></span><a class="post-tags-item__link" href="https://blog.orangex4.cool/tags/Chinese/">Chinese</a></span><span class="post-tags-item"><span class="post-tags-item__icon"><i class="fas fa-tag"></i></span><a class="post-tags-item__link" href="https://blog.orangex4.cool/tags/Typst/">Typst</a></span><span class="post-tags-item"><span class="post-tags-item__icon"><i class="fas fa-tag"></i></span><a class="post-tags-item__link" href="https://blog.orangex4.cool/tags/Slides/">Slides</a></span><span class="post-tags-item"><span class="post-tags-item__icon"><i class="fas fa-tag"></i></span><a class="post-tags-item__link" href="https://blog.orangex4.cool/tags/Presentation/">Presentation</a></span><span class="post-tags-item"><span class="post-tags-item__icon"><i class="fas fa-tag"></i></span><a class="post-tags-item__link" href="https://blog.orangex4.cool/tags/Typesetting/">Typesetting</a></span></div><nav class="post-paginator paginator"><div class="paginator-next"><a class="paginator-next__link" href="/post/typst-for-chinese/"><span class="paginator-prev__text">Typst 中文用户使用体验</span><span class="paginator-next__icon"><i class="fas fa-angle-right"></i></span></a></div></nav></footer></div></div><div class="comments" id="comments"><div id="gitalk-container"></div></div></div><div class="sidebar-wrap" id="sidebar-wrap"><aside class="sidebar" id="sidebar"><div class="sidebar-nav"><span class="sidebar-nav-toc current">文章目录</span><span class="sidebar-nav-ov">站点概览</span></div><section class="sidebar-toc"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%9F%BA%E4%BA%8E-typst-%E7%9A%84%E6%96%B0%E4%B8%80%E4%BB%A3%E7%9A%84%E5%AD%A6%E6%9C%AF%E5%B9%BB%E7%81%AF%E7%89%87slides%E7%A5%9E%E5%99%A8-touying"><span class="toc-number">1.</span> <span class="toc-text">
273          基于 Typst 的新一代的学术幻灯片(Slides)神器 —— Touying</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%BA%E4%BB%80%E4%B9%88%E4%BD%BF%E7%94%A8-touying"><span class="toc-number">1.1.</span> <span class="toc-text">
274          为什么使用 Touying</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA"><span class="toc-number">1.2.</span> <span class="toc-text">
275          环境搭建</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81"><span class="toc-number">1.3.</span> <span class="toc-text">
276          示例代码</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AD%A6%E6%9C%AF%E5%B9%BB%E7%81%AF%E7%89%87%E5%BA%94%E6%9C%89%E7%9A%84%E7%89%B9%E6%80%A7"><span class="toc-number">1.4.</span> <span class="toc-text">
277          学术幻灯片应有的特性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%8E%B0%E4%BB%A3%E5%8C%96%E7%9A%84%E6%A8%A1%E6%9D%BF"><span class="toc-number">1.5.</span> <span class="toc-text">
278          现代化的模板</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8A%A8%E7%94%BB"><span class="toc-number">1.6.</span> <span class="toc-text">
279          动画</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A0%B7%E5%BC%8F%E5%9D%97"><span class="toc-number">1.7.</span> <span class="toc-text">
280          样式块</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%95%B0%E5%AD%A6%E5%85%AC%E5%BC%8F"><span class="toc-number">1.8.</span> <span class="toc-text">
281          数学公式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%9B%B8%E5%AF%B9%E5%AE%9A%E4%BD%8D%E6%A0%87%E6%B3%A8"><span class="toc-number">1.9.</span> <span class="toc-text">
282          相对定位标注</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%94%BE%E6%98%A0%E5%B7%A5%E5%85%B7"><span class="toc-number">1.10.</span> <span class="toc-text">
283          放映工具</span></a></li></ol></li></ol></section><!-- ov = overview--><section class="sidebar-ov hide"><div class="sidebar-ov-author"><div class="sidebar-ov-author__avatar"><img class="sidebar-ov-author__avatar_img" src="/images/icons/profile.jpg" alt="avatar"></div><p class="sidebar-ov-author__text">Tech-otaku save the world. 😝</p></div><div class="sidebar-ov-social"><a class="sidebar-ov-social-item" href="https://github.com/OrangeX4" target="_blank" rel="noopener" data-popover="Github" data-popover-pos="up"><span class="sidebar-ov-social-item__icon"><i class="fab fa-github"></i></span></a><a class="sidebar-ov-social-item" href="https://www.zhihu.com/people/xia-chong-yu-bing-34-67" target="_blank" rel="noopener" data-popover="知乎" data-popover-pos="up"><span class="sidebar-ov-social-item__icon">知</span></a><a class="sidebar-ov-social-item" href="https://space.bilibili.com/15329464" target="_blank" rel="noopener" data-popover="Bilibili" data-popover-pos="up"><span class="sidebar-ov-social-item__icon">Bili</span></a></div><div class="sidebar-ov-feed"><span class="sidebar-ov-feed-rss"><a class="sidebar-ov-feed-rss__link" href="/atom.xml" target="_blank" rel="noopener"><span class="sidebar-ov-feed-rss__icon"><i class="fas fa-rss"></i></span><span>RSS 订阅</span></a></span></div></section><div class="sidebar-reading"><div class="sidebar-reading-info"><span class="sidebar-reading-info__text">你已阅读了 </span><span class="sidebar-reading-info__num">0</span><span class="sidebar-reading-info__perc">%</span></div><div class="sidebar-reading-line"></div></div></aside></div><div class="clearfix"></div></div></main><footer class="footer" id="footer"><div class="footer-inner"><div><span>Copyright © 2024</span><span class="footer__icon"><i class="fas fa-heart"></i></span><span>OrangeX4</span></div><div><span>由 <a href="http://hexo.io/" title="Hexo" target="_blank" rel="noopener">Hexo</a> 强力驱动</span><span> v5.3.0</span><span class="footer__devider">|</span><span>主题 - <a href="https://github.com/liuyib/hexo-theme-stun/" title="Stun" target="_blank" rel="noopener">Stun</a></span><span> v2.6.1</span></div></div></footer><div class="loading-bar" id="loading-bar"><div class="loading-bar__progress"></div></div><div class="back2top" id="back2top"><span class="back2top__icon"><i class="fas fa-rocket"></i></span></div></div><div class="search-mask"></div><div class="search-popup"><span class="search-close"></span><div class="search-input"><input placeholder="搜索文章(支持多关键词,请用空格分隔)"><div class="search-btns">使用搜索:<span class="search-btns-item search-btns-item--google"><i class="fab fa-google"></i>谷歌</span><span class="search-btns-item search-btns-item--bing"><i></i>必应</span><span class="search-btns-item search-btns-item--baidu"><i></i>百度</span></div></div><div class="search-results"></div></div>
283<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
283<script src="https://cdn.jsdelivr.net/npm/[email protected]/velocity.min.js"></script>
283<script src="https://cdn.jsdelivr.net/npm/[email protected]/velocity.ui.min.js"></script>
283<script src="https://cdn.jsdelivr.net/npm/ribbon.js@latest/dist/ribbon.min.js" size="120" alpha="0.6" zIndex="-1"></script>
283<script src="https://cdn.jsdelivr.net/npm/[email protected]/lazyload.min.js"></script>
283<script>function initSearch() {
284  var isXML = true;
285  var search_path = 'search.json';
286
287  if (!search_path) {
288    search_path = 'search.xml';
289  } else if (/json$/i.test(search_path)) {
290    isXML = false;
291  }
292
293  var path = '/' + search_path;
294  $.ajax({
295    url: path,
296    dataType: isXML ? 'xml' : 'json',
297    async: true,
298    success: function (res) {
299      var datas = isXML ? $('entry', res).map(function () {
300        // 将 XML 转为 JSON
301        return {
302          title: $('title', this).text(),
303          content: $('content', this).text(),
304          url: $('url', this).text()
305        };
306      }).get() : res;
307      var $input = $('.search-input input');
308      var $result = $('.search-results');
309      // 搜索对象(标题、内容)的权重,影响显示顺序
310      var WEIGHT = { title: 100, content: 1 };
311      var searchPost = function () {
312        var searchText = $input.val().toLowerCase().trim();
313        // 根据空白字符分隔关键字
314        var keywords = searchText.split(/[\s]+/);
315        // 搜索结果
316        var matchPosts = [];
317
318        // 有多个关键字时,将原文字整个保存下来
319        if (keywords.length > 1) {
320          keywords.push(searchText);
321        }
322        // 防止未输入字符时搜索
323        if (searchText.length > 0) {
324          datas.forEach(function (data) {
325            var isMatch  = false;
326            // 没有标题的文章使用预设的 i18n 变量代替
327            var title = (data.title && data.title.trim()) || '[ 文章无标题 ]';
328            var titleLower = title && title.toLowerCase();
329            // 删除 HTML 标签 和 所有空白字符
330            var content = data.content && data.content.replace(/<[^>]+>/g, '');
331            var contentLower = content && content.toLowerCase();
332            // 删除重复的 /
333            var postURL = data.url && decodeURI(data.url).replace(/\/{2,}/g, '/');
334            // 标题中匹配到的关键词
335            var titleHitSlice = [];
336            // 内容中匹配到的关键词
337            var contentHitSlice = [];
338
339            keywords.forEach(function (keyword) {
340              /**
341              * 获取匹配的关键词的索引
342              * @param {String} keyword 要匹配的关键字
343              * @param {String} text 原文字
344              * @param {Boolean} caseSensitive 是否区分大小写
345              * @param {Number} weight 匹配对象的权重。权重大的优先显示
346              * @return {Array}
347              */
348              function getIndexByword (word, text, caseSensitive, weight) {
349                if (!word || !text) {
350                  return [];
351                };
352
353                var startIndex = 0; // 每次匹配的开始索引
354                var index = -1;     // 匹配到的索引值
355                var result = [];    // 匹配结果
356
357                if (!caseSensitive) {
358                  word = word.toLowerCase();
359                  text = text.toLowerCase();
360                }
361
362                while((index = text.indexOf(word, startIndex)) !== -1) {
363                  var hasMatch = false;
364                  // 索引位置相同的关键词,保留长度较长的
365                  titleHitSlice.forEach(function (hit) {
366                    if (hit.index === index && hit.word.length < word.length) {
367                      hit.word = word;
368                      hasMatch = true;
369                    }
370                  });
371                  startIndex = index + word.length;
372                  !hasMatch && result.push({ index: index, word: word, weight: weight });
373                }
374                return result;
375              }
376              titleHitSlice = titleHitSlice.concat(getIndexByword(keyword, titleLower, false, WEIGHT.title));
377              contentHitSlice = contentHitSlice.concat(getIndexByword(keyword, contentLower, false, WEIGHT.content));
378            });
379
380            var hitTitle = titleHitSlice.length;
381            var hitContent = contentHitSlice.length;
382
383            if (hitTitle > 0 || hitContent > 0) {
384              isMatch = true;
385            }
386            if (isMatch) {
387              ;[titleHitSlice, contentHitSlice].forEach(function (hit) {
388                // 按照匹配文字的索引的递增顺序排序
389                hit.sort(function (left, right) {
390                  return left.index - right.index;
391                });
392              });
393              /**
394              * 给文本中匹配到的关键词添加标记,从而进行高亮显示
395              * @param {String} text 原文本
396              * @param {Array} hitSlice 匹配项的索引信息
397              * @param {Number} start 开始索引
398              * @param {Number} end 结束索引
399              * @return {String}
400              */
401              function highlightKeyword (text, hitSlice, start, end) {
402                if (!text || !hitSlice || !hitSlice.length) {
403                  return;
404                }
405
406                var result = '';
407                var startIndex = start;
408                var endIndex = end;
409                hitSlice.forEach(function (hit) {
410                  if (hit.index < startIndex) {
411                    return;
412                  }
413
414                  var hitWordEnd = hit.index + hit.word.length;
415                  result += text.slice(startIndex, hit.index);
416                  result += '<b>' + text.slice(hit.index, hitWordEnd) + '</b>';
417                  startIndex = hitWordEnd;
418                });
419                result += text.slice(startIndex, endIndex);
420                return result;
421              }
422
423              var postData = {};
424              // 文章总的搜索权重
425              var postWeight = titleHitSlice.length * WEIGHT.title + contentHitSlice.length * WEIGHT.content;
426              // 标记匹配关键词后的标题
427              var postTitle = highlightKeyword(title, titleHitSlice, 0, title.length) || title;
428              // 标记匹配关键词后的内容
429              var postContent;
430              // 显示内容的长度
431              var SHOW_WORD_LENGTH = 200;
432              // 命中关键词前的字符显示长度
433              var SHOW_WORD_FRONT_LENGTH = 20;
434              var SHOW_WORD_END_LENGTH = SHOW_WORD_LENGTH - SHOW_WORD_FRONT_LENGTH;
435
436              // 截取匹配的第一个字符,前后共 200 个字符来显示
437              if (contentHitSlice.length > 0) {
438                var firstIndex = contentHitSlice[0].index;
439                var start = firstIndex > SHOW_WORD_FRONT_LENGTH ? firstIndex - SHOW_WORD_FRONT_LENGTH : 0;
440                var end = firstIndex + SHOW_WORD_END_LENGTH;
441                postContent = highlightKeyword(content, contentHitSlice, start, end);
442              } else { // 未匹配到内容,直接截取前 200 个字符来显示
443                postContent = content.slice(0, SHOW_WORD_LENGTH);
444              }
445              postData.title = postTitle;
446              postData.content = postContent;
447              postData.url = postURL;
448              postData.weight = postWeight;
449              matchPosts.push(postData);
450            }
451          });
452        }
453
454        var resultInnerHtml = '';
455        if (matchPosts.length) {
456          // 按权重递增的顺序排序,使权重大的优先显示
457          matchPosts.sort(function (left, right) {
458            return right.weight - left.weight;
459          });
460          resultInnerHtml += '<ul>';
461          matchPosts.forEach(function (post) {
462            resultInnerHtml += '<li><a class="search-results-title" href="' + post.url + '">';
463            resultInnerHtml += post.title;
464            resultInnerHtml += '</a><div class="search-results-content">';
465            resultInnerHtml += post.content;
466            resultInnerHtml += '</div></li>';
467          });
468          resultInnerHtml += '</ul>';
469        } else {
470          resultInnerHtml += '<div class="search-results-none"><i class="far fa-meh"></i></div>';
471        }
472        $result.html(resultInnerHtml);
473      };
474      $input.on('input', searchPost);
475      $input.on('keyup', function (e) {
476        if (e.keyCode === Stun.utils.codeToKeyCode('Enter')) {
477          searchPost();
478        }
479      });
480    }
481  });
482}
483
484function closeSearch () {
485  $('body').css({ overflow: 'auto' });
486  $('.search-popup').css({ display: 'none' });
487  $('.search-mask').css({ display: 'none' });
488}
489
490window.addEventListener('DOMContentLoaded', function () {
491  Stun.utils.pjaxReloadLocalSearch = function () {
492    $('.header-nav-search').on('click', function (e) {
493      e.stopPropagation();
494      $('body').css('overflow', 'hidden');
495      $('.search-popup')
496        .velocity('stop')
497        .velocity('transition.expandIn', {
498          duration: 300,
499          complete: function () {
500            $('.search-popup input').focus();
501          }
502        });
503      $('.search-mask')
504        .velocity('stop')
505        .velocity('transition.fadeIn', {
506          duration: 300
507        });
508
509      initSearch();
510    });
511    $('.search-mask, .search-close').on('click', function () {
512      closeSearch();
513    });
514    $(document).on('keydown', function (e) {
515      // Escape <=> 27
516      if (e.keyCode === Stun.utils.codeToKeyCode('Escape')) {
517        closeSearch();
518      }
519    });
520  };
521
522  Stun.utils.pjaxReloadLocalSearch();
523}, false);
524
525function safeOpenUrl(url) {
526  var newTab = window.open();
527  newTab.opener = null;
528  newTab.location = url;
529}
530
531function extSearch(engine) {
532  var engines = {
533    google: 'https://www.google.com/search?q=',
534    bing: 'https://cn.bing.com/search?q=',
535    baidu: 'https://www.baidu.com/s?ie=UTF-8&wd=',
536  };
537  var host = window.location.host;
538  var query = $('.search-input input').val().toLowerCase().trim();
539  var uri = engines[engine] + query + ' site:' + host;
540
541  if (query) {
542    safeOpenUrl(uri);
543  } else {
544    Stun.utils.popAlert('warning', '请输入字符');
545  }
546}
547
548var assistSearchList = window.CONFIG.assistSearch;
549
550if (Array.isArray(assistSearchList)) {
551  assistSearchList.forEach(function (name) {
552    document.querySelector('.search-btns-item--' + name).addEventListener('click', function () {
553      extSearch(name);
554    }, false);
555  });
556}</script>
556<script src="https://cdn.jsdelivr.net/npm/gitalk@latest/dist/gitalk.min.js"></script>
556<script src="https://cdn.jsdelivr.net/npm/js-md5@latest/src/md5.min.js"></script>
556<script>function loadGitalk () {
557  if (!document.getElementById('gitalk-container')) {
558    return;
559  }
560
561  var gitalk = new Gitalk({
562    id: md5(window.location.pathname.slice(1)),
563    clientID: '28173b6f255de5669f75',
564    clientSecret: '29e73beb9e3ea797b86446d0cdc682011b302a6a',
565    repo: 'gitalk',
566    owner: 'OrangeX4',
567    admin: ['OrangeX4'],
568    distractionFreeMode: 'false',
569    language: 'zh-CN'
570  });
571  gitalk.render('gitalk-container');
572}
573
574if (false) {
575  loadGitalk();
576} else {
577  window.addEventListener('DOMContentLoaded', loadGitalk, false);
578}</script>
578<script src="/js/utils.js?v=2.6.1"></script>
578<script src="/js/stun-boot.js?v=2.6.1"></script>
578<script src="/js/scroll.js?v=2.6.1"></script>
578<script src="/js/header.js?v=2.6.1"></script>
578<script src="/js/sidebar.js?v=2.6.1"></script>
578<script type="application/json" src="/search.json"></script>
578</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.