docs: update docs and README

README.md

@@ -43,6 +43,8 @@ Hello, Touying!
 Hello, Typst!
 ```
 
+![image](https://github.com/touying-typ/touying/assets/34951714/6f15b500-b825-4db1-88ff-34212f43723e)
+
 It's simple. Congratulations on creating your first Touying slide! 🎉
 
 
@@ -121,6 +123,8 @@ In fact, Touying provides various styles for writing slides. For example, the ab
 ]
 ```
 
+![image](https://github.com/touying-typ/touying/assets/34951714/2c4ef64c-879b-46da-b18b-5afb9c6d2192)
+
 
 ## Acknowledgements
 

docs/docs/dynamic/complex.md

@@ -26,6 +26,8 @@ To overcome the limitations of `styled` and `layout` mentioned earlier, Touying
 ])
 ```
 
+![image](https://github.com/touying-typ/touying/assets/34951714/e9a6b8c5-daf0-4cf2-8d39-1a768ce1dfea)
+
 Notice that we no longer pass a content block but instead pass a callback function with a `self` parameter. Later, we extract `only`, `uncover`, and `alternatives` functions from `self` using:
 
 ```typst
@@ -71,4 +73,6 @@ The `alternatives` function displays a series of different content in different
 ])
 ```
 
+![image](https://github.com/touying-typ/touying/assets/34951714/392707ea-0bcd-426b-b232-5bc63b9a13a3)
+
 As you can see, `alternatives` can automatically expand to the most suitable width and height, a capability that `only` and `uncover` lack. In fact, `alternatives` has other parameters, such as `start: 2`, `repeat-last: true`, and `position: center + horizon`. For more usage, refer to [Polylux](https://polylux.dev/book/dynamic/alternatives.html).

docs/docs/dynamic/equation.md

@@ -25,6 +25,8 @@ Let's start with an example:
 ]
 ```
 
+![image](https://github.com/touying-typ/touying/assets/34951714/d176e61f-c0da-4c2a-a1bf-52621be5adb2)
+
 We use the `touying-equation` function to incorporate `pause` and `meanwhile` within the text of math equations (in fact, you can also use `#pause` or `#pause;`).
 
 As you would expect, the math equation is displayed step by step, making it suitable for presenters to demonstrate their math reasoning.
@@ -50,6 +52,8 @@ In fact, we can also use `only`, `uncover`, and `alternatives` within `touying-e
 ])
 ```
 
+![image](https://github.com/touying-typ/touying/assets/34951714/f2df14a2-6424-4c53-81f7-1595aa330660)
+
 We can pass the functions we need into the `touying-equation` through the `scope` parameter, such as `uncover` in this example.
 
 ## Parameters

docs/docs/dynamic/simple.md

@@ -20,6 +20,8 @@ The purpose of `#pause` is straightforward – it separates the subsequent conte
 ]
 ```
 
+![image](https://github.com/touying-typ/touying/assets/34951714/a3bed1d3-e660-456d-8a54-a914436f43bf)
+
 This example will create three subslides, gradually revealing the content.
 
 As you can see, `#pause` can be used inline or on a separate line.
@@ -46,6 +48,8 @@ In some cases, you may need to display additional content simultaneously with `#
 ]
 ```
 
+![image](https://github.com/touying-typ/touying/assets/34951714/24ca19a3-b27c-4d31-ab75-09c37911e6ac)
+
 This example will create only two subslides, with "First" and "Third" displayed simultaneously, and "Second" and "Fourth" displayed simultaneously.
 
 ## Handling set-show rules
@@ -67,6 +71,8 @@ To address this issue, Touying provides a `setting` parameter for the `#slide()`
 ]
 ```
 
+![image](https://github.com/touying-typ/touying/assets/34951714/8e31fc8a-5ab1-4181-a46a-fa96cf790dff)
+
 Similarly, Touying currently does not support `#pause` and `#meanwhile` inside layout functions like `grid`. This is due to the same limitation, but you can use the `composer` parameter of `#slide()` to meet most requirements.
 
 :::tip[Internals]

docs/docs/layout.md

@@ -81,6 +81,8 @@ In the `#show: slides` mode, sections and subsections correspond to first-level
 Hello, Touying!
 ```
 
+![image](https://github.com/touying-typ/touying/assets/34951714/600876bb-941d-4841-af5c-27137bb04c54)
+
 However, the second-level title does not always correspond to the subsection. The specific mapping may vary depending on the theme.
 
 In the more general `#slide[..]` mode, sections and subsections are passed as parameters to the `slide` function, for example:
@@ -156,6 +158,8 @@ If you need to divide a page into two or three columns, you can use the default
 ]
 ```
 
+![image](https://github.com/touying-typ/touying/assets/34951714/a39f88a2-f1ba-4420-8f78-6a0fc644704e)
+
 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
@@ -164,4 +168,6 @@ If you need to change the way columns are composed, you can modify the `composer
 ][
   Second column.
 ]
