From 2b36deeefb6392ffa32a1739639f87ca4b80b571 Mon Sep 17 00:00:00 2001 From: OrangeX4 <318483724@qq.com> Date: Thu, 7 Mar 2024 17:47:53 +0800 Subject: [PATCH] docs: complete English documentation --- README.md | 2 + docs/docs/build-your-own-theme.md | 111 ++++++++---------- docs/docs/code-styles.md | 50 ++++---- docs/docs/dynamic/other.md | 2 +- docs/docs/global-settings.md | 51 ++++---- docs/docs/integration/_category_.json | 4 +- docs/docs/integration/cetz.md | 10 +- docs/docs/integration/codly.md | 2 +- docs/docs/integration/fletcher.md | 4 +- docs/docs/integration/pinit.md | 12 +- docs/docs/integration/polylux.md | 8 +- docs/docs/layout.md | 58 ++++----- docs/docs/start.md | 4 + docs/docs/themes/dewdrop.md | 80 ++++++------- docs/docs/themes/metropolis.md | 62 +++++----- docs/docs/themes/simple.md | 52 ++++---- docs/docs/themes/university.md | 60 +++++----- .../current/start.md | 4 + 18 files changed, 288 insertions(+), 288 deletions(-) diff --git a/README.md b/README.md index 9a3d2b1d7..f99d97940 100644 --- a/README.md +++ b/README.md @@ -92,6 +92,8 @@ Hello, Typst! It's simple. Congratulations on creating your first Touying slide! 🎉 +**Tip:** You can use Typst syntax like `#import "config.typ": *` or `#include "content.typ"` to implement Touying's multi-file architecture. + **Warning:** The comma in `#let (slide,) = utils.slides(s)` is necessary for the unpacking syntax. diff --git a/docs/docs/build-your-own-theme.md b/docs/docs/build-your-own-theme.md index 72a917cea..34b56eeea 100644 --- a/docs/docs/build-your-own-theme.md +++ b/docs/docs/build-your-own-theme.md @@ -2,34 +2,33 @@ sidebar_position: 10 --- -# 创建自己的主题 +# Creating Your Own Theme -使用 Touying 创建一个自己的主题是一件略显复杂的事情,因为我们引入了许多的概念。不过请放心,如果您真的用 Touying 创建了一个自己的主题,也许您就可以深切地感受到 Touying 提供的便利的功能的和强大的可定制性。您可以参考 [主题的源代码](https://github.com/touying-typ/touying/tree/main/themes),主要需要实现的就是: +Creating your own theme with Touying might seem a bit complex initially due to the introduction of various concepts. However, fear not; if you successfully create a custom theme with Touying, you'll likely experience the convenience and powerful customization features it offers. You can refer to the [source code of existing themes](https://github.com/touying-typ/touying/tree/main/themes) for guidance. The key steps to implement are: -- 自定义 `register` 函数,初始化全局单例 `s`; -- 自定义 `init` 方法; -- 自定义颜色主题,即修改 `self.colors` 成员变量; -- 自定义 `alert` 方法,可选; -- 自定义 header; -- 自定义 footer; -- 自定义 `slide` 方法; -- 自定义特殊 slide 方法,如 `title-slide` 和 `focus-slide` 方法; -- 自定义 `slides` 方法,可选; +- Customize the `register` function to initialize the global singleton `s`. +- Customize the `init` method. +- Define a color theme by modifying the `self.colors` member variable. +- Customize the `alert` method (optional). +- Customize the header. +- Customize the footer. +- Customize the `slide` method. +- Customize special slide methods, such as `title-slide` and `focus-slide`. +- Customize the `slides` method (optional). -为了演示如何使用 Touying 创建一个自己的主题,我们不妨来一步一步地创建一个简洁美观的 Bamboo 主题。 +To demonstrate creating a simple and elegant Bamboo theme, let's follow the steps. +## Import -## 导入 +Depending on whether the theme is for personal use or part of Touying, you can import in two ways: -取决于这个主题是你自己的,还是 Touying 的一部分,你可以用两种方式导入: - -如果只是你自己使用,你可以直接导入 Touying: +If for personal use: ```typst #import "@preview/touying:0.3.1": * ``` -如果你希望这个主题作为 Touying 的一部分,放置在 Touying `themes` 目录下,那你应该将上面的导入语句改为 +If part of Touying themes: ```typst #import "../utils/utils.typ" @@ -37,18 +36,18 @@ sidebar_position: 10 #import "../utils/components.typ" ``` -并且要在 Touying 的 `themes/themes.typ` 里加上 +Additionally, add the import statement in Touying's `themes/themes.typ`: ``` #import "bamboo.typ" ``` -## register 函数和 init 方法 +## Register Function and Init Method -接下来,我们会区分 `bamboo.typ` 模板文件和 `main.typ` 文件,后者有时会被省略。 +Next, we'll distinguish between the bamboo.typ template file and the main.typ file, the latter of which is sometimes omitted. -一般而言,我们制作 slides 的第一步,就是确定好字体大小和页面长宽比,因此我们需要注册一个初始化方法: +Generally, the first step in creating slides is to determine font size and page aspect ratio. Therefore, we need to register an initialization method: ```typst // bamboo.typ @@ -90,22 +89,21 @@ sidebar_position: 10 ] ``` -如您所见,我们创建了一个 `register` 函数,并传入了一个 `aspect-ratio` 参数来设定页面长宽比。您应该已经知道了,在 Touying 中,我们不应该使用 `set page(..)` 来设置页面参数,而是应该使用 ` self.page-args += (..)` 这种语法来设置,具体内容可以参考页面布局章节。 - -除此之外,我们还注册了一个 `self.methods.init` 方法,它可以用来进行一些全局的样式设置,例如在此处,我们加上了 `set text(size: 20pt)` 来设置文字大小。你也可以在这里放置一些额外的全局样式设置,例如 `set par(justify: true)` 等。由于 `init` 函数被放置到了 `self.methods` 里,是一个方法,而非普通函数,因此我们需要加上 `self: none` 参数才能正常使用。 +As you can see, we created a `register` function and passed an `aspect-ratio` parameter to set the page aspect ratio. As you might already know, in Touying, we should not use `set page(..)` to set page parameters but rather use the syntax `self.page-args += (..)` to set them, as explained in the Page Layout section. -如您所见,后续在 `main.typ` 中,我们会通过 `#show: init` 来应用 `init` 方法里面的全局样式设置,其中 `init` 函数是通过 `utils.methods(s)` 绑定并解包而来的。 +In addition, we registered a `self.methods.init` method, which can be used for some global style settings. For example, in this case, we added `set text(size: 20pt)` to set the font size. You can also place additional global style settings here, such as `set par(justify: true)`. Since the `init` function is placed inside `self.methods`, it is a method, not a regular function. Therefore, we need to add the parameter `self: none` to use it properly. -如果您多加注意,您会发现 `register` 函数最后有一行独立的 `self`,这其实是代表了将修改后的 `self` 作为返回值返回,后续会被保存在 `#let s = ..` 中,因此这一行是不可或缺的。 +As you can see, later in `main.typ`, we apply the global style settings in `init` using `#show: init`, where `init` is bound and unpacked through `utils.methods(s)`. +If you pay extra attention, you'll notice that the `register` function has an independent `self` at the end. This actually represents returning the modified `self` as the return value, which will be saved in `#let s = ..`. This line is therefore indispensable. -## 颜色主题 +## Color Theme -为您的 slides 挑选一个美观的颜色主题,是做好一个 slides 的关键所在。Touying 提供了内置的颜色主题支持,以尽量抹平不同主题之间的 API 差异。Touying 提供了两个维度的颜色选择,第一个维度是 `neutral`、`primary`、`secondary` 和 `tertiary`,用于区分色调,其中最常用的就是 `primary` 主题色;第二个维度是 `default`、`light`、`lighter`、`lightest`、`dark`、`darker`、`darkest`,用于区分明度。 +Choosing an attractive color theme for your slides is crucial. Touying provides built-in color theme support to minimize API differences between different themes. Touying offers two dimensions of color selection: the first is `neutral`, `primary`, `secondary`, and `tertiary` for hue distinction, with `primary` being the most commonly used; the second is `default`, `light`, `lighter`, `lightest`, `dark`, `darker`, and `darkest` for brightness distinction. -由于我们是 Bamboo 主题,因此这里的主题色 `primary` 我们挑选了一个与竹子相近的颜色 `rgb("#5E8B65")`,并加入了中性色 `neutral-lightest`,`neutral-darkest`,分别作为背景色和字体颜色。 +As we are creating the Bamboo theme, we chose a color for the `primary` theme, similar to bamboo (`rgb("#5E8B65")`), and included neutral lightest/darkest as background and font colors. -正如下面的代码所示,我们可以使用 `self = (self.methods.colors)(self: self, ..)` 方法修改颜色主题。其本质就是 `self.colors += (..)` 的一个包装。 +As shown in the code below, we use `(self.methods.colors)(self: self, ..)` to modify the color theme. Essentially, it is a wrapper for `self.colors += (..)`. ```typst #let register( @@ -130,49 +128,43 @@ sidebar_position: 10 } ``` -像这样添加了颜色主题后,我们就可以通过 `self.colors.primary` 这样的方式获取到这个颜色。 +After adding the color theme, we can access the color using syntax like `self.colors.primary`. -并且有一点值得注意,用户可以随时在 `main.typ` 里通过 +It's worth noting that users can change the theme color at any time using: ```typst #let s = (s.methods.colors)(self: s, primary: rgb("#3578B9")) ``` -这样的方式修改主题色,其中这句语句需要放在 `register(s)` 之后,以及 `utils.methods(s)` 之前。 - -这种随时更换颜色主题的内容,正是 Touying 强大可定制性的体现。 +This flexibility demonstrates Touying's powerful customization capabilities. +## Practical: Custom Alert Method -## 实战:自定义 Alert 方法 - -一般而言,我们都需要提供一个 `#alert[..]` 函数给用户使用,其用途与 `#strong[..]` 类似,都是用于强调当前文本。一般 `#alert[..]` 会将文本颜色修改为主题色,这样看起来会更美观,这也是我们接下来要实现的目标。 - -我们在 `register` 函数里加上一句 +In general, we need to provide a `#alert[..]` function for users, similar to `#strong[..]`. Typically, `#alert[..]` emphasizes text using the primary theme color for aesthetics. We add a line in the `register` function: ```typst self.methods.alert = (self: none, it) => text(fill: self.colors.primary, it) ``` -这句代码的意思就是将文本颜色修改为 `self.colors.primary`,而这里的 `self` 正是通过参数 `self: none` 传进来的,这样我们才能实时地获取到 `primary` 主题色。 - +This code sets the text color to `self.colors.primary`, utilizing the theme's primary color. -## 自定义 Header 和 Footer +## Custom Header and Footer -在这里,我认为您已经阅读过页面布局章节了,因此我们知道应该给 slides 加上 header 和 footer。 +Here, assuming you've already read the Page Layout section, we know we should add headers and footers to the slides. -首先,我们先加入 `self.bamboo-title = []`,也就是说,我们将当前 slide 的标题作为一个成员变量 `self.bamboo-title`,保存在 `self` 里面,这样方便我们在 header 里使用,以及后续修改。同理,我们还创建了一个 `self.bamboo-footer`,并将 `register` 函数的 `footer: []` 参数保存起来,用作左下角的 footer 展示。 +Firstly, we add `self.bamboo-title = []`. This means we save the title of the current slide as a member variable `self.bamboo-title`, stored in `self`. This makes it easy to use in the header and later modifications. Similarly, we create `self.bamboo-footer`, saving the `footer: []` parameter from the `register` function for displaying in the bottom-left corner. -然后值得注意的就是,我们的 header 其实是一个形如 `let header(self) = { .. }` 的参数为 `self` 的 content 函数,而不是一个单纯的 content,这样我们才能从最新的 `self` 内部获取到我们需要的信息,例如 `self.bamboo-title`。而 footer 也是同理。 +It's worth noting that our header is actually a content function in the form of `let header(self) = { .. }` with the `self` parameter, allowing us to get the latest information from `self`. For example, `self.bamboo-title`. The footer is similar. -里面使用到的 `components.cell` 其实就是 `#let cell = block.with(width: 100%, height: 100%, above: 0pt, below: 0pt, breakable: false)`,而 `show: components.cell` 也就是 `components.cell(body)` 的简写,footer 的 `show: pad.with(.4em)` 也是同理。 +The `components.cell` used inside is actually `#let cell = block.with(width: 100%, height: 100%, above: 0pt, below: 0pt, breakable: false)`, and `show: components.cell` is shorthand for `components.cell(body)`. The `show: pad.with(.4em)` in the footer is similar. -另一点值得注意的是,`states` 模块里放置了很多和计数器、状态有关的内容,例如 `states.current-section-title` 用于显示当前的 `section`,而 `states.slide-counter.display() + " / " + states.last-slide-number` 用于显示当前页数和总页数。 +Another point to note is the `states` module, which contains many counters and state-related content. For example, `states.current-section-title` is used to display the current `section`, and `states.slide-counter.display() + " / " + states.last-slide-number` is used to display the current page number and total number of pages. -以及我们发现我们会使用 `utils.call-or-display(self, self.bamboo-footer)` 这样的语法来显示 `self.bamboo-footer`,这是用于应付 `self.bamboo-footer = (self) => {..}` 这种情况,这样我们就能统一 content 函数和 content 的显示。 +We observe the usage of `utils.call-or-display(self, self.bamboo-footer)` to display `self.bamboo-footer`. This is used to handle situations like `self.bamboo-footer = (self) => {..}`, ensuring a unified approach to displaying content functions and content. -为了让 header 和 footer 正确显示,并且与正文有足够的间隔,我们还设置了上下 margin 和左右 padding,如 `self.page-args += (margin: (top: 4em, bottom: 1.5em, x: 0em))` 和 `self.padding = (x: 2em, y: 0em)`。左右 margin 为 `0em` 是为了让 header 能占满页面宽度,正文的左右间距就依靠左右 padding `2em` 来实现。 +To ensure proper display of the header and footer and sufficient spacing from the main content, we also set top and bottom margins and left and right padding, such as `self.page-args += (margin: (top: 4em, bottom: 1.5em, x: 0em))` and `self.padding = (x: 2em, y: 0em)`. The left and right margin is `0em` to allow the header to occupy the full page width. The left and right spacing of the main content is achieved through left and right padding of `2em`. -而我们还需要自定义一个 `slide` 方法,其中接收 `slide(self: none, title: auto, ..args)`,第一个 `self: none` 是一个方法所必须的参数,用于获取最新的 `self`;而第二个 `title` 则是用于更新 `self.bamboo-title`,以便在 header 中显示出来;第三个 `..args` 是用于收集剩余的参数,并传到 `(self.methods.touying-slide)(self: self, ..args)` 里,这也是让 Touying `slide` 功能正常生效所必须的。并且,我们需要在 `register` 函数里使用 `self.methods.slide = slide` 注册这个方法。 +We also need to customize a `slide` method that accepts `slide(self: none, title: auto, ..args)`. The first `self: none` is a required method parameter for getting the latest `self`. The second `title` is used to update `self.bamboo-title` for displaying in the header. The third `..args` collects the remaining parameters and passes them to `(self.methods.touying-slide)(self: self, ..args)`, which is necessary for the Touying `slide` functionality to work properly. Additionally, we need to register this method in the `register` function with `self.methods.slide = slide`. ```typst // bamboo.typ @@ -261,18 +253,19 @@ self.methods.alert = (self: none, it) => text(fill: self.colors.primary, it) ![image](https://github.com/touying-typ/touying/assets/34951714/d33bcda7-c032-4b11-b392-5b939d9a0a47) +## Custom Special Slide -## 自定义特殊 Slide +Building upon the basic slide, we further add some special slide functions such as `title-slide`, `focus-slide`, and a custom `slides` method. -我们在上面的基础 slide 的基础上,进一步加入一些特殊的 slide 函数,例如 `title-slide`,`focus-slide` 以及自定义 `slides` 方法。 +For the `title-slide` method, first, we call `self = utils.empty-page(self)`. This function clears `self.page-args.header`, `self.page-args.footer`, and sets `margin` and `padding` to `0em`, creating a blank page effect. Then, we use `let info = self.info + args.named()` to get information stored in `self.info` and update it with the passed `args.named()` for later use as `info.title`. The specific page content `body` will vary for each theme, so we won't go into details here. Finally, we call `(self.methods.touying-slide)(self: self, repeat: none, body -对于 `title-slide` 方法,首先,我们调用了 `self = utils.empty-page(self)`,这个函数可以清除 `self.page-args.header` 和 `self.page-args.footer`,以及将 `margin` 和 `padding` 都设为 `0em`,得到一个空白页的效果。然后,我们可以通过 `let info = self.info + args.named()` 获取到 `self.info` 里保存的信息,也可以用函数参数里传入的 `args.named()` 来更新信息,便于后续以 `info.title` 的方式使用。具体的页面内容 `body`,每个 theme 都会有所不同,这里就不再过多赘述。而在最后,我们调用了 `(self.methods.touying-slide)(self: self, repeat: none, body)`,其中的 `repeat: none` 表面这个页面不需要动画效果,而传入 `body` 参数会将 `body` 的内容显示出来。 +)`, where `repeat: none` indicates that this page does not require animation effects, and passing the `body` parameter displays its content. -对于 `new-section-slide` 方法,也是同理,不过唯一要注意的是我们在 `(self.methods.touying-slide)(self: self, repeat: none, section: section, body)` 的参数里面多传入了一个 `section: section`,这是用来声明新建一个 `section` 的。另一点需要注意的是,我们除了 `self.methods.new-section-slide = new-section-slide`,还注册了 `self.methods.touying-new-section-slide = new-section-slide`,这样 `new-section-slide` 就会在碰到一级标题时自动被调用。 +For the `new-section-slide` method, the process is similar. The only thing to note is that in `(self.methods.touying-slide)(self: self, repeat: none, section: section, body)`, we pass an additional `section: section` parameter to declare the creation of a new section. Another point to note is that besides `self.methods.new-section-slide = new-section-slide`, we also register `self.methods.touying-new-section-slide = new-section-slide`, so `new-section-slide` will be automatically called when encountering a first-level title. -对于 `focus-slide` 方法,大部分内容也基本一致,不过值得注意的是,我们通过 `self.page-args += (..)` 更新了页面的背景颜色。 +For the `focus-slide` method, most of the content is similar, but it's worth noting that we use `self.page-args += (..)` to update the page's background color. -最后,我们还更新了 `slides(self: none, title-slide: true, slide-level: 1, ..args)` 方法,其中 `title-slide` 为 `true` 时,在使用 `#show: slides` 后会自动创建一个 `title-slide`;而 `slide-level: 1` 指明了一级标题和二级标题分别对应 `section` 和 `title`。 +Finally, we update the `slides(self: none, title-slide: true, slide-level: 1, ..args)` method. When `title-slide` is `true`, using `#show: slides` will automatically create a `title-slide`. Setting `slide-level: 1` indicates that the first-level and second-level titles correspond to `section` and `title`, respectively. ``` // bamboo.typ @@ -429,6 +422,6 @@ self.methods.alert = (self: none, it) => text(fill: self.colors.primary, it) ![image](https://github.com/touying-typ/touying/assets/34951714/03c5ad02-8ff4-4068-9664-d9cfad79baaf) -## 总结 +## Conclusion -至此,我们就已经创建了一个简洁又美观的主题了。也许你会觉得,Touying 引入的概念过于丰富了,以至于让人一时很难轻易接受。这是正常的,在强大的功能与简洁的概念之间,Touying 选择了前者。但是也正是得益于 Touying 这种大而全的统一理念,你可以很容易地在不同的主题之间抽离出共通之处,并将你学到的概念迁移到另一个主题上。亦或者,你可以很轻易地保存全局变量,或者更改已有的主题,例如全局保存主题颜色,替换掉 slides 的 header,或者添加一两个 Logo 等,这也正是 Touying 解耦与面向对象编程带来的好处。 \ No newline at end of file +Congratulations! You've created a simple and elegant theme. Perhaps you may find that Touying introduces a wealth of concepts, making it initially challenging to grasp. This is normal, as Touying opts for functionality over simplicity. However, thanks to Touying's comprehensive and unified approach, you can easily extract commonalities between different themes and transfer your knowledge seamlessly. You can also save global variables, modify existing themes, or switch between themes effortlessly, showcasing the benefits of Touying's decoupling and object-oriented programming. \ No newline at end of file diff --git a/docs/docs/code-styles.md b/docs/docs/code-styles.md index dc413e35d..089116eae 100644 --- a/docs/docs/code-styles.md +++ b/docs/docs/code-styles.md @@ -2,11 +2,11 @@ sidebar_position: 4 --- -# 代码风格 +# Code Style -## 简单风格 +## Simple Style -如果我们只是需要简单使用,我们可以直接在标题下输入内容,就像是在编写正常 Typst 文档一样。这里的标题有着分割页面的作用,同时我们也能正常地使用 `#pause` 等命令实现动画效果。 +If we only need simplicity, we can directly input content under the title, just like writing a normal Typst document. The title here serves to divide the pages, and we can use commands like `#pause` to achieve animation effects. ```typst #import "@preview/touying:0.3.1": * @@ -31,16 +31,15 @@ Hello, Typst! ![image](https://github.com/touying-typ/touying/assets/34951714/f5bdbf8f-7bf9-45fd-9923-0fa5d66450b2) -并且你可以使用空标题 `==` 创建一个新页,这个技巧也有助于清除上一个标题的继续应用。 +You can use an empty title `==` to create a new page. This technique also helps clear the continuation of the previous title. -PS:我们可以使用 `#slides-end` 记号来标志 `#show: slides` 的结束。 +PS: We can use the `#slides-end` marker to signify the end of `#show: slides`. +## Block Style -## 块风格 +Many times, using simple style alone cannot achieve all the functions we need. For more powerful features and clearer structure, we can also use block style in the form of `#slide[...]`. The `#slide` function needs to be unpacked using the syntax `#let (slide,) = utils.slides(s)` to be used correctly after `#show: slides`. -很多时候,仅仅使用简单风格并不能实现我们需要的所有功能,为了更强大的功能和更清晰的结构,我们同样可以使用 `#slide[...]` 形式的块风格,其中 `#slide` 函数需要使用 `#let (slide,) = utils.slides(s)` 语法进行解包,才能正常在 `#show: slides` 后使用。 - -例如上面的例子就可以改造成 +For example, the previous example can be transformed into: ```typst #import "@preview/touying:0.3.1": * @@ -65,19 +64,18 @@ PS:我们可以使用 `#slides-end` 记号来标志 `#show: slides` 的结束 ] ``` -这样做的好处有很多: - -1. 很多时候,我们不只是需要默认的 `#slide[...]`,还需要 `#focus-slide[...]` 这些特殊的 `slide` 函数; -2. 不同主题的 `#slide[...]` 函数可能有比默认更多的参数,例如 university 主题的 `#slide[...]` 函数就会有着 `subtitle` 参数; -3. 只有 `slide` 函数才可以通过回调风格的内容块来使用 `#only` 和 `#uncover` 函数实现复杂的动画效果。 -4. 能有着更清晰的结构,通过辨别 `#slide[...]` 块,我们可以很容易地分辨出 slides 的具体分页效果。 +There are many advantages to doing this: +1. Many times, we not only need the default `#slide[...]` but also special `slide` functions like `#focus-slide[...]`. +2. Different themes' `#slide[...]` functions may have more parameters than the default, such as the university theme's `#slide[...]` function having a `subtitle` parameter. +3. Only `slide` functions can use the callback-style content block to achieve complex animation effects with `#only` and `#uncover` functions. +4. It has a clearer structure. By identifying `#slide[...]` blocks, we can easily distinguish the specific pagination effects of slides. -## 约定优于配置 +## Convention Over Configuration -你可能注意到了,在使用 simple 主题时,我们使用一级标题会自动创建一个 section slide,这是因为 simple 主题注册了一个 `s.methods.touying-new-section-slide` 方法,因此 touying 会默认调用这个方法。 +You may have noticed that when using the simple theme, using a level-one title automatically creates a section slide. This is because the simple theme registers an `s.methods.touying-new-section-slide` method, so Touying will automatically call this method. -如果我们不希望它自动创建这样一个 section slide,我们可以将这个方法删除: +If we don't want it to automatically create such a section slide, we can delete this method: ```typst #import "@preview/touying:0.3.1": * @@ -103,9 +101,9 @@ Hello, Typst! ![image](https://github.com/touying-typ/touying/assets/34951714/17a89a59-9491-4e1f-95c0-09a22105ab35) -如你所见,这样就只会剩下两页,而默认的 section slide 就会消失了。 +As you can see, there are only two pages left, and the default section slide is gone. -同理,我们也可以注册一个新的 section slide: +Similarly, we can register a new section slide: ```typst #import "@preview/touying:0.3.1": * @@ -138,15 +136,15 @@ Hello, Typst! ![image](https://github.com/touying-typ/touying/assets/34951714/5305efda-0cd4-42eb-9f2e-89abc30b6ca2) -同样地,我们也可以修改 `s.methods.touying-new-subsection-slide` 来对 `subsection` 做同样的事。 +Similarly, we can modify `s.methods.touying-new-subsection-slide` to do the same for `subsection`. -实际上,除了 `s.methods.touying-new-section-slide`,另一个特殊的 `slide` 函数就是 `s.methods.slide` 函数,它会在简单风格里没有显示使用 `#slide[...]` 的情况下默认被调用。 +In fact, besides `s.methods.touying-new-section-slide`, another special `slide` function is the `s.methods.slide` function, which will be called by default in simple style when `#slide[...]` is not explicitly used. -同时,由于 `#slide[...]` 被注册在了 `s.slides = ("slide",)` 里,因此 `section`,`subsection` 和 `title` 参数会被自动传入,而其他的如 `#focus-slide[...]` 则不会自动传入这三个参数。 +Also, since `#slide[...]` is registered in `s.slides = ("slide",)`, the `section`, `subsection`, and `title` parameters will be automatically passed, while others like `#focus-slide[...]` will not automatically receive these three parameters. -:::tip[原理] +:::tip[Principle] -实际上,你也可以不使用 `#show: slides` 和 `utils.slides(s)`,而是只使用 `utils.methods(s)`,例如 +In fact, you can also not use `#show: slides` and `utils.slides(s)`, but only use `utils.methods(s)`, for example: ```typst #import "@preview/touying:0.3.1": * @@ -164,6 +162,6 @@ Hello, Typst! ] ``` -这时候需要手动传入 `section`、`subsection` 和 `title`,但是会有更好的性能,适合需要更快的性能的情况,例如超过数十数百页的情形。 +Here, you need to manually pass in `section`, `subsection`, and `title`, but it will have better performance, suitable for cases where faster performance is needed, such as when there are more than dozens or hundreds of pages. ::: \ No newline at end of file diff --git a/docs/docs/dynamic/other.md b/docs/docs/dynamic/other.md index 9990316fe..1418d94ee 100644 --- a/docs/docs/dynamic/other.md +++ b/docs/docs/dynamic/other.md @@ -1,5 +1,5 @@ --- -sidebar_position: 6 +sidebar_position: 5 --- # Other Animations diff --git a/docs/docs/global-settings.md b/docs/docs/global-settings.md index cfcc180fc..115fe6758 100644 --- a/docs/docs/global-settings.md +++ b/docs/docs/global-settings.md @@ -2,13 +2,13 @@ sidebar_position: 6 --- -# 全局设置 +# Global Settings -## 全局样式 +## Global Styles -对 Touying 而言,全局样式即为需要应用到所有地方的 set rules 或 show rules,例如 `#set text(size: 20pt)`。 +For Touying, global styles refer to set rules or show rules that need to be applied everywhere, such as `#set text(size: 20pt)`. -其中,Touying 的主题会封装一些自己的全局样式,他们会被放在 `#show: init` 中,例如 university 主题就封装了 +Themes in Touying encapsulate some of their own global styles, which are placed in `#show: init`. For example, the university theme encapsulates the following: ```typst self.methods.init = (self: none, body) => { @@ -18,7 +18,7 @@ self.methods.init = (self: none, body) => { } ``` -如果你并非一个主题制作者,而只是想给你的 slides 添加一些自己的全局样式,你可以简单地将它们放在 `#show: init` 之后,以及 `#show: slides` 之前,例如 metropolis 主题就推荐你自行加入以下全局样式: +If you are not a theme creator but want to add your own global styles to your slides, you can simply place them after `#show: init` and before `#show: slides`. For example, the metropolis theme recommends adding the following global styles: ```typst #let s = themes.metropolis.register(s, aspect-ratio: "16-9") @@ -36,7 +36,7 @@ self.methods.init = (self: none, body) => { #show: slides ``` -但是注意,你不应该使用 `#set page(..)`,而是应该修改 `s.page-args` 和 `s.padding`,例如 +However, note that you should not use `#set page(..)`. Instead, modify `s.page-args` and `s.padding`, for example: ```typst #(s.page-args += ( @@ -49,12 +49,11 @@ self.methods.init = (self: none, body) => { #(s.padding += (x: 4em, y: 0em)) ``` +## Global Information -## 全局信息 +Like Beamer, Touying, through an OOP-style unified API design, can help you better maintain global information, allowing you to easily switch between different themes. Global information is a typical example of this. -就像 Beamer 一样,Touying 通过 OOP 风格的统一 API 设计,能够帮助您更好地维护全局信息,让您可以方便地在不同的主题之间切换,全局信息就是一个很典型的例子。 - -你可以通过 +You can set the title, subtitle, author, date, and institution information for slides using: ```typst #let s = (s.methods.info)( @@ -67,27 +66,29 @@ self.methods.init = (self: none, body) => { ) ``` -分别设置 slides 的标题、副标题、作者、日期和机构信息。在后续,你就可以通过 `s.info` 或 `self.info` 这样的方式访问它们。 +In subsequent slides, you can access them through `s.info` or `self.info`. -这些信息一般会在主题的 `title-slide`、`header` 和 `footer` 被使用到,例如 `#let s = themes.metropolis.register(s, aspect-ratio: "16-9", footer: self => self.info.institution)`。 +This information is generally used in the title-slide, header, and footer of the theme, for example: -其中 `date` 可以接收 `datetime` 格式和 `content` 格式,并且 `datetime` 格式的日期显示格式,可以通过 +```typst +#let s = themes.metropolis.register(s, aspect-ratio: "16-9", footer: self => self.info.institution) +``` + +The `date` can accept `datetime` format or `content` format, and the display format for the `datetime` format can be changed using: ```typst #let s = (s.methods.datetime-format)(self: s, "[year]-[month]-[day]") ``` -的方式更改。 - -:::tip[原理] +:::tip[Principle] -在这里,我们会稍微引入一点 Touying 的 OOP 概念。 +Here, we will introduce a bit of OOP concept in Touying. -您应该知道,Typst 是一个支持增量渲染的排版语言,也就是说,Typst 会缓存之前的函数调用结果,这就要求 Typst 里只有纯函数,即无法改变外部变量的函数。因此我们很难真正意义上地像 LaTeX 那样修改一个全局变量。即使是使用 `state` 或 `counter`,也需要使用 `locate` 与回调函数来获取里面的值,且实际上这种方式会对性能有很大的影响。 +You should know that Typst is a typesetting language that supports incremental rendering, which means Typst caches the results of previous function calls. This requires that Typst consists of pure functions, meaning functions that do not change external variables. Thus, it is challenging to modify a global variable in the true sense, even with the use of `state` or `counter`. This would require the use of `locate` with callback functions to obtain the values inside, and this approach would have a significant impact on performance. -Touying 并没有使用 `state` 和 `counter`,也没有违反 Typst 纯函数的原则,而是使用了一种巧妙的方式,并以面向对象风格的代码,维护了一个全局单例 `s`。在 Touying 中,一个对象指拥有自己的成员变量和方法的 Typst 字典,并且我们约定方法均有一个命名参数 `self` 用于传入对象自身,并且方法均放在 `.methods` 域里。有了这个理念,我们就不难写出更新 `info` 的方法了: +Touying does not use `state` or `counter` and does not violate the principle of pure functions in Typst. Instead, it uses a clever approach in an object-oriented style, maintaining a global singleton `s`. In Touying, an object refers to a Typst dictionary with its own member variables and methods. We agree that methods all have a named parameter `self` for passing the object itself, and methods are placed in the `.methods` domain. With this concept, it becomes easier to write methods to update `info`: -``` +```typst #let s = ( info: (:), methods: ( @@ -104,17 +105,16 @@ Touying 并没有使用 `state` 和 `counter`,也没有违反 Typst 纯函数 Title is #s.info.title ``` -这样,你也能够理解 `utils.methods()` 函数的用途了:将 `self` 绑定到 `s` 的所有方法上并返回,并通过解包语法简化后续的使用。 +Now you can understand the purpose of the `utils.methods()` function: to bind `self` to all methods of `s` and return it, simplifying the subsequent usage through unpacking syntax. ```typst #let (init, slides, alert) = utils.methods(s) ``` ::: +## State Initialization -## 状态初始化 - -一般而言,上面的两种方式就已经足够用于加入全局设置了,但是仍然会有部分情况,我们需要初始化 counters 或 states。如果将这些代码放在 `#show: slides` 之前,就会创建一个空白页,这是我们不想看见的,因此这时候我们就可以使用 `s.methods.append-preamble` 方法。例如在使用 codly 包的时候: +In general, the two ways mentioned above are sufficient for adding global settings. However, there are still situations where we need to initialize counters or states. If you place this code before `#show: slides`, a blank page will be created, which is something we don't want to see. In such cases, you can use the `s.methods.append-preamble` method. For example, when using the codly package: ```typst #import "@preview/touying:0.3.1": * @@ -146,8 +146,7 @@ Title is #s.info.title ![image](https://github.com/touying-typ/touying/assets/34951714/0be2fbaf-cc03-4776-932f-259503d5e23a) - -又或者是进行 Pdfpc 的配置的时候: +Or when configuring Pdfpc: ```typst // Pdfpc configuration diff --git a/docs/docs/integration/_category_.json b/docs/docs/integration/_category_.json index 8a6bf0ea2..9924b2933 100644 --- a/docs/docs/integration/_category_.json +++ b/docs/docs/integration/_category_.json @@ -1,8 +1,8 @@ { - "label": "第三方包集成", + "label": "Package Integration", "position": 8, "link": { "type": "generated-index", - "description": "让第三方包与 Touying 集成。" + "description": "Discover how to integrate third-party packages with Touying." } } diff --git a/docs/docs/integration/cetz.md b/docs/docs/integration/cetz.md index 2152766fd..234acf1e3 100644 --- a/docs/docs/integration/cetz.md +++ b/docs/docs/integration/cetz.md @@ -4,11 +4,11 @@ sidebar_position: 2 # CeTZ -Touying 提供了 `touying-reducer`,它能为 cetz 与 fletcher 加入 `pause` 和 `meanwhile` 动画。 +Touying provides the `touying-reducer`, which adds `pause` and `meanwhile` animations to CeTZ and Fletcher. -## 简单动画 +## Simple Animation -一个例子: +An example: ```typst #import "@preview/touying:0.3.1": * @@ -71,9 +71,9 @@ Touying 提供了 `touying-reducer`,它能为 cetz 与 fletcher 加入 `pause` ![image](https://github.com/touying-typ/touying/assets/34951714/9ba71f54-2a5d-4144-996c-4a42833cc5cc) -## only 与 uncover +## only and uncover -事实上,我们也可以在 cetz 内部使用 `only` 和 `uncover`,只是需要一点技巧: +In fact, we can also use `only` and `uncover` within CeTZ, but it requires a bit of technique: ```typst #slide(repeat: 3, self => [ diff --git a/docs/docs/integration/codly.md b/docs/docs/integration/codly.md index d60e2b86a..acd9b6871 100644 --- a/docs/docs/integration/codly.md +++ b/docs/docs/integration/codly.md @@ -4,7 +4,7 @@ sidebar_position: 4 # Codly -在使用 codly 的时候,我们应该使用 `s.methods.append-preamble` 方法进行初始化。 +When using Codly, we should initialize it using the `s.methods.append-preamble` method. ```typst #import "@preview/touying:0.3.1": * diff --git a/docs/docs/integration/fletcher.md b/docs/docs/integration/fletcher.md index b1d40932c..633cc996b 100644 --- a/docs/docs/integration/fletcher.md +++ b/docs/docs/integration/fletcher.md @@ -4,9 +4,9 @@ sidebar_position: 3 # Fletcher -Touying 提供了 `touying-reducer`,它能为 fletcher 加入 `pause` 和 `meanwhile` 动画。 +Touying provides the `touying-reducer`, which adds `pause` and `meanwhile` animations to Fletcher. -一个例子: +An example: ```typst #import "@preview/touying:0.3.1": * diff --git a/docs/docs/integration/pinit.md b/docs/docs/integration/pinit.md index b90edd09d..bbbff82bb 100644 --- a/docs/docs/integration/pinit.md +++ b/docs/docs/integration/pinit.md @@ -4,9 +4,9 @@ sidebar_position: 1 # Pinit -[Pinit](https://github.com/OrangeX4/typst-pinit/) 包其提供了一个基于页面绝对定位与基于「图钉」pins 相对定位的能力,可以很方便地为 slides 实现箭头指示与解释说明的效果。 +[Pinit](https://github.com/OrangeX4/typst-pinit/) package provides the ability to perform absolute positioning based on the page and relative positioning based on "pins," making it convenient to implement arrow pointing and explanatory effects for slides. -## 简单示例 +## Simple Example ```typst #import "@preview/pinit:0.1.3": * @@ -22,18 +22,16 @@ A simple #pin(1)highlighted text#pin(2). ![image](https://github.com/touying-typ/touying/assets/34951714/b17f9b80-5a8b-4943-a222-bcb0eb38611d) -另一个 [示例](https://github.com/OrangeX4/typst-pinit/blob/main/examples/equation-desc.typ): +Another [example](https://github.com/OrangeX4/typst-pinit/blob/main/examples/equation-desc.typ): ![image](https://github.com/touying-typ/touying/assets/34951714/9b4a6b50-fcfd-497d-9649-ae1f7762ee3f) - -## 复杂示例 +## Complex Example ![image](https://github.com/touying-typ/touying/assets/34951714/7fb0095a-fd86-49ec-af95-15bc81a341c2) - -一个与 Touying 共同使用的示例: +An example of shared usage with Touying: ```typst #import "@preview/touying:0.3.1": * diff --git a/docs/docs/integration/polylux.md b/docs/docs/integration/polylux.md index 4adc8fa23..90831b752 100644 --- a/docs/docs/integration/polylux.md +++ b/docs/docs/integration/polylux.md @@ -4,18 +4,18 @@ sidebar_position: 5 # Polylux -借助 Touying 与 Polylux 的兼容性,你可以让 Polylux 也支持直接导出,只需要在你的 Polylux 源代码中加入下面的代码即可。 +With the compatibility between Touying and Polylux, you can make Polylux support direct export as well. Just add the following code to your Polylux source code: -``` +```typst #import "@preview/touying:0.3.1" #locate(loc => touying.pdfpc.pdfpc-file(loc)) ``` -假设你的文档为 `./example.typ`,则你可以通过 +Assuming your document is `./example.typ`, you can then export the `.pdfpc` file directly using the following command: ```sh typst query --root . ./example.typ --field value --one "" > ./example.pdfpc ``` -直接导出 `.pdfpc` 文件,而不需要使用额外的 `polylux2pdfpc` 程序。 \ No newline at end of file +This eliminates the need for an additional `polylux2pdfpc` program. \ No newline at end of file diff --git a/docs/docs/layout.md b/docs/docs/layout.md index 544693038..55824499e 100644 --- a/docs/docs/layout.md +++ b/docs/docs/layout.md @@ -2,13 +2,13 @@ sidebar_position: 5 --- -# 页面布局 +# Page Layout -## 基础概念 +## Basic Concepts -要想使用 Typst 制作一个样式美观的 slides,正确理解 Typst 的页面模型是必须的,如果你不关心自定义页面样式,你可以选择跳过这部分,否则还是推荐看一遍这部分。 +To create aesthetically pleasing slides using Typst, it is essential to understand Typst's page model correctly. If you don't care about customizing the page style, you can choose to skip this section. However, it is still recommended to go through this part. -下面我们通过一个具体的例子来说明 Typst 的默认页面模型。 +Here, we illustrate Typst's default page model with a specific example. ```typst #let container = rect.with(height: 100%, width: 100%, inset: 0pt) @@ -37,16 +37,16 @@ sidebar_position: 5 ![image](https://github.com/touying-typ/touying/assets/34951714/6cbb1092-c733-41b6-a15d-822ce970ef13) -我们需要区分以下概念: +We need to distinguish the following concepts: -1. **Model:** Typst 拥有与 CSS Box Model 类似的模型,分为 Margin、Padding 和 Content,但其中 padding 并非 `set page(..)` 的属性,而是我们手动添加 `#pad(..)` 得到的。 -2. **Margin:** 页边距,分为上下左右四个方向,是 Typst 页面模型的核心,其他属性都会受到页边距的影响,尤其是 Header 和 Footer,其实际上是位于 Margin 内部。 -3. **Padding:** 用于在 Margin 和 Content 之间添加额外的间隙。 -4. **Header:** Header 是页面顶部的内容,又分为 container 和 innerbox。我们可以注意到 header container 和 padding 的边缘并不贴合,而是也有一定的空隙,这个空隙实际上就是 `header-ascent: 30%`,而这里的百分比是相对于 margin-top 而言的。并且,我们注意到 header innerbox 实际上位于 header container 左下角,也即 innerbox 实际上默认有属性 `#set align(left + bottom)`。 -5. **Footer:** Footer 是页面底部的内容,又分为 container 和 innerbox。我们可以注意到 footer container 和 padding 的边缘并不贴合,而是也有一定的空隙,这个空隙实际上就是 `footer-descent: 30%`,而这里的百分比是相对于 margin-bottom 而言的。并且,我们注意到 footer innerbox 实际上位于 footer container 左上角,也即 innerbox 实际上默认有属性 `#set align(left + top)`。 -6. **Place:** `place` 函数可以实现绝对定位,在不影响父容器内其他元素的情况下,相对于父容器来定位,并且可以传入 `alignment`、`dx` 和 `dy`,很适合用来放置一些修饰元素,例如 Logo 之类的图片。 +1. **Model:** Typst has a model similar to the CSS Box Model, divided into Margin, Padding, and Content. However, padding is not a property of `set page(..)` but is obtained manually by adding `#pad(..)`. +2. **Margin:** Margins, including top, bottom, left, and right, are the core of Typst's page model. Other properties are influenced by margins, especially Header and Footer, which are actually inside the Margin. +3. **Padding:** Used to add additional space between Margin and Content. +4. **Header:** The Header is the content at the top of the page, divided into container and innerbox. We can notice that the edge of the header container and padding does not align but has a certain gap. This gap is actually `header-ascent: 30%`, and the percentage is relative to margin-top. Also, we notice that the header innerbox is actually located at the bottom left corner of the header container, meaning the innerbox defaults to `#set align(left + bottom)`. +5. **Footer:** The Footer is the content at the bottom of the page, divided into container and innerbox. We can notice that the edge of the footer container and padding does not align but has a certain gap. This gap is actually `footer-descent: 30%`, and the percentage is relative to margin-bottom. Also, we notice that the footer innerbox is actually located at the top left corner of the footer container, meaning the innerbox defaults to `#set align(left + top)`. +6. **Place:** The `place` function can achieve absolute positioning, relative to the parent container, without affecting other elements within the parent container. It can take parameters like `alignment`, `dx`, and `dy`, making it suitable for placing decorative elements such as logos. -因此,要将 Typst 应用到制作 slides 上,我们只需要设置 +Therefore, to apply Typst to create slides, we only need to set ```typst #set page( @@ -59,7 +59,7 @@ sidebar_position: 5 #let padding = (x: 4em, y: 0em) ``` -即可。例如我们有 +For example, we have ```typst #let container = rect.with(stroke: (dash: "dashed"), height: 100%, width: 100%, inset: 0pt) @@ -89,11 +89,11 @@ sidebar_position: 5 ![image](https://github.com/touying-typ/touying/assets/34951714/6127d231-86f3-4262-b7c6-b199d47ae12b) -## 页面管理 +## Page Management -由于 Typst 中使用 `set page(..)` 命令来修改页面参数,会导致创建一个新的页面,而不能修改当前页面,因此 Touying 选择维护一个 `s.page-args` 成员变量和一个 `s.padding` 成员变量,只在 Touying 自己创建新 slide 时才会自己应用这些参数,因此用户只需要关注 `s.page-args` 和 `s.padding` 即可。 +Since using the `set page(..)` command in Typst to modify page parameters creates a new page and cannot modify the current one, Touying chooses to maintain an `s.page-args` member variable and an `s.padding` member variable. Touying applies these parameters only when creating new slides, so users only need to focus on `s.page-args` and `s.padding`. -例如,上面的例子就可以改成 +For example, the previous example can be transformed into ```typst #(s.page-args += ( @@ -106,27 +106,27 @@ sidebar_position: 5 #(s.padding += (x: 4em, y: 0em)) ``` -同理,如果你对某个主题的 header 或 footer 样式不满意,你也可以通过 +Similarly, if you are not satisfied with the header or footer style of a theme, you can use ```typst #(s.page-args.footer = [Custom Footer]) ``` -这样方式进行更换。不过需要注意的是,如果这样更换了页面参数,你需要将其放在 `#let (slide,) = utils.slides(s)` 之前,否则就需要重新调用 `#let (slide,) = utils.slides(s)`。 +to replace it. However, please note that if you replace the page parameters in this way, you need to place it before `#let (slide,) = utils.slides(s)`, or you need to call `#let (slide,) = utils.slides(s)` again. -:::warning[警告] +:::warning[Warning] -因此,你不应该自己使用 `set page(..)` 命令,而是应该修改 `s` 内部的 `s.page-args` 成员变量。 +Therefore, you should not use the `set page(..)` command on your own; instead, you should modify the `s.page-args` member variable internally. ::: -借助这种方式,我们也可以通过 `s.page-args` 实时查询当前页面的参数,这对一些需要获取页边距或当前页面背景颜色的函数很有用,例如 `transparent-cover`。这里就部分等价于 context get rule,而且实际上用起来会更方便。 +In this way, we can also query the current page parameters in real-time through `s.page-args`. This is useful for some functions that need to get margin or the current page's background color, such as `transparent-cover`. This is partly equivalent to the context get rule, and it is actually more convenient to use. -## 应用:添加 Logo +## Application: Adding a Logo -为 slides 添加一个 Logo 是及其普遍,但是又及其多变的一个需求。其中的难点在于,所需要的 Logo 大小和位置往往因人而异。因此,Touying 的主题大部分都不包含 Logo 的配置选项。但借助本章节提到的页面布局的概念,我们知道可以在 header 或 footer 中使用 `place` 函数来放置 Logo 图片。 +Adding a logo to slides is a very common but also a very versatile requirement. The difficulty lies in the fact that the required size and position of the logo often vary from person to person. Therefore, most of Touying's themes do not include configuration options for logos. But with the concepts of page layout mentioned in this section, we know that we can use the `place` function in the header or footer to place a logo image. -例如,我们决定给 metropolis 主题加入 GitHub 的图标,我们可以这样实现: +For example, suppose we decide to add the GitHub icon to the metropolis theme. We can implement it like this: ```typst #import "@preview/touying:0.3.1": * @@ -136,7 +136,7 @@ sidebar_position: 5 #(s.page-args.header = self => { // display the original header utils.call-or-display(self, s.page-args.header) - // place logo to top-right + // place logo at the top-right place(top + right, dx: -0.5em, dy: 0.3em)[ #octique("mark-github", color: rgb("#fafafa"), width: 1.5em, height: 1.5em) ] @@ -151,11 +151,11 @@ sidebar_position: 5 ![image](https://github.com/touying-typ/touying/assets/34951714/055d77e7-5087-4248-b969-d8ef9d50c54b) -其中 `utils.call-or-display(self, body)` 可以用于显示 `body` 为 content 或 `body` 为形如 `self => content` 形式的回调函数。 +Here, `utils.call-or-display(self, body)` can be used to display `body` as content or a callback function in the form `self => content`. -## 页面分栏 +## Page Columns -如果你需要将页面分为两栏或三栏,你可以使用 Touying `slide` 函数默认提供的 `compose` 功能,最简单的示例如下: +If you need to divide the page into two or three columns, you can use the `compose` feature provided by the default `slide` function in Touying. The simplest example is as follows: ```typst #slide[ @@ -167,7 +167,7 @@ sidebar_position: 5 ![image](https://github.com/touying-typ/touying/assets/34951714/a39f88a2-f1ba-4420-8f78-6a0fc644704e) -如果你需要更改分栏的方式,可以修改 `slide` 的 `composer` 参数,其中默认的参数是 `utils.with.side-by-side(columns: auto, gutter: 1em)`,如果我们要让左边那一栏占据剩余宽度,可以使用 +If you need to change the way columns are composed, you can modify the `composer` parameter of `slide`. The default parameter is `utils.with.side-by-side(columns: auto, gutter: 1em)`. If we want the left column to occupy the remaining width, we can use ```typst #slide(composer: utils.side-by-side.with(columns: (1fr, auto), gutter: 1em))[ diff --git a/docs/docs/start.md b/docs/docs/start.md index d7533c387..419b3f465 100644 --- a/docs/docs/start.md +++ b/docs/docs/start.md @@ -33,6 +33,10 @@ Hello, Typst! It's that simple! You've created your first Touying slides. Congratulations! 🎉 +**Tip:** You can use Typst syntax like `#import "config.typ": *` or `#include "content.typ"` to implement Touying's multi-file architecture. + +**Warning:** The comma in `#let (slide,) = utils.slides(s)` is necessary for the unpacking syntax. + ## More Complex Examples In fact, Touying provides various styles for slide writing. You can also use the `#slide[..]` syntax to access more powerful features provided by Touying. diff --git a/docs/docs/themes/dewdrop.md b/docs/docs/themes/dewdrop.md index 219974dff..717abea22 100644 --- a/docs/docs/themes/dewdrop.md +++ b/docs/docs/themes/dewdrop.md @@ -2,17 +2,17 @@ sidebar_position: 3 --- -# Dewdrop 主题 +# Dewdrop Theme ![image](https://github.com/touying-typ/touying/assets/34951714/0b5b2bb2-c6ec-45c0-9cea-0af2ed896bba) -这个主题的灵感来自 Zhibo Wang 创作的 [BeamerTheme](https://github.com/zbowang/BeamerTheme),由 [OrangeX4](https://github.com/OrangeX4) 改造而来。 +This theme takes inspiration from Zhibo Wang's [BeamerTheme](https://github.com/zbowang/BeamerTheme) and has been modified by [OrangeX4](https://github.com/OrangeX4). -这个主题拥有优雅美观的 navigation,包括 `sidebar` 和 `mini-slides` 两种模式。 +The Dewdrop theme features an elegantly designed navigation, including two modes: `sidebar` and `mini-slides`. -## 初始化 +## Initialization -你可以通过下面的代码来初始化: +You can initialize it using the following code: ```typst #import "@preview/touying:0.3.1": * @@ -42,26 +42,26 @@ sidebar_position: 3 #show: slides ``` -其中 `register` 接收参数: +The `register` function takes the following parameters: -- `aspect-ratio`: 幻灯片的长宽比为 "16-9" 或 "4-3",默认为 "16-9"。 -- `navigation`: 导航栏样式,可以是 `"sidebar"`、`"mini-slides"` 和 `none`,默认为 `"sidebar"`。 -- `sidebar`: 侧边导航栏设置,默认为 `(width: 10em)`。 -- `mini-slides`: mini-slides 设置,默认为 `(height: 2em, x: 2em, section: false, subsection: true)`。 - - `height`: mini-slides 高度,默认为 `2em`。 - - `x`: mini-slides 的 x 轴 padding,默认为 `2em`。 - - `section`: 是否显示 section 之后,subsection 之前的 slides,默认为 `false`。 - - `subsection`: 是否根据 subsection 分割 mini-slides,设置为 `false` 挤压为一行,默认为 `true`。 -- `footer`: 展示在页脚的内容,默认为 `[]`,也可以传入形如 `self => self.info.author` 的函数。 -- `footer-right`: 展示在页脚右侧的内容,默认为 `states.slide-counter.display() + " / " + states.last-slide-number`。 -- `primary`: primary 颜色,默认为 `rgb("#0c4842")`。 -- `alpha`: 透明度,默认为 `70%`。 +- `aspect-ratio`: The aspect ratio of the slides, either "16-9" or "4-3," defaulting to "16-9." +- `navigation`: The navigation bar style, which can be `"sidebar"`, `"mini-slides"`, or `none`, defaulting to `"sidebar"`. +- `sidebar`: Sidebar navigation settings, defaulting to `(width: 10em)`. +- `mini-slides`: Mini-slides settings, defaulting to `(height: 2em, x: 2em, section: false, subsection: true)`. + - `height`: The height of mini-slides, defaulting to `2em`. + - `x`: Padding on the x-axis for mini-slides, defaulting to `2em`. + - `section`: Whether to display slides after the section and before the subsection, defaulting to `false`. + - `subsection`: Whether to split mini-slides based on subsections or compress them into one line, defaulting to `true`. +- `footer`: Content displayed in the footer, defaulting to `[]`, or it can be passed as a function like `self => self.info.author`. +- `footer-right`: Content displayed on the right side of the footer, defaulting to `states.slide-counter.display() + " / " + states.last-slide-number`. +- `primary`: Primary color, defaulting to `rgb("#0c4842")`. +- `alpha`: Transparency, defaulting to `70%`. -并且 Dewdrop 主题会提供一个 `#alert[..]` 函数,你可以通过 `#show strong: alert` 来使用 `*alert text*` 语法。 +The Dewdrop theme also provides an `#alert[..]` function, which you can use with `#show strong: alert` using the `*alert text*` syntax. -## 颜色主题 +## Color Theme -Dewdrop 默认使用了 +Dewdrop uses the following default color theme: ```typst #let s = (s.methods.colors)( @@ -74,17 +74,17 @@ Dewdrop 默认使用了 ) ``` -颜色主题,你可以通过 `#let s = (s.methods.colors)(self: s, ..)` 对其进行修改。 +You can modify this color theme using `#let s = (s.methods.colors)(self: s, ..)`. -## slide 函数族 +## Slide Function Family -Dewdrop 主题提供了一系列自定义 slide 函数: +The Dewdrop theme provides a variety of custom slide functions: ```typst #title-slide(extra: none, ..args) ``` -`title-slide` 会读取 `self.info` 里的信息用于显示,你也可以为其传入 `extra` 参数,显示额外的信息。 +`title-slide` reads information from `self.info` for display, and you can also pass in an `extra` parameter to display additional information. --- @@ -101,7 +101,8 @@ Dewdrop 主题提供了一系列自定义 slide 函数: ... ] ``` -默认拥有导航栏和页脚的普通 slide 函数,页脚为您设置的页脚。 + +A default slide with navigation and footer, where the footer is what you set. --- @@ -110,16 +111,16 @@ Dewdrop 主题提供了一系列自定义 slide 函数: ... ] ``` -用于引起观众的注意力。背景色为 `self.colors.primary`。 +Used to draw attention, with the background color set to `self.colors.primary`. -## 特殊函数 +## Special Functions ```typst #d-outline(enum-args: (:), list-args: (:), cover: true) ``` -显示当前的目录,`cover` 参数用于指定是否要隐藏处于 inactive 状态的 sections。 +Displays the current table of contents. The `cover` parameter specifies whether to hide sections in an inactive state. --- @@ -127,7 +128,7 @@ Dewdrop 主题提供了一系列自定义 slide 函数: #d-sidebar() ``` -内部函数,用于显示侧边栏。 +An internal function used to display the sidebar. --- @@ -135,20 +136,19 @@ Dewdrop 主题提供了一系列自定义 slide 函数: #d-mini-slides() ``` -内部函数,用于显示 mini-slides。 - +An internal function used to display mini-slides. -## `slides` 函数 +## `slides` Function -`slides` 函数拥有参数 +The `slides` function has the following parameters: -- `title-slide`: 默认为 `true`。 -- `outline-slide`: 默认为 `true`。 -- `slide-level`: 默认为 `2`。 +- `title-slide`: Defaults to `true`. +- `outline-slide`: Defaults to `true`. +- `slide-level`: Defaults to `2`. -可以通过 `#show: slides.with(..)` 的方式设置。 +You can set these using `#show: slides.with(..)`. -PS: 其中 outline title 可以通过 `#(s.outline-title = [Outline])` 的方式修改。 +PS: You can modify the outline title using `#(s.outline-title = [Outline])`. ```typst #import "@preview/touying:0.3.1": * @@ -184,7 +184,7 @@ Hello, Typst! ![image](https://github.com/touying-typ/touying/assets/34951714/09ddfb40-4f97-4062-8261-23f87690c33e) -## 示例 +## Example ```typst #import "@preview/touying:0.3.1": * diff --git a/docs/docs/themes/metropolis.md b/docs/docs/themes/metropolis.md index 615bed2ac..9cf389297 100644 --- a/docs/docs/themes/metropolis.md +++ b/docs/docs/themes/metropolis.md @@ -2,19 +2,17 @@ sidebar_position: 2 --- -# Metropolis 主题 +# Metropolis Theme ![image](https://github.com/touying-typ/touying/assets/34951714/383ceb22-f696-4450-83a6-c0f17e4597e1) +This theme draws inspiration from Matthias Vogelgesang's [Metropolis beamer](https://github.com/matze/mtheme) theme and has been modified by [Enivex](https://github.com/Enivex). -这个主题的灵感来自 Matthias Vogelgesang 创作的 [Metropolis beamer](https://github.com/matze/mtheme) 主题,由 [Enivex](https://github.com/Enivex) 改造而来。 +The Metropolis theme is elegant and suitable for everyday use. It is recommended to have Fira Sans and Fira Math fonts installed on your computer for the best results. -这个主题美观大方,很适合日常使用,并且你最好在电脑上安装 Fira Sans 和 Fira Math 字体,以取得最佳效果。 +## Initialization - -## 初始化 - -你可以通过下面的代码来初始化: +You can initialize it using the following code: ```typst #import "@preview/touying:0.3.1": * @@ -37,19 +35,19 @@ sidebar_position: 2 #show: slides ``` -其中 `register` 接收参数: +The `register` function takes the following parameters: -- `aspect-ratio`: 幻灯片的长宽比为 "16-9" 或 "4-3",默认为 "16-9"。 -- `header`: 显示在页眉的内容,默认为 `states.current-section-title`,也可以传入形如 `self => self.info.title` 的函数。 -- `footer`: 展示在页脚的内容,默认为 `[]`,也可以传入形如 `self => self.info.author` 的函数。 -- `footer-right`: 展示在页脚右侧的内容,默认为 `states.slide-counter.display() + " / " + states.last-slide-number`。 -- `footer-progress`: 是否显示 slide 底部的进度条,默认为 `true`。 +- `aspect-ratio`: The aspect ratio of the slides, either "16-9" or "4-3," defaulting to "16-9." +- `header`: Content displayed in the header, defaulting to `states.current-section-title`, or it can be passed as a function like `self => self.info.title`. +- `footer`: Content displayed in the footer, defaulting to `[]`, or it can be passed as a function like `self => self.info.author`. +- `footer-right`: Content displayed on the right side of the footer, defaulting to `states.slide-counter.display() + " / " + states.last-slide-number`. +- `footer-progress`: Whether to show the progress bar at the bottom of the slide, defaulting to `true`. -并且 Metropolis 主题会提供一个 `#alert[..]` 函数,你可以通过 `#show strong: alert` 来使用 `*alert text*` 语法。 +The Metropolis theme also provides an `#alert[..]` function, which you can use with `#show strong: alert` using the `*alert text*` syntax. -## 颜色主题 +## Color Theme -Metropolis 默认使用了 +Metropolis uses the following default color theme: ```typst #let s = (s.methods.colors)( @@ -61,17 +59,17 @@ Metropolis 默认使用了 ) ``` -颜色主题,你可以通过 `#let s = (s.methods.colors)(self: s, ..)` 对其进行修改。 +You can modify this color theme using `#let s = (s.methods.colors)(self: s, ..)`. -## slide 函数族 +## Slide Function Family -Metropolis 主题提供了一系列自定义 slide 函数: +The Metropolis theme provides a variety of custom slide functions: ```typst #title-slide(extra: none, ..args) ``` -`title-slide` 会读取 `self.info` 里的信息用于显示,你也可以为其传入 `extra` 参数,显示额外的信息。 +`title-slide` reads information from `self.info` for display, and you can also pass in an `extra` parameter to display additional information. --- @@ -90,7 +88,8 @@ Metropolis 主题提供了一系列自定义 slide 函数: ... ] ``` -默认拥有标题和页脚的普通 slide 函数,其中 `title` 默认为当前 section title,页脚为您设置的页脚。 + +A default slide with headers and footers, where the title defaults to the current section title, and the footer is what you set. --- @@ -99,27 +98,28 @@ Metropolis 主题提供了一系列自定义 slide 函数: ... ] ``` -用于引起观众的注意力。背景色为 `self.colors.primary-dark`。 + +Used to draw attention, with the background color set to `self.colors.primary-dark`. --- ```typst #new-section-slide(short-title: auto, title) ``` -用给定标题开启一个新的 section。 +Creates a new section with the given title. -## `slides` 函数 +## `slides` Function -`slides` 函数拥有参数 +The `slides` function has the following parameters: -- `title-slide`: 默认为 `true`。 -- `outline-slide`: 默认为 `true`。 -- `slide-level`: 默认为 `1`。 +- `title-slide`: Defaults to `true`. +- `outline-slide`: Defaults to `true`. +- `slide-level`: Defaults to `1`. -可以通过 `#show: slides.with(..)` 的方式设置。 +You can set these using `#show: slides.with(..)`. -PS: 其中 outline title 可以通过 `#(s.outline-title = [Outline])` 的方式修改。 +PS: You can modify the outline title using `#(s.outline-title = [Outline])`. ```typst #import "@preview/touying:0.3.1": * @@ -155,7 +155,7 @@ Hello, Typst! ![image](https://github.com/touying-typ/touying/assets/34951714/4ab45ee6-09f7-498b-b349-e889d6e42e3e) -## 示例 +## Example ```typst #import "@preview/touying:0.3.1": * diff --git a/docs/docs/themes/simple.md b/docs/docs/themes/simple.md index e5ba9f4a2..bddf829d7 100644 --- a/docs/docs/themes/simple.md +++ b/docs/docs/themes/simple.md @@ -2,18 +2,17 @@ sidebar_position: 1 --- -# Simple 主题 +# Simple Theme ![image](https://github.com/touying-typ/touying/assets/34951714/83d5295e-f961-4ffd-bc56-a7049848d408) -这个主题来源于 [Polylux](https://polylux.dev/book/themes/gallery/simple.html),作者是 Andreas Kröpelin。 +This theme originates from [Polylux](https://polylux.dev/book/themes/gallery/simple.html), created by Andreas Kröpelin. -这个主题被认为是一个相对简单的主题,你可以用它来创建一个简单 slides,并且可以随意加入你喜欢的功能。 +Considered a relatively straightforward theme, you can use it to create simple slides and freely incorporate features you like. +## Initialization -## 初始化 - -你可以通过下面的代码来初始化: +You can initialize it using the following code: ```typst #import "@preview/touying:0.3.1": * @@ -27,26 +26,26 @@ sidebar_position: 1 #show: slides ``` -其中 `register` 接收参数: - -- `aspect-ratio`: 幻灯片的长宽比为 "16-9" 或 "4-3",默认为 "16-9"。 -- `footer`: 展示在页脚的内容,默认为 `[]`,也可以传入形如 `self => self.info.author` 的函数。 -- `footer-right`: 展示在页脚右侧的内容,默认为 `states.slide-counter.display() + " / " + states.last-slide-number`。 -- `background`: 背景颜色,默认为白色。 -- `foreground`: 文本颜色,默认为黑色。 -- `primary`: 主题颜色,默认为 `aqua.darken(50%)`。 +The `register` function takes the following parameters: +- `aspect-ratio`: The aspect ratio of the slides, either "16-9" or "4-3," defaulting to "16-9." +- `footer`: Content displayed in the footer, defaulting to `[]`, or it can be passed as a function like `self => self.info.author`. +- `footer-right`: Content displayed on the right side of the footer, defaulting to `states.slide-counter.display() + " / " + states.last-slide-number`. +- `background`: Background color, defaulting to white. +- `foreground`: Text color, defaulting to black. +- `primary`: Theme color, defaulting to `aqua.darken(50%)`. -## slide 函数族 +## Slide Function Family -simple 主题提供了一系列自定义 slide 函数: +The Simple theme provides a variety of custom slide functions: ```typst #centered-slide(section: ..)[ ... ] ``` -内容位于幻灯片中央的幻灯片,`section` 参数可以用于新建一个 section。 + +A slide with content centered, and the `section` parameter can be used to create a new section. --- @@ -56,7 +55,7 @@ simple 主题提供了一系列自定义 slide 函数: ] ``` -和 `centered-slide` 相同,这里只是为了保持和 Polylux 语法上的一致性。 +Similar to `centered-slide`, this is provided for consistency with Polylux syntax. --- @@ -73,7 +72,8 @@ simple 主题提供了一系列自定义 slide 函数: ... ] ``` -默认拥有页眉和页脚的普通 slide 函数,其中页眉为当前 section,页脚为您设置的页脚。 + +A default slide with headers and footers, where the header corresponds to the current section, and the footer is what you set. --- @@ -82,16 +82,18 @@ simple 主题提供了一系列自定义 slide 函数: ... ] ``` -用于引起观众的注意力。可选接受一个前景色 (默认为 `white`) 和一个背景色 (默认为 `auto`,即 `self.colors.primary`)。 +Used to draw attention, it optionally accepts a foreground color (defaulting to `white`) and a background color (defaulting to `auto`, i.e., `self.colors.primary`). + +## `slides` Function + +The `slides` function has the following parameter: -## `slides` 函数 +- `slide-level`: Defaults to `1`. -`slides` 函数拥有参数 +You can set it using `#show: slides.with(..)`. -- `slide-level`: 默认为 `1`。 -可以通过 `#show: slides.with(..)` 的方式设置。 ```typst #import "@preview/touying:0.3.1": * @@ -118,7 +120,7 @@ Hello, Typst! ![image](https://github.com/touying-typ/touying/assets/34951714/2c599bd1-6250-497f-a65b-f19ae02a16cb) -## 示例 +## Example ```typst #import "@preview/touying:0.3.1": * diff --git a/docs/docs/themes/university.md b/docs/docs/themes/university.md index 2e4c401a2..53538ff9d 100644 --- a/docs/docs/themes/university.md +++ b/docs/docs/themes/university.md @@ -1,16 +1,12 @@ ---- -sidebar_position: 4 ---- - -# University 主题 +## University Theme ![image](https://github.com/touying-typ/touying/assets/34951714/4095163c-0c16-4760-b370-8adc1cdd7e6c) -这个美观的主题来自 [Pol Dellaiera](https://github.com/drupol)。 +This aesthetically pleasing theme is courtesy of [Pol Dellaiera](https://github.com/drupol). -## 初始化 +## Initialization -你可以通过下面的代码来初始化: +You can initialize the University theme using the following code: ```typst #import "@preview/touying:0.3.1": * @@ -31,16 +27,16 @@ sidebar_position: 4 #show: slides ``` -其中 `register` 接收参数: +The `register` function accepts the following parameters: -- `aspect-ratio`: 幻灯片的长宽比为 "16-9" 或 "4-3",默认为 "16-9"。 -- `progress-bar`: 是否显示 slide 顶部的进度条,默认为 `true`。 +- `aspect-ratio`: Sets the aspect ratio of the slides to "16-9" or "4-3," with the default being "16-9." +- `progress-bar`: Controls whether the progress bar at the top of each slide is displayed, with the default being `true`. -并且 University 主题会提供一个 `#alert[..]` 函数,你可以通过 `#show strong: alert` 来使用 `*alert text*` 语法。 +Additionally, the University theme provides an `#alert[..]` function, which you can use with the `#show strong: alert` syntax for emphasizing text with `*alert text*`. -## 颜色主题 +## Color Theme -University 默认使用了 +The University theme defaults to the following color theme: ```typst #let s = (s.methods.colors)( @@ -51,19 +47,21 @@ University 默认使用了 ) ``` -颜色主题,你可以通过 `#let s = (s.methods.colors)(self: s, ..)` 对其进行修改。 +You can modify this color theme using `#let s = (s.methods.colors)(self: s, ..)`. + +## Slide Function Family -## slide 函数族 +The University theme provides a series of custom slide functions: -University 主题提供了一系列自定义 slide 函数: +### Title Slide ```typst #title-slide(logo: none, authors: none, ..args) ``` -`title-slide` 会读取 `self.info` 里的信息用于显示,你也可以为其传入 `logo` 参数和 array 类型的 `authors` 参数。 +The `title-slide` function reads information from `self.info` for display. You can also pass the `logo` parameter and an array-type `authors` parameter. ---- +### Regular Slide ```typst #slide( @@ -81,18 +79,20 @@ University 主题提供了一系列自定义 slide 函数: ... ] ``` -默认拥有标题和页脚的普通 slide 函数,其中 `title` 默认为当前 section title,页脚为您设置的页脚。 ---- +The default slide function with a title and footer. The `title` defaults to the current section title, and the footer is set as per your configuration. + +### Focus Slide ```typst #focus-slide(background-img: ..., background-color: ...)[ ... ] ``` -用于引起观众的注意力。默认背景色为 `self.colors.primary`。 ---- +Used to capture the audience's attention. The default background color is `self.colors.primary`. + +### Matrix Slide ```typst #matrix-slide(columns: ..., rows: ...)[ @@ -101,17 +101,17 @@ University 主题提供了一系列自定义 slide 函数: ... ] ``` -可以参考 [文档](https://polylux.dev/book/themes/gallery/university.html)。 +Refer to the [documentation](https://polylux.dev/book/themes/gallery/university.html). -## `slides` 函数 +## `slides` Function -`slides` 函数拥有参数 +The `slides` function has parameters: -- `title-slide`: 默认为 `true`。 -- `slide-level`: 默认为 `1`。 +- `title-slide`: Defaults to `true`. +- `slide-level`: Defaults to `1`. -可以通过 `#show: slides.with(..)` 的方式设置。 +You can set these parameters using `#show: slides.with(..)`. ```typst #import "@preview/touying:0.3.1": * @@ -145,7 +145,7 @@ Hello, Typst! ![image](https://github.com/touying-typ/touying/assets/34951714/58971045-0b0d-46cb-acc2-caf766c2432d) -## 示例 +## Example ```typst #import "@preview/touying:0.3.1": * diff --git a/docs/i18n/zh/docusaurus-plugin-content-docs/current/start.md b/docs/i18n/zh/docusaurus-plugin-content-docs/current/start.md index 69ca8e655..0f7582cfe 100644 --- a/docs/i18n/zh/docusaurus-plugin-content-docs/current/start.md +++ b/docs/i18n/zh/docusaurus-plugin-content-docs/current/start.md @@ -33,6 +33,10 @@ Hello, Typst! 这很简单,您创建了您的第一个 Touying slides,恭喜!🎉 +**提示:** 你可以使用 `#import "config.typ": *` 或 `#include "content.typ"` 等 Typst 语法来实现 Touying 的多文件架构。 + +**警告:** `#let (slide,) = utils.slides(s)` 里的逗号对于解包语法来说是必要的! + ## 更复杂的例子 事实上,Touying 提供了多种 slides 编写风格,实际上您也可以使用 `#slide[..]` 的写法,以获得 Touying 提供的更多更强大的功能。