-```
+```
+
+![image](https://github.com/touying-typ/touying/assets/34951714/aa84192a-4082-495d-9773-b06df32ab8dc)

docs/docs/start.md

@@ -27,6 +27,8 @@ Hello, Touying!
 Hello, Typst!
 ```
 
+![image](https://github.com/touying-typ/touying/assets/34951714/6f15b500-b825-4db1-88ff-34212f43723e)
+
 It's simple. Congratulations on creating your first Touying slide! 🎉
 
 ## More Complex Examples
@@ -103,6 +105,8 @@ In fact, Touying provides various styles for writing slides. For example, the ab
 ]
 ```
 
+![image](https://github.com/touying-typ/touying/assets/34951714/192b13f9-e3fb-4327-864b-fd9084a8ca24)
+
 In addition, Touying provides many built-in themes to easily create beautiful slides. Basically, you just need to add a line at the top of your document:
 
 ```

docs/docs/style.md

@@ -35,6 +35,11 @@ Hello, Typst!
 ]
 ```
 
+![image](https://github.com/touying-typ/touying/assets/34951714/db2a1b60-bc56-4fa9-a317-ee9ecc6f3895)
+
+And you can create a new page with the empty header `==`.
+
+
 ## slide-block Style
 
 For better performance and more powerful capabilities, in most cases, we still need to use the code style like:

docs/docs/themes/dewdrop.md

@@ -4,6 +4,8 @@ sidebar_position: 3
 
 # Dewdrop Theme
 
+![image](https://github.com/touying-typ/touying/assets/34951714/23a8a9be-1f7c-43f7-88d4-40604dd6b01b)
+
 This theme is inspired by [BeamerTheme](https://github.com/zbowang/BeamerTheme) created by Zhibo Wang and transformed by [OrangeX4](https://github.com/OrangeX4).
 
 The Dewdrop theme features an elegant and aesthetic navigation, including `sidebar` and `mini-slides` modes.
@@ -171,6 +173,8 @@ Hello, Touying!
 Hello, Typst!
 ```
 
+![image](https://github.com/touying-typ/touying/assets/34951714/09ddfb40-4f97-4062-8261-23f87690c33e)
+
 ## Example
 
 ```typst

docs/docs/themes/metropolis.md

@@ -4,6 +4,8 @@ sidebar_position: 2
 
 # Metropolis Theme
 
+![image](https://github.com/touying-typ/touying/assets/34951714/a1b34b11-6797-42fd-b50f-477a0d672ba2)
+
 This theme is inspired by the [Metropolis beamer](https://github.com/matze/mtheme) theme created by Matthias Vogelgesang and transformed by [Enivex](https://github.com/Enivex).
 
 The Metropolis theme is elegant and suitable for daily use. For the best results, it is recommended to install the Fira Sans and Fira Math fonts on your computer.
@@ -147,6 +149,8 @@ Hello, Touying!
 Hello, Typst!
 ```
 
+![image](https://github.com/touying-typ/touying/assets/34951714/4ab45ee6-09f7-498b-b349-e889d6e42e3e)
+
 ## Example
 
 ```typst

docs/docs/themes/simple.md

@@ -4,6 +4,8 @@ sidebar_position: 1
 
 # Simple Theme
 
+![image](https://github.com/touying-typ/touying/assets/34951714/83d5295e-f961-4ffd-bc56-a7049848d408)
+
 This theme is derived from [Polylux](https://polylux.dev/book/themes/gallery/simple.html), created by Andreas Kröpelin.
 
 Considered a relatively simple theme, you can use it to create straightforward slides and easily incorporate features you like.
@@ -99,6 +101,8 @@ Hello, Touying!
 Hello, Typst!
 ```
 
+![image](https://github.com/touying-typ/touying/assets/34951714/2c599bd1-6250-497f-a65b-f19ae02a16cb)
+
 ## Example
 
 ```typst

docs/docs/utilities/fit-to.md

@@ -11,7 +11,7 @@ Thanks to [ntjess](https://github.com/ntjess) for the code.
 If you need to make an image fill the remaining slide height, you can try the `fit-to-height` function:
 
 ```typst
-#fit-to-height(1fr)[BIG]
+#utils.fit-to-height(1fr)[BIG]
 ```
 
 Function definition:
@@ -36,7 +36,7 @@ Parameters:
 If you need to limit the title width to exactly fill the slide width, you can try the `fit-to-width` function:
 
 ```typst
-#fit-to-width(1fr)[#lorem(20)]
+#utils.fit-to-width(1fr)[#lorem(20)]
 ```
 
 Function definition:

docs/i18n/zh/docusaurus-plugin-content-docs/current/dynamic/complex.md

@@ -27,6 +27,8 @@ sidebar_position: 2
 ])
 ```
 
+![image](https://github.com/touying-typ/touying/assets/34951714/e9a6b8c5-daf0-4cf2-8d39-1a768ce1dfea)
+
 注意到了吗？我们不再是传入一个内容块，而是传入了一个参数为 `self` 的回调函数，随后我们通过
 
 ```typst
@@ -74,5 +76,7 @@ sidebar_position: 2
 ])
 ```
 
+![image](https://github.com/touying-typ/touying/assets/34951714/392707ea-0bcd-426b-b232-5bc63b9a13a3)
+
 如你所见，`alternatives` 能够自动撑开到最合适的宽度和高度，这是 `only` 和 `uncover` 所没有的能力。事实上 `alternatives` 还有着其他参数，例如 `start: 2`、`repeat-last: true` 和 `position: center + horizon` 等，更多用法可以参考 [Polylux](https://polylux.dev/book/dynamic/alternatives.html)。
 

docs/i18n/zh/docusaurus-plugin-content-docs/current/dynamic/equation.md

@@ -25,6 +25,9 @@ Touying 还提供了一个独特且十分有用的功能，即数学公式动画
 ]
 ```
 
+![image](https://github.com/touying-typ/touying/assets/34951714/d176e61f-c0da-4c2a-a1bf-52621be5adb2)
+
+
 我们使用 `touying-equation` 函数来实现在数学公式文本内部使用 `pause` 和 `meanwhile`（事实上，你也能用 `#pause` 或者 `#pause;`）。
 
 正如你料想的一样，数学公式会分步显示，这很适合给让演讲者演示自己的数学公式推理思路。
@@ -51,6 +54,9 @@ Touying 还提供了一个独特且十分有用的功能，即数学公式动画
 ])
 ```
 
+![image](https://github.com/touying-typ/touying/assets/34951714/f2df14a2-6424-4c53-81f7-1595aa330660)
+
+
 我们可以在 `touying-equation` 的 `scope` 参数中将我们需要用到的函数传递进去，例如这里的 `uncover`。
 
 

docs/i18n/zh/docusaurus-plugin-content-docs/current/dynamic/simple.md

@@ -20,6 +20,8 @@ Touying 为简单的动画效果提供了两个标记：`#pause` 和 `#meanwhile
 ]
 ```
 
+![image](https://github.com/touying-typ/touying/assets/34951714/a3bed1d3-e660-456d-8a54-a914436f43bf)
+
 这个例子将会创建三张 subslides，逐渐地将内容展示出来。
 
 如你所见，`#pause` 既可以放在行内，也可以放在单独的一行。
@@ -47,6 +49,8 @@ Touying 为简单的动画效果提供了两个标记：`#pause` 和 `#meanwhile
 ]
 ```
 
+![image](https://github.com/touying-typ/touying/assets/34951714/24ca19a3-b27c-4d31-ab75-09c37911e6ac)
+
 这个例子只会创建两张 subslides，并且 "First" 和 "Third" 同时显示，"Second" 和 "Fourth" 同时显示。
 
 
@@ -69,6 +73,9 @@ Touying 为简单的动画效果提供了两个标记：`#pause` 和 `#meanwhile
 ]
 ```
 
+![image](https://github.com/touying-typ/touying/assets/34951714/8e31fc8a-5ab1-4181-a46a-fa96cf790dff)
+
+
 同理，Touying 目前也不支持 `grid` 这类 layout 函数内部的 `#pause` 和 `#meanwhile`，也是由于同样的限制，但是你可以使用 `#slide()` 的 `composer` 参数，大部分情况下都应该能满足需求。
 
 

docs/i18n/zh/docusaurus-plugin-content-docs/current/layout.md

@@ -85,6 +85,8 @@ Title is #s.info.title
 Hello, Touying!
 ```
 
+![image](https://github.com/touying-typ/touying/assets/34951714/600876bb-941d-4841-af5c-27137bb04c54)
+
 不过二级标题并非总是对应 subsection，具体的映射方式因主题而异。
 
 而在更通用的 `#slide[..]` 模式下，section 和 subsection 分别作为参数传入 `slide` 函数中，例如
@@ -160,6 +162,8 @@ Hello, Touying!
 ]
 ```
 
+![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)`，如果我们要让左边那一栏占据剩余宽度，可以使用
 
 ```typst
@@ -170,3 +174,5 @@ Hello, Touying!
 ]
 ```
 
+![image](https://github.com/touying-typ/touying/assets/34951714/aa84192a-4082-495d-9773-b06df32ab8dc)
+

docs/i18n/zh/docusaurus-plugin-content-docs/current/start.md

@@ -27,6 +27,8 @@ Hello, Touying!
 Hello, Typst!
 ```
 
+![image](https://github.com/touying-typ/touying/assets/34951714/6f15b500-b825-4db1-88ff-34212f43723e)
+
 这很简单，您创建了您的第一个 Touying slides，恭喜！🎉
 
 ## 更复杂的例子
@@ -103,6 +105,8 @@ Hello, Typst!
 ]
 ```
 
+![image](https://github.com/touying-typ/touying/assets/34951714/192b13f9-e3fb-4327-864b-fd9084a8ca24)
+
 除此之外，Touying 还提供了很多内置的主题，能够简单地编写精美的 slides，基本上，您只需要在文档顶部加入一行
 
 ```

docs/i18n/zh/docusaurus-plugin-content-docs/current/style.md

@@ -35,6 +35,10 @@ Hello, Typst!
 ]
 ```
 
+![image](https://github.com/touying-typ/touying/assets/34951714/db2a1b60-bc56-4fa9-a317-ee9ecc6f3895)
+
+并且你可以使用空标题 `==` 创建一个新页。
+
 
 ## slide-block 风格
 

docs/i18n/zh/docusaurus-plugin-content-docs/current/themes/dewdrop.md

@@ -4,6 +4,8 @@ sidebar_position: 3
 
 # Dewdrop 主题
 
+![image](https://github.com/touying-typ/touying/assets/34951714/23a8a9be-1f7c-43f7-88d4-40604dd6b01b)
+
 这个主题的灵感来自 Zhibo Wang 创作的 [BeamerTheme](https://github.com/zbowang/BeamerTheme)，由 [OrangeX4](https://github.com/OrangeX4) 改造而来。
 
 这个主题拥有优雅美观的 navigation，包括 `sidebar` 和 `mini-slides` 两种模式。
@@ -175,6 +177,9 @@ Hello, Touying!
 Hello, Typst!
 ```
 
+![image](https://github.com/touying-typ/touying/assets/34951714/09ddfb40-4f97-4062-8261-23f87690c33e)
+
+
 ## 示例
 
 ```typst

docs/i18n/zh/docusaurus-plugin-content-docs/current/themes/metropolis.md

@@ -4,6 +4,8 @@ sidebar_position: 2
 
 # Metropolis 主题
 
+![image](https://github.com/touying-typ/touying/assets/34951714/a1b34b11-6797-42fd-b50f-477a0d672ba2)
+
 这个主题的灵感来自 Matthias Vogelgesang 创作的 [Metropolis beamer](https://github.com/matze/mtheme) 主题，由 [Enivex](https://github.com/Enivex) 改造而来。
 
 这个主题美观大方，很适合日常使用，并且你最好在电脑上安装 Fira Sans 和 Fira Math 字体，以取得最佳效果。
@@ -147,6 +149,9 @@ Hello, Touying!
 Hello, Typst!
 ```
 
+![image](https://github.com/touying-typ/touying/assets/34951714/4ab45ee6-09f7-498b-b349-e889d6e42e3e)
+
+
 ## 示例
 
 ```typst

docs/i18n/zh/docusaurus-plugin-content-docs/current/themes/simple.md

@@ -4,6 +4,8 @@ sidebar_position: 1
 
 # Simple 主题
 
+![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。
 
 这个主题被认为是一个相对简单的主题，你可以用它来创建一个简单 slides，并且可以随意加入你喜欢的功能。
@@ -103,6 +105,9 @@ Hello, Touying!
 Hello, Typst!
 ```
 
+![image](https://github.com/touying-typ/touying/assets/34951714/2c599bd1-6250-497f-a65b-f19ae02a16cb)
+
+
 ## 示例
 
 ```typst