├── .gitignore ├── LICENSE ├── README.md ├── imgs ├── C_grammar_stmt_svg.svg ├── fig_save3.svg ├── gemma-fig-003.svg ├── gpt2-fig-003.svg ├── gpt2-large-fig-003.svg ├── gpt2-xl-fig-003.svg ├── json-mermaid2.svg ├── paper-scnu.svg ├── pic701-1.svg ├── pic702-1.svg ├── pic704-1.svg ├── pic903.min.svg ├── slides copy.typ ├── slides.typ ├── zz03.png └── zz04.png ├── out ├── paper │ ├── p_01.svg │ ├── p_04.svg │ ├── p_08.svg │ └── p_09.svg └── slides │ ├── p_01.svg │ ├── p_03.svg │ ├── p_06.svg │ └── p_09.svg ├── paper.typ ├── refs.bib ├── slides.typ ├── template.typ └── touying ├── .github └── workflows │ └── deploy.yml ├── .gitignore ├── LICENSE ├── README.md ├── changelog.md ├── docs ├── .gitignore ├── README.md ├── babel.config.js ├── blog │ ├── 2024-01-17-touying-0-2-0.md │ └── authors.yml ├── docs │ ├── build-your-own-theme.md │ ├── changelog.md │ ├── code-styles.md │ ├── dynamic │ │ ├── _category_.json │ │ ├── complex.md │ │ ├── cover.md │ │ ├── equation.md │ │ ├── handout.md │ │ ├── other.md │ │ └── simple.md │ ├── external │ │ ├── _category_.json │ │ ├── pdfpc.md │ │ └── typst-preview.md │ ├── global-settings.md │ ├── integration │ │ ├── _category_.json │ │ ├── cetz.md │ │ ├── codly.md │ │ ├── ctheorems.md │ │ ├── fletcher.md │ │ ├── mitex.md │ │ └── pinit.md │ ├── intro.md │ ├── layout.md │ ├── multi-file.md │ ├── progress │ │ ├── _category_.json │ │ ├── counters.md │ │ └── sections.md │ ├── sections.md │ ├── start.md │ ├── themes │ │ ├── _category_.json │ │ ├── aqua.md │ │ ├── dewdrop.md │ │ ├── metropolis.md │ │ ├── simple.md │ │ └── university.md │ └── utilities │ │ ├── _category_.json │ │ ├── fit-to.md │ │ └── oop.md ├── docusaurus.config.js ├── i18n │ └── zh │ │ └── docusaurus-plugin-content-docs │ │ ├── current │ │ ├── build-your-own-theme.md │ │ ├── changelog.md │ │ ├── code-styles.md │ │ ├── dynamic │ │ │ ├── _category_.json │ │ │ ├── complex.md │ │ │ ├── cover.md │ │ │ ├── equation.md │ │ │ ├── handout.md │ │ │ ├── other.md │ │ │ └── simple.md │ │ ├── external │ │ │ ├── _category_.json │ │ │ ├── pdfpc.md │ │ │ └── typst-preview.md │ │ ├── global-settings.md │ │ ├── integration │ │ │ ├── _category_.json │ │ │ ├── cetz.md │ │ │ ├── codly.md │ │ │ ├── ctheorems.md │ │ │ ├── fletcher.md │ │ │ ├── mitex.md │ │ │ └── pinit.md │ │ ├── intro.md │ │ ├── layout.md │ │ ├── multi-file.md │ │ ├── progress │ │ │ ├── _category_.json │ │ │ ├── counters.md │ │ │ └── sections.md │ │ ├── sections.md │ │ ├── start.md │ │ ├── themes │ │ │ ├── _category_.json │ │ │ ├── aqua.md │ │ │ ├── dewdrop.md │ │ │ ├── metropolis.md │ │ │ ├── simple.md │ │ │ └── university.md │ │ └── utilities │ │ │ ├── _category_.json │ │ │ ├── fit-to.md │ │ │ └── oop.md │ │ ├── version-0.2.x │ │ ├── build-your-own-theme.md │ │ ├── changelog.md │ │ ├── dynamic │ │ │ ├── _category_.json │ │ │ ├── complex.md │ │ │ ├── cover.md │ │ │ ├── equation.md │ │ │ ├── handout.md │ │ │ ├── other.md │ │ │ └── simple.md │ │ ├── external │ │ │ ├── _category_.json │ │ │ ├── pdfpc.md │ │ │ └── typst-preview.md │ │ ├── intro.md │ │ ├── layout.md │ │ ├── progress │ │ │ ├── _category_.json │ │ │ ├── counters.md │ │ │ └── sections.md │ │ ├── start.md │ │ ├── style.md │ │ ├── themes │ │ │ ├── _category_.json │ │ │ ├── dewdrop.md │ │ │ ├── metropolis.md │ │ │ ├── simple.md │ │ │ └── university.md │ │ └── utilities │ │ │ ├── _category_.json │ │ │ ├── fit-to.md │ │ │ └── oop.md │ │ ├── version-0.3.2+ │ │ ├── build-your-own-theme.md │ │ ├── changelog.md │ │ ├── code-styles.md │ │ ├── dynamic │ │ │ ├── _category_.json │ │ │ ├── complex.md │ │ │ ├── cover.md │ │ │ ├── equation.md │ │ │ ├── handout.md │ │ │ ├── other.md │ │ │ └── simple.md │ │ ├── external │ │ │ ├── _category_.json │ │ │ ├── pdfpc.md │ │ │ └── typst-preview.md │ │ ├── global-settings.md │ │ ├── integration │ │ │ ├── _category_.json │ │ │ ├── cetz.md │ │ │ ├── codly.md │ │ │ ├── fletcher.md │ │ │ ├── mitex.md │ │ │ ├── pinit.md │ │ │ └── polylux.md │ │ ├── intro.md │ │ ├── layout.md │ │ ├── progress │ │ │ ├── _category_.json │ │ │ ├── counters.md │ │ │ └── sections.md │ │ ├── sections.md │ │ ├── start.md │ │ ├── themes │ │ │ ├── _category_.json │ │ │ ├── aqua.md │ │ │ ├── dewdrop.md │ │ │ ├── metropolis.md │ │ │ ├── simple.md │ │ │ └── university.md │ │ └── utilities │ │ │ ├── _category_.json │ │ │ ├── fit-to.md │ │ │ └── oop.md │ │ ├── version-0.3.x │ │ ├── build-your-own-theme.md │ │ ├── changelog.md │ │ ├── code-styles.md │ │ ├── dynamic │ │ │ ├── _category_.json │ │ │ ├── complex.md │ │ │ ├── cover.md │ │ │ ├── equation.md │ │ │ ├── handout.md │ │ │ ├── other.md │ │ │ └── simple.md │ │ ├── external │ │ │ ├── _category_.json │ │ │ ├── pdfpc.md │ │ │ └── typst-preview.md │ │ ├── global-settings.md │ │ ├── integration │ │ │ ├── _category_.json │ │ │ ├── cetz.md │ │ │ ├── codly.md │ │ │ ├── fletcher.md │ │ │ ├── mitex.md │ │ │ ├── pinit.md │ │ │ └── polylux.md │ │ ├── intro.md │ │ ├── layout.md │ │ ├── progress │ │ │ ├── _category_.json │ │ │ ├── counters.md │ │ │ └── sections.md │ │ ├── sections.md │ │ ├── start.md │ │ ├── themes │ │ │ ├── _category_.json │ │ │ ├── dewdrop.md │ │ │ ├── metropolis.md │ │ │ ├── simple.md │ │ │ └── university.md │ │ └── utilities │ │ │ ├── _category_.json │ │ │ ├── fit-to.md │ │ │ └── oop.md │ │ └── version-0.4.0+ │ │ ├── build-your-own-theme.md │ │ ├── changelog.md │ │ ├── code-styles.md │ │ ├── dynamic │ │ ├── _category_.json │ │ ├── complex.md │ │ ├── cover.md │ │ ├── equation.md │ │ ├── handout.md │ │ ├── other.md │ │ └── simple.md │ │ ├── external │ │ ├── _category_.json │ │ ├── pdfpc.md │ │ └── typst-preview.md │ │ ├── global-settings.md │ │ ├── integration │ │ ├── _category_.json │ │ ├── cetz.md │ │ ├── codly.md │ │ ├── ctheorems.md │ │ ├── fletcher.md │ │ ├── mitex.md │ │ └── pinit.md │ │ ├── intro.md │ │ ├── layout.md │ │ ├── multi-file.md │ │ ├── progress │ │ ├── _category_.json │ │ ├── counters.md │ │ └── sections.md │ │ ├── sections.md │ │ ├── start.md │ │ ├── themes │ │ ├── _category_.json │ │ ├── aqua.md │ │ ├── dewdrop.md │ │ ├── metropolis.md │ │ ├── simple.md │ │ └── university.md │ │ └── utilities │ │ ├── _category_.json │ │ ├── fit-to.md │ │ └── oop.md ├── package-lock.json ├── package.json ├── sidebars.js ├── src │ ├── components │ │ └── HomepageFeatures │ │ │ ├── index.js │ │ │ └── styles.module.css │ ├── css │ │ └── custom.css │ └── pages │ │ ├── index.js │ │ ├── index.module.css │ │ └── markdown-page.md ├── static │ ├── .nojekyll │ └── img │ │ ├── docusaurus-social-card.jpg │ │ ├── docusaurus.png │ │ ├── favicon.ico │ │ ├── logo.png │ │ ├── logo.svg │ │ ├── undraw_docusaurus_mountain.svg │ │ ├── undraw_docusaurus_react.svg │ │ └── undraw_docusaurus_tree.svg ├── versioned_docs │ ├── version-0.2.x │ │ ├── build-your-own-theme.md │ │ ├── changelog.md │ │ ├── dynamic │ │ │ ├── _category_.json │ │ │ ├── complex.md │ │ │ ├── cover.md │ │ │ ├── equation.md │ │ │ ├── handout.md │ │ │ ├── other.md │ │ │ └── simple.md │ │ ├── external │ │ │ ├── _category_.json │ │ │ ├── pdfpc.md │ │ │ └── typst-preview.md │ │ ├── intro.md │ │ ├── layout.md │ │ ├── progress │ │ │ ├── _category_.json │ │ │ ├── counters.md │ │ │ └── sections.md │ │ ├── start.md │ │ ├── style.md │ │ ├── themes │ │ │ ├── _category_.json │ │ │ ├── dewdrop.md │ │ │ ├── metropolis.md │ │ │ ├── simple.md │ │ │ └── university.md │ │ └── utilities │ │ │ ├── _category_.json │ │ │ ├── fit-to.md │ │ │ └── oop.md │ ├── version-0.3.2+ │ │ ├── build-your-own-theme.md │ │ ├── changelog.md │ │ ├── code-styles.md │ │ ├── dynamic │ │ │ ├── _category_.json │ │ │ ├── complex.md │ │ │ ├── cover.md │ │ │ ├── equation.md │ │ │ ├── handout.md │ │ │ ├── other.md │ │ │ └── simple.md │ │ ├── external │ │ │ ├── _category_.json │ │ │ ├── pdfpc.md │ │ │ └── typst-preview.md │ │ ├── global-settings.md │ │ ├── integration │ │ │ ├── _category_.json │ │ │ ├── cetz.md │ │ │ ├── codly.md │ │ │ ├── fletcher.md │ │ │ ├── mitex.md │ │ │ ├── pinit.md │ │ │ └── polylux.md │ │ ├── intro.md │ │ ├── layout.md │ │ ├── progress │ │ │ ├── _category_.json │ │ │ ├── counters.md │ │ │ └── sections.md │ │ ├── sections.md │ │ ├── start.md │ │ ├── themes │ │ │ ├── _category_.json │ │ │ ├── aqua.md │ │ │ ├── dewdrop.md │ │ │ ├── metropolis.md │ │ │ ├── simple.md │ │ │ └── university.md │ │ └── utilities │ │ │ ├── _category_.json │ │ │ ├── fit-to.md │ │ │ └── oop.md │ ├── version-0.3.x │ │ ├── build-your-own-theme.md │ │ ├── changelog.md │ │ ├── code-styles.md │ │ ├── dynamic │ │ │ ├── _category_.json │ │ │ ├── complex.md │ │ │ ├── cover.md │ │ │ ├── equation.md │ │ │ ├── handout.md │ │ │ ├── other.md │ │ │ └── simple.md │ │ ├── external │ │ │ ├── _category_.json │ │ │ ├── pdfpc.md │ │ │ └── typst-preview.md │ │ ├── global-settings.md │ │ ├── integration │ │ │ ├── _category_.json │ │ │ ├── cetz.md │ │ │ ├── codly.md │ │ │ ├── fletcher.md │ │ │ ├── mitex.md │ │ │ ├── pinit.md │ │ │ └── polylux.md │ │ ├── intro.md │ │ ├── layout.md │ │ ├── progress │ │ │ ├── _category_.json │ │ │ ├── counters.md │ │ │ └── sections.md │ │ ├── sections.md │ │ ├── start.md │ │ ├── themes │ │ │ ├── _category_.json │ │ │ ├── dewdrop.md │ │ │ ├── metropolis.md │ │ │ ├── simple.md │ │ │ └── university.md │ │ └── utilities │ │ │ ├── _category_.json │ │ │ ├── fit-to.md │ │ │ └── oop.md │ └── version-0.4.0+ │ │ ├── build-your-own-theme.md │ │ ├── changelog.md │ │ ├── code-styles.md │ │ ├── dynamic │ │ ├── _category_.json │ │ ├── complex.md │ │ ├── cover.md │ │ ├── equation.md │ │ ├── handout.md │ │ ├── other.md │ │ └── simple.md │ │ ├── external │ │ ├── _category_.json │ │ ├── pdfpc.md │ │ └── typst-preview.md │ │ ├── global-settings.md │ │ ├── integration │ │ ├── _category_.json │ │ ├── cetz.md │ │ ├── codly.md │ │ ├── ctheorems.md │ │ ├── fletcher.md │ │ ├── mitex.md │ │ └── pinit.md │ │ ├── intro.md │ │ ├── layout.md │ │ ├── multi-file.md │ │ ├── progress │ │ ├── _category_.json │ │ ├── counters.md │ │ └── sections.md │ │ ├── sections.md │ │ ├── start.md │ │ ├── themes │ │ ├── _category_.json │ │ ├── aqua.md │ │ ├── dewdrop.md │ │ ├── metropolis.md │ │ ├── simple.md │ │ └── university.md │ │ └── utilities │ │ ├── _category_.json │ │ ├── fit-to.md │ │ └── oop.md ├── versioned_sidebars │ ├── version-0.2.x-sidebars.json │ ├── version-0.3.2+-sidebars.json │ ├── version-0.3.x-sidebars.json │ └── version-0.4.0+-sidebars.json └── versions.json ├── examples ├── aqua-zh.typ ├── aqua.typ ├── dewdrop.typ ├── example.typ ├── metropolis.typ ├── simple.typ ├── slides.typ └── university.typ ├── lib.typ ├── slide.typ ├── themes ├── aqua.typ ├── default.typ ├── dewdrop.typ ├── metropolis.typ ├── simple.typ ├── themes.typ └── university.typ ├── typst.toml └── utils ├── components.typ ├── pdfpc.typ ├── states.typ └── utils.typ /.gitignore: -------------------------------------------------------------------------------- 1 | *.pdf -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # SCNU-Typst-Template 2 | 3 | 欢迎给个星星⭐🌟~ 或者 Fork 本仓库。 4 | 5 | ## 华南师范大学本科毕设（论文）模板 6 | 7 | > [!WARNING] 8 | > **请必须知悉这不是官方模板，仅供参考。** 9 | > 每一届、每一个老师可能都会有不同的标准，请务必做好修改本模板以满足上级要求的准备。 10 | 11 | 本模板从本人文章中提取，可参考预印本预览： 12 | 1. arXiv: https://arxiv.org/abs/2404.05499 13 | 2. ChinaXiv 中文论文: https://chinaxiv.org/abs/202403.00340 14 | 3. ChinaXiv 中文幻灯片: https://chinaxiv.org/abs/202404.00273 15 | 16 | ## 什么是 Typst 17 | 18 | A new markup-based typesetting system that is powerful and easy to learn. 19 | 20 | - https://typst.app/ 21 | - https://github.com/typst/typst 22 | 23 | ## 学位论文 24 | 25 | > [!NOTE] 26 | > 魔改自：https://github.com/werifu/HUST-typst-template 27 | 28 | - 见 `paper.typ` 29 | 30 | | ![](./out/paper/p_01.svg) | ![](./out/paper/p_04.svg) | 31 | |:--:|:--:| 32 | | ![](./out/paper/p_08.svg) | ![](./out/paper/p_09.svg) | 33 | 34 | ## 幻灯片 35 | 36 | > [!NOTE] 37 | > 魔改自：https://github.com/touying-typ/touying 38 | 39 | - 见 `slides.typ` 40 | 41 | | ![](./out/slides/p_01.svg) | ![](./out/slides/p_03.svg) | 42 | |:--:|:--:| 43 | | ![](./out/slides/p_06.svg) | ![](./out/slides/p_09.svg) | 44 | 45 | ## 广告位 46 | 47 | 用于引用的 BibTeX 文本: 48 | 49 | ```bibtex 50 | @misc{wang2024guiding, 51 | title={Guiding Large Language Models to Generate Computer-Parsable Content}, 52 | author={Jiaye Wang}, 53 | year={2024}, 54 | eprint={2404.05499}, 55 | archivePrefix={arXiv}, 56 | primaryClass={cs.SE} 57 | } 58 | ``` -------------------------------------------------------------------------------- /imgs/zz03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HK-SHAO/SCNU-Typst-Template/8a377015772ddf60a156d7c85a75c3b8f9293518/imgs/zz03.png -------------------------------------------------------------------------------- /imgs/zz04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HK-SHAO/SCNU-Typst-Template/8a377015772ddf60a156d7c85a75c3b8f9293518/imgs/zz04.png -------------------------------------------------------------------------------- /touying/.github/workflows/deploy.yml: -------------------------------------------------------------------------------- 1 | name: Deploy to GitHub Pages 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | # Review gh actions docs if you want to further define triggers, paths, etc 8 | # https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#on 9 | 10 | permissions: 11 | contents: write 12 | 13 | jobs: 14 | deploy: 15 | name: Deploy to GitHub Pages 16 | runs-on: ubuntu-latest 17 | steps: 18 | - uses: actions/checkout@v3 19 | - uses: actions/setup-node@v3 20 | with: 21 | node-version: 18 22 | cache: npm 23 | cache-dependency-path: ./docs/package-lock.json 24 | 25 | - name: Install dependencies 26 | working-directory: ./docs 27 | run: npm ci 28 | - name: Build website 29 | working-directory: ./docs 30 | run: npm run build 31 | 32 | - name: Deploy 33 | uses: JamesIves/github-pages-deploy-action@v4 34 | with: 35 | folder: ./docs/build # The folder the action should deploy. -------------------------------------------------------------------------------- /touying/.gitignore: -------------------------------------------------------------------------------- 1 | /local 2 | 3 | *.pdf 4 | *.pdfpc -------------------------------------------------------------------------------- /touying/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2024 OrangeX4 2 | Copyright (c) 2024 Andreas Kröpelin 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining a copy 5 | of this software and associated documentation files (the "Software"), to deal 6 | in the Software without restriction, including without limitation the rights 7 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the Software is 9 | furnished to do so, subject to the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be included in 12 | all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 20 | THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /touying/docs/.gitignore: -------------------------------------------------------------------------------- 1 | # Dependencies 2 | /node_modules 3 | 4 | # Production 5 | /build 6 | 7 | # Generated files 8 | .docusaurus 9 | .cache-loader 10 | 11 | # Misc 12 | .DS_Store 13 | .env.local 14 | .env.development.local 15 | .env.test.local 16 | .env.production.local 17 | 18 | npm-debug.log* 19 | yarn-debug.log* 20 | yarn-error.log* 21 | -------------------------------------------------------------------------------- /touying/docs/README.md: -------------------------------------------------------------------------------- 1 | # Website 2 | 3 | This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator. 4 | 5 | ### Installation 6 | 7 | ``` 8 | $ yarn 9 | ``` 10 | 11 | ### Local Development 12 | 13 | ``` 14 | $ yarn start 15 | ``` 16 | 17 | This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server. 18 | 19 | ### Build 20 | 21 | ``` 22 | $ yarn build 23 | ``` 24 | 25 | This command generates static content into the `build` directory and can be served using any static contents hosting service. 26 | 27 | ### Deployment 28 | 29 | Using SSH: 30 | 31 | ``` 32 | $ USE_SSH=true yarn deploy 33 | ``` 34 | 35 | Not using SSH: 36 | 37 | ``` 38 | $ GIT_USER= yarn deploy 39 | ``` 40 | 41 | If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch. 42 | -------------------------------------------------------------------------------- /touying/docs/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [require.resolve('@docusaurus/core/lib/babel/preset')], 3 | }; 4 | -------------------------------------------------------------------------------- /touying/docs/blog/authors.yml: -------------------------------------------------------------------------------- 1 | orangex4: 2 | name: OrangeX4 3 | title: Maintainer of Touying. 4 | url: https://github.com/OrangeX4 5 | image_url: https://orangex4.cool/images/icons/profile.jpg 6 | -------------------------------------------------------------------------------- /touying/docs/docs/dynamic/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Dynamic Slides", 3 | "position": 8, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "To create animations in PDF, we need to create multiple slightly different pages for the same slide. This allows animation by switching between these pages, and we refer to these pages as subslides." 7 | } 8 | } -------------------------------------------------------------------------------- /touying/docs/docs/dynamic/cover.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 4 3 | --- 4 | 5 | # Cover Function 6 | 7 | As you already know, both `uncover` and `#pause` use the `cover` function to conceal content that is not visible. So, what exactly is the `cover` function here? 8 | 9 | ## Default Cover Function: `hide` 10 | 11 | The `cover` function is a method stored in `s.methods.cover`, which is later used by `uncover` and `#pause`. 12 | 13 | The default `cover` function is the [hide](https://typst.app/docs/reference/layout/hide/) function. This function makes the internal content invisible without affecting the layout. 14 | 15 | ## Updating the Cover Function 16 | 17 | In some cases, you might want to use your own `cover` function. In that case, you can set your own `cover` function using: 18 | 19 | ```typst 20 | let s = (s.methods.update-cover)(self: s, is-method: true, cover-fn) 21 | ``` 22 | 23 | Here, if you set `is-method: false`, Touying will wrap `cover-fn` into a method for you. 24 | 25 | ## Semi-Transparent Cover Function 26 | 27 | Touying supports a semi-transparent cover function, which can be enabled by adding: 28 | 29 | ```typst 30 | #let s = (s.methods.enable-transparent-cover)(self: s) 31 | ``` 32 | 33 | You can adjust the transparency through the `alpha: ..` parameter. 34 | 35 | :::warning[Warning] 36 | 37 | Note that the `transparent-cover` here does not preserve text layout like `hide` does because it adds an extra layer of `box`, which may disrupt the original structure of the page. 38 | 39 | ::: 40 | 41 | :::tip[Internals] 42 | 43 | The `enable-transparent-cover` method is defined as: 44 | 45 | ```typst 46 | #let s.methods.enable-transparent-cover = ( 47 | self: none, 48 | constructor: rgb, 49 | alpha: 85%, 50 | ) => { 51 | self.methods.cover = (self: none, body) => { 52 | utils.cover-with-rect( 53 | fill: utils.update-alpha( 54 | constructor: constructor, 55 | self.page-args.fill, 56 | alpha, 57 | ), 58 | body 59 | ) 60 | } 61 | self 62 | } 63 | ``` 64 | 65 | It creates a semi-transparent rectangular mask with the same color as the background to simulate the effect of transparent content. Here, `constructor: rgb` and `alpha: 85%` indicate the background color's construction function and transparency level, respectively. 66 | 67 | ::: -------------------------------------------------------------------------------- /touying/docs/docs/dynamic/handout.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 6 3 | --- 4 | 5 | # Handout Mode 6 | 7 | While watching slides and attending lectures, the audience often wishes to have handouts for reviewing challenging concepts. Therefore, it's beneficial for the author to provide handouts for the audience, preferably before the lecture for better preparation. 8 | 9 | The handout mode differs from the regular mode as it doesn't require intricate animation effects. It retains only the last subslide of each slide. 10 | 11 | Enabling handout mode is simple: 12 | 13 | ```typst 14 | #let s = (s.methods.enable-handout-mode)(self: s) 15 | ``` 16 | -------------------------------------------------------------------------------- /touying/docs/docs/dynamic/simple.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Simple Animations 6 | 7 | Touying provides two markers for simple animation effects: `#pause` and `#meanwhile`. 8 | 9 | ## pause 10 | 11 | The purpose of `#pause` is straightforward – it separates the subsequent content into the next subslide. You can use multiple `#pause` to create multiple subslides. Here's a simple example: 12 | 13 | ```typst 14 | #slide[ 15 | First #pause Second 16 | 17 | #pause 18 | 19 | Third 20 | ] 21 | ``` 22 | 23 | ![image](https://github.com/touying-typ/touying/assets/34951714/a3bed1d3-e660-456d-8a54-a914436f43bf) 24 | 25 | This example will create three subslides, gradually revealing the content. 26 | 27 | As you can see, `#pause` can be used inline or on a separate line. 28 | 29 | ## meanwhile 30 | 31 | In some cases, you may need to display additional content simultaneously with `#pause`. In such cases, you can use `#meanwhile`. 32 | 33 | ```typst 34 | #slide[ 35 | First 36 | 37 | #pause 38 | 39 | Second 40 | 41 | #meanwhile 42 | 43 | Third 44 | 45 | #pause 46 | 47 | Fourth 48 | ] 49 | ``` 50 | 51 | ![image](https://github.com/touying-typ/touying/assets/34951714/24ca19a3-b27c-4d31-ab75-09c37911e6ac) 52 | 53 | This example will create only two subslides, with "First" and "Third" displayed simultaneously, and "Second" and "Fourth" displayed simultaneously. 54 | 55 | ## Handling layout functions 56 | 57 | If you use layout functions like `grid` inside `slide[..]`, you might be surprised to find that subsequent `#pause` and `#meanwhile` do not work. This is because Touying cannot detect the content inside layout functions. But you can use the `composer` parameter of `#slide()` to meet most requirements. 58 | 59 | :::tip[Internals] 60 | 61 | Touying doesn't rely on `counter` and `locate` to implement `#pause`. Instead, it has a parser written in Typst script. It parses the input content block as a sequence and then transforms and reorganizes this sequence into the series of subslides we need. 62 | 63 | ::: -------------------------------------------------------------------------------- /touying/docs/docs/external/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "External Tools", 3 | "position": 14, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "Integrate external tools with Touying." 7 | } 8 | } -------------------------------------------------------------------------------- /touying/docs/docs/external/pdfpc.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Pdfpc 6 | 7 | [pdfpc](https://pdfpc.github.io/) is a "Presenter Console with multi-monitor support for PDF files." This means you can use it to display slides in the form of PDF pages and it comes with some known excellent features, much like PowerPoint. 8 | 9 | pdfpc has a JSON-formatted `.pdfpc` file that can provide additional information for PDF slides. While you can manually write this file, you can also manage it through Touying. 10 | 11 | 12 | ## Adding Metadata 13 | 14 | Touying remains consistent with [Polylux](https://polylux.dev/book/external/pdfpc.html) to avoid conflicts between APIs. 15 | 16 | For example, you can add notes using `#pdfpc.speaker-note("This is a note that only the speaker will see.")`. 17 | 18 | 19 | ## Pdfpc Configuration 20 | 21 | To add pdfpc configurations, you can use 22 | 23 | ```typst 24 | #let s = (s.methods.append-preamble)(self: s, pdfpc.config( 25 | duration-minutes: 30, 26 | start-time: datetime(hour: 14, minute: 10, second: 0), 27 | end-time: datetime(hour: 14, minute: 40, second: 0), 28 | last-minutes: 5, 29 | note-font-size: 12, 30 | disable-markdown: false, 31 | default-transition: ( 32 | type: "push", 33 | duration-seconds: 2, 34 | angle: ltr, 35 | alignment: "vertical", 36 | direction: "inward", 37 | ), 38 | )) 39 | ``` 40 | 41 | Add the corresponding configurations. Refer to [Polylux](https://polylux.dev/book/external/pdfpc.html) for specific configuration details. 42 | 43 | 44 | ## Exporting .pdfpc File 45 | 46 | Assuming your document is `./example.typ`, you can export the `.pdfpc` file directly using: 47 | 48 | ```sh 49 | typst query --root . ./example.typ --field value --one "" > ./example.pdfpc 50 | ``` 51 | 52 | With the compatibility of Touying and Polylux, you can make Polylux also support direct export by adding the following code: 53 | 54 | ```typst 55 | #import "@preview/touying:0.4.0" 56 | 57 | #locate(loc => touying.pdfpc.pdfpc-file(loc)) 58 | ``` -------------------------------------------------------------------------------- /touying/docs/docs/external/typst-preview.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # Typst Preview 6 | 7 | The Typst Preview extension for VS Code provides an excellent slide mode, allowing us to preview and present slides. 8 | 9 | Press `Ctrl/Cmd + Shift + P` and type `Typst Preview: Preview current file in slide mode` to open the preview in slide mode. 10 | 11 | Press `Ctrl/Cmd + Shift + P` and type `Typst Preview: Preview current file in browser and slide mode` to open the slide mode in the browser. 12 | 13 | Now, you can press keys like `F11` to enter fullscreen mode in the browser, making it suitable for slide presentations. 14 | 15 | Since Typst Preview is based on SVG, it can play GIF animations, which is very helpful for dynamic slides. -------------------------------------------------------------------------------- /touying/docs/docs/integration/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Package Integration", 3 | "position": 9, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "Discover how to integrate third-party packages with Touying." 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /touying/docs/docs/integration/codly.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 5 3 | --- 4 | 5 | # Codly 6 | 7 | When using Codly, we should initialize it using the `s.methods.append-preamble` method. 8 | 9 | ```typst 10 | #import "@preview/touying:0.4.0": * 11 | #import "@preview/codly:0.2.0": * 12 | 13 | #let s = themes.simple.register(aspect-ratio: "16-9") 14 | #let s = (s.methods.append-preamble)(self: s)[ 15 | #codly(languages: ( 16 | rust: (name: "Rust", icon: "\u{fa53}", color: rgb("#CE412B")), 17 | )) 18 | ] 19 | #let (init, slides) = utils.methods(s) 20 | #show heading.where(level: 2): set block(below: 1em) 21 | #show: init 22 | #show: codly-init.with() 23 | 24 | #let (slide, empty-slide) = utils.slides(s) 25 | #show: slides 26 | 27 | #slide[ 28 | == First slide 29 | 30 | #raw(lang: "rust", block: true, 31 | `pub fn main() { 32 | println!("Hello, world!"); 33 | }`.text) 34 | ] 35 | ``` 36 | 37 | ![image](https://github.com/touying-typ/touying/assets/34951714/0be2fbaf-cc03-4776-932f-259503d5e23a) 38 | -------------------------------------------------------------------------------- /touying/docs/docs/integration/fletcher.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 4 3 | --- 4 | 5 | # Fletcher 6 | 7 | Touying provides the `touying-reducer`, which adds `pause` and `meanwhile` animations to Fletcher. 8 | 9 | An example: 10 | 11 | ```typst 12 | #import "@preview/touying:0.4.0": * 13 | #import "@preview/cetz:0.2.2" 14 | #import "@preview/fletcher:0.4.3" as fletcher: node, edge 15 | 16 | // cetz and fletcher bindings for touying 17 | #let cetz-canvas = touying-reducer.with(reduce: cetz.canvas, cover: cetz.draw.hide.with(bounds: true)) 18 | #let fletcher-diagram = touying-reducer.with(reduce: fletcher.diagram, cover: fletcher.hide) 19 | 20 | #let s = themes.metropolis.register(aspect-ratio: "16-9", footer: self => self.info.institution) 21 | #let (init, slides) = utils.methods(s) 22 | #show: init 23 | 24 | #let (slide, empty-slide) = utils.slides(s) 25 | #show: slides.with(title-slide: false, outline-slide: false) 26 | 27 | // cetz animation 28 | #slide[ 29 | Cetz in Touying: 30 | 31 | #cetz-canvas({ 32 | import cetz.draw: * 33 | 34 | rect((0,0), (5,5)) 35 | 36 | (pause,) 37 | 38 | rect((0,0), (1,1)) 39 | rect((1,1), (2,2)) 40 | rect((2,2), (3,3)) 41 | 42 | (pause,) 43 | 44 | line((0,0), (2.5, 2.5), name: "line") 45 | }) 46 | ] 47 | 48 | // fletcher animation 49 | #slide[ 50 | Fletcher in Touying: 51 | 52 | #fletcher-diagram( 53 | node-stroke: .1em, 54 | node-fill: gradient.radial(blue.lighten(80%), blue, center: (30%, 20%), radius: 80%), 55 | spacing: 4em, 56 | edge((-1,0), "r", "-|>", `open(path)`, label-pos: 0, label-side: center), 57 | node((0,0), `reading`, radius: 2em), 58 | edge((0,0), (0,0), `read()`, "--|>", bend: 130deg), 59 | pause, 60 | edge(`read()`, "-|>"), 61 | node((1,0), `eof`, radius: 2em), 62 | pause, 63 | edge(`close()`, "-|>"), 64 | node((2,0), `closed`, radius: 2em, extrude: (-2.5, 0)), 65 | edge((0,0), (2,0), `close()`, "-|>", bend: -40deg), 66 | ) 67 | ] 68 | ``` 69 | 70 | ![image](https://github.com/touying-typ/touying/assets/34951714/9ba71f54-2a5d-4144-996c-4a42833cc5cc) -------------------------------------------------------------------------------- /touying/docs/docs/integration/mitex.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # MiTeX 6 | 7 | During the process of creating slides, we often already have a LaTeX math equation that we simply want to paste into the slides without transcribing it into a Typst math equation. In such cases, we can use [MiTeX](https://github.com/mitex-rs/mitex). 8 | 9 | Example: 10 | 11 | ```typst 12 | #import "@preview/mitex:0.2.1": * 13 | 14 | Write inline equations like #mi("x") or #mi[y]. 15 | 16 | Also block equations (this case is from #text(blue.lighten(20%), link("https://katex.org/")[katex.org])): 17 | 18 | #mitex(` 19 | \newcommand{\f}[2]{#1f(#2)} 20 | \f\relax{x} = \int_{-\infty}^\infty 21 | \f\hat\xi\,e^{2 \pi i \xi x} 22 | \,d\xi 23 | `) 24 | ``` 25 | 26 | ![image](https://github.com/mitex-rs/mitex/assets/34951714/c425b2ae-b50b-46a8-a451-4d9e8e70626b) 27 | -------------------------------------------------------------------------------- /touying/docs/docs/progress/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Progress", 3 | "position": 12, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "Manage and display progress in Touying, such as counters and sections." 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /touying/docs/docs/progress/counters.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Touying Counters 6 | 7 | The states of Touying are placed under the `states` namespace, including all counters. 8 | 9 | ## Slide Counter 10 | 11 | You can access the slide counter using `states.slide-counter` and display the current slide number with `states.slide-counter.display()`. 12 | 13 | ## Last-Slide Counter 14 | 15 | In some cases, we may need to add an appendix to slides, leading to the requirement to freeze the last-slide counter. Therefore, a second counter is maintained here. 16 | 17 | You can use `states.last-slide-number` to display the number of the last slide before the appendix. 18 | 19 | ## Progress 20 | 21 | You can use 22 | 23 | ```typst 24 | #states.touying-progress(ratio => ..) 25 | ``` 26 | 27 | to show the current progress. 28 | 29 | ## Appendix 30 | 31 | You can use 32 | 33 | ```typst 34 | // appendix by freezing last-slide-number 35 | #let s = (s.methods.appendix)(self: s) 36 | #let (slide, empty-slide) = utils.methods(s) 37 | 38 | #slide[ 39 | appendix 40 | ] 41 | ``` 42 | 43 | syntax to enter the appendix. 44 | 45 | Additionally, `#let s = (s.methods.appendix-in-outline)(self: s, false)` can be used to hide the appendix section from the outline. -------------------------------------------------------------------------------- /touying/docs/docs/progress/sections.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # Touying Sections 6 | 7 | Touying maintains its own sections state to record the sections and subsections of slides. 8 | 9 | ## touying-outline 10 | 11 | `#touying-outline(enum-args: (:), padding: 0pt)` is used to display a simple outline. 12 | 13 | ## touying-final-sections 14 | 15 | `#states.touying-final-sections(final-sections => ..)` is used to customize the display of the outline. 16 | 17 | ## touying-progress-with-sections 18 | 19 | ```typst 20 | #states.touying-progress-with-sections((current-sections: .., final-sections: .., current-slide-number: .., last-slide-number: ..) => ..) 21 | ``` 22 | 23 | This is the most powerful one, allowing you to build any complex progress display with its functionalities. -------------------------------------------------------------------------------- /touying/docs/docs/themes/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Themes", 3 | "position": 10, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "One convenient aspect of using Touying is that you can use the themes provided by Touying or create your own themes or templates with the help of Touying." 7 | } 8 | } -------------------------------------------------------------------------------- /touying/docs/docs/utilities/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Utilities", 3 | "position": 13, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "Some convenient utility functions." 7 | } 8 | } -------------------------------------------------------------------------------- /touying/docs/docs/utilities/fit-to.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # Fit to Height / Width 6 | 7 | Thanks to [ntjess](https://github.com/ntjess) for the code. 8 | 9 | ## Fit to Height 10 | 11 | If you need to make an image fill the remaining slide height, you can try the `fit-to-height` function: 12 | 13 | ```typst 14 | #utils.fit-to-height(1fr)[BIG] 15 | ``` 16 | 17 | Function definition: 18 | 19 | ```typst 20 | #let fit-to-height( 21 | width: none, prescale-width: none, grow: true, shrink: true, height, body 22 | ) = { .. } 23 | ``` 24 | 25 | Parameters: 26 | 27 | - `width`: If specified, this will determine the width of the content after scaling. So, if you want the scaled content to fill half of the slide width, you can use `width: 50%`. 28 | - `prescale-width`: This parameter allows you to make Typst's layout assume that the given content is to be laid out in a container of a certain width before scaling. For example, you can use `prescale-width: 200%` assuming the slide's width is twice the original. 29 | - `grow`: Whether it can grow, default is `true`. 30 | - `shrink`: Whether it can shrink, default is `true`. 31 | - `height`: The specified height. 32 | - `body`: The specific content. 33 | 34 | ## Fit to Width 35 | 36 | If you need to limit the title width to exactly fill the slide width, you can try the `fit-to-width` function: 37 | 38 | ```typst 39 | #utils.fit-to-width(1fr)[#lorem(20)] 40 | ``` 41 | 42 | Function definition: 43 | 44 | ```typst 45 | #let fit-to-width(grow: true, shrink: true, width, body) = { .. } 46 | ``` 47 | 48 | Parameters: 49 | 50 | - `grow`: Whether it can grow, default is `true`. 51 | - `shrink`: Whether it can shrink, default is `true`. 52 | - `width`: The specified width. 53 | - `body`: The specific content. -------------------------------------------------------------------------------- /touying/docs/docs/utilities/oop.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Object-Oriented Programming 6 | 7 | Touying provides some convenient utility functions for object-oriented programming. 8 | 9 | --- 10 | 11 | ```typst 12 | #let call-or-display(self, it) = { 13 | if type(it) == function { 14 | return it(self) 15 | } else { 16 | return it 17 | } 18 | } 19 | ``` 20 | Call or display as-is. 21 | 22 | --- 23 | 24 | ```typst 25 | #let methods(self) = { .. } 26 | ``` 27 | Used to bind self to methods and return, very commonly used. -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/current/dynamic/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "动态幻灯片", 3 | "position": 8, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "想要在 PDF 中创建动画，我们就需要为同一个 slide 创建多个略有不同的页面，以便通过切换页面的方式实现动画，我们称这些页面为 subslides。" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/current/dynamic/cover.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 4 3 | --- 4 | 5 | # Cover 函数 6 | 7 | 正如您已经了解的那样，`uncover` 和 `#pause` 均会使用 `cover` 函数对不显示的内容进行遮盖。那么，这里的 `cover` 函数究竟是什么呢？ 8 | 9 | 10 | ## 默认 Cover 函数：`hide` 11 | 12 | `cover` 函数是保存在 `s.methods.cover` 的一个方法，后续 `uncover` 和 `#pause` 均会在这里取出 `cover` 函数来使用。 13 | 14 | 默认的 `cover` 函数是 [hide](https://typst.app/docs/reference/layout/hide/) 函数，这个函数能将内部的内容更改为不可见的，且不会影响布局。 15 | 16 | 17 | ## 更新 Cover 函数 18 | 19 | 有的情况下，您想用您自己的 `cover` 函数，那么您可以通过 20 | 21 | ```typst 22 | let s = (s.methods.update-cover)(self: s, is-method: true, cover-fn) 23 | ``` 24 | 25 | 方法来设置您自己的 `cover` 函数，其中如果设置 `is-method: false`，则 Touying 会帮您将 `cover-fn` 包装成一个方法。 26 | 27 | 28 | ## 半透明 Cover 函数 29 | 30 | Touying 提供了半透明 Cover 函数的支持，只需要加入 31 | 32 | ```typst 33 | #let s = (s.methods.enable-transparent-cover)(self: s) 34 | ``` 35 | 36 | 即可开启，其中你可以通过 `alpha: ..` 参数调节透明度。 37 | 38 | 39 | :::warning[警告] 40 | 41 | 注意，这里的 `transparent-cover` 并不能像 `hide` 一样不影响文本布局，因为里面有一层 `box`，因此可能会破坏页面原有的结构。 42 | 43 | ::: 44 | 45 | 46 | :::tip[原理] 47 | 48 | `enable-transparent-cover` 方法定义为 49 | 50 | ```typst 51 | #let s.methods.enable-transparent-cover = ( 52 | self: none, 53 | constructor: rgb, 54 | alpha: 85%, 55 | ) => { 56 | self.methods.cover = (self: none, body) => { 57 | utils.cover-with-rect( 58 | fill: utils.update-alpha( 59 | constructor: constructor, 60 | self.page-args.fill, 61 | alpha, 62 | ), 63 | body 64 | ) 65 | } 66 | self 67 | } 68 | ``` 69 | 70 | 可以看出，其是通过 `utils.cover-with-rect` 创建了一个与背景色同色的半透明矩形遮罩，以模拟内容透明的效果，其中 `constructor: rgb` 和 `alpha: 85%` 分别表明了背景色的构造函数与透明程度。 71 | 72 | ::: -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/current/dynamic/equation.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 3 3 | --- 4 | 5 | # 数学公式动画 6 | 7 | Touying 还提供了一个独特且十分有用的功能，即数学公式动画，它让你可以方便地在数学公式里使用 `pause` 和 `meanwhile`。 8 | 9 | ## 简单动画 10 | 11 | 让我们先来看一个例子： 12 | 13 | ```typst 14 | #slide[ 15 | Touying equation with pause: 16 | 17 | #touying-equation(` 18 | f(x) &= pause x^2 + 2x + 1 \ 19 | &= pause (x + 1)^2 \ 20 | `) 21 | 22 | #meanwhile 23 | 24 | Touying equation is very simple. 25 | ] 26 | ``` 27 | 28 | ![image](https://github.com/touying-typ/touying/assets/34951714/d176e61f-c0da-4c2a-a1bf-52621be5adb2) 29 | 30 | 31 | 我们使用 `touying-equation` 函数来实现在数学公式文本内部使用 `pause` 和 `meanwhile`（事实上，你也能用 `#pause` 或者 `#pause;`）。 32 | 33 | 正如你料想的一样，数学公式会分步显示，这很适合给让演讲者演示自己的数学公式推理思路。 34 | 35 | :::warning[警告] 36 | 37 | 虽然 `touying-equation` 函数很便利，但是您需要时刻注意，`touying-equation` 并不会做复杂的语法分析，只是单纯地正则表达式分割字符串，因此您不应在 `display(..)` 这类函数内部使用 `pause` 或 `meanwhile`！ 38 | 39 | ::: 40 | 41 | 42 | ## 复杂动画 43 | 44 | 事实上，我们也可以在 `touying-equation` 内部使用 `only`、`uncover` 和 `alternatives`，只是需要一点技巧： 45 | 46 | ```typst 47 | #slide(repeat: 3, self => [ 48 | #let (uncover, only, alternatives) = utils.methods(self) 49 | 50 | #touying-equation(scope: (uncover: uncover), ` 51 | f(x) &= pause x^2 + 2x + uncover("3-", 1) \ 52 | &= pause (x + 1)^2 \ 53 | `) 54 | ]) 55 | ``` 56 | 57 | ![image](https://github.com/touying-typ/touying/assets/34951714/f2df14a2-6424-4c53-81f7-1595aa330660) 58 | 59 | 60 | 我们可以在 `touying-equation` 的 `scope` 参数中将我们需要用到的函数传递进去，例如这里的 `uncover`。 61 | 62 | 63 | ## 参数 64 | 65 | `touying-equation` 的函数定义为 66 | 67 | ```typst 68 | #let touying-equation(block: true, numbering: none, supplement: auto, scope: (:), body) = { .. } 69 | ``` 70 | 71 | 因此，我们可以像使用普通数学公式一样，为 `touying-equation` 传入 `block`、`numbering` 和 `supplement` 参数。 -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/current/dynamic/handout.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 6 3 | --- 4 | 5 | # 创建讲义 6 | 7 | 在看幻灯片、听课的同时，听众往往会希望有一个讲义，以便能够回顾理解困难的地方，所以，作者最好能给听众提供这样一份讲义，如果能在听课前提供更好。 8 | 9 | 讲义模式与普通模式的区别是，其不需要过于繁杂的动画效果，因此只会保留每个 slide 的最后一张 subslide。 10 | 11 | 开启讲义模式是很简单的： 12 | 13 | ```typst 14 | #let s = (s.methods.enable-handout-mode)(self: s) 15 | ``` 16 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/current/dynamic/simple.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # 简单动画 6 | 7 | Touying 为简单的动画效果提供了两个标记：`#pause` 和 `#meanwhile`。 8 | 9 | ## pause 10 | 11 | `#pause` 的用途很简单，就是用于将后续的内容放到下一张 subslide 中，并且可以使用多个 `#pause` 以创建多张 subslides，一个简单的例子： 12 | 13 | ```typst 14 | #slide[ 15 | First #pause Second 16 | 17 | #pause 18 | 19 | Third 20 | ] 21 | ``` 22 | 23 | ![image](https://github.com/touying-typ/touying/assets/34951714/a3bed1d3-e660-456d-8a54-a914436f43bf) 24 | 25 | 这个例子将会创建三张 subslides，逐渐地将内容展示出来。 26 | 27 | 如你所见，`#pause` 既可以放在行内，也可以放在单独的一行。 28 | 29 | 30 | ## meanwhile 31 | 32 | 有些情况下，我们需要在 `#pause` 的同时展示一些其他内容，这时候我们就可以用 `#meanwhile`。 33 | 34 | ```typst 35 | #slide[ 36 | First 37 | 38 | #pause 39 | 40 | Second 41 | 42 | #meanwhile 43 | 44 | Third 45 | 46 | #pause 47 | 48 | Fourth 49 | ] 50 | ``` 51 | 52 | ![image](https://github.com/touying-typ/touying/assets/34951714/24ca19a3-b27c-4d31-ab75-09c37911e6ac) 53 | 54 | 这个例子只会创建两张 subslides，并且 "First" 和 "Third" 同时显示，"Second" 和 "Fourth" 同时显示。 55 | 56 | 57 | ## 如何处理 set-show rules? 58 | 59 | 如果你在 `slide[..]` 里面使用了像 `grid` 这类 layout 函数，你会惊讶地发现其内部的 `#pause` 和 `#meanwhile` 失效了。但是你可以使用 `#slide()` 的 `composer` 参数来布局，大部分情况下都应该能满足需求。 60 | 61 | 62 | :::tip[原理] 63 | 64 | Touying 不依赖 `counter` 和 `locate` 来实现 `#pause`，而是用 Typst 脚本写了一个 parser。它会将输入内容块作为 sequence 解析，然后改造重组这个 sequence 为我们需要的一系列 subslides。 65 | 66 | ::: -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/current/external/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "外部工具", 3 | "position": 14, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "使用外部工具与 Touying 集成。" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/current/external/pdfpc.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # pdfpc 6 | 7 | [pdfpc](https://pdfpc.github.io/) 是一个 "对 PDF 文档具有多显示器支持的演示者控制台"。这意味着，您可以使用它以 PDF 页面的形式显示幻灯片，并且还具有一些已知的出色功能，就像 PowerPoint 一样。 8 | 9 | pdfpc 有一个 JSON 格式的 `.pdfpc` 文件，它可以为 PDF slides 提供更多的信息。虽然您可以手动编写它，但你也可以通过 Touying 来管理。 10 | 11 | 12 | ## 加入 Metadata 13 | 14 | Touying 与 [Polylux](https://polylux.dev/book/external/pdfpc.html) 保持一致，以避免 API 之间的冲突。 15 | 16 | 例如，你可以通过 `#pdfpc.speaker-note("This is a note that only the speaker will see.")` 加入 notes。 17 | 18 | 19 | ## pdfpc 配置 20 | 21 | 为了加入 pdfpc 配置，你可以使用 22 | 23 | ```typst 24 | #let s = (s.methods.append-preamble)(self: s, pdfpc.config( 25 | duration-minutes: 30, 26 | start-time: datetime(hour: 14, minute: 10, second: 0), 27 | end-time: datetime(hour: 14, minute: 40, second: 0), 28 | last-minutes: 5, 29 | note-font-size: 12, 30 | disable-markdown: false, 31 | default-transition: ( 32 | type: "push", 33 | duration-seconds: 2, 34 | angle: ltr, 35 | alignment: "vertical", 36 | direction: "inward", 37 | ), 38 | )) 39 | ``` 40 | 41 | 加入对应的配置，具体配置方法可以参考 [Polylux](https://polylux.dev/book/external/pdfpc.html)。 42 | 43 | 44 | ## 输出 .pdfpc 文件 45 | 46 | 假设你的文档为 `./example.typ`，则你可以通过 47 | 48 | ```sh 49 | typst query --root . ./example.typ --field value --one "" > ./example.pdfpc 50 | ``` 51 | 52 | 直接导出 `.pdfpc` 文件。 53 | 54 | 借助 Touying 与 Polylux 的兼容性，你可以让 Polylux 也支持直接导出，只需要加入下面的代码即可。 55 | 56 | ``` 57 | #import "@preview/touying:0.4.0" 58 | 59 | #locate(loc => touying.pdfpc.pdfpc-file(loc)) 60 | ``` -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/current/external/typst-preview.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # Typst Preview 6 | 7 | VS Code 的 Typst Preview 插件提供了优秀的 slide mode，我们可以用其预览和放映 slides。 8 | 9 | 按下 `Ctrl/Cmd + Shift + P`，并输入 `Typst Preview: Preview current file in slide mode`，就可以打开 slide mode 的预览。 10 | 11 | 按下 `Ctrl/Cmd + Shift + P`，并输入 `Typst Preview: Preview current file in browser and slide mode`，就可以在浏览器打开 slide mode。 12 | 13 | 这时候你可以按下 `F11` 之类的键，进入浏览器的全屏模式，就可以用于 slides 放映了。 14 | 15 | 由于 Typst Preview 是基于 SVG 的，因此可以播放 GIF 动图，这对于动态 slides 很有帮助。 16 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/current/integration/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "第三方包集成", 3 | "position": 9, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "让第三方包与 Touying 集成。" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/current/integration/codly.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 5 3 | --- 4 | 5 | # Codly 6 | 7 | 在使用 codly 的时候，我们应该使用 `s.methods.append-preamble` 方法进行初始化。 8 | 9 | ```typst 10 | #import "@preview/touying:0.4.0": * 11 | #import "@preview/codly:0.2.0": * 12 | 13 | #let s = themes.simple.register(aspect-ratio: "16-9") 14 | #let s = (s.methods.append-preamble)(self: s)[ 15 | #codly(languages: ( 16 | rust: (name: "Rust", icon: "\u{fa53}", color: rgb("#CE412B")), 17 | )) 18 | ] 19 | #let (init, slides) = utils.methods(s) 20 | #show heading.where(level: 2): set block(below: 1em) 21 | #show: init 22 | #show: codly-init.with() 23 | 24 | #let (slide, empty-slide) = utils.slides(s) 25 | #show: slides 26 | 27 | #slide[ 28 | == First slide 29 | 30 | #raw(lang: "rust", block: true, 31 | `pub fn main() { 32 | println!("Hello, world!"); 33 | }`.text) 34 | ] 35 | ``` 36 | 37 | ![image](https://github.com/touying-typ/touying/assets/34951714/0be2fbaf-cc03-4776-932f-259503d5e23a) 38 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/current/integration/fletcher.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 4 3 | --- 4 | 5 | # Fletcher 6 | 7 | Touying 提供了 `touying-reducer`，它能为 fletcher 加入 `pause` 和 `meanwhile` 动画。 8 | 9 | 一个例子： 10 | 11 | ```typst 12 | #import "@preview/touying:0.4.0": * 13 | #import "@preview/cetz:0.2.2" 14 | #import "@preview/fletcher:0.4.3" as fletcher: node, edge 15 | 16 | // cetz and fletcher bindings for touying 17 | #let cetz-canvas = touying-reducer.with(reduce: cetz.canvas, cover: cetz.draw.hide.with(bounds: true)) 18 | #let fletcher-diagram = touying-reducer.with(reduce: fletcher.diagram, cover: fletcher.hide) 19 | 20 | #let s = themes.metropolis.register(aspect-ratio: "16-9", footer: self => self.info.institution) 21 | #let (init, slides) = utils.methods(s) 22 | #show: init 23 | 24 | #let (slide, empty-slide) = utils.slides(s) 25 | #show: slides.with(title-slide: false, outline-slide: false) 26 | 27 | // cetz animation 28 | #slide[ 29 | Cetz in Touying: 30 | 31 | #cetz-canvas({ 32 | import cetz.draw: * 33 | 34 | rect((0,0), (5,5)) 35 | 36 | (pause,) 37 | 38 | rect((0,0), (1,1)) 39 | rect((1,1), (2,2)) 40 | rect((2,2), (3,3)) 41 | 42 | (pause,) 43 | 44 | line((0,0), (2.5, 2.5), name: "line") 45 | }) 46 | ] 47 | 48 | // fletcher animation 49 | #slide[ 50 | Fletcher in Touying: 51 | 52 | #fletcher-diagram( 53 | node-stroke: .1em, 54 | node-fill: gradient.radial(blue.lighten(80%), blue, center: (30%, 20%), radius: 80%), 55 | spacing: 4em, 56 | edge((-1,0), "r", "-|>", `open(path)`, label-pos: 0, label-side: center), 57 | node((0,0), `reading`, radius: 2em), 58 | edge((0,0), (0,0), `read()`, "--|>", bend: 130deg), 59 | pause, 60 | edge(`read()`, "-|>"), 61 | node((1,0), `eof`, radius: 2em), 62 | pause, 63 | edge(`close()`, "-|>"), 64 | node((2,0), `closed`, radius: 2em, extrude: (-2.5, 0)), 65 | edge((0,0), (2,0), `close()`, "-|>", bend: -40deg), 66 | ) 67 | ] 68 | ``` 69 | 70 | ![image](https://github.com/touying-typ/touying/assets/34951714/9ba71f54-2a5d-4144-996c-4a42833cc5cc) -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/current/integration/mitex.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # MiTeX 6 | 7 | 在创建 slides 的过程中，往往我们已经有了一个 LaTeX 数学公式，只是想贴到 slides 的里面，而不想把它转写成 Typst 数学公式，这时候我们就可以用 [MiTeX](https://github.com/mitex-rs/mitex) 了。 8 | 9 | 示例： 10 | 11 | ```typst 12 | #import "@preview/mitex:0.2.1": * 13 | 14 | Write inline equations like #mi("x") or #mi[y]. 15 | 16 | Also block equations (this case is from #text(blue.lighten(20%), link("https://katex.org/")[katex.org])): 17 | 18 | #mitex(` 19 | \newcommand{\f}[2]{#1f(#2)} 20 | \f\relax{x} = \int_{-\infty}^\infty 21 | \f\hat\xi\,e^{2 \pi i \xi x} 22 | \,d\xi 23 | `) 24 | ``` 25 | 26 | ![image](https://github.com/mitex-rs/mitex/assets/34951714/c425b2ae-b50b-46a8-a451-4d9e8e70626b) 27 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/current/intro.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Touying 介绍 6 | 7 | [Touying](https://github.com/touying-typ/touying) 是为 Typst 开发的幻灯片/演示文稿包。Touying 也类似于 LaTeX 的 Beamer，但是得益于 Typst，你可以拥有更快的渲染速度与更简洁的语法。后面，我们会使用 slides 指代幻灯片，slide 指代单张幻灯片，subslide 指代子幻灯片。 8 | 9 | ## 为什么使用 Touying 10 | 11 | - 相较于 PowerPoint，Touying 并非「所示即所得的」，你可以使用一种「内容与样式分离」的方式编写你的 slides，尤其是 Typst 作为一个新兴的排版语言，提供了简洁但强大的语法，对于代码块、数学公式和定理等内容有着更好的支持。另一个优势是，在有着模板的情况下，用 Touying 编写 slides 要比 PowerPoint 快得多。因此 Touying 相较于 PowerPoint，更适合有着「科研写作」需求的用户使用。 12 | - 相较于 Markdown Slides，Touying 所依托的 Typst 有着更强大的排版控制能力，例如页眉、页脚、布局和便捷的自定义函数，而这是 Markdown 很难具备、或者说很难做好的能力。并且 Touying 提供了 `#pause` 和 `#meanwhile` 标记，提供了更为便捷的动态 slides 能力。 13 | - 相较于 Beamer，Touying 有着更快的编译速度、更简洁的语法，以及更简单的自定义主题的能力。相较于 Beamer 动辄几秒几十秒的编译时间，Touying 的编译速度基本上能够维持在几毫秒几十毫秒。并且 Touying 的语法相较于 Beamer 更为简洁，也更容易更改模板主题，以及创建你自己的模板。在功能上，Touying 支持了 Beamer 大部分的能力，并且还提供了一些 Beamer 所没有的便利功能。 14 | - 相较于 Polylux，Touying 提供了一种 oop 风格的语法，能够通过全局单例模拟提供「全局变量」的能力，进而可以方便地编写主题。并且 Touying 并不依赖 `counter` 和 `locate` 来实现 `#pause`，因此能有更好的性能。Touying 自身定位是一个社区驱动的项目（我们欢迎更多的人加入），并且不会过分强调维持 API 的一致性，而是选择维护多个版本的文档，因而能够提供更多新颖但强大的功能。 15 | 16 | ## 名称来源 17 | 18 | Touying 取自中文里的「投影」，在英文中意为 project。相较而言，LaTeX 中的 beamer 就是德文的投影仪的意思。 19 | 20 | ## 关于文档 21 | 22 | 这个文档通过 [Docusaurus](https://docusaurus.io/) 驱动开发，我们将会为 Touying 维持英文和中文版本的文档，并且每个大版本维护一份文档，以便你随时可以查阅旧版本的 Touying 文档，并且可以更容易地迁移到新版本。 23 | 24 | Docusaurus 创建新版本： 25 | 26 | ```sh 27 | npm run docusaurus docs:version 0.y.x 28 | ``` 29 | 30 | Docusaurus 多语言： 31 | 32 | ```sh 33 | npm run start -- --locale zh 34 | ``` 35 | 36 | ## 贡献 37 | 38 | Touying 是免费、开源且社区驱动的。如果你感兴趣，你可以随时访问 [GitHub](https://github.com/touying-typ/touying) 并提出 issue 或 PR，我们也同样欢迎你加入 [touying-typ](https://github.com/touying-typ) 组织。 39 | 40 | ## License 41 | 42 | Touying is released under the [MIT license](https://github.com/touying-typ/touying/blob/main/LICENSE). -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/current/progress/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "进度", 3 | "position": 12, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "管理和展示 Touying 中的进度，例如 counters 和 sections 等。" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/current/progress/counters.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Touying 的计数器 6 | 7 | Touying 的状态均放置于 `states` 命名空间下，包括所有的计数器。 8 | 9 | ## slide 计数器 10 | 11 | 你可以通过 `states.slide-counter` 获取 slide 计数器，并且通过 `states.slide-counter.display()` 展示当前 slide 的序号。 12 | 13 | 14 | ## last-slide 计数器 15 | 16 | 因为有些情形下，我们需要为 slides 加入后记，因此就有了冻结 last-slide 计数器的需求，因此这里维护了第二个计数器。 17 | 18 | 我们可以使用 `states.last-slide-number` 展示后记前最后一张 slide 的序号。 19 | 20 | 21 | ## 进度 22 | 23 | 我们可以使用 24 | 25 | ```typst 26 | #states.touying-progress(ratio => ..) 27 | ``` 28 | 29 | 来显示当前的进度。 30 | 31 | 32 | ## 后记 33 | 34 | 你可以使用 35 | 36 | ```typst 37 | // appendix by freezing last-slide-number 38 | #let s = (s.methods.appendix)(self: s) 39 | #let (slide, empty-slide) = utils.methods(s) 40 | 41 | #slide[ 42 | appendix 43 | ] 44 | ``` 45 | 46 | 语法进入后记。 47 | 48 | 并且 `#let s = (s.methods.appendix-in-outline)(self: s, false)` 可以让后记的 section 不显示在大纲中。 -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/current/progress/sections.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # Touying 的 Sections 6 | 7 | Touying 维护了一份自己的 sections state，用于记录 slides 的 sections 和 subsections。 8 | 9 | ## touying-outline 10 | 11 | `#touying-outline(enum-args: (:), padding: 0pt)` 用于显示一个简单的大纲。 12 | 13 | 14 | ## touying-final-sections 15 | 16 | `#states.touying-final-sections(final-sections => ..)` 用于自定义显示大纲。 17 | 18 | 19 | ## touying-progress-with-sections 20 | 21 | ```typst 22 | #states.touying-progress-with-sections((current-sections: .., final-sections: .., current-slide-number: .., last-slide-number: ..) => ..) 23 | ``` 24 | 25 | 功能最强大，你可以用其搭建任意复杂的进度展示。 26 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/current/themes/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "主题", 3 | "position": 10, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "使用 Touying 很便利的一点就是，你可以使用 Touying 提供的主题，或者是借助 Touying 创建自己的主题或模板。" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/current/utilities/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "工具", 3 | "position": 13, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "一些便利的工具函数。" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/current/utilities/fit-to.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # Fit to height / width 6 | 7 | 感谢 [ntjess](https://github.com/ntjess) 的代码。 8 | 9 | ## Fit to height 10 | 11 | 如果你需要将图片占满剩余的 slide 高度，你可以来试试 `fit-to-height` 函数： 12 | 13 | ```typst 14 | #utils.fit-to-height(1fr)[BIG] 15 | ``` 16 | 17 | 函数定义： 18 | 19 | ```typst 20 | #let fit-to-height( 21 | width: none, prescale-width: none, grow: true, shrink: true, height, body 22 | ) = { .. } 23 | ``` 24 | 25 | 参数： 26 | 27 | - `width`: 如果指定，这将确定缩放后内容的宽度。因此，如果您希望缩放的内容填充幻灯片宽度的一半，则可以使用 `width: 50%`。 28 | - `prescale-width`: 此参数允许您使 Typst 的布局假设给定的内容在缩放之前要布局在一定宽度的容器中。例如，您可以使用 `prescale-width: 200%` 假设幻灯片的宽度为原来的两倍。 29 | - `grow`: 是否可扩张，默认为 `true`。 30 | - `shrink`: 是否可收缩，默认为 `true`。 31 | - `height`: 需要指定的高度。 32 | - `body`: 具体的内容。 33 | 34 | 35 | ## Fit to width 36 | 37 | 如果你需要限制标题宽度刚好占满 slide 的宽度，你可以来试试 `fit-to-width` 函数： 38 | 39 | ```typst 40 | #utils.fit-to-width(1fr)[#lorem(20)] 41 | ``` 42 | 43 | 函数定义： 44 | 45 | ```typst 46 | #let fit-to-width(grow: true, shrink: true, width, body) = { .. } 47 | ``` 48 | 49 | 参数： 50 | 51 | - `grow`: 是否可扩张，默认为 `true`。 52 | - `shrink`: 是否可收缩，默认为 `true`。 53 | - `width`: 需要指定的宽度。 54 | - `body`: 具体的内容。 55 | 56 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/current/utilities/oop.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # 面向对象编程 6 | 7 | Touying 提供了一些便利的工具函数，便于进行面向对象编程。 8 | 9 | --- 10 | 11 | ```typst 12 | #let call-or-display(self, it) = { 13 | if type(it) == function { 14 | return it(self) 15 | } else { 16 | return it 17 | } 18 | } 19 | ``` 20 | 调用或原样输出。 21 | 22 | --- 23 | 24 | ```typst 25 | #let methods(self) = { .. } 26 | ``` 27 | 用于为方法绑定 self 并返回，十分常用。 28 | 29 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.2.x/build-your-own-theme.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 7 3 | --- 4 | 5 | # 创建自己的主题 6 | 7 | 您可以参考 [主题的源代码](https://github.com/touying-typ/touying/tree/main/themes)，主要需要实现的就是： 8 | 9 | - 自定义颜色主题，即修改 `self.colors`。 10 | - 自定义 header； 11 | - 自定义 footer; 12 | - 自定义 `alert` 函数，可选； 13 | - 自定义 `slide` 函数； 14 | - 自定义特殊 slide 函数，如 `title-slide` 和 `focus-slide` 函数； 15 | - 自定义 `slide-in-slides` 函数，该函数会被 `slides` 函数调用； 16 | - 自定义 `slides` 函数，可选； 17 | - 自定义 `register` 函数，初始化全局单例 `s`； 18 | - 自定义 `init` 函数，可选。 19 | 20 | 待补充更详细的文档。 21 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.2.x/dynamic/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "动态幻灯片", 3 | "position": 5, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "想要在 PDF 中创建动画，我们就需要为同一个 slide 创建多个略有不同的页面，以便通过切换页面的方式实现动画，我们称这些页面为 subslides。" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.2.x/dynamic/cover.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 4 3 | --- 4 | 5 | # Cover 函数 6 | 7 | 正如您已经了解的那样，`uncover` 和 `#pause` 均会使用 `cover` 函数对不显示的内容进行遮盖。那么，这里的 `cover` 函数究竟是什么呢？ 8 | 9 | 10 | ## 默认 Cover 函数：`hide` 11 | 12 | `cover` 函数是保存在 `s.methods.cover` 的一个方法，后续 `uncover` 和 `#pause` 均会在这里取出 `cover` 函数来使用。 13 | 14 | 默认的 `cover` 函数是 [hide](https://typst.app/docs/reference/layout/hide/) 函数，这个函数能将内部的内容更改为不可见的，且不会影响布局。 15 | 16 | 17 | ## 更新 Cover 函数 18 | 19 | 有的情况下，您想用您自己的 `cover` 函数，那么您可以通过 20 | 21 | ```typst 22 | let s = (s.methods.update-cover)(self: s, is-method: true, cover-fn) 23 | ``` 24 | 25 | 方法来设置您自己的 `cover` 函数，其中如果设置 `is-method: false`，则 Touying 会帮您将 `cover-fn` 包装成一个方法。 26 | 27 | 28 | ## 半透明 Cover 函数 29 | 30 | Touying 提供了半透明 Cover 函数的支持，只需要加入 31 | 32 | ```typst 33 | #let s = (s.methods.enable-transparent-cover)(self: s) 34 | ``` 35 | 36 | 即可开启，其中你可以通过 `alpha: ..` 参数调节透明度。 37 | 38 | 39 | :::warning[警告] 40 | 41 | 注意，这里的 `transparent-cover` 并不能像 `hide` 一样不影响文本布局，因为里面有一层 `box`，因此可能会破坏页面原有的结构。 42 | 43 | ::: 44 | 45 | 46 | :::tip[原理] 47 | 48 | `enable-transparent-cover` 方法定义为 49 | 50 | ```typst 51 | #let s.methods.enable-transparent-cover = ( 52 | self: none, 53 | constructor: rgb, 54 | alpha: 85%, 55 | ) => { 56 | self.methods.cover = (self: none, body) => { 57 | utils.cover-with-rect( 58 | fill: utils.update-alpha( 59 | constructor: constructor, 60 | self.page-args.fill, 61 | alpha, 62 | ), 63 | body 64 | ) 65 | } 66 | self 67 | } 68 | ``` 69 | 70 | 可以看出，其是通过 `utils.cover-with-rect` 创建了一个与背景色同色的半透明矩形遮罩，以模拟内容透明的效果，其中 `constructor: rgb` 和 `alpha: 85%` 分别表明了背景色的构造函数与透明程度。 71 | 72 | ::: -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.2.x/dynamic/equation.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 3 3 | --- 4 | 5 | # 数学公式动画 6 | 7 | Touying 还提供了一个独特且十分有用的功能，即数学公式动画，它让你可以方便地在数学公式里使用 `pause` 和 `meanwhile`。 8 | 9 | ## 简单动画 10 | 11 | 让我们先来看一个例子： 12 | 13 | ```typst 14 | #slide[ 15 | Touying equation with pause: 16 | 17 | #touying-equation(` 18 | f(x) &= pause x^2 + 2x + 1 \ 19 | &= pause (x + 1)^2 \ 20 | `) 21 | 22 | #meanwhile 23 | 24 | Touying equation is very simple. 25 | ] 26 | ``` 27 | 28 | ![image](https://github.com/touying-typ/touying/assets/34951714/d176e61f-c0da-4c2a-a1bf-52621be5adb2) 29 | 30 | 31 | 我们使用 `touying-equation` 函数来实现在数学公式文本内部使用 `pause` 和 `meanwhile`（事实上，你也能用 `#pause` 或者 `#pause;`）。 32 | 33 | 正如你料想的一样，数学公式会分步显示，这很适合给让演讲者演示自己的数学公式推理思路。 34 | 35 | :::warning[警告] 36 | 37 | 虽然 `touying-equation` 函数很便利，但是您需要时刻注意，`touying-equation` 并不会做复杂的语法分析，只是单纯地正则表达式分割字符串，因此您不应在 `display(..)` 这类函数内部使用 `pause` 或 `meanwhile`！ 38 | 39 | ::: 40 | 41 | 42 | ## 复杂动画 43 | 44 | 事实上，我们也可以在 `touying-equation` 内部使用 `only`、`uncover` 和 `alternatives`，只是需要一点技巧： 45 | 46 | ```typst 47 | #slide(repeat: 3, self => [ 48 | #let (uncover, only, alternatives) = utils.methods(self) 49 | 50 | #touying-equation(scope: (uncover: uncover), ` 51 | f(x) &= pause x^2 + 2x + uncover("3-", 1) \ 52 | &= pause (x + 1)^2 \ 53 | `) 54 | ]) 55 | ``` 56 | 57 | ![image](https://github.com/touying-typ/touying/assets/34951714/f2df14a2-6424-4c53-81f7-1595aa330660) 58 | 59 | 60 | 我们可以在 `touying-equation` 的 `scope` 参数中将我们需要用到的函数传递进去，例如这里的 `uncover`。 61 | 62 | 63 | ## 参数 64 | 65 | `touying-equation` 的函数定义为 66 | 67 | ```typst 68 | #let touying-equation(block: true, numbering: none, supplement: auto, scope: (:), body) = { .. } 69 | ``` 70 | 71 | 因此，我们可以像使用普通数学公式一样，为 `touying-equation` 传入 `block`、`numbering` 和 `supplement` 参数。 -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.2.x/dynamic/handout.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 5 3 | --- 4 | 5 | # 创建讲义 6 | 7 | 在看幻灯片、听课的同时，听众往往会希望有一个讲义，以便能够回顾理解困难的地方，所以，作者最好能给听众提供这样一份讲义，如果能在听课前提供更好。 8 | 9 | 讲义模式与普通模式的区别是，其不需要过于繁杂的动画效果，因此只会保留每个 slide 的最后一张 subslide。 10 | 11 | 开启讲义模式是很简单的： 12 | 13 | ```typst 14 | #let s = (s.methods.enable-handout-mode)(self: s) 15 | ``` 16 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.2.x/dynamic/simple.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # 简单动画 6 | 7 | Touying 为简单的动画效果提供了两个标记：`#pause` 和 `#meanwhile`。 8 | 9 | ## pause 10 | 11 | `#pause` 的用途很简单，就是用于将后续的内容放到下一张 subslide 中，并且可以使用多个 `#pause` 以创建多张 subslides，一个简单的例子： 12 | 13 | ```typst 14 | #slide[ 15 | First #pause Second 16 | 17 | #pause 18 | 19 | Third 20 | ] 21 | ``` 22 | 23 | ![image](https://github.com/touying-typ/touying/assets/34951714/a3bed1d3-e660-456d-8a54-a914436f43bf) 24 | 25 | 这个例子将会创建三张 subslides，逐渐地将内容展示出来。 26 | 27 | 如你所见，`#pause` 既可以放在行内，也可以放在单独的一行。 28 | 29 | 30 | ## meanwhile 31 | 32 | 有些情况下，我们需要在 `#pause` 的同时展示一些其他内容，这时候我们就可以用 `#meanwhile`。 33 | 34 | ```typst 35 | #slide[ 36 | First 37 | 38 | #pause 39 | 40 | Second 41 | 42 | #meanwhile 43 | 44 | Third 45 | 46 | #pause 47 | 48 | Fourth 49 | ] 50 | ``` 51 | 52 | ![image](https://github.com/touying-typ/touying/assets/34951714/24ca19a3-b27c-4d31-ab75-09c37911e6ac) 53 | 54 | 这个例子只会创建两张 subslides，并且 "First" 和 "Third" 同时显示，"Second" 和 "Fourth" 同时显示。 55 | 56 | 57 | ## 如何处理 set-show rules? 58 | 59 | 如果你在 `slide[..]` 里面使用了 set-show rules，你会惊讶的发现，在那之后的 `#pause` 和 `#meanwhile` 都失效了。这是因为 Touying 无法探知 `styled(..)` 内部的内容（set-show rules 后的内容会被 `styled` 囊括起来）。 60 | 61 | 为了解决这个问题，Touying 为 `#slide()` 函数提供了一个 `setting` 参数，你可以将你的 set-show rules 放到 `setting` 参数里，例如修改字体颜色： 62 | 63 | ```typst 64 | #slide(setting: body => { 65 | set text(fill: blue) 66 | body 67 | })[ 68 | First 69 | 70 | #pause 71 | 72 | Second 73 | ] 74 | ``` 75 | 76 | ![image](https://github.com/touying-typ/touying/assets/34951714/8e31fc8a-5ab1-4181-a46a-fa96cf790dff) 77 | 78 | 79 | 同理，Touying 目前也不支持 `grid` 这类 layout 函数内部的 `#pause` 和 `#meanwhile`，也是由于同样的限制，但是你可以使用 `#slide()` 的 `composer` 参数，大部分情况下都应该能满足需求。 80 | 81 | 82 | :::tip[原理] 83 | 84 | Touying 不依赖 `counter` 和 `locate` 来实现 `#pause`，而是用 Typst 脚本写了一个 parser。它会将输入内容块作为 sequence 解析，然后改造重组这个 sequence 为我们需要的一系列 subslides。 85 | 86 | ::: -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.2.x/external/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "外部工具", 3 | "position": 10, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "使用外部工具与 Touying 集成。" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.2.x/external/pdfpc.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # pdfpc 6 | 7 | [pdfpc](https://pdfpc.github.io/) 是一个 "对 PDF 文档具有多显示器支持的演示者控制台"。这意味着，您可以使用它以 PDF 页面的形式显示幻灯片，并且还具有一些已知的出色功能，就像 PowerPoint 一样。 8 | 9 | pdfpc 有一个 JSON 格式的 `.pdfpc` 文件，它可以为 PDF slides 提供更多的信息。虽然您可以手动编写它，但你也可以通过 Touying 来管理。 10 | 11 | 12 | ## 加入 Metadata 13 | 14 | Touying 与 [Polylux](https://polylux.dev/book/external/pdfpc.html) 保持一致，以避免 API 之间的冲突。 15 | 16 | 例如，你可以通过 `#pdfpc.speaker-note("This is a note that only the speaker will see.")` 加入 notes。 17 | 18 | 19 | ## pdfpc 配置 20 | 21 | 为了加入 pdfpc 配置，你可以使用 22 | 23 | ```typst 24 | #let s = (s.methods.append-preamble)(self: s, pdfpc.config( 25 | duration-minutes: 30, 26 | start-time: datetime(hour: 14, minute: 10, second: 0), 27 | end-time: datetime(hour: 14, minute: 40, second: 0), 28 | last-minutes: 5, 29 | note-font-size: 12, 30 | disable-markdown: false, 31 | default-transition: ( 32 | type: "push", 33 | duration-seconds: 2, 34 | angle: ltr, 35 | alignment: "vertical", 36 | direction: "inward", 37 | ), 38 | )) 39 | ``` 40 | 41 | 加入对应的配置，具体配置方法可以参考 [Polylux](https://polylux.dev/book/external/pdfpc.html)。 42 | 43 | 44 | ## 输出 .pdfpc 文件 45 | 46 | 假设你的文档为 `./example.typ`，则你可以通过 47 | 48 | ```sh 49 | typst query --root . ./example.typ --field value --one "" > ./example.pdfpc 50 | ``` 51 | 52 | 直接导出 `.pdfpc` 文件。 53 | 54 | 借助 Touying 与 Polylux 的兼容性，你可以让 Polylux 也支持直接导出，只需要加入下面的代码即可。 55 | 56 | ``` 57 | #import "@preview/touying:0.2.1" 58 | 59 | #locate(loc => touying.pdfpc.pdfpc-file(loc)) 60 | ``` -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.2.x/external/typst-preview.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # Typst Preview 6 | 7 | VS Code 的 Typst Preview 插件提供了优秀的 slide mode，我们可以用其预览和放映 slides。 8 | 9 | 按下 `Ctrl/Cmd + Shift + P`，并输入 `Typst Preview: Preview current file in slide mode`，就可以打开 slide mode 的预览。 10 | 11 | 按下 `Ctrl/Cmd + Shift + P`，并输入 `Typst Preview: Preview current file in browser and slide mode`，就可以在浏览器打开 slide mode。 12 | 13 | 这时候你可以按下 `F11` 之类的键，进入浏览器的全屏模式，就可以用于 slides 放映了。 14 | 15 | 由于 Typst Preview 是基于 SVG 的，因此可以播放 GIF 动图，这对于动态 slides 很有帮助。 16 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.2.x/intro.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Touying 介绍 6 | 7 | [Touying](https://github.com/touying-typ/touying) 是为 Typst 开发的幻灯片/演示文稿包，在 [Polylux](https://github.com/andreasKroepelin/polylux) 的基础上开发而来。Touying 也类似于 LaTeX 的 Beamer，但是得益于 Typst，你可以拥有更快的渲染速度与更简洁的语法。后面，我们会使用 slides 指代幻灯片，slide 指代单张幻灯片，subslide 指代子幻灯片。 8 | 9 | ## 为什么使用 Touying 10 | 11 | - 相较于 PowerPoint，Touying 并非「所示即所得的」，你可以使用一种「内容与样式分离」的方式编写你的 slides，尤其是 Typst 作为一个新兴的排版语言，提供了简洁但强大的语法，对于代码块、数学公式和定理等内容有着更好的支持。另一个优势是，在有着模板的情况下，用 Touying 编写 slides 要比 PowerPoint 快得多。因此 Touying 相较于 PowerPoint，更适合有着「科研写作」需求的用户使用。 12 | - 相较于 Markdown Slides，Touying 所依托的 Typst 有着更强大的排版控制能力，例如页眉、页脚、布局和便捷的自定义函数，而这是 Markdown 很难具备、或者说很难做好的能力。并且 Touying 提供了 `#pause` 和 `#meanwhile` 标记，提供了更为便捷的动态 slides 能力。 13 | - 相较于 Beamer，Touying 有着更快的编译速度、更简洁的语法，以及更简单的自定义主题的能力。相较于 Beamer 动辄几秒几十秒的编译时间，Touying 的编译速度基本上能够维持在几毫秒几十毫秒。并且 Touying 的语法相较于 Beamer 更为简洁，也更容易更改模板主题，以及创建你自己的模板。在功能上，Touying 支持了 Beamer 大部分的能力，并且还提供了一些 Beamer 所没有的便利功能。 14 | - 相较于 Polylux，Touying 提供了一种 oop 风格的语法，能够通过全局单例模拟提供「全局变量」的能力，进而可以方便地编写主题。并且 Touying 并不依赖 `counter` 和 `locate` 来实现 `#pause`，因此能有更好的性能。Touying 自身定位是一个社区驱动的项目（我们欢迎更多的人加入），并且不会过分强调维持 API 的一致性，而是选择维护多个版本的文档，因而能够提供更多新颖但强大的功能。 15 | 16 | ## 名称来源 17 | 18 | Touying 取自中文里的「投影」，在英文中意为 project。相较而言，LaTeX 中的 beamer 就是德文的投影仪的意思。 19 | 20 | ## 关于文档 21 | 22 | 这个文档通过 [Docusaurus](https://docusaurus.io/) 驱动开发，我们将会为 Touying 维持英文和中文版本的文档，并且每个大版本维护一份文档，以便你随时可以查阅旧版本的 Touying 文档，并且可以更容易地迁移到新版本。 23 | 24 | Docusaurus 创建新版本： 25 | 26 | ```sh 27 | npm run docusaurus docs:version 0.y.x 28 | ``` 29 | 30 | ## 贡献 31 | 32 | Touying 是免费、开源且社区驱动的。如果你感兴趣，你可以随时访问 [GitHub](https://github.com/touying-typ/touying) 并提出 issue 或 PR，我们也同样欢迎你加入 [touying-typ](https://github.com/touying-typ) 组织。 33 | 34 | ## License 35 | 36 | Touying is released under the [MIT license](https://github.com/touying-typ/touying/blob/main/LICENSE). -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.2.x/progress/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "进度", 3 | "position": 8, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "管理和展示 Touying 中的进度，例如 counters 和 sections 等。" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.2.x/progress/counters.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Touying 的计数器 6 | 7 | Touying 的状态均放置于 `states` 命名空间下，包括所有的计数器。 8 | 9 | ## slide 计数器 10 | 11 | 你可以通过 `states.slide-counter` 获取 slide 计数器，并且通过 `states.slide-counter.display()` 展示当前 slide 的序号。 12 | 13 | 14 | ## last-slide 计数器 15 | 16 | 因为有些情形下，我们需要为 slides 加入后记，因此就有了冻结 last-slide 计数器的需求，因此这里维护了第二个计数器。 17 | 18 | 我们可以使用 `states.last-slide-number` 展示后记前最后一张 slide 的序号。 19 | 20 | 21 | ## 进度 22 | 23 | 我们可以使用 24 | 25 | ```typst 26 | #states.touying-progress(ratio => ..) 27 | ``` 28 | 29 | 来显示当前的进度。 30 | 31 | 32 | ## 后记 33 | 34 | 你可以使用 35 | 36 | ```typst 37 | // appendix by freezing last-slide-number 38 | #let s = (s.methods.appendix)(self: s) 39 | #let (slide,) = utils.methods(s) 40 | 41 | #slide[ 42 | appendix 43 | ] 44 | ``` 45 | 46 | 语法进入后记。 47 | 48 | 并且 `#let s = (s.methods.appendix-in-outline)(self: s, false)` 可以让后记的 section 不显示在大纲中。 -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.2.x/progress/sections.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # Touying 的 Sections 6 | 7 | Touying 维护了一份自己的 sections state，用于记录 slides 的 sections 和 subsections。 8 | 9 | ## touying-outline 10 | 11 | `#touying-outline(enum-args: (:), padding: 0pt)` 用于显示一个简单的大纲。 12 | 13 | 14 | ## touying-final-sections 15 | 16 | `#states.touying-final-sections(final-sections => ..)` 用于自定义显示大纲。 17 | 18 | 19 | ## touying-progress-with-sections 20 | 21 | ```typst 22 | #states.touying-progress-with-sections((current-sections: .., final-sections: .., current-slide-number: .., last-slide-number: ..) => ..) 23 | ``` 24 | 25 | 功能最强大，你可以用其搭建任意复杂的进度展示。 26 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.2.x/style.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 4 3 | --- 4 | 5 | # 代码风格 6 | 7 | ## show-slides 风格 8 | 9 | 如果我们只是需要简单使用，我们可以通过 `#show: slides` 实现更简洁的语法。 10 | 11 | 但是这样做也有对应的弊端：第一个弊端是这种方式可能会极大地影响文档渲染性能，第二个弊端是后续不能直接加入 `#slide(..)`，而是需要手动标记 `#slides-end`，以及最大的弊端是实现不了复杂的功能。 12 | 13 | ```typst 14 | #import "@preview/touying:0.2.1": * 15 | 16 | #let (init, slide, slides) = utils.methods(s) 17 | #show: init 18 | 19 | #show: slides 20 | 21 | = Title 22 | 23 | == First Slide 24 | 25 | Hello, Touying! 26 | 27 | #pause 28 | 29 | Hello, Typst! 30 | 31 | #slides-end 32 | 33 | #slide[ 34 | A new slide. 35 | ] 36 | ``` 37 | 38 | ![image](https://github.com/touying-typ/touying/assets/34951714/db2a1b60-bc56-4fa9-a317-ee9ecc6f3895) 39 | 40 | 并且你可以使用空标题 `==` 创建一个新页。 41 | 42 | 43 | ## slide-block 风格 44 | 45 | 为了更优秀的性能和更强大的能力，大部分情况我们还是需要使用 46 | 47 | ```typst 48 | #slide[ 49 | A new slide. 50 | ] 51 | ``` 52 | 53 | 这样的代码风格。 -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.2.x/themes/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "主题", 3 | "position": 6, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "使用 Touying 很便利的一点就是，你可以使用 Touying 提供的主题，或者是借助 Touying 创建自己的主题或模板。" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.2.x/utilities/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "工具", 3 | "position": 9, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "一些便利的工具函数。" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.2.x/utilities/fit-to.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # Fit to height / width 6 | 7 | 感谢 [ntjess](https://github.com/ntjess) 的代码。 8 | 9 | ## Fit to height 10 | 11 | 如果你需要将图片占满剩余的 slide 高度，你可以来试试 `fit-to-height` 函数： 12 | 13 | ```typst 14 | #utils.fit-to-height(1fr)[BIG] 15 | ``` 16 | 17 | 函数定义： 18 | 19 | ```typst 20 | #let fit-to-height( 21 | width: none, prescale-width: none, grow: true, shrink: true, height, body 22 | ) = { .. } 23 | ``` 24 | 25 | 参数： 26 | 27 | - `width`: 如果指定，这将确定缩放后内容的宽度。因此，如果您希望缩放的内容填充幻灯片宽度的一半，则可以使用 `width: 50%`。 28 | - `prescale-width`: 此参数允许您使 Typst 的布局假设给定的内容在缩放之前要布局在一定宽度的容器中。例如，您可以使用 `prescale-width: 200%` 假设幻灯片的宽度为原来的两倍。 29 | - `grow`: 是否可扩张，默认为 `true`。 30 | - `shrink`: 是否可收缩，默认为 `true`。 31 | - `height`: 需要指定的高度。 32 | - `body`: 具体的内容。 33 | 34 | 35 | ## Fit to width 36 | 37 | 如果你需要限制标题宽度刚好占满 slide 的宽度，你可以来试试 `fit-to-width` 函数： 38 | 39 | ```typst 40 | #utils.fit-to-width(1fr)[#lorem(20)] 41 | ``` 42 | 43 | 函数定义： 44 | 45 | ```typst 46 | #let fit-to-width(grow: true, shrink: true, width, body) = { .. } 47 | ``` 48 | 49 | 参数： 50 | 51 | - `grow`: 是否可扩张，默认为 `true`。 52 | - `shrink`: 是否可收缩，默认为 `true`。 53 | - `width`: 需要指定的宽度。 54 | - `body`: 具体的内容。 55 | 56 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.2.x/utilities/oop.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # 面向对象编程 6 | 7 | Touying 提供了一些便利的工具函数，便于进行面向对象编程。 8 | 9 | --- 10 | 11 | ```typst 12 | #let empty-object = (methods: (:)) 13 | ``` 14 | 一个空类。 15 | 16 | --- 17 | 18 | ```typst 19 | #let call-or-display(self, it) = { 20 | if type(it) == function { 21 | return it(self) 22 | } else { 23 | return it 24 | } 25 | } 26 | ``` 27 | 调用或原样输出。 28 | 29 | --- 30 | 31 | ```typst 32 | #let methods(self) = { .. } 33 | ``` 34 | 用于为方法绑定 self 并返回，十分常用。 35 | 36 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.3.2+/dynamic/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "动态幻灯片", 3 | "position": 7, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "想要在 PDF 中创建动画，我们就需要为同一个 slide 创建多个略有不同的页面，以便通过切换页面的方式实现动画，我们称这些页面为 subslides。" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.3.2+/dynamic/cover.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 4 3 | --- 4 | 5 | # Cover 函数 6 | 7 | 正如您已经了解的那样，`uncover` 和 `#pause` 均会使用 `cover` 函数对不显示的内容进行遮盖。那么，这里的 `cover` 函数究竟是什么呢？ 8 | 9 | 10 | ## 默认 Cover 函数：`hide` 11 | 12 | `cover` 函数是保存在 `s.methods.cover` 的一个方法，后续 `uncover` 和 `#pause` 均会在这里取出 `cover` 函数来使用。 13 | 14 | 默认的 `cover` 函数是 [hide](https://typst.app/docs/reference/layout/hide/) 函数，这个函数能将内部的内容更改为不可见的，且不会影响布局。 15 | 16 | 17 | ## 更新 Cover 函数 18 | 19 | 有的情况下，您想用您自己的 `cover` 函数，那么您可以通过 20 | 21 | ```typst 22 | let s = (s.methods.update-cover)(self: s, is-method: true, cover-fn) 23 | ``` 24 | 25 | 方法来设置您自己的 `cover` 函数，其中如果设置 `is-method: false`，则 Touying 会帮您将 `cover-fn` 包装成一个方法。 26 | 27 | 28 | ## 半透明 Cover 函数 29 | 30 | Touying 提供了半透明 Cover 函数的支持，只需要加入 31 | 32 | ```typst 33 | #let s = (s.methods.enable-transparent-cover)(self: s) 34 | ``` 35 | 36 | 即可开启，其中你可以通过 `alpha: ..` 参数调节透明度。 37 | 38 | 39 | :::warning[警告] 40 | 41 | 注意，这里的 `transparent-cover` 并不能像 `hide` 一样不影响文本布局，因为里面有一层 `box`，因此可能会破坏页面原有的结构。 42 | 43 | ::: 44 | 45 | 46 | :::tip[原理] 47 | 48 | `enable-transparent-cover` 方法定义为 49 | 50 | ```typst 51 | #let s.methods.enable-transparent-cover = ( 52 | self: none, 53 | constructor: rgb, 54 | alpha: 85%, 55 | ) => { 56 | self.methods.cover = (self: none, body) => { 57 | utils.cover-with-rect( 58 | fill: utils.update-alpha( 59 | constructor: constructor, 60 | self.page-args.fill, 61 | alpha, 62 | ), 63 | body 64 | ) 65 | } 66 | self 67 | } 68 | ``` 69 | 70 | 可以看出，其是通过 `utils.cover-with-rect` 创建了一个与背景色同色的半透明矩形遮罩，以模拟内容透明的效果，其中 `constructor: rgb` 和 `alpha: 85%` 分别表明了背景色的构造函数与透明程度。 71 | 72 | ::: -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.3.2+/dynamic/equation.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 3 3 | --- 4 | 5 | # 数学公式动画 6 | 7 | Touying 还提供了一个独特且十分有用的功能，即数学公式动画，它让你可以方便地在数学公式里使用 `pause` 和 `meanwhile`。 8 | 9 | ## 简单动画 10 | 11 | 让我们先来看一个例子： 12 | 13 | ```typst 14 | #slide[ 15 | Touying equation with pause: 16 | 17 | #touying-equation(` 18 | f(x) &= pause x^2 + 2x + 1 \ 19 | &= pause (x + 1)^2 \ 20 | `) 21 | 22 | #meanwhile 23 | 24 | Touying equation is very simple. 25 | ] 26 | ``` 27 | 28 | ![image](https://github.com/touying-typ/touying/assets/34951714/d176e61f-c0da-4c2a-a1bf-52621be5adb2) 29 | 30 | 31 | 我们使用 `touying-equation` 函数来实现在数学公式文本内部使用 `pause` 和 `meanwhile`（事实上，你也能用 `#pause` 或者 `#pause;`）。 32 | 33 | 正如你料想的一样，数学公式会分步显示，这很适合给让演讲者演示自己的数学公式推理思路。 34 | 35 | :::warning[警告] 36 | 37 | 虽然 `touying-equation` 函数很便利，但是您需要时刻注意，`touying-equation` 并不会做复杂的语法分析，只是单纯地正则表达式分割字符串，因此您不应在 `display(..)` 这类函数内部使用 `pause` 或 `meanwhile`！ 38 | 39 | ::: 40 | 41 | 42 | ## 复杂动画 43 | 44 | 事实上，我们也可以在 `touying-equation` 内部使用 `only`、`uncover` 和 `alternatives`，只是需要一点技巧： 45 | 46 | ```typst 47 | #slide(repeat: 3, self => [ 48 | #let (uncover, only, alternatives) = utils.methods(self) 49 | 50 | #touying-equation(scope: (uncover: uncover), ` 51 | f(x) &= pause x^2 + 2x + uncover("3-", 1) \ 52 | &= pause (x + 1)^2 \ 53 | `) 54 | ]) 55 | ``` 56 | 57 | ![image](https://github.com/touying-typ/touying/assets/34951714/f2df14a2-6424-4c53-81f7-1595aa330660) 58 | 59 | 60 | 我们可以在 `touying-equation` 的 `scope` 参数中将我们需要用到的函数传递进去，例如这里的 `uncover`。 61 | 62 | 63 | ## 参数 64 | 65 | `touying-equation` 的函数定义为 66 | 67 | ```typst 68 | #let touying-equation(block: true, numbering: none, supplement: auto, scope: (:), body) = { .. } 69 | ``` 70 | 71 | 因此，我们可以像使用普通数学公式一样，为 `touying-equation` 传入 `block`、`numbering` 和 `supplement` 参数。 -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.3.2+/dynamic/handout.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 6 3 | --- 4 | 5 | # 创建讲义 6 | 7 | 在看幻灯片、听课的同时，听众往往会希望有一个讲义，以便能够回顾理解困难的地方，所以，作者最好能给听众提供这样一份讲义，如果能在听课前提供更好。 8 | 9 | 讲义模式与普通模式的区别是，其不需要过于繁杂的动画效果，因此只会保留每个 slide 的最后一张 subslide。 10 | 11 | 开启讲义模式是很简单的： 12 | 13 | ```typst 14 | #let s = (s.methods.enable-handout-mode)(self: s) 15 | ``` 16 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.3.2+/dynamic/simple.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # 简单动画 6 | 7 | Touying 为简单的动画效果提供了两个标记：`#pause` 和 `#meanwhile`。 8 | 9 | ## pause 10 | 11 | `#pause` 的用途很简单，就是用于将后续的内容放到下一张 subslide 中，并且可以使用多个 `#pause` 以创建多张 subslides，一个简单的例子： 12 | 13 | ```typst 14 | #slide[ 15 | First #pause Second 16 | 17 | #pause 18 | 19 | Third 20 | ] 21 | ``` 22 | 23 | ![image](https://github.com/touying-typ/touying/assets/34951714/a3bed1d3-e660-456d-8a54-a914436f43bf) 24 | 25 | 这个例子将会创建三张 subslides，逐渐地将内容展示出来。 26 | 27 | 如你所见，`#pause` 既可以放在行内，也可以放在单独的一行。 28 | 29 | 30 | ## meanwhile 31 | 32 | 有些情况下，我们需要在 `#pause` 的同时展示一些其他内容，这时候我们就可以用 `#meanwhile`。 33 | 34 | ```typst 35 | #slide[ 36 | First 37 | 38 | #pause 39 | 40 | Second 41 | 42 | #meanwhile 43 | 44 | Third 45 | 46 | #pause 47 | 48 | Fourth 49 | ] 50 | ``` 51 | 52 | ![image](https://github.com/touying-typ/touying/assets/34951714/24ca19a3-b27c-4d31-ab75-09c37911e6ac) 53 | 54 | 这个例子只会创建两张 subslides，并且 "First" 和 "Third" 同时显示，"Second" 和 "Fourth" 同时显示。 55 | 56 | 57 | ## 如何处理 set-show rules? 58 | 59 | 如果你在 `slide[..]` 里面使用了像 `grid` 这类 layout 函数，你会惊讶地发现其内部的 `#pause` 和 `#meanwhile` 失效了。但是你可以使用 `#slide()` 的 `composer` 参数来布局，大部分情况下都应该能满足需求。 60 | 61 | 62 | :::tip[原理] 63 | 64 | Touying 不依赖 `counter` 和 `locate` 来实现 `#pause`，而是用 Typst 脚本写了一个 parser。它会将输入内容块作为 sequence 解析，然后改造重组这个 sequence 为我们需要的一系列 subslides。 65 | 66 | ::: -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.3.2+/external/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "外部工具", 3 | "position": 13, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "使用外部工具与 Touying 集成。" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.3.2+/external/pdfpc.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # pdfpc 6 | 7 | [pdfpc](https://pdfpc.github.io/) 是一个 "对 PDF 文档具有多显示器支持的演示者控制台"。这意味着，您可以使用它以 PDF 页面的形式显示幻灯片，并且还具有一些已知的出色功能，就像 PowerPoint 一样。 8 | 9 | pdfpc 有一个 JSON 格式的 `.pdfpc` 文件，它可以为 PDF slides 提供更多的信息。虽然您可以手动编写它，但你也可以通过 Touying 来管理。 10 | 11 | 12 | ## 加入 Metadata 13 | 14 | Touying 与 [Polylux](https://polylux.dev/book/external/pdfpc.html) 保持一致，以避免 API 之间的冲突。 15 | 16 | 例如，你可以通过 `#pdfpc.speaker-note("This is a note that only the speaker will see.")` 加入 notes。 17 | 18 | 19 | ## pdfpc 配置 20 | 21 | 为了加入 pdfpc 配置，你可以使用 22 | 23 | ```typst 24 | #let s = (s.methods.append-preamble)(self: s, pdfpc.config( 25 | duration-minutes: 30, 26 | start-time: datetime(hour: 14, minute: 10, second: 0), 27 | end-time: datetime(hour: 14, minute: 40, second: 0), 28 | last-minutes: 5, 29 | note-font-size: 12, 30 | disable-markdown: false, 31 | default-transition: ( 32 | type: "push", 33 | duration-seconds: 2, 34 | angle: ltr, 35 | alignment: "vertical", 36 | direction: "inward", 37 | ), 38 | )) 39 | ``` 40 | 41 | 加入对应的配置，具体配置方法可以参考 [Polylux](https://polylux.dev/book/external/pdfpc.html)。 42 | 43 | 44 | ## 输出 .pdfpc 文件 45 | 46 | 假设你的文档为 `./example.typ`，则你可以通过 47 | 48 | ```sh 49 | typst query --root . ./example.typ --field value --one "" > ./example.pdfpc 50 | ``` 51 | 52 | 直接导出 `.pdfpc` 文件。 53 | 54 | 借助 Touying 与 Polylux 的兼容性，你可以让 Polylux 也支持直接导出，只需要加入下面的代码即可。 55 | 56 | ``` 57 | #import "@preview/touying:0.3.3" 58 | 59 | #locate(loc => touying.pdfpc.pdfpc-file(loc)) 60 | ``` -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.3.2+/external/typst-preview.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # Typst Preview 6 | 7 | VS Code 的 Typst Preview 插件提供了优秀的 slide mode，我们可以用其预览和放映 slides。 8 | 9 | 按下 `Ctrl/Cmd + Shift + P`，并输入 `Typst Preview: Preview current file in slide mode`，就可以打开 slide mode 的预览。 10 | 11 | 按下 `Ctrl/Cmd + Shift + P`，并输入 `Typst Preview: Preview current file in browser and slide mode`，就可以在浏览器打开 slide mode。 12 | 13 | 这时候你可以按下 `F11` 之类的键，进入浏览器的全屏模式，就可以用于 slides 放映了。 14 | 15 | 由于 Typst Preview 是基于 SVG 的，因此可以播放 GIF 动图，这对于动态 slides 很有帮助。 16 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.3.2+/integration/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "第三方包集成", 3 | "position": 8, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "让第三方包与 Touying 集成。" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.3.2+/integration/codly.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 5 3 | --- 4 | 5 | # Codly 6 | 7 | 在使用 codly 的时候，我们应该使用 `s.methods.append-preamble` 方法进行初始化。 8 | 9 | ```typst 10 | #import "@preview/touying:0.3.3": * 11 | #import "@preview/codly:0.2.0": * 12 | 13 | #let s = themes.simple.register(aspect-ratio: "16-9") 14 | #let s = (s.methods.append-preamble)(self: s)[ 15 | #codly(languages: ( 16 | rust: (name: "Rust", icon: "\u{fa53}", color: rgb("#CE412B")), 17 | )) 18 | ] 19 | #let (init, slides) = utils.methods(s) 20 | #show heading.where(level: 2): set block(below: 1em) 21 | #show: init 22 | #show: codly-init.with() 23 | 24 | #let (slide, empty-slide) = utils.slides(s) 25 | #show: slides 26 | 27 | #slide[ 28 | == First slide 29 | 30 | #raw(lang: "rust", block: true, 31 | `pub fn main() { 32 | println!("Hello, world!"); 33 | }`.text) 34 | ] 35 | ``` 36 | 37 | ![image](https://github.com/touying-typ/touying/assets/34951714/0be2fbaf-cc03-4776-932f-259503d5e23a) 38 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.3.2+/integration/fletcher.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 4 3 | --- 4 | 5 | # Fletcher 6 | 7 | Touying 提供了 `touying-reducer`，它能为 fletcher 加入 `pause` 和 `meanwhile` 动画。 8 | 9 | 一个例子： 10 | 11 | ```typst 12 | #import "@preview/touying:0.3.3": * 13 | #import "@preview/cetz:0.2.1" 14 | #import "@preview/fletcher:0.4.2" as fletcher: node, edge 15 | 16 | #let cetz-canvas = touying-reducer.with(reduce: cetz.canvas, cover: cetz.draw.hide.with(bounds: true)) 17 | #let fletcher-diagram = touying-reducer.with(reduce: (arr, ..args) => fletcher.diagram(..args, ..arr)) 18 | 19 | #let s = themes.metropolis.register(aspect-ratio: "16-9", footer: self => self.info.institution) 20 | #let (init, slides) = utils.methods(s) 21 | #show: init 22 | 23 | #let (slide, empty-slide) = utils.slides(s) 24 | #show: slides.with(title-slide: false, outline-slide: false) 25 | 26 | // cetz animation 27 | #slide[ 28 | Cetz in Touying: 29 | 30 | #cetz-canvas({ 31 | import cetz.draw: * 32 | 33 | rect((0,0), (5,5)) 34 | 35 | (pause,) 36 | 37 | rect((0,0), (1,1)) 38 | rect((1,1), (2,2)) 39 | rect((2,2), (3,3)) 40 | 41 | (pause,) 42 | 43 | line((0,0), (2.5, 2.5), name: "line") 44 | }) 45 | ] 46 | 47 | // fletcher animation 48 | #slide[ 49 | Fletcher in Touying: 50 | 51 | #fletcher-diagram( 52 | node-stroke: .1em, 53 | node-fill: gradient.radial(blue.lighten(80%), blue, center: (30%, 20%), radius: 80%), 54 | spacing: 4em, 55 | edge((-1,0), "r", "-|>", `open(path)`, label-pos: 0, label-side: center), 56 | node((0,0), `reading`, radius: 2em), 57 | edge((0,0), (0,0), `read()`, "--|>", bend: 130deg), 58 | pause, 59 | edge(`read()`, "-|>"), 60 | node((1,0), `eof`, radius: 2em), 61 | pause, 62 | edge(`close()`, "-|>"), 63 | node((2,0), `closed`, radius: 2em, extrude: (-2.5, 0)), 64 | edge((0,0), (2,0), `close()`, "-|>", bend: -40deg), 65 | ) 66 | ] 67 | ``` 68 | 69 | ![image](https://github.com/touying-typ/touying/assets/34951714/9ba71f54-2a5d-4144-996c-4a42833cc5cc) -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.3.2+/integration/mitex.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # MiTeX 6 | 7 | 在创建 slides 的过程中，往往我们已经有了一个 LaTeX 数学公式，只是想贴到 slides 的里面，而不想把它转写成 Typst 数学公式，这时候我们就可以用 [MiTeX](https://github.com/mitex-rs/mitex) 了。 8 | 9 | 示例： 10 | 11 | ```typst 12 | #import "@preview/mitex:0.2.1": * 13 | 14 | Write inline equations like #mi("x") or #mi[y]. 15 | 16 | Also block equations (this case is from #text(blue.lighten(20%), link("https://katex.org/")[katex.org])): 17 | 18 | #mitex(` 19 | \newcommand{\f}[2]{#1f(#2)} 20 | \f\relax{x} = \int_{-\infty}^\infty 21 | \f\hat\xi\,e^{2 \pi i \xi x} 22 | \,d\xi 23 | `) 24 | ``` 25 | 26 | ![image](https://github.com/mitex-rs/mitex/assets/34951714/c425b2ae-b50b-46a8-a451-4d9e8e70626b) 27 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.3.2+/integration/polylux.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 6 3 | --- 4 | 5 | # Polylux 6 | 7 | 借助 Touying 与 Polylux 的兼容性，你可以让 Polylux 也支持直接导出，只需要在你的 Polylux 源代码中加入下面的代码即可。 8 | 9 | ``` 10 | #import "@preview/touying:0.3.3" 11 | 12 | #locate(loc => touying.pdfpc.pdfpc-file(loc)) 13 | ``` 14 | 15 | 假设你的文档为 `./example.typ`，则你可以通过 16 | 17 | ```sh 18 | typst query --root . ./example.typ --field value --one "" > ./example.pdfpc 19 | ``` 20 | 21 | 直接导出 `.pdfpc` 文件，而不需要使用额外的 `polylux2pdfpc` 程序。 -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.3.2+/intro.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Touying 介绍 6 | 7 | [Touying](https://github.com/touying-typ/touying) 是为 Typst 开发的幻灯片/演示文稿包。Touying 也类似于 LaTeX 的 Beamer，但是得益于 Typst，你可以拥有更快的渲染速度与更简洁的语法。后面，我们会使用 slides 指代幻灯片，slide 指代单张幻灯片，subslide 指代子幻灯片。 8 | 9 | ## 为什么使用 Touying 10 | 11 | - 相较于 PowerPoint，Touying 并非「所示即所得的」，你可以使用一种「内容与样式分离」的方式编写你的 slides，尤其是 Typst 作为一个新兴的排版语言，提供了简洁但强大的语法，对于代码块、数学公式和定理等内容有着更好的支持。另一个优势是，在有着模板的情况下，用 Touying 编写 slides 要比 PowerPoint 快得多。因此 Touying 相较于 PowerPoint，更适合有着「科研写作」需求的用户使用。 12 | - 相较于 Markdown Slides，Touying 所依托的 Typst 有着更强大的排版控制能力，例如页眉、页脚、布局和便捷的自定义函数，而这是 Markdown 很难具备、或者说很难做好的能力。并且 Touying 提供了 `#pause` 和 `#meanwhile` 标记，提供了更为便捷的动态 slides 能力。 13 | - 相较于 Beamer，Touying 有着更快的编译速度、更简洁的语法，以及更简单的自定义主题的能力。相较于 Beamer 动辄几秒几十秒的编译时间，Touying 的编译速度基本上能够维持在几毫秒几十毫秒。并且 Touying 的语法相较于 Beamer 更为简洁，也更容易更改模板主题，以及创建你自己的模板。在功能上，Touying 支持了 Beamer 大部分的能力，并且还提供了一些 Beamer 所没有的便利功能。 14 | - 相较于 Polylux，Touying 提供了一种 oop 风格的语法，能够通过全局单例模拟提供「全局变量」的能力，进而可以方便地编写主题。并且 Touying 并不依赖 `counter` 和 `locate` 来实现 `#pause`，因此能有更好的性能。Touying 自身定位是一个社区驱动的项目（我们欢迎更多的人加入），并且不会过分强调维持 API 的一致性，而是选择维护多个版本的文档，因而能够提供更多新颖但强大的功能。 15 | 16 | ## 名称来源 17 | 18 | Touying 取自中文里的「投影」，在英文中意为 project。相较而言，LaTeX 中的 beamer 就是德文的投影仪的意思。 19 | 20 | ## 关于文档 21 | 22 | 这个文档通过 [Docusaurus](https://docusaurus.io/) 驱动开发，我们将会为 Touying 维持英文和中文版本的文档，并且每个大版本维护一份文档，以便你随时可以查阅旧版本的 Touying 文档，并且可以更容易地迁移到新版本。 23 | 24 | Docusaurus 创建新版本： 25 | 26 | ```sh 27 | npm run docusaurus docs:version 0.y.x 28 | ``` 29 | 30 | Docusaurus 多语言： 31 | 32 | ```sh 33 | npm run start -- --locale zh 34 | ``` 35 | 36 | ## 贡献 37 | 38 | Touying 是免费、开源且社区驱动的。如果你感兴趣，你可以随时访问 [GitHub](https://github.com/touying-typ/touying) 并提出 issue 或 PR，我们也同样欢迎你加入 [touying-typ](https://github.com/touying-typ) 组织。 39 | 40 | ## License 41 | 42 | Touying is released under the [MIT license](https://github.com/touying-typ/touying/blob/main/LICENSE). -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.3.2+/progress/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "进度", 3 | "position": 11, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "管理和展示 Touying 中的进度，例如 counters 和 sections 等。" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.3.2+/progress/counters.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Touying 的计数器 6 | 7 | Touying 的状态均放置于 `states` 命名空间下，包括所有的计数器。 8 | 9 | ## slide 计数器 10 | 11 | 你可以通过 `states.slide-counter` 获取 slide 计数器，并且通过 `states.slide-counter.display()` 展示当前 slide 的序号。 12 | 13 | 14 | ## last-slide 计数器 15 | 16 | 因为有些情形下，我们需要为 slides 加入后记，因此就有了冻结 last-slide 计数器的需求，因此这里维护了第二个计数器。 17 | 18 | 我们可以使用 `states.last-slide-number` 展示后记前最后一张 slide 的序号。 19 | 20 | 21 | ## 进度 22 | 23 | 我们可以使用 24 | 25 | ```typst 26 | #states.touying-progress(ratio => ..) 27 | ``` 28 | 29 | 来显示当前的进度。 30 | 31 | 32 | ## 后记 33 | 34 | 你可以使用 35 | 36 | ```typst 37 | // appendix by freezing last-slide-number 38 | #let s = (s.methods.appendix)(self: s) 39 | #let (slide, empty-slide) = utils.methods(s) 40 | 41 | #slide[ 42 | appendix 43 | ] 44 | ``` 45 | 46 | 语法进入后记。 47 | 48 | 并且 `#let s = (s.methods.appendix-in-outline)(self: s, false)` 可以让后记的 section 不显示在大纲中。 -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.3.2+/progress/sections.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # Touying 的 Sections 6 | 7 | Touying 维护了一份自己的 sections state，用于记录 slides 的 sections 和 subsections。 8 | 9 | ## touying-outline 10 | 11 | `#touying-outline(enum-args: (:), padding: 0pt)` 用于显示一个简单的大纲。 12 | 13 | 14 | ## touying-final-sections 15 | 16 | `#states.touying-final-sections(final-sections => ..)` 用于自定义显示大纲。 17 | 18 | 19 | ## touying-progress-with-sections 20 | 21 | ```typst 22 | #states.touying-progress-with-sections((current-sections: .., final-sections: .., current-slide-number: .., last-slide-number: ..) => ..) 23 | ``` 24 | 25 | 功能最强大，你可以用其搭建任意复杂的进度展示。 26 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.3.2+/themes/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "主题", 3 | "position": 9, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "使用 Touying 很便利的一点就是，你可以使用 Touying 提供的主题，或者是借助 Touying 创建自己的主题或模板。" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.3.2+/utilities/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "工具", 3 | "position": 12, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "一些便利的工具函数。" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.3.2+/utilities/fit-to.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # Fit to height / width 6 | 7 | 感谢 [ntjess](https://github.com/ntjess) 的代码。 8 | 9 | ## Fit to height 10 | 11 | 如果你需要将图片占满剩余的 slide 高度，你可以来试试 `fit-to-height` 函数： 12 | 13 | ```typst 14 | #utils.fit-to-height(1fr)[BIG] 15 | ``` 16 | 17 | 函数定义： 18 | 19 | ```typst 20 | #let fit-to-height( 21 | width: none, prescale-width: none, grow: true, shrink: true, height, body 22 | ) = { .. } 23 | ``` 24 | 25 | 参数： 26 | 27 | - `width`: 如果指定，这将确定缩放后内容的宽度。因此，如果您希望缩放的内容填充幻灯片宽度的一半，则可以使用 `width: 50%`。 28 | - `prescale-width`: 此参数允许您使 Typst 的布局假设给定的内容在缩放之前要布局在一定宽度的容器中。例如，您可以使用 `prescale-width: 200%` 假设幻灯片的宽度为原来的两倍。 29 | - `grow`: 是否可扩张，默认为 `true`。 30 | - `shrink`: 是否可收缩，默认为 `true`。 31 | - `height`: 需要指定的高度。 32 | - `body`: 具体的内容。 33 | 34 | 35 | ## Fit to width 36 | 37 | 如果你需要限制标题宽度刚好占满 slide 的宽度，你可以来试试 `fit-to-width` 函数： 38 | 39 | ```typst 40 | #utils.fit-to-width(1fr)[#lorem(20)] 41 | ``` 42 | 43 | 函数定义： 44 | 45 | ```typst 46 | #let fit-to-width(grow: true, shrink: true, width, body) = { .. } 47 | ``` 48 | 49 | 参数： 50 | 51 | - `grow`: 是否可扩张，默认为 `true`。 52 | - `shrink`: 是否可收缩，默认为 `true`。 53 | - `width`: 需要指定的宽度。 54 | - `body`: 具体的内容。 55 | 56 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.3.2+/utilities/oop.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # 面向对象编程 6 | 7 | Touying 提供了一些便利的工具函数，便于进行面向对象编程。 8 | 9 | --- 10 | 11 | ```typst 12 | #let call-or-display(self, it) = { 13 | if type(it) == function { 14 | return it(self) 15 | } else { 16 | return it 17 | } 18 | } 19 | ``` 20 | 调用或原样输出。 21 | 22 | --- 23 | 24 | ```typst 25 | #let methods(self) = { .. } 26 | ``` 27 | 用于为方法绑定 self 并返回，十分常用。 28 | 29 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.3.x/dynamic/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "动态幻灯片", 3 | "position": 7, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "想要在 PDF 中创建动画，我们就需要为同一个 slide 创建多个略有不同的页面，以便通过切换页面的方式实现动画，我们称这些页面为 subslides。" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.3.x/dynamic/cover.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 4 3 | --- 4 | 5 | # Cover 函数 6 | 7 | 正如您已经了解的那样，`uncover` 和 `#pause` 均会使用 `cover` 函数对不显示的内容进行遮盖。那么，这里的 `cover` 函数究竟是什么呢？ 8 | 9 | 10 | ## 默认 Cover 函数：`hide` 11 | 12 | `cover` 函数是保存在 `s.methods.cover` 的一个方法，后续 `uncover` 和 `#pause` 均会在这里取出 `cover` 函数来使用。 13 | 14 | 默认的 `cover` 函数是 [hide](https://typst.app/docs/reference/layout/hide/) 函数，这个函数能将内部的内容更改为不可见的，且不会影响布局。 15 | 16 | 17 | ## 更新 Cover 函数 18 | 19 | 有的情况下，您想用您自己的 `cover` 函数，那么您可以通过 20 | 21 | ```typst 22 | let s = (s.methods.update-cover)(self: s, is-method: true, cover-fn) 23 | ``` 24 | 25 | 方法来设置您自己的 `cover` 函数，其中如果设置 `is-method: false`，则 Touying 会帮您将 `cover-fn` 包装成一个方法。 26 | 27 | 28 | ## 半透明 Cover 函数 29 | 30 | Touying 提供了半透明 Cover 函数的支持，只需要加入 31 | 32 | ```typst 33 | #let s = (s.methods.enable-transparent-cover)(self: s) 34 | ``` 35 | 36 | 即可开启，其中你可以通过 `alpha: ..` 参数调节透明度。 37 | 38 | 39 | :::warning[警告] 40 | 41 | 注意，这里的 `transparent-cover` 并不能像 `hide` 一样不影响文本布局，因为里面有一层 `box`，因此可能会破坏页面原有的结构。 42 | 43 | ::: 44 | 45 | 46 | :::tip[原理] 47 | 48 | `enable-transparent-cover` 方法定义为 49 | 50 | ```typst 51 | #let s.methods.enable-transparent-cover = ( 52 | self: none, 53 | constructor: rgb, 54 | alpha: 85%, 55 | ) => { 56 | self.methods.cover = (self: none, body) => { 57 | utils.cover-with-rect( 58 | fill: utils.update-alpha( 59 | constructor: constructor, 60 | self.page-args.fill, 61 | alpha, 62 | ), 63 | body 64 | ) 65 | } 66 | self 67 | } 68 | ``` 69 | 70 | 可以看出，其是通过 `utils.cover-with-rect` 创建了一个与背景色同色的半透明矩形遮罩，以模拟内容透明的效果，其中 `constructor: rgb` 和 `alpha: 85%` 分别表明了背景色的构造函数与透明程度。 71 | 72 | ::: -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.3.x/dynamic/equation.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 3 3 | --- 4 | 5 | # 数学公式动画 6 | 7 | Touying 还提供了一个独特且十分有用的功能，即数学公式动画，它让你可以方便地在数学公式里使用 `pause` 和 `meanwhile`。 8 | 9 | ## 简单动画 10 | 11 | 让我们先来看一个例子： 12 | 13 | ```typst 14 | #slide[ 15 | Touying equation with pause: 16 | 17 | #touying-equation(` 18 | f(x) &= pause x^2 + 2x + 1 \ 19 | &= pause (x + 1)^2 \ 20 | `) 21 | 22 | #meanwhile 23 | 24 | Touying equation is very simple. 25 | ] 26 | ``` 27 | 28 | ![image](https://github.com/touying-typ/touying/assets/34951714/d176e61f-c0da-4c2a-a1bf-52621be5adb2) 29 | 30 | 31 | 我们使用 `touying-equation` 函数来实现在数学公式文本内部使用 `pause` 和 `meanwhile`（事实上，你也能用 `#pause` 或者 `#pause;`）。 32 | 33 | 正如你料想的一样，数学公式会分步显示，这很适合给让演讲者演示自己的数学公式推理思路。 34 | 35 | :::warning[警告] 36 | 37 | 虽然 `touying-equation` 函数很便利，但是您需要时刻注意，`touying-equation` 并不会做复杂的语法分析，只是单纯地正则表达式分割字符串，因此您不应在 `display(..)` 这类函数内部使用 `pause` 或 `meanwhile`！ 38 | 39 | ::: 40 | 41 | 42 | ## 复杂动画 43 | 44 | 事实上，我们也可以在 `touying-equation` 内部使用 `only`、`uncover` 和 `alternatives`，只是需要一点技巧： 45 | 46 | ```typst 47 | #slide(repeat: 3, self => [ 48 | #let (uncover, only, alternatives) = utils.methods(self) 49 | 50 | #touying-equation(scope: (uncover: uncover), ` 51 | f(x) &= pause x^2 + 2x + uncover("3-", 1) \ 52 | &= pause (x + 1)^2 \ 53 | `) 54 | ]) 55 | ``` 56 | 57 | ![image](https://github.com/touying-typ/touying/assets/34951714/f2df14a2-6424-4c53-81f7-1595aa330660) 58 | 59 | 60 | 我们可以在 `touying-equation` 的 `scope` 参数中将我们需要用到的函数传递进去，例如这里的 `uncover`。 61 | 62 | 63 | ## 参数 64 | 65 | `touying-equation` 的函数定义为 66 | 67 | ```typst 68 | #let touying-equation(block: true, numbering: none, supplement: auto, scope: (:), body) = { .. } 69 | ``` 70 | 71 | 因此，我们可以像使用普通数学公式一样，为 `touying-equation` 传入 `block`、`numbering` 和 `supplement` 参数。 -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.3.x/dynamic/handout.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 6 3 | --- 4 | 5 | # 创建讲义 6 | 7 | 在看幻灯片、听课的同时，听众往往会希望有一个讲义，以便能够回顾理解困难的地方，所以，作者最好能给听众提供这样一份讲义，如果能在听课前提供更好。 8 | 9 | 讲义模式与普通模式的区别是，其不需要过于繁杂的动画效果，因此只会保留每个 slide 的最后一张 subslide。 10 | 11 | 开启讲义模式是很简单的： 12 | 13 | ```typst 14 | #let s = (s.methods.enable-handout-mode)(self: s) 15 | ``` 16 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.3.x/dynamic/simple.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # 简单动画 6 | 7 | Touying 为简单的动画效果提供了两个标记：`#pause` 和 `#meanwhile`。 8 | 9 | ## pause 10 | 11 | `#pause` 的用途很简单，就是用于将后续的内容放到下一张 subslide 中，并且可以使用多个 `#pause` 以创建多张 subslides，一个简单的例子： 12 | 13 | ```typst 14 | #slide[ 15 | First #pause Second 16 | 17 | #pause 18 | 19 | Third 20 | ] 21 | ``` 22 | 23 | ![image](https://github.com/touying-typ/touying/assets/34951714/a3bed1d3-e660-456d-8a54-a914436f43bf) 24 | 25 | 这个例子将会创建三张 subslides，逐渐地将内容展示出来。 26 | 27 | 如你所见，`#pause` 既可以放在行内，也可以放在单独的一行。 28 | 29 | 30 | ## meanwhile 31 | 32 | 有些情况下，我们需要在 `#pause` 的同时展示一些其他内容，这时候我们就可以用 `#meanwhile`。 33 | 34 | ```typst 35 | #slide[ 36 | First 37 | 38 | #pause 39 | 40 | Second 41 | 42 | #meanwhile 43 | 44 | Third 45 | 46 | #pause 47 | 48 | Fourth 49 | ] 50 | ``` 51 | 52 | ![image](https://github.com/touying-typ/touying/assets/34951714/24ca19a3-b27c-4d31-ab75-09c37911e6ac) 53 | 54 | 这个例子只会创建两张 subslides，并且 "First" 和 "Third" 同时显示，"Second" 和 "Fourth" 同时显示。 55 | 56 | 57 | ## 如何处理 set-show rules? 58 | 59 | 如果你在 `slide[..]` 里面使用了 set-show rules，你会惊讶的发现，在那之后的 `#pause` 和 `#meanwhile` 都失效了。这是因为 Touying 无法探知 `styled(..)` 内部的内容（set-show rules 后的内容会被 `styled` 囊括起来）。 60 | 61 | 为了解决这个问题，Touying 为 `#slide()` 函数提供了一个 `setting` 参数，你可以将你的 set-show rules 放到 `setting` 参数里，例如修改字体颜色： 62 | 63 | ```typst 64 | #slide(setting: body => { 65 | set text(fill: blue) 66 | body 67 | })[ 68 | First 69 | 70 | #pause 71 | 72 | Second 73 | ] 74 | ``` 75 | 76 | ![image](https://github.com/touying-typ/touying/assets/34951714/8e31fc8a-5ab1-4181-a46a-fa96cf790dff) 77 | 78 | 79 | 同理，Touying 目前也不支持 `grid` 这类 layout 函数内部的 `#pause` 和 `#meanwhile`，也是由于同样的限制，但是你可以使用 `#slide()` 的 `composer` 参数，大部分情况下都应该能满足需求。 80 | 81 | 82 | :::tip[原理] 83 | 84 | Touying 不依赖 `counter` 和 `locate` 来实现 `#pause`，而是用 Typst 脚本写了一个 parser。它会将输入内容块作为 sequence 解析，然后改造重组这个 sequence 为我们需要的一系列 subslides。 85 | 86 | ::: -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.3.x/external/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "外部工具", 3 | "position": 13, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "使用外部工具与 Touying 集成。" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.3.x/external/pdfpc.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # pdfpc 6 | 7 | [pdfpc](https://pdfpc.github.io/) 是一个 "对 PDF 文档具有多显示器支持的演示者控制台"。这意味着，您可以使用它以 PDF 页面的形式显示幻灯片，并且还具有一些已知的出色功能，就像 PowerPoint 一样。 8 | 9 | pdfpc 有一个 JSON 格式的 `.pdfpc` 文件，它可以为 PDF slides 提供更多的信息。虽然您可以手动编写它，但你也可以通过 Touying 来管理。 10 | 11 | 12 | ## 加入 Metadata 13 | 14 | Touying 与 [Polylux](https://polylux.dev/book/external/pdfpc.html) 保持一致，以避免 API 之间的冲突。 15 | 16 | 例如，你可以通过 `#pdfpc.speaker-note("This is a note that only the speaker will see.")` 加入 notes。 17 | 18 | 19 | ## pdfpc 配置 20 | 21 | 为了加入 pdfpc 配置，你可以使用 22 | 23 | ```typst 24 | #let s = (s.methods.append-preamble)(self: s, pdfpc.config( 25 | duration-minutes: 30, 26 | start-time: datetime(hour: 14, minute: 10, second: 0), 27 | end-time: datetime(hour: 14, minute: 40, second: 0), 28 | last-minutes: 5, 29 | note-font-size: 12, 30 | disable-markdown: false, 31 | default-transition: ( 32 | type: "push", 33 | duration-seconds: 2, 34 | angle: ltr, 35 | alignment: "vertical", 36 | direction: "inward", 37 | ), 38 | )) 39 | ``` 40 | 41 | 加入对应的配置，具体配置方法可以参考 [Polylux](https://polylux.dev/book/external/pdfpc.html)。 42 | 43 | 44 | ## 输出 .pdfpc 文件 45 | 46 | 假设你的文档为 `./example.typ`，则你可以通过 47 | 48 | ```sh 49 | typst query --root . ./example.typ --field value --one "" > ./example.pdfpc 50 | ``` 51 | 52 | 直接导出 `.pdfpc` 文件。 53 | 54 | 借助 Touying 与 Polylux 的兼容性，你可以让 Polylux 也支持直接导出，只需要加入下面的代码即可。 55 | 56 | ``` 57 | #import "@preview/touying:0.3.1" 58 | 59 | #locate(loc => touying.pdfpc.pdfpc-file(loc)) 60 | ``` -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.3.x/external/typst-preview.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # Typst Preview 6 | 7 | VS Code 的 Typst Preview 插件提供了优秀的 slide mode，我们可以用其预览和放映 slides。 8 | 9 | 按下 `Ctrl/Cmd + Shift + P`，并输入 `Typst Preview: Preview current file in slide mode`，就可以打开 slide mode 的预览。 10 | 11 | 按下 `Ctrl/Cmd + Shift + P`，并输入 `Typst Preview: Preview current file in browser and slide mode`，就可以在浏览器打开 slide mode。 12 | 13 | 这时候你可以按下 `F11` 之类的键，进入浏览器的全屏模式，就可以用于 slides 放映了。 14 | 15 | 由于 Typst Preview 是基于 SVG 的，因此可以播放 GIF 动图，这对于动态 slides 很有帮助。 16 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.3.x/integration/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "第三方包集成", 3 | "position": 8, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "让第三方包与 Touying 集成。" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.3.x/integration/codly.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 5 3 | --- 4 | 5 | # Codly 6 | 7 | 在使用 codly 的时候，我们应该使用 `s.methods.append-preamble` 方法进行初始化。 8 | 9 | ```typst 10 | #import "@preview/touying:0.3.1": * 11 | #import "@preview/codly:0.2.0": * 12 | 13 | #let s = themes.simple.register(s, aspect-ratio: "16-9") 14 | #let s = (s.methods.append-preamble)(self: s)[ 15 | #codly(languages: ( 16 | rust: (name: "Rust", icon: "\u{fa53}", color: rgb("#CE412B")), 17 | )) 18 | ] 19 | #let (init, slides) = utils.methods(s) 20 | #show heading.where(level: 2): set block(below: 1em) 21 | #show: init 22 | #show: codly-init.with() 23 | 24 | #let (slide,) = utils.slides(s) 25 | #show: slides 26 | 27 | #slide[ 28 | == First slide 29 | 30 | #raw(lang: "rust", block: true, 31 | `pub fn main() { 32 | println!("Hello, world!"); 33 | }`.text) 34 | ] 35 | ``` 36 | 37 | ![image](https://github.com/touying-typ/touying/assets/34951714/0be2fbaf-cc03-4776-932f-259503d5e23a) 38 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.3.x/integration/fletcher.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 4 3 | --- 4 | 5 | # Fletcher 6 | 7 | Touying 提供了 `touying-reducer`，它能为 fletcher 加入 `pause` 和 `meanwhile` 动画。 8 | 9 | 一个例子： 10 | 11 | ```typst 12 | #import "@preview/touying:0.3.1": * 13 | #import "@preview/cetz:0.2.1" 14 | #import "@preview/fletcher:0.4.2" as fletcher: node, edge 15 | 16 | #let cetz-canvas = touying-reducer.with(reduce: cetz.canvas, cover: cetz.draw.hide.with(bounds: true)) 17 | #let fletcher-diagram = touying-reducer.with(reduce: (arr, ..args) => fletcher.diagram(..args, ..arr)) 18 | 19 | #let s = themes.metropolis.register(s, aspect-ratio: "16-9", footer: self => self.info.institution) 20 | #let (init, slides) = utils.methods(s) 21 | #show: init 22 | 23 | #let (slide,) = utils.slides(s) 24 | #show: slides.with(title-slide: false, outline-slide: false) 25 | 26 | // cetz animation 27 | #slide[ 28 | Cetz in Touying: 29 | 30 | #cetz-canvas({ 31 | import cetz.draw: * 32 | 33 | rect((0,0), (5,5)) 34 | 35 | (pause,) 36 | 37 | rect((0,0), (1,1)) 38 | rect((1,1), (2,2)) 39 | rect((2,2), (3,3)) 40 | 41 | (pause,) 42 | 43 | line((0,0), (2.5, 2.5), name: "line") 44 | }) 45 | ] 46 | 47 | // fletcher animation 48 | #slide[ 49 | Fletcher in Touying: 50 | 51 | #fletcher-diagram( 52 | node-stroke: .1em, 53 | node-fill: gradient.radial(blue.lighten(80%), blue, center: (30%, 20%), radius: 80%), 54 | spacing: 4em, 55 | edge((-1,0), "r", "-|>", `open(path)`, label-pos: 0, label-side: center), 56 | node((0,0), `reading`, radius: 2em), 57 | edge((0,0), (0,0), `read()`, "--|>", bend: 130deg), 58 | pause, 59 | edge(`read()`, "-|>"), 60 | node((1,0), `eof`, radius: 2em), 61 | pause, 62 | edge(`close()`, "-|>"), 63 | node((2,0), `closed`, radius: 2em, extrude: (-2.5, 0)), 64 | edge((0,0), (2,0), `close()`, "-|>", bend: -40deg), 65 | ) 66 | ] 67 | ``` 68 | 69 | ![image](https://github.com/touying-typ/touying/assets/34951714/9ba71f54-2a5d-4144-996c-4a42833cc5cc) -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.3.x/integration/mitex.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # MiTeX 6 | 7 | 在创建 slides 的过程中，往往我们已经有了一个 LaTeX 数学公式，只是想贴到 slides 的里面，而不想把它转写成 Typst 数学公式，这时候我们就可以用 [MiTeX](https://github.com/mitex-rs/mitex) 了。 8 | 9 | 示例： 10 | 11 | ```typst 12 | #import "@preview/mitex:0.2.1": * 13 | 14 | Write inline equations like #mi("x") or #mi[y]. 15 | 16 | Also block equations (this case is from #text(blue.lighten(20%), link("https://katex.org/")[katex.org])): 17 | 18 | #mitex(` 19 | \newcommand{\f}[2]{#1f(#2)} 20 | \f\relax{x} = \int_{-\infty}^\infty 21 | \f\hat\xi\,e^{2 \pi i \xi x} 22 | \,d\xi 23 | `) 24 | ``` 25 | 26 | ![image](https://github.com/mitex-rs/mitex/assets/34951714/c425b2ae-b50b-46a8-a451-4d9e8e70626b) 27 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.3.x/integration/polylux.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 6 3 | --- 4 | 5 | # Polylux 6 | 7 | 借助 Touying 与 Polylux 的兼容性，你可以让 Polylux 也支持直接导出，只需要在你的 Polylux 源代码中加入下面的代码即可。 8 | 9 | ``` 10 | #import "@preview/touying:0.3.1" 11 | 12 | #locate(loc => touying.pdfpc.pdfpc-file(loc)) 13 | ``` 14 | 15 | 假设你的文档为 `./example.typ`，则你可以通过 16 | 17 | ```sh 18 | typst query --root . ./example.typ --field value --one "" > ./example.pdfpc 19 | ``` 20 | 21 | 直接导出 `.pdfpc` 文件，而不需要使用额外的 `polylux2pdfpc` 程序。 -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.3.x/intro.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Touying 介绍 6 | 7 | [Touying](https://github.com/touying-typ/touying) 是为 Typst 开发的幻灯片/演示文稿包。Touying 也类似于 LaTeX 的 Beamer，但是得益于 Typst，你可以拥有更快的渲染速度与更简洁的语法。后面，我们会使用 slides 指代幻灯片，slide 指代单张幻灯片，subslide 指代子幻灯片。 8 | 9 | ## 为什么使用 Touying 10 | 11 | - 相较于 PowerPoint，Touying 并非「所示即所得的」，你可以使用一种「内容与样式分离」的方式编写你的 slides，尤其是 Typst 作为一个新兴的排版语言，提供了简洁但强大的语法，对于代码块、数学公式和定理等内容有着更好的支持。另一个优势是，在有着模板的情况下，用 Touying 编写 slides 要比 PowerPoint 快得多。因此 Touying 相较于 PowerPoint，更适合有着「科研写作」需求的用户使用。 12 | - 相较于 Markdown Slides，Touying 所依托的 Typst 有着更强大的排版控制能力，例如页眉、页脚、布局和便捷的自定义函数，而这是 Markdown 很难具备、或者说很难做好的能力。并且 Touying 提供了 `#pause` 和 `#meanwhile` 标记，提供了更为便捷的动态 slides 能力。 13 | - 相较于 Beamer，Touying 有着更快的编译速度、更简洁的语法，以及更简单的自定义主题的能力。相较于 Beamer 动辄几秒几十秒的编译时间，Touying 的编译速度基本上能够维持在几毫秒几十毫秒。并且 Touying 的语法相较于 Beamer 更为简洁，也更容易更改模板主题，以及创建你自己的模板。在功能上，Touying 支持了 Beamer 大部分的能力，并且还提供了一些 Beamer 所没有的便利功能。 14 | - 相较于 Polylux，Touying 提供了一种 oop 风格的语法，能够通过全局单例模拟提供「全局变量」的能力，进而可以方便地编写主题。并且 Touying 并不依赖 `counter` 和 `locate` 来实现 `#pause`，因此能有更好的性能。Touying 自身定位是一个社区驱动的项目（我们欢迎更多的人加入），并且不会过分强调维持 API 的一致性，而是选择维护多个版本的文档，因而能够提供更多新颖但强大的功能。 15 | 16 | ## 名称来源 17 | 18 | Touying 取自中文里的「投影」，在英文中意为 project。相较而言，LaTeX 中的 beamer 就是德文的投影仪的意思。 19 | 20 | ## 关于文档 21 | 22 | 这个文档通过 [Docusaurus](https://docusaurus.io/) 驱动开发，我们将会为 Touying 维持英文和中文版本的文档，并且每个大版本维护一份文档，以便你随时可以查阅旧版本的 Touying 文档，并且可以更容易地迁移到新版本。 23 | 24 | Docusaurus 创建新版本： 25 | 26 | ```sh 27 | npm run docusaurus docs:version 0.y.x 28 | ``` 29 | 30 | Docusaurus 多语言： 31 | 32 | ```sh 33 | npm run start -- --locale zh 34 | ``` 35 | 36 | ## 贡献 37 | 38 | Touying 是免费、开源且社区驱动的。如果你感兴趣，你可以随时访问 [GitHub](https://github.com/touying-typ/touying) 并提出 issue 或 PR，我们也同样欢迎你加入 [touying-typ](https://github.com/touying-typ) 组织。 39 | 40 | ## License 41 | 42 | Touying is released under the [MIT license](https://github.com/touying-typ/touying/blob/main/LICENSE). -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.3.x/progress/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "进度", 3 | "position": 11, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "管理和展示 Touying 中的进度，例如 counters 和 sections 等。" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.3.x/progress/counters.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Touying 的计数器 6 | 7 | Touying 的状态均放置于 `states` 命名空间下，包括所有的计数器。 8 | 9 | ## slide 计数器 10 | 11 | 你可以通过 `states.slide-counter` 获取 slide 计数器，并且通过 `states.slide-counter.display()` 展示当前 slide 的序号。 12 | 13 | 14 | ## last-slide 计数器 15 | 16 | 因为有些情形下，我们需要为 slides 加入后记，因此就有了冻结 last-slide 计数器的需求，因此这里维护了第二个计数器。 17 | 18 | 我们可以使用 `states.last-slide-number` 展示后记前最后一张 slide 的序号。 19 | 20 | 21 | ## 进度 22 | 23 | 我们可以使用 24 | 25 | ```typst 26 | #states.touying-progress(ratio => ..) 27 | ``` 28 | 29 | 来显示当前的进度。 30 | 31 | 32 | ## 后记 33 | 34 | 你可以使用 35 | 36 | ```typst 37 | // appendix by freezing last-slide-number 38 | #let s = (s.methods.appendix)(self: s) 39 | #let (slide,) = utils.methods(s) 40 | 41 | #slide[ 42 | appendix 43 | ] 44 | ``` 45 | 46 | 语法进入后记。 47 | 48 | 并且 `#let s = (s.methods.appendix-in-outline)(self: s, false)` 可以让后记的 section 不显示在大纲中。 -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.3.x/progress/sections.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # Touying 的 Sections 6 | 7 | Touying 维护了一份自己的 sections state，用于记录 slides 的 sections 和 subsections。 8 | 9 | ## touying-outline 10 | 11 | `#touying-outline(enum-args: (:), padding: 0pt)` 用于显示一个简单的大纲。 12 | 13 | 14 | ## touying-final-sections 15 | 16 | `#states.touying-final-sections(final-sections => ..)` 用于自定义显示大纲。 17 | 18 | 19 | ## touying-progress-with-sections 20 | 21 | ```typst 22 | #states.touying-progress-with-sections((current-sections: .., final-sections: .., current-slide-number: .., last-slide-number: ..) => ..) 23 | ``` 24 | 25 | 功能最强大，你可以用其搭建任意复杂的进度展示。 26 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.3.x/sections.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 3 3 | --- 4 | 5 | # 节与小节 6 | 7 | ## 结构 8 | 9 | 与 Beamer 相同，Touying 同样有着 section 和 subsection 的概念。 10 | 11 | 一般而言，1 级、2 级和 3 级标题分别用来对应 section、subsection 和 title，例如 dewdrop 主题。 12 | 13 | ```typst 14 | #import "@preview/touying:0.3.1": * 15 | 16 | #let s = themes.dewdrop.register(s) 17 | #let (init, slides) = utils.methods(s) 18 | #show: init 19 | 20 | #let (slide,) = utils.slides(s) 21 | #show: slides 22 | 23 | = Section 24 | 25 | == Subsection 26 | 27 | === Title 28 | 29 | Hello, Touying! 30 | ``` 31 | 32 | ![image](https://github.com/touying-typ/touying/assets/34951714/1574e74d-25c1-418f-a84f-b974f42edae5) 33 | 34 | 但是很多时候我们并不需要 subsection，因此也会使用 1 级和 2 级标题来分别对应 section 和 title，例如 university 主题。 35 | 36 | ```typst 37 | #import "@preview/touying:0.3.1": * 38 | 39 | #let s = themes.university.register(s) 40 | #let (init, slides) = utils.methods(s) 41 | #show: init 42 | 43 | #let (slide,) = utils.slides(s) 44 | #show: slides 45 | 46 | = Section 47 | 48 | == Title 49 | 50 | Hello, Touying! 51 | ``` 52 | 53 | ![image](https://github.com/touying-typ/touying/assets/34951714/9dd77c98-9c08-4811-872e-092bbdebf394) 54 | 55 | 实际上，我们可以通过 `slides` 函数的 `slide-level` 参数来控制这里的行为。`slide-level` 代表着嵌套结构的复杂度，从 0 开始计算。例如 `#show: slides.with(slide-level: 2)` 等价于 `section`，`subsection` 和 `title` 结构；而 `#show: slides.with(slide-level: 1)` 等价于 `section` 和 `title` 结构。 56 | 57 | 58 | ## 目录 59 | 60 | 在 Touying 中显示目录很简单： 61 | 62 | ```typst 63 | #import "@preview/touying:0.3.1": * 64 | 65 | #let (init, slides, alert, touying-outline) = utils.methods(s) 66 | #show: init 67 | 68 | #let (slide,) = utils.slides(s) 69 | #show: slides.with(slide-level: 2) 70 | 71 | = Section 72 | 73 | == Subsection 74 | 75 | === Title 76 | 77 | ==== Table of contents 78 | 79 | #touying-outline() 80 | ``` 81 | 82 | ![image](https://github.com/touying-typ/touying/assets/34951714/3cc09550-d3cc-40c2-a315-22ca8173798f) 83 | 84 | 其中 `touying-oultine()` 的定义为： 85 | 86 | ```typst 87 | #let touying-outline(enum-args: (:), padding: 0pt) = { .. } 88 | ``` 89 | 90 | 你可以通过 `enum-args` 修改内部 enum 的参数。 91 | 92 | 如果你对目录有着复杂的自定义需求，你可以使用 93 | 94 | ```typst 95 | #states.touying-final-sections(sections => ..) 96 | ``` 97 | 98 | 正如 dewdrop 主题所做的那样。 -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.3.x/themes/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "主题", 3 | "position": 9, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "使用 Touying 很便利的一点就是，你可以使用 Touying 提供的主题，或者是借助 Touying 创建自己的主题或模板。" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.3.x/utilities/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "工具", 3 | "position": 12, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "一些便利的工具函数。" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.3.x/utilities/fit-to.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # Fit to height / width 6 | 7 | 感谢 [ntjess](https://github.com/ntjess) 的代码。 8 | 9 | ## Fit to height 10 | 11 | 如果你需要将图片占满剩余的 slide 高度，你可以来试试 `fit-to-height` 函数： 12 | 13 | ```typst 14 | #utils.fit-to-height(1fr)[BIG] 15 | ``` 16 | 17 | 函数定义： 18 | 19 | ```typst 20 | #let fit-to-height( 21 | width: none, prescale-width: none, grow: true, shrink: true, height, body 22 | ) = { .. } 23 | ``` 24 | 25 | 参数： 26 | 27 | - `width`: 如果指定，这将确定缩放后内容的宽度。因此，如果您希望缩放的内容填充幻灯片宽度的一半，则可以使用 `width: 50%`。 28 | - `prescale-width`: 此参数允许您使 Typst 的布局假设给定的内容在缩放之前要布局在一定宽度的容器中。例如，您可以使用 `prescale-width: 200%` 假设幻灯片的宽度为原来的两倍。 29 | - `grow`: 是否可扩张，默认为 `true`。 30 | - `shrink`: 是否可收缩，默认为 `true`。 31 | - `height`: 需要指定的高度。 32 | - `body`: 具体的内容。 33 | 34 | 35 | ## Fit to width 36 | 37 | 如果你需要限制标题宽度刚好占满 slide 的宽度，你可以来试试 `fit-to-width` 函数： 38 | 39 | ```typst 40 | #utils.fit-to-width(1fr)[#lorem(20)] 41 | ``` 42 | 43 | 函数定义： 44 | 45 | ```typst 46 | #let fit-to-width(grow: true, shrink: true, width, body) = { .. } 47 | ``` 48 | 49 | 参数： 50 | 51 | - `grow`: 是否可扩张，默认为 `true`。 52 | - `shrink`: 是否可收缩，默认为 `true`。 53 | - `width`: 需要指定的宽度。 54 | - `body`: 具体的内容。 55 | 56 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.3.x/utilities/oop.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # 面向对象编程 6 | 7 | Touying 提供了一些便利的工具函数，便于进行面向对象编程。 8 | 9 | --- 10 | 11 | ```typst 12 | #let call-or-display(self, it) = { 13 | if type(it) == function { 14 | return it(self) 15 | } else { 16 | return it 17 | } 18 | } 19 | ``` 20 | 调用或原样输出。 21 | 22 | --- 23 | 24 | ```typst 25 | #let methods(self) = { .. } 26 | ``` 27 | 用于为方法绑定 self 并返回，十分常用。 28 | 29 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.4.0+/dynamic/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "动态幻灯片", 3 | "position": 8, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "想要在 PDF 中创建动画，我们就需要为同一个 slide 创建多个略有不同的页面，以便通过切换页面的方式实现动画，我们称这些页面为 subslides。" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.4.0+/dynamic/cover.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 4 3 | --- 4 | 5 | # Cover 函数 6 | 7 | 正如您已经了解的那样，`uncover` 和 `#pause` 均会使用 `cover` 函数对不显示的内容进行遮盖。那么，这里的 `cover` 函数究竟是什么呢？ 8 | 9 | 10 | ## 默认 Cover 函数：`hide` 11 | 12 | `cover` 函数是保存在 `s.methods.cover` 的一个方法，后续 `uncover` 和 `#pause` 均会在这里取出 `cover` 函数来使用。 13 | 14 | 默认的 `cover` 函数是 [hide](https://typst.app/docs/reference/layout/hide/) 函数，这个函数能将内部的内容更改为不可见的，且不会影响布局。 15 | 16 | 17 | ## 更新 Cover 函数 18 | 19 | 有的情况下，您想用您自己的 `cover` 函数，那么您可以通过 20 | 21 | ```typst 22 | let s = (s.methods.update-cover)(self: s, is-method: true, cover-fn) 23 | ``` 24 | 25 | 方法来设置您自己的 `cover` 函数，其中如果设置 `is-method: false`，则 Touying 会帮您将 `cover-fn` 包装成一个方法。 26 | 27 | 28 | ## 半透明 Cover 函数 29 | 30 | Touying 提供了半透明 Cover 函数的支持，只需要加入 31 | 32 | ```typst 33 | #let s = (s.methods.enable-transparent-cover)(self: s) 34 | ``` 35 | 36 | 即可开启，其中你可以通过 `alpha: ..` 参数调节透明度。 37 | 38 | 39 | :::warning[警告] 40 | 41 | 注意，这里的 `transparent-cover` 并不能像 `hide` 一样不影响文本布局，因为里面有一层 `box`，因此可能会破坏页面原有的结构。 42 | 43 | ::: 44 | 45 | 46 | :::tip[原理] 47 | 48 | `enable-transparent-cover` 方法定义为 49 | 50 | ```typst 51 | #let s.methods.enable-transparent-cover = ( 52 | self: none, 53 | constructor: rgb, 54 | alpha: 85%, 55 | ) => { 56 | self.methods.cover = (self: none, body) => { 57 | utils.cover-with-rect( 58 | fill: utils.update-alpha( 59 | constructor: constructor, 60 | self.page-args.fill, 61 | alpha, 62 | ), 63 | body 64 | ) 65 | } 66 | self 67 | } 68 | ``` 69 | 70 | 可以看出，其是通过 `utils.cover-with-rect` 创建了一个与背景色同色的半透明矩形遮罩，以模拟内容透明的效果，其中 `constructor: rgb` 和 `alpha: 85%` 分别表明了背景色的构造函数与透明程度。 71 | 72 | ::: -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.4.0+/dynamic/equation.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 3 3 | --- 4 | 5 | # 数学公式动画 6 | 7 | Touying 还提供了一个独特且十分有用的功能，即数学公式动画，它让你可以方便地在数学公式里使用 `pause` 和 `meanwhile`。 8 | 9 | ## 简单动画 10 | 11 | 让我们先来看一个例子： 12 | 13 | ```typst 14 | #slide[ 15 | Touying equation with pause: 16 | 17 | #touying-equation(` 18 | f(x) &= pause x^2 + 2x + 1 \ 19 | &= pause (x + 1)^2 \ 20 | `) 21 | 22 | #meanwhile 23 | 24 | Touying equation is very simple. 25 | ] 26 | ``` 27 | 28 | ![image](https://github.com/touying-typ/touying/assets/34951714/d176e61f-c0da-4c2a-a1bf-52621be5adb2) 29 | 30 | 31 | 我们使用 `touying-equation` 函数来实现在数学公式文本内部使用 `pause` 和 `meanwhile`（事实上，你也能用 `#pause` 或者 `#pause;`）。 32 | 33 | 正如你料想的一样，数学公式会分步显示，这很适合给让演讲者演示自己的数学公式推理思路。 34 | 35 | :::warning[警告] 36 | 37 | 虽然 `touying-equation` 函数很便利，但是您需要时刻注意，`touying-equation` 并不会做复杂的语法分析，只是单纯地正则表达式分割字符串，因此您不应在 `display(..)` 这类函数内部使用 `pause` 或 `meanwhile`！ 38 | 39 | ::: 40 | 41 | 42 | ## 复杂动画 43 | 44 | 事实上，我们也可以在 `touying-equation` 内部使用 `only`、`uncover` 和 `alternatives`，只是需要一点技巧： 45 | 46 | ```typst 47 | #slide(repeat: 3, self => [ 48 | #let (uncover, only, alternatives) = utils.methods(self) 49 | 50 | #touying-equation(scope: (uncover: uncover), ` 51 | f(x) &= pause x^2 + 2x + uncover("3-", 1) \ 52 | &= pause (x + 1)^2 \ 53 | `) 54 | ]) 55 | ``` 56 | 57 | ![image](https://github.com/touying-typ/touying/assets/34951714/f2df14a2-6424-4c53-81f7-1595aa330660) 58 | 59 | 60 | 我们可以在 `touying-equation` 的 `scope` 参数中将我们需要用到的函数传递进去，例如这里的 `uncover`。 61 | 62 | 63 | ## 参数 64 | 65 | `touying-equation` 的函数定义为 66 | 67 | ```typst 68 | #let touying-equation(block: true, numbering: none, supplement: auto, scope: (:), body) = { .. } 69 | ``` 70 | 71 | 因此，我们可以像使用普通数学公式一样，为 `touying-equation` 传入 `block`、`numbering` 和 `supplement` 参数。 -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.4.0+/dynamic/handout.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 6 3 | --- 4 | 5 | # 创建讲义 6 | 7 | 在看幻灯片、听课的同时，听众往往会希望有一个讲义，以便能够回顾理解困难的地方，所以，作者最好能给听众提供这样一份讲义，如果能在听课前提供更好。 8 | 9 | 讲义模式与普通模式的区别是，其不需要过于繁杂的动画效果，因此只会保留每个 slide 的最后一张 subslide。 10 | 11 | 开启讲义模式是很简单的： 12 | 13 | ```typst 14 | #let s = (s.methods.enable-handout-mode)(self: s) 15 | ``` 16 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.4.0+/dynamic/simple.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # 简单动画 6 | 7 | Touying 为简单的动画效果提供了两个标记：`#pause` 和 `#meanwhile`。 8 | 9 | ## pause 10 | 11 | `#pause` 的用途很简单，就是用于将后续的内容放到下一张 subslide 中，并且可以使用多个 `#pause` 以创建多张 subslides，一个简单的例子： 12 | 13 | ```typst 14 | #slide[ 15 | First #pause Second 16 | 17 | #pause 18 | 19 | Third 20 | ] 21 | ``` 22 | 23 | ![image](https://github.com/touying-typ/touying/assets/34951714/a3bed1d3-e660-456d-8a54-a914436f43bf) 24 | 25 | 这个例子将会创建三张 subslides，逐渐地将内容展示出来。 26 | 27 | 如你所见，`#pause` 既可以放在行内，也可以放在单独的一行。 28 | 29 | 30 | ## meanwhile 31 | 32 | 有些情况下，我们需要在 `#pause` 的同时展示一些其他内容，这时候我们就可以用 `#meanwhile`。 33 | 34 | ```typst 35 | #slide[ 36 | First 37 | 38 | #pause 39 | 40 | Second 41 | 42 | #meanwhile 43 | 44 | Third 45 | 46 | #pause 47 | 48 | Fourth 49 | ] 50 | ``` 51 | 52 | ![image](https://github.com/touying-typ/touying/assets/34951714/24ca19a3-b27c-4d31-ab75-09c37911e6ac) 53 | 54 | 这个例子只会创建两张 subslides，并且 "First" 和 "Third" 同时显示，"Second" 和 "Fourth" 同时显示。 55 | 56 | 57 | ## 如何处理 set-show rules? 58 | 59 | 如果你在 `slide[..]` 里面使用了像 `grid` 这类 layout 函数，你会惊讶地发现其内部的 `#pause` 和 `#meanwhile` 失效了。但是你可以使用 `#slide()` 的 `composer` 参数来布局，大部分情况下都应该能满足需求。 60 | 61 | 62 | :::tip[原理] 63 | 64 | Touying 不依赖 `counter` 和 `locate` 来实现 `#pause`，而是用 Typst 脚本写了一个 parser。它会将输入内容块作为 sequence 解析，然后改造重组这个 sequence 为我们需要的一系列 subslides。 65 | 66 | ::: -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.4.0+/external/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "外部工具", 3 | "position": 14, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "使用外部工具与 Touying 集成。" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.4.0+/external/pdfpc.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # pdfpc 6 | 7 | [pdfpc](https://pdfpc.github.io/) 是一个 "对 PDF 文档具有多显示器支持的演示者控制台"。这意味着，您可以使用它以 PDF 页面的形式显示幻灯片，并且还具有一些已知的出色功能，就像 PowerPoint 一样。 8 | 9 | pdfpc 有一个 JSON 格式的 `.pdfpc` 文件，它可以为 PDF slides 提供更多的信息。虽然您可以手动编写它，但你也可以通过 Touying 来管理。 10 | 11 | 12 | ## 加入 Metadata 13 | 14 | Touying 与 [Polylux](https://polylux.dev/book/external/pdfpc.html) 保持一致，以避免 API 之间的冲突。 15 | 16 | 例如，你可以通过 `#pdfpc.speaker-note("This is a note that only the speaker will see.")` 加入 notes。 17 | 18 | 19 | ## pdfpc 配置 20 | 21 | 为了加入 pdfpc 配置，你可以使用 22 | 23 | ```typst 24 | #let s = (s.methods.append-preamble)(self: s, pdfpc.config( 25 | duration-minutes: 30, 26 | start-time: datetime(hour: 14, minute: 10, second: 0), 27 | end-time: datetime(hour: 14, minute: 40, second: 0), 28 | last-minutes: 5, 29 | note-font-size: 12, 30 | disable-markdown: false, 31 | default-transition: ( 32 | type: "push", 33 | duration-seconds: 2, 34 | angle: ltr, 35 | alignment: "vertical", 36 | direction: "inward", 37 | ), 38 | )) 39 | ``` 40 | 41 | 加入对应的配置，具体配置方法可以参考 [Polylux](https://polylux.dev/book/external/pdfpc.html)。 42 | 43 | 44 | ## 输出 .pdfpc 文件 45 | 46 | 假设你的文档为 `./example.typ`，则你可以通过 47 | 48 | ```sh 49 | typst query --root . ./example.typ --field value --one "" > ./example.pdfpc 50 | ``` 51 | 52 | 直接导出 `.pdfpc` 文件。 53 | 54 | 借助 Touying 与 Polylux 的兼容性，你可以让 Polylux 也支持直接导出，只需要加入下面的代码即可。 55 | 56 | ``` 57 | #import "@preview/touying:0.4.0" 58 | 59 | #locate(loc => touying.pdfpc.pdfpc-file(loc)) 60 | ``` -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.4.0+/external/typst-preview.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # Typst Preview 6 | 7 | VS Code 的 Typst Preview 插件提供了优秀的 slide mode，我们可以用其预览和放映 slides。 8 | 9 | 按下 `Ctrl/Cmd + Shift + P`，并输入 `Typst Preview: Preview current file in slide mode`，就可以打开 slide mode 的预览。 10 | 11 | 按下 `Ctrl/Cmd + Shift + P`，并输入 `Typst Preview: Preview current file in browser and slide mode`，就可以在浏览器打开 slide mode。 12 | 13 | 这时候你可以按下 `F11` 之类的键，进入浏览器的全屏模式，就可以用于 slides 放映了。 14 | 15 | 由于 Typst Preview 是基于 SVG 的，因此可以播放 GIF 动图，这对于动态 slides 很有帮助。 16 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.4.0+/integration/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "第三方包集成", 3 | "position": 9, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "让第三方包与 Touying 集成。" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.4.0+/integration/codly.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 5 3 | --- 4 | 5 | # Codly 6 | 7 | 在使用 codly 的时候，我们应该使用 `s.methods.append-preamble` 方法进行初始化。 8 | 9 | ```typst 10 | #import "@preview/touying:0.4.0": * 11 | #import "@preview/codly:0.2.0": * 12 | 13 | #let s = themes.simple.register(aspect-ratio: "16-9") 14 | #let s = (s.methods.append-preamble)(self: s)[ 15 | #codly(languages: ( 16 | rust: (name: "Rust", icon: "\u{fa53}", color: rgb("#CE412B")), 17 | )) 18 | ] 19 | #let (init, slides) = utils.methods(s) 20 | #show heading.where(level: 2): set block(below: 1em) 21 | #show: init 22 | #show: codly-init.with() 23 | 24 | #let (slide, empty-slide) = utils.slides(s) 25 | #show: slides 26 | 27 | #slide[ 28 | == First slide 29 | 30 | #raw(lang: "rust", block: true, 31 | `pub fn main() { 32 | println!("Hello, world!"); 33 | }`.text) 34 | ] 35 | ``` 36 | 37 | ![image](https://github.com/touying-typ/touying/assets/34951714/0be2fbaf-cc03-4776-932f-259503d5e23a) 38 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.4.0+/integration/fletcher.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 4 3 | --- 4 | 5 | # Fletcher 6 | 7 | Touying 提供了 `touying-reducer`，它能为 fletcher 加入 `pause` 和 `meanwhile` 动画。 8 | 9 | 一个例子： 10 | 11 | ```typst 12 | #import "@preview/touying:0.4.0": * 13 | #import "@preview/cetz:0.2.2" 14 | #import "@preview/fletcher:0.4.3" as fletcher: node, edge 15 | 16 | // cetz and fletcher bindings for touying 17 | #let cetz-canvas = touying-reducer.with(reduce: cetz.canvas, cover: cetz.draw.hide.with(bounds: true)) 18 | #let fletcher-diagram = touying-reducer.with(reduce: fletcher.diagram, cover: fletcher.hide) 19 | 20 | #let s = themes.metropolis.register(aspect-ratio: "16-9", footer: self => self.info.institution) 21 | #let (init, slides) = utils.methods(s) 22 | #show: init 23 | 24 | #let (slide, empty-slide) = utils.slides(s) 25 | #show: slides.with(title-slide: false, outline-slide: false) 26 | 27 | // cetz animation 28 | #slide[ 29 | Cetz in Touying: 30 | 31 | #cetz-canvas({ 32 | import cetz.draw: * 33 | 34 | rect((0,0), (5,5)) 35 | 36 | (pause,) 37 | 38 | rect((0,0), (1,1)) 39 | rect((1,1), (2,2)) 40 | rect((2,2), (3,3)) 41 | 42 | (pause,) 43 | 44 | line((0,0), (2.5, 2.5), name: "line") 45 | }) 46 | ] 47 | 48 | // fletcher animation 49 | #slide[ 50 | Fletcher in Touying: 51 | 52 | #fletcher-diagram( 53 | node-stroke: .1em, 54 | node-fill: gradient.radial(blue.lighten(80%), blue, center: (30%, 20%), radius: 80%), 55 | spacing: 4em, 56 | edge((-1,0), "r", "-|>", `open(path)`, label-pos: 0, label-side: center), 57 | node((0,0), `reading`, radius: 2em), 58 | edge((0,0), (0,0), `read()`, "--|>", bend: 130deg), 59 | pause, 60 | edge(`read()`, "-|>"), 61 | node((1,0), `eof`, radius: 2em), 62 | pause, 63 | edge(`close()`, "-|>"), 64 | node((2,0), `closed`, radius: 2em, extrude: (-2.5, 0)), 65 | edge((0,0), (2,0), `close()`, "-|>", bend: -40deg), 66 | ) 67 | ] 68 | ``` 69 | 70 | ![image](https://github.com/touying-typ/touying/assets/34951714/9ba71f54-2a5d-4144-996c-4a42833cc5cc) -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.4.0+/integration/mitex.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # MiTeX 6 | 7 | 在创建 slides 的过程中，往往我们已经有了一个 LaTeX 数学公式，只是想贴到 slides 的里面，而不想把它转写成 Typst 数学公式，这时候我们就可以用 [MiTeX](https://github.com/mitex-rs/mitex) 了。 8 | 9 | 示例： 10 | 11 | ```typst 12 | #import "@preview/mitex:0.2.1": * 13 | 14 | Write inline equations like #mi("x") or #mi[y]. 15 | 16 | Also block equations (this case is from #text(blue.lighten(20%), link("https://katex.org/")[katex.org])): 17 | 18 | #mitex(` 19 | \newcommand{\f}[2]{#1f(#2)} 20 | \f\relax{x} = \int_{-\infty}^\infty 21 | \f\hat\xi\,e^{2 \pi i \xi x} 22 | \,d\xi 23 | `) 24 | ``` 25 | 26 | ![image](https://github.com/mitex-rs/mitex/assets/34951714/c425b2ae-b50b-46a8-a451-4d9e8e70626b) 27 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.4.0+/intro.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Touying 介绍 6 | 7 | [Touying](https://github.com/touying-typ/touying) 是为 Typst 开发的幻灯片/演示文稿包。Touying 也类似于 LaTeX 的 Beamer，但是得益于 Typst，你可以拥有更快的渲染速度与更简洁的语法。后面，我们会使用 slides 指代幻灯片，slide 指代单张幻灯片，subslide 指代子幻灯片。 8 | 9 | ## 为什么使用 Touying 10 | 11 | - 相较于 PowerPoint，Touying 并非「所示即所得的」，你可以使用一种「内容与样式分离」的方式编写你的 slides，尤其是 Typst 作为一个新兴的排版语言，提供了简洁但强大的语法，对于代码块、数学公式和定理等内容有着更好的支持。另一个优势是，在有着模板的情况下，用 Touying 编写 slides 要比 PowerPoint 快得多。因此 Touying 相较于 PowerPoint，更适合有着「科研写作」需求的用户使用。 12 | - 相较于 Markdown Slides，Touying 所依托的 Typst 有着更强大的排版控制能力，例如页眉、页脚、布局和便捷的自定义函数，而这是 Markdown 很难具备、或者说很难做好的能力。并且 Touying 提供了 `#pause` 和 `#meanwhile` 标记，提供了更为便捷的动态 slides 能力。 13 | - 相较于 Beamer，Touying 有着更快的编译速度、更简洁的语法，以及更简单的自定义主题的能力。相较于 Beamer 动辄几秒几十秒的编译时间，Touying 的编译速度基本上能够维持在几毫秒几十毫秒。并且 Touying 的语法相较于 Beamer 更为简洁，也更容易更改模板主题，以及创建你自己的模板。在功能上，Touying 支持了 Beamer 大部分的能力，并且还提供了一些 Beamer 所没有的便利功能。 14 | - 相较于 Polylux，Touying 提供了一种 oop 风格的语法，能够通过全局单例模拟提供「全局变量」的能力，进而可以方便地编写主题。并且 Touying 并不依赖 `counter` 和 `locate` 来实现 `#pause`，因此能有更好的性能。Touying 自身定位是一个社区驱动的项目（我们欢迎更多的人加入），并且不会过分强调维持 API 的一致性，而是选择维护多个版本的文档，因而能够提供更多新颖但强大的功能。 15 | 16 | ## 名称来源 17 | 18 | Touying 取自中文里的「投影」，在英文中意为 project。相较而言，LaTeX 中的 beamer 就是德文的投影仪的意思。 19 | 20 | ## 关于文档 21 | 22 | 这个文档通过 [Docusaurus](https://docusaurus.io/) 驱动开发，我们将会为 Touying 维持英文和中文版本的文档，并且每个大版本维护一份文档，以便你随时可以查阅旧版本的 Touying 文档，并且可以更容易地迁移到新版本。 23 | 24 | Docusaurus 创建新版本： 25 | 26 | ```sh 27 | npm run docusaurus docs:version 0.y.x 28 | ``` 29 | 30 | Docusaurus 多语言： 31 | 32 | ```sh 33 | npm run start -- --locale zh 34 | ``` 35 | 36 | ## 贡献 37 | 38 | Touying 是免费、开源且社区驱动的。如果你感兴趣，你可以随时访问 [GitHub](https://github.com/touying-typ/touying) 并提出 issue 或 PR，我们也同样欢迎你加入 [touying-typ](https://github.com/touying-typ) 组织。 39 | 40 | ## License 41 | 42 | Touying is released under the [MIT license](https://github.com/touying-typ/touying/blob/main/LICENSE). -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.4.0+/progress/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "进度", 3 | "position": 12, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "管理和展示 Touying 中的进度，例如 counters 和 sections 等。" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.4.0+/progress/counters.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Touying 的计数器 6 | 7 | Touying 的状态均放置于 `states` 命名空间下，包括所有的计数器。 8 | 9 | ## slide 计数器 10 | 11 | 你可以通过 `states.slide-counter` 获取 slide 计数器，并且通过 `states.slide-counter.display()` 展示当前 slide 的序号。 12 | 13 | 14 | ## last-slide 计数器 15 | 16 | 因为有些情形下，我们需要为 slides 加入后记，因此就有了冻结 last-slide 计数器的需求，因此这里维护了第二个计数器。 17 | 18 | 我们可以使用 `states.last-slide-number` 展示后记前最后一张 slide 的序号。 19 | 20 | 21 | ## 进度 22 | 23 | 我们可以使用 24 | 25 | ```typst 26 | #states.touying-progress(ratio => ..) 27 | ``` 28 | 29 | 来显示当前的进度。 30 | 31 | 32 | ## 后记 33 | 34 | 你可以使用 35 | 36 | ```typst 37 | // appendix by freezing last-slide-number 38 | #let s = (s.methods.appendix)(self: s) 39 | #let (slide, empty-slide) = utils.methods(s) 40 | 41 | #slide[ 42 | appendix 43 | ] 44 | ``` 45 | 46 | 语法进入后记。 47 | 48 | 并且 `#let s = (s.methods.appendix-in-outline)(self: s, false)` 可以让后记的 section 不显示在大纲中。 -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.4.0+/progress/sections.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # Touying 的 Sections 6 | 7 | Touying 维护了一份自己的 sections state，用于记录 slides 的 sections 和 subsections。 8 | 9 | ## touying-outline 10 | 11 | `#touying-outline(enum-args: (:), padding: 0pt)` 用于显示一个简单的大纲。 12 | 13 | 14 | ## touying-final-sections 15 | 16 | `#states.touying-final-sections(final-sections => ..)` 用于自定义显示大纲。 17 | 18 | 19 | ## touying-progress-with-sections 20 | 21 | ```typst 22 | #states.touying-progress-with-sections((current-sections: .., final-sections: .., current-slide-number: .., last-slide-number: ..) => ..) 23 | ``` 24 | 25 | 功能最强大，你可以用其搭建任意复杂的进度展示。 26 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.4.0+/themes/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "主题", 3 | "position": 10, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "使用 Touying 很便利的一点就是，你可以使用 Touying 提供的主题，或者是借助 Touying 创建自己的主题或模板。" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.4.0+/utilities/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "工具", 3 | "position": 13, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "一些便利的工具函数。" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.4.0+/utilities/fit-to.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # Fit to height / width 6 | 7 | 感谢 [ntjess](https://github.com/ntjess) 的代码。 8 | 9 | ## Fit to height 10 | 11 | 如果你需要将图片占满剩余的 slide 高度，你可以来试试 `fit-to-height` 函数： 12 | 13 | ```typst 14 | #utils.fit-to-height(1fr)[BIG] 15 | ``` 16 | 17 | 函数定义： 18 | 19 | ```typst 20 | #let fit-to-height( 21 | width: none, prescale-width: none, grow: true, shrink: true, height, body 22 | ) = { .. } 23 | ``` 24 | 25 | 参数： 26 | 27 | - `width`: 如果指定，这将确定缩放后内容的宽度。因此，如果您希望缩放的内容填充幻灯片宽度的一半，则可以使用 `width: 50%`。 28 | - `prescale-width`: 此参数允许您使 Typst 的布局假设给定的内容在缩放之前要布局在一定宽度的容器中。例如，您可以使用 `prescale-width: 200%` 假设幻灯片的宽度为原来的两倍。 29 | - `grow`: 是否可扩张，默认为 `true`。 30 | - `shrink`: 是否可收缩，默认为 `true`。 31 | - `height`: 需要指定的高度。 32 | - `body`: 具体的内容。 33 | 34 | 35 | ## Fit to width 36 | 37 | 如果你需要限制标题宽度刚好占满 slide 的宽度，你可以来试试 `fit-to-width` 函数： 38 | 39 | ```typst 40 | #utils.fit-to-width(1fr)[#lorem(20)] 41 | ``` 42 | 43 | 函数定义： 44 | 45 | ```typst 46 | #let fit-to-width(grow: true, shrink: true, width, body) = { .. } 47 | ``` 48 | 49 | 参数： 50 | 51 | - `grow`: 是否可扩张，默认为 `true`。 52 | - `shrink`: 是否可收缩，默认为 `true`。 53 | - `width`: 需要指定的宽度。 54 | - `body`: 具体的内容。 55 | 56 | -------------------------------------------------------------------------------- /touying/docs/i18n/zh/docusaurus-plugin-content-docs/version-0.4.0+/utilities/oop.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # 面向对象编程 6 | 7 | Touying 提供了一些便利的工具函数，便于进行面向对象编程。 8 | 9 | --- 10 | 11 | ```typst 12 | #let call-or-display(self, it) = { 13 | if type(it) == function { 14 | return it(self) 15 | } else { 16 | return it 17 | } 18 | } 19 | ``` 20 | 调用或原样输出。 21 | 22 | --- 23 | 24 | ```typst 25 | #let methods(self) = { .. } 26 | ``` 27 | 用于为方法绑定 self 并返回，十分常用。 28 | 29 | -------------------------------------------------------------------------------- /touying/docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "docs", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "docusaurus": "docusaurus", 7 | "start": "docusaurus start", 8 | "build": "docusaurus build", 9 | "swizzle": "docusaurus swizzle", 10 | "deploy": "docusaurus deploy", 11 | "clear": "docusaurus clear", 12 | "serve": "docusaurus serve", 13 | "write-translations": "docusaurus write-translations", 14 | "write-heading-ids": "docusaurus write-heading-ids" 15 | }, 16 | "dependencies": { 17 | "@docusaurus/core": "3.1.0", 18 | "@docusaurus/preset-classic": "3.1.0", 19 | "@mdx-js/react": "^3.0.0", 20 | "clsx": "^2.0.0", 21 | "prism-react-renderer": "^2.3.0", 22 | "react": "^18.0.0", 23 | "react-dom": "^18.0.0" 24 | }, 25 | "devDependencies": { 26 | "@docusaurus/module-type-aliases": "3.1.0", 27 | "@docusaurus/types": "3.1.0" 28 | }, 29 | "browserslist": { 30 | "production": [ 31 | ">0.5%", 32 | "not dead", 33 | "not op_mini all" 34 | ], 35 | "development": [ 36 | "last 3 chrome version", 37 | "last 3 firefox version", 38 | "last 5 safari version" 39 | ] 40 | }, 41 | "engines": { 42 | "node": ">=18.0" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /touying/docs/sidebars.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Creating a sidebar enables you to: 3 | - create an ordered group of docs 4 | - render a sidebar for each doc of that group 5 | - provide next/previous navigation 6 | 7 | The sidebars can be generated from the filesystem, or explicitly defined here. 8 | 9 | Create as many sidebars as you want. 10 | */ 11 | 12 | // @ts-check 13 | 14 | /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */ 15 | const sidebars = { 16 | // By default, Docusaurus generates a sidebar from the docs folder structure 17 | tutorialSidebar: [{type: 'autogenerated', dirName: '.'}], 18 | 19 | // But you can create a sidebar manually 20 | /* 21 | tutorialSidebar: [ 22 | 'intro', 23 | 'hello', 24 | { 25 | type: 'category', 26 | label: 'Tutorial', 27 | items: ['tutorial-basics/create-a-document'], 28 | }, 29 | ], 30 | */ 31 | }; 32 | 33 | export default sidebars; 34 | -------------------------------------------------------------------------------- /touying/docs/src/components/HomepageFeatures/index.js: -------------------------------------------------------------------------------- 1 | import clsx from 'clsx'; 2 | import Heading from '@theme/Heading'; 3 | import styles from './styles.module.css'; 4 | 5 | const FeatureList = [ 6 | { 7 | title: 'Easy to Use', 8 | Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default, 9 | description: ( 10 | <> 11 | Touying provides two different ways to compose slides, based on headings and based on slide blocks. 12 | You can choose the style you prefer, simple yet powerful. 13 | 14 | ), 15 | }, 16 | { 17 | title: 'Dynamic Slides', 18 | Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default, 19 | description: ( 20 | <> 21 | Touying offers markers such as #pause and #meanwhile, 22 | allowing you to easily compose dynamic slides, including but not limited to text, lists, and math equations. 23 | 24 | ), 25 | }, 26 | { 27 | title: 'Powered by Typst', 28 | Svg: require('@site/static/img/undraw_docusaurus_react.svg').default, 29 | description: ( 30 | <> 31 | Touying is powered by Typst, which is a new typesetting language with a concise syntax, powerful features, and extremely fast compilation speed. 32 | 33 | ), 34 | }, 35 | ]; 36 | 37 | function Feature({Svg, title, description}) { 38 | return ( 39 |
40 |
41 | 42 |
43 |
44 | {title} 45 |

{description}

46 |
47 |
48 | ); 49 | } 50 | 51 | export default function HomepageFeatures() { 52 | return ( 53 |
54 |
55 |
56 | {FeatureList.map((props, idx) => ( 57 | 58 | ))} 59 |
60 |
61 |
62 | ); 63 | } 64 | -------------------------------------------------------------------------------- /touying/docs/src/components/HomepageFeatures/styles.module.css: -------------------------------------------------------------------------------- 1 | .features { 2 | display: flex; 3 | align-items: center; 4 | padding: 2rem 0; 5 | width: 100%; 6 | } 7 | 8 | .featureSvg { 9 | height: 200px; 10 | width: 200px; 11 | } 12 | -------------------------------------------------------------------------------- /touying/docs/src/css/custom.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Any CSS included here will be global. The classic template 3 | * bundles Infima by default. Infima is a CSS framework designed to 4 | * work well for content-centric websites. 5 | */ 6 | 7 | /* You can override the default Infima variables here. */ 8 | :root { 9 | --ifm-color-primary: #425066; 10 | --ifm-color-primary-dark: #29784c; 11 | --ifm-color-primary-darker: #277148; 12 | --ifm-color-primary-darkest: #205d3b; 13 | --ifm-color-primary-light: #33925d; 14 | --ifm-color-primary-lighter: #359962; 15 | --ifm-color-primary-lightest: #3cad6e; 16 | --ifm-code-font-size: 95%; 17 | --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); 18 | } 19 | 20 | /* For readability concerns, you should choose a lighter palette in dark mode. */ 21 | [data-theme='dark'] { 22 | --ifm-color-primary: #88ada6; 23 | --ifm-color-primary-dark: #21af90; 24 | --ifm-color-primary-darker: #1fa588; 25 | --ifm-color-primary-darkest: #1a8870; 26 | --ifm-color-primary-light: #29d5b0; 27 | --ifm-color-primary-lighter: #32d8b4; 28 | --ifm-color-primary-lightest: #4fddbf; 29 | --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); 30 | } 31 | -------------------------------------------------------------------------------- /touying/docs/src/pages/index.js: -------------------------------------------------------------------------------- 1 | import clsx from 'clsx'; 2 | import Link from '@docusaurus/Link'; 3 | import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; 4 | import Layout from '@theme/Layout'; 5 | import HomepageFeatures from '@site/src/components/HomepageFeatures'; 6 | 7 | import Heading from '@theme/Heading'; 8 | import styles from './index.module.css'; 9 | 10 | function HomepageHeader() { 11 | const {siteConfig} = useDocusaurusContext(); 12 | return ( 13 |
14 |
15 | 16 | {siteConfig.title} 17 | 18 |

{siteConfig.tagline}

19 |
20 | 23 | Touying Tutorial - 10min ⏱️ 24 | 25 |
26 |
27 |
28 | ); 29 | } 30 | 31 | export default function Home() { 32 | const {siteConfig} = useDocusaurusContext(); 33 | return ( 34 | 37 | 38 |
39 | 40 |
41 | 42 | ); 43 | } 44 | -------------------------------------------------------------------------------- /touying/docs/src/pages/index.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * CSS files with the .module.css suffix will be treated as CSS modules 3 | * and scoped locally. 4 | */ 5 | 6 | .heroBanner { 7 | padding: 4rem 0; 8 | text-align: center; 9 | position: relative; 10 | overflow: hidden; 11 | } 12 | 13 | @media screen and (max-width: 996px) { 14 | .heroBanner { 15 | padding: 2rem; 16 | } 17 | } 18 | 19 | .buttons { 20 | display: flex; 21 | align-items: center; 22 | justify-content: center; 23 | } 24 | -------------------------------------------------------------------------------- /touying/docs/src/pages/markdown-page.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Markdown page example 3 | --- 4 | 5 | # Markdown page example 6 | 7 | You don't need React to write simple standalone pages. 8 | -------------------------------------------------------------------------------- /touying/docs/static/.nojekyll: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HK-SHAO/SCNU-Typst-Template/8a377015772ddf60a156d7c85a75c3b8f9293518/touying/docs/static/.nojekyll -------------------------------------------------------------------------------- /touying/docs/static/img/docusaurus-social-card.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HK-SHAO/SCNU-Typst-Template/8a377015772ddf60a156d7c85a75c3b8f9293518/touying/docs/static/img/docusaurus-social-card.jpg -------------------------------------------------------------------------------- /touying/docs/static/img/docusaurus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HK-SHAO/SCNU-Typst-Template/8a377015772ddf60a156d7c85a75c3b8f9293518/touying/docs/static/img/docusaurus.png -------------------------------------------------------------------------------- /touying/docs/static/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HK-SHAO/SCNU-Typst-Template/8a377015772ddf60a156d7c85a75c3b8f9293518/touying/docs/static/img/favicon.ico -------------------------------------------------------------------------------- /touying/docs/static/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HK-SHAO/SCNU-Typst-Template/8a377015772ddf60a156d7c85a75c3b8f9293518/touying/docs/static/img/logo.png -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.2.x/build-your-own-theme.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 7 3 | --- 4 | 5 | # Build Your Own Theme 6 | 7 | You can refer to the [source code of themes](https://github.com/touying-typ/touying/tree/main/themes). The main things to implement are: 8 | 9 | - Customize the color theme by modifying `self.colors`. 10 | - Customize the header. 11 | - Customize the footer. 12 | - Optionally, customize the `alert` function. 13 | - Customize the `slide` function. 14 | - Customize special slide functions, such as `title-slide` and `focus-slide` functions. 15 | - Customize the `slide-in-slides` function, which will be called by the `slides` function. 16 | - Optionally, customize the `slides` function. 17 | - Customize the `register` function to initialize the global singleton `s`. 18 | - Optionally, customize the `init` function. 19 | 20 | More detailed documentation to be added. -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.2.x/dynamic/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Dynamic Slides", 3 | "position": 5, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "To create animations in PDF, we need to create multiple slightly different pages for the same slide. This allows animation by switching between these pages, and we refer to these pages as subslides." 7 | } 8 | } -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.2.x/dynamic/cover.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 4 3 | --- 4 | 5 | # Cover Function 6 | 7 | As you already know, both `uncover` and `#pause` use the `cover` function to conceal content that is not visible. So, what exactly is the `cover` function here? 8 | 9 | ## Default Cover Function: `hide` 10 | 11 | The `cover` function is a method stored in `s.methods.cover`, which is later used by `uncover` and `#pause`. 12 | 13 | The default `cover` function is the [hide](https://typst.app/docs/reference/layout/hide/) function. This function makes the internal content invisible without affecting the layout. 14 | 15 | ## Updating the Cover Function 16 | 17 | In some cases, you might want to use your own `cover` function. In that case, you can set your own `cover` function using: 18 | 19 | ```typst 20 | let s = (s.methods.update-cover)(self: s, is-method: true, cover-fn) 21 | ``` 22 | 23 | Here, if you set `is-method: false`, Touying will wrap `cover-fn` into a method for you. 24 | 25 | ## Semi-Transparent Cover Function 26 | 27 | Touying supports a semi-transparent cover function, which can be enabled by adding: 28 | 29 | ```typst 30 | #let s = (s.methods.enable-transparent-cover)(self: s) 31 | ``` 32 | 33 | You can adjust the transparency through the `alpha: ..` parameter. 34 | 35 | :::warning[Warning] 36 | 37 | Note that the `transparent-cover` here does not preserve text layout like `hide` does because it adds an extra layer of `box`, which may disrupt the original structure of the page. 38 | 39 | ::: 40 | 41 | :::tip[Internals] 42 | 43 | The `enable-transparent-cover` method is defined as: 44 | 45 | ```typst 46 | #let s.methods.enable-transparent-cover = ( 47 | self: none, 48 | constructor: rgb, 49 | alpha: 85%, 50 | ) => { 51 | self.methods.cover = (self: none, body) => { 52 | utils.cover-with-rect( 53 | fill: utils.update-alpha( 54 | constructor: constructor, 55 | self.page-args.fill, 56 | alpha, 57 | ), 58 | body 59 | ) 60 | } 61 | self 62 | } 63 | ``` 64 | 65 | It creates a semi-transparent rectangular mask with the same color as the background to simulate the effect of transparent content. Here, `constructor: rgb` and `alpha: 85%` indicate the background color's construction function and transparency level, respectively. 66 | 67 | ::: -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.2.x/dynamic/handout.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 5 3 | --- 4 | 5 | # Handout Mode 6 | 7 | While watching slides and attending lectures, the audience often wishes to have handouts for reviewing challenging concepts. Therefore, it's beneficial for the author to provide handouts for the audience, preferably before the lecture for better preparation. 8 | 9 | The handout mode differs from the regular mode as it doesn't require intricate animation effects. It retains only the last subslide of each slide. 10 | 11 | Enabling handout mode is simple: 12 | 13 | ```typst 14 | #let s = (s.methods.enable-handout-mode)(self: s) 15 | ``` 16 | -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.2.x/external/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "External Tools", 3 | "position": 10, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "Integrate external tools with Touying." 7 | } 8 | } -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.2.x/external/pdfpc.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Pdfpc 6 | 7 | [pdfpc](https://pdfpc.github.io/) is a "Presenter Console with multi-monitor support for PDF files." This means you can use it to display slides in the form of PDF pages and it comes with some known excellent features, much like PowerPoint. 8 | 9 | pdfpc has a JSON-formatted `.pdfpc` file that can provide additional information for PDF slides. While you can manually write this file, you can also manage it through Touying. 10 | 11 | 12 | ## Adding Metadata 13 | 14 | Touying remains consistent with [Polylux](https://polylux.dev/book/external/pdfpc.html) to avoid conflicts between APIs. 15 | 16 | For example, you can add notes using `#pdfpc.speaker-note("This is a note that only the speaker will see.")`. 17 | 18 | 19 | ## Pdfpc Configuration 20 | 21 | To add pdfpc configurations, you can use 22 | 23 | ```typst 24 | #let s = (s.methods.append-preamble)(self: s, pdfpc.config( 25 | duration-minutes: 30, 26 | start-time: datetime(hour: 14, minute: 10, second: 0), 27 | end-time: datetime(hour: 14, minute: 40, second: 0), 28 | last-minutes: 5, 29 | note-font-size: 12, 30 | disable-markdown: false, 31 | default-transition: ( 32 | type: "push", 33 | duration-seconds: 2, 34 | angle: ltr, 35 | alignment: "vertical", 36 | direction: "inward", 37 | ), 38 | )) 39 | ``` 40 | 41 | Add the corresponding configurations. Refer to [Polylux](https://polylux.dev/book/external/pdfpc.html) for specific configuration details. 42 | 43 | 44 | ## Exporting .pdfpc File 45 | 46 | Assuming your document is `./example.typ`, you can export the `.pdfpc` file directly using: 47 | 48 | ```sh 49 | typst query --root . ./example.typ --field value --one "" > ./example.pdfpc 50 | ``` 51 | 52 | With the compatibility of Touying and Polylux, you can make Polylux also support direct export by adding the following code: 53 | 54 | ```typst 55 | #import "@preview/touying:0.2.1" 56 | 57 | #locate(loc => touying.pdfpc.pdfpc-file(loc)) 58 | ``` -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.2.x/external/typst-preview.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # Typst Preview 6 | 7 | The Typst Preview extension for VS Code provides an excellent slide mode, allowing us to preview and present slides. 8 | 9 | Press `Ctrl/Cmd + Shift + P` and type `Typst Preview: Preview current file in slide mode` to open the preview in slide mode. 10 | 11 | Press `Ctrl/Cmd + Shift + P` and type `Typst Preview: Preview current file in browser and slide mode` to open the slide mode in the browser. 12 | 13 | Now, you can press keys like `F11` to enter fullscreen mode in the browser, making it suitable for slide presentations. 14 | 15 | Since Typst Preview is based on SVG, it can play GIF animations, which is very helpful for dynamic slides. -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.2.x/progress/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Progress", 3 | "position": 8, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "Manage and display progress in Touying, such as counters and sections." 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.2.x/progress/counters.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Touying Counters 6 | 7 | The states of Touying are placed under the `states` namespace, including all counters. 8 | 9 | ## Slide Counter 10 | 11 | You can access the slide counter using `states.slide-counter` and display the current slide number with `states.slide-counter.display()`. 12 | 13 | ## Last-Slide Counter 14 | 15 | In some cases, we may need to add an appendix to slides, leading to the requirement to freeze the last-slide counter. Therefore, a second counter is maintained here. 16 | 17 | You can use `states.last-slide-number` to display the number of the last slide before the appendix. 18 | 19 | ## Progress 20 | 21 | You can use 22 | 23 | ```typst 24 | #states.touying-progress(ratio => ..) 25 | ``` 26 | 27 | to show the current progress. 28 | 29 | ## Appendix 30 | 31 | You can use 32 | 33 | ```typst 34 | // appendix by freezing last-slide-number 35 | #let s = (s.methods.appendix)(self: s) 36 | #let (slide,) = utils.methods(s) 37 | 38 | #slide[ 39 | appendix 40 | ] 41 | ``` 42 | 43 | syntax to enter the appendix. 44 | 45 | Additionally, `#let s = (s.methods.appendix-in-outline)(self: s, false)` can be used to hide the appendix section from the outline. -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.2.x/progress/sections.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # Touying Sections 6 | 7 | Touying maintains its own sections state to record the sections and subsections of slides. 8 | 9 | ## touying-outline 10 | 11 | `#touying-outline(enum-args: (:), padding: 0pt)` is used to display a simple outline. 12 | 13 | ## touying-final-sections 14 | 15 | `#states.touying-final-sections(final-sections => ..)` is used to customize the display of the outline. 16 | 17 | ## touying-progress-with-sections 18 | 19 | ```typst 20 | #states.touying-progress-with-sections((current-sections: .., final-sections: .., current-slide-number: .., last-slide-number: ..) => ..) 21 | ``` 22 | 23 | This is the most powerful one, allowing you to build any complex progress display with its functionalities. -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.2.x/style.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 4 3 | --- 4 | 5 | # Code Styles 6 | 7 | ## show-slides Style 8 | 9 | If we only need simplicity, we can use `#show: slides` for a cleaner syntax. 10 | 11 | However, this approach has corresponding drawbacks: firstly, this method may significantly impact document rendering performance. Secondly, subsequent `#slide(..)` cannot be added directly. Instead, you need to manually mark `#slides-end`. The most significant drawback is that complex functionalities cannot be achieved. 12 | 13 | ```typst 14 | #import "@preview/touying:0.2.1": * 15 | 16 | #let (init, slide, slides) = utils.methods(s) 17 | #show: init 18 | 19 | #show: slides 20 | 21 | = Title 22 | 23 | == First Slide 24 | 25 | Hello, Touying! 26 | 27 | #pause 28 | 29 | Hello, Typst! 30 | 31 | #slides-end 32 | 33 | #slide[ 34 | A new slide. 35 | ] 36 | ``` 37 | 38 | ![image](https://github.com/touying-typ/touying/assets/34951714/db2a1b60-bc56-4fa9-a317-ee9ecc6f3895) 39 | 40 | And you can create a new page with the empty header `==`. 41 | 42 | 43 | ## slide-block Style 44 | 45 | For better performance and more powerful capabilities, in most cases, we still need to use the code style like: 46 | 47 | ```typst 48 | #slide[ 49 | A new slide. 50 | ] 51 | ``` -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.2.x/themes/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Themes", 3 | "position": 6, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "One convenient aspect of using Touying is that you can use the themes provided by Touying or create your own themes or templates with the help of Touying." 7 | } 8 | } -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.2.x/utilities/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Utilities", 3 | "position": 9, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "Some convenient utility functions." 7 | } 8 | } -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.2.x/utilities/fit-to.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # Fit to Height / Width 6 | 7 | Thanks to [ntjess](https://github.com/ntjess) for the code. 8 | 9 | ## Fit to Height 10 | 11 | If you need to make an image fill the remaining slide height, you can try the `fit-to-height` function: 12 | 13 | ```typst 14 | #utils.fit-to-height(1fr)[BIG] 15 | ``` 16 | 17 | Function definition: 18 | 19 | ```typst 20 | #let fit-to-height( 21 | width: none, prescale-width: none, grow: true, shrink: true, height, body 22 | ) = { .. } 23 | ``` 24 | 25 | Parameters: 26 | 27 | - `width`: If specified, this will determine the width of the content after scaling. So, if you want the scaled content to fill half of the slide width, you can use `width: 50%`. 28 | - `prescale-width`: This parameter allows you to make Typst's layout assume that the given content is to be laid out in a container of a certain width before scaling. For example, you can use `prescale-width: 200%` assuming the slide's width is twice the original. 29 | - `grow`: Whether it can grow, default is `true`. 30 | - `shrink`: Whether it can shrink, default is `true`. 31 | - `height`: The specified height. 32 | - `body`: The specific content. 33 | 34 | ## Fit to Width 35 | 36 | If you need to limit the title width to exactly fill the slide width, you can try the `fit-to-width` function: 37 | 38 | ```typst 39 | #utils.fit-to-width(1fr)[#lorem(20)] 40 | ``` 41 | 42 | Function definition: 43 | 44 | ```typst 45 | #let fit-to-width(grow: true, shrink: true, width, body) = { .. } 46 | ``` 47 | 48 | Parameters: 49 | 50 | - `grow`: Whether it can grow, default is `true`. 51 | - `shrink`: Whether it can shrink, default is `true`. 52 | - `width`: The specified width. 53 | - `body`: The specific content. -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.2.x/utilities/oop.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Object-Oriented Programming 6 | 7 | Touying provides some convenient utility functions for object-oriented programming. 8 | 9 | --- 10 | 11 | ```typst 12 | #let empty-object = (methods: (:)) 13 | ``` 14 | An empty class. 15 | 16 | --- 17 | 18 | ```typst 19 | #let call-or-display(self, it) = { 20 | if type(it) == function { 21 | return it(self) 22 | } else { 23 | return it 24 | } 25 | } 26 | ``` 27 | Call or display as-is. 28 | 29 | --- 30 | 31 | ```typst 32 | #let methods(self) = { .. } 33 | ``` 34 | Used to bind self to methods and return, very commonly used. -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.3.2+/dynamic/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Dynamic Slides", 3 | "position": 7, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "To create animations in PDF, we need to create multiple slightly different pages for the same slide. This allows animation by switching between these pages, and we refer to these pages as subslides." 7 | } 8 | } -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.3.2+/dynamic/cover.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 4 3 | --- 4 | 5 | # Cover Function 6 | 7 | As you already know, both `uncover` and `#pause` use the `cover` function to conceal content that is not visible. So, what exactly is the `cover` function here? 8 | 9 | ## Default Cover Function: `hide` 10 | 11 | The `cover` function is a method stored in `s.methods.cover`, which is later used by `uncover` and `#pause`. 12 | 13 | The default `cover` function is the [hide](https://typst.app/docs/reference/layout/hide/) function. This function makes the internal content invisible without affecting the layout. 14 | 15 | ## Updating the Cover Function 16 | 17 | In some cases, you might want to use your own `cover` function. In that case, you can set your own `cover` function using: 18 | 19 | ```typst 20 | let s = (s.methods.update-cover)(self: s, is-method: true, cover-fn) 21 | ``` 22 | 23 | Here, if you set `is-method: false`, Touying will wrap `cover-fn` into a method for you. 24 | 25 | ## Semi-Transparent Cover Function 26 | 27 | Touying supports a semi-transparent cover function, which can be enabled by adding: 28 | 29 | ```typst 30 | #let s = (s.methods.enable-transparent-cover)(self: s) 31 | ``` 32 | 33 | You can adjust the transparency through the `alpha: ..` parameter. 34 | 35 | :::warning[Warning] 36 | 37 | Note that the `transparent-cover` here does not preserve text layout like `hide` does because it adds an extra layer of `box`, which may disrupt the original structure of the page. 38 | 39 | ::: 40 | 41 | :::tip[Internals] 42 | 43 | The `enable-transparent-cover` method is defined as: 44 | 45 | ```typst 46 | #let s.methods.enable-transparent-cover = ( 47 | self: none, 48 | constructor: rgb, 49 | alpha: 85%, 50 | ) => { 51 | self.methods.cover = (self: none, body) => { 52 | utils.cover-with-rect( 53 | fill: utils.update-alpha( 54 | constructor: constructor, 55 | self.page-args.fill, 56 | alpha, 57 | ), 58 | body 59 | ) 60 | } 61 | self 62 | } 63 | ``` 64 | 65 | It creates a semi-transparent rectangular mask with the same color as the background to simulate the effect of transparent content. Here, `constructor: rgb` and `alpha: 85%` indicate the background color's construction function and transparency level, respectively. 66 | 67 | ::: -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.3.2+/dynamic/handout.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 6 3 | --- 4 | 5 | # Handout Mode 6 | 7 | While watching slides and attending lectures, the audience often wishes to have handouts for reviewing challenging concepts. Therefore, it's beneficial for the author to provide handouts for the audience, preferably before the lecture for better preparation. 8 | 9 | The handout mode differs from the regular mode as it doesn't require intricate animation effects. It retains only the last subslide of each slide. 10 | 11 | Enabling handout mode is simple: 12 | 13 | ```typst 14 | #let s = (s.methods.enable-handout-mode)(self: s) 15 | ``` 16 | -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.3.2+/dynamic/simple.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Simple Animations 6 | 7 | Touying provides two markers for simple animation effects: `#pause` and `#meanwhile`. 8 | 9 | ## pause 10 | 11 | The purpose of `#pause` is straightforward – it separates the subsequent content into the next subslide. You can use multiple `#pause` to create multiple subslides. Here's a simple example: 12 | 13 | ```typst 14 | #slide[ 15 | First #pause Second 16 | 17 | #pause 18 | 19 | Third 20 | ] 21 | ``` 22 | 23 | ![image](https://github.com/touying-typ/touying/assets/34951714/a3bed1d3-e660-456d-8a54-a914436f43bf) 24 | 25 | This example will create three subslides, gradually revealing the content. 26 | 27 | As you can see, `#pause` can be used inline or on a separate line. 28 | 29 | ## meanwhile 30 | 31 | In some cases, you may need to display additional content simultaneously with `#pause`. In such cases, you can use `#meanwhile`. 32 | 33 | ```typst 34 | #slide[ 35 | First 36 | 37 | #pause 38 | 39 | Second 40 | 41 | #meanwhile 42 | 43 | Third 44 | 45 | #pause 46 | 47 | Fourth 48 | ] 49 | ``` 50 | 51 | ![image](https://github.com/touying-typ/touying/assets/34951714/24ca19a3-b27c-4d31-ab75-09c37911e6ac) 52 | 53 | This example will create only two subslides, with "First" and "Third" displayed simultaneously, and "Second" and "Fourth" displayed simultaneously. 54 | 55 | ## Handling layout functions 56 | 57 | If you use layout functions like `grid` inside `slide[..]`, you might be surprised to find that subsequent `#pause` and `#meanwhile` do not work. This is because Touying cannot detect the content inside layout functions. But you can use the `composer` parameter of `#slide()` to meet most requirements. 58 | 59 | :::tip[Internals] 60 | 61 | Touying doesn't rely on `counter` and `locate` to implement `#pause`. Instead, it has a parser written in Typst script. It parses the input content block as a sequence and then transforms and reorganizes this sequence into the series of subslides we need. 62 | 63 | ::: -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.3.2+/external/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "External Tools", 3 | "position": 13, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "Integrate external tools with Touying." 7 | } 8 | } -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.3.2+/external/pdfpc.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Pdfpc 6 | 7 | [pdfpc](https://pdfpc.github.io/) is a "Presenter Console with multi-monitor support for PDF files." This means you can use it to display slides in the form of PDF pages and it comes with some known excellent features, much like PowerPoint. 8 | 9 | pdfpc has a JSON-formatted `.pdfpc` file that can provide additional information for PDF slides. While you can manually write this file, you can also manage it through Touying. 10 | 11 | 12 | ## Adding Metadata 13 | 14 | Touying remains consistent with [Polylux](https://polylux.dev/book/external/pdfpc.html) to avoid conflicts between APIs. 15 | 16 | For example, you can add notes using `#pdfpc.speaker-note("This is a note that only the speaker will see.")`. 17 | 18 | 19 | ## Pdfpc Configuration 20 | 21 | To add pdfpc configurations, you can use 22 | 23 | ```typst 24 | #let s = (s.methods.append-preamble)(self: s, pdfpc.config( 25 | duration-minutes: 30, 26 | start-time: datetime(hour: 14, minute: 10, second: 0), 27 | end-time: datetime(hour: 14, minute: 40, second: 0), 28 | last-minutes: 5, 29 | note-font-size: 12, 30 | disable-markdown: false, 31 | default-transition: ( 32 | type: "push", 33 | duration-seconds: 2, 34 | angle: ltr, 35 | alignment: "vertical", 36 | direction: "inward", 37 | ), 38 | )) 39 | ``` 40 | 41 | Add the corresponding configurations. Refer to [Polylux](https://polylux.dev/book/external/pdfpc.html) for specific configuration details. 42 | 43 | 44 | ## Exporting .pdfpc File 45 | 46 | Assuming your document is `./example.typ`, you can export the `.pdfpc` file directly using: 47 | 48 | ```sh 49 | typst query --root . ./example.typ --field value --one "" > ./example.pdfpc 50 | ``` 51 | 52 | With the compatibility of Touying and Polylux, you can make Polylux also support direct export by adding the following code: 53 | 54 | ```typst 55 | #import "@preview/touying:0.3.3" 56 | 57 | #locate(loc => touying.pdfpc.pdfpc-file(loc)) 58 | ``` -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.3.2+/external/typst-preview.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # Typst Preview 6 | 7 | The Typst Preview extension for VS Code provides an excellent slide mode, allowing us to preview and present slides. 8 | 9 | Press `Ctrl/Cmd + Shift + P` and type `Typst Preview: Preview current file in slide mode` to open the preview in slide mode. 10 | 11 | Press `Ctrl/Cmd + Shift + P` and type `Typst Preview: Preview current file in browser and slide mode` to open the slide mode in the browser. 12 | 13 | Now, you can press keys like `F11` to enter fullscreen mode in the browser, making it suitable for slide presentations. 14 | 15 | Since Typst Preview is based on SVG, it can play GIF animations, which is very helpful for dynamic slides. -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.3.2+/integration/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Package Integration", 3 | "position": 8, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "Discover how to integrate third-party packages with Touying." 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.3.2+/integration/codly.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 5 3 | --- 4 | 5 | # Codly 6 | 7 | When using Codly, we should initialize it using the `s.methods.append-preamble` method. 8 | 9 | ```typst 10 | #import "@preview/touying:0.3.3": * 11 | #import "@preview/codly:0.2.0": * 12 | 13 | #let s = themes.simple.register(aspect-ratio: "16-9") 14 | #let s = (s.methods.append-preamble)(self: s)[ 15 | #codly(languages: ( 16 | rust: (name: "Rust", icon: "\u{fa53}", color: rgb("#CE412B")), 17 | )) 18 | ] 19 | #let (init, slides) = utils.methods(s) 20 | #show heading.where(level: 2): set block(below: 1em) 21 | #show: init 22 | #show: codly-init.with() 23 | 24 | #let (slide, empty-slide) = utils.slides(s) 25 | #show: slides 26 | 27 | #slide[ 28 | == First slide 29 | 30 | #raw(lang: "rust", block: true, 31 | `pub fn main() { 32 | println!("Hello, world!"); 33 | }`.text) 34 | ] 35 | ``` 36 | 37 | ![image](https://github.com/touying-typ/touying/assets/34951714/0be2fbaf-cc03-4776-932f-259503d5e23a) 38 | -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.3.2+/integration/fletcher.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 4 3 | --- 4 | 5 | # Fletcher 6 | 7 | Touying provides the `touying-reducer`, which adds `pause` and `meanwhile` animations to Fletcher. 8 | 9 | An example: 10 | 11 | ```typst 12 | #import "@preview/touying:0.3.3": * 13 | #import "@preview/cetz:0.2.1" 14 | #import "@preview/fletcher:0.4.2" as fletcher: node, edge 15 | 16 | #let cetz-canvas = touying-reducer.with(reduce: cetz.canvas, cover: cetz.draw.hide.with(bounds: true)) 17 | #let fletcher-diagram = touying-reducer.with(reduce: (arr, ..args) => fletcher.diagram(..args, ..arr)) 18 | 19 | #let s = themes.metropolis.register(aspect-ratio: "16-9", footer: self => self.info.institution) 20 | #let (init, slides) = utils.methods(s) 21 | #show: init 22 | 23 | #let (slide, empty-slide) = utils.slides(s) 24 | #show: slides.with(title-slide: false, outline-slide: false) 25 | 26 | // cetz animation 27 | #slide[ 28 | Cetz in Touying: 29 | 30 | #cetz-canvas({ 31 | import cetz.draw: * 32 | 33 | rect((0,0), (5,5)) 34 | 35 | (pause,) 36 | 37 | rect((0,0), (1,1)) 38 | rect((1,1), (2,2)) 39 | rect((2,2), (3,3)) 40 | 41 | (pause,) 42 | 43 | line((0,0), (2.5, 2.5), name: "line") 44 | }) 45 | ] 46 | 47 | // fletcher animation 48 | #slide[ 49 | Fletcher in Touying: 50 | 51 | #fletcher-diagram( 52 | node-stroke: .1em, 53 | node-fill: gradient.radial(blue.lighten(80%), blue, center: (30%, 20%), radius: 80%), 54 | spacing: 4em, 55 | edge((-1,0), "r", "-|>", `open(path)`, label-pos: 0, label-side: center), 56 | node((0,0), `reading`, radius: 2em), 57 | edge((0,0), (0,0), `read()`, "--|>", bend: 130deg), 58 | pause, 59 | edge(`read()`, "-|>"), 60 | node((1,0), `eof`, radius: 2em), 61 | pause, 62 | edge(`close()`, "-|>"), 63 | node((2,0), `closed`, radius: 2em, extrude: (-2.5, 0)), 64 | edge((0,0), (2,0), `close()`, "-|>", bend: -40deg), 65 | ) 66 | ] 67 | ``` 68 | 69 | ![image](https://github.com/touying-typ/touying/assets/34951714/9ba71f54-2a5d-4144-996c-4a42833cc5cc) -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.3.2+/integration/mitex.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # MiTeX 6 | 7 | During the process of creating slides, we often already have a LaTeX math equation that we simply want to paste into the slides without transcribing it into a Typst math equation. In such cases, we can use [MiTeX](https://github.com/mitex-rs/mitex). 8 | 9 | Example: 10 | 11 | ```typst 12 | #import "@preview/mitex:0.2.1": * 13 | 14 | Write inline equations like #mi("x") or #mi[y]. 15 | 16 | Also block equations (this case is from #text(blue.lighten(20%), link("https://katex.org/")[katex.org])): 17 | 18 | #mitex(` 19 | \newcommand{\f}[2]{#1f(#2)} 20 | \f\relax{x} = \int_{-\infty}^\infty 21 | \f\hat\xi\,e^{2 \pi i \xi x} 22 | \,d\xi 23 | `) 24 | ``` 25 | 26 | ![image](https://github.com/mitex-rs/mitex/assets/34951714/c425b2ae-b50b-46a8-a451-4d9e8e70626b) 27 | -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.3.2+/integration/polylux.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 6 3 | --- 4 | 5 | # Polylux 6 | 7 | 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: 8 | 9 | ```typst 10 | #import "@preview/touying:0.3.3" 11 | 12 | #locate(loc => touying.pdfpc.pdfpc-file(loc)) 13 | ``` 14 | 15 | Assuming your document is `./example.typ`, you can then export the `.pdfpc` file directly using the following command: 16 | 17 | ```sh 18 | typst query --root . ./example.typ --field value --one "" > ./example.pdfpc 19 | ``` 20 | 21 | This eliminates the need for an additional `polylux2pdfpc` program. -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.3.2+/progress/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Progress", 3 | "position": 11, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "Manage and display progress in Touying, such as counters and sections." 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.3.2+/progress/counters.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Touying Counters 6 | 7 | The states of Touying are placed under the `states` namespace, including all counters. 8 | 9 | ## Slide Counter 10 | 11 | You can access the slide counter using `states.slide-counter` and display the current slide number with `states.slide-counter.display()`. 12 | 13 | ## Last-Slide Counter 14 | 15 | In some cases, we may need to add an appendix to slides, leading to the requirement to freeze the last-slide counter. Therefore, a second counter is maintained here. 16 | 17 | You can use `states.last-slide-number` to display the number of the last slide before the appendix. 18 | 19 | ## Progress 20 | 21 | You can use 22 | 23 | ```typst 24 | #states.touying-progress(ratio => ..) 25 | ``` 26 | 27 | to show the current progress. 28 | 29 | ## Appendix 30 | 31 | You can use 32 | 33 | ```typst 34 | // appendix by freezing last-slide-number 35 | #let s = (s.methods.appendix)(self: s) 36 | #let (slide, empty-slide) = utils.methods(s) 37 | 38 | #slide[ 39 | appendix 40 | ] 41 | ``` 42 | 43 | syntax to enter the appendix. 44 | 45 | Additionally, `#let s = (s.methods.appendix-in-outline)(self: s, false)` can be used to hide the appendix section from the outline. -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.3.2+/progress/sections.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # Touying Sections 6 | 7 | Touying maintains its own sections state to record the sections and subsections of slides. 8 | 9 | ## touying-outline 10 | 11 | `#touying-outline(enum-args: (:), padding: 0pt)` is used to display a simple outline. 12 | 13 | ## touying-final-sections 14 | 15 | `#states.touying-final-sections(final-sections => ..)` is used to customize the display of the outline. 16 | 17 | ## touying-progress-with-sections 18 | 19 | ```typst 20 | #states.touying-progress-with-sections((current-sections: .., final-sections: .., current-slide-number: .., last-slide-number: ..) => ..) 21 | ``` 22 | 23 | This is the most powerful one, allowing you to build any complex progress display with its functionalities. -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.3.2+/themes/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Themes", 3 | "position": 9, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "One convenient aspect of using Touying is that you can use the themes provided by Touying or create your own themes or templates with the help of Touying." 7 | } 8 | } -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.3.2+/utilities/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Utilities", 3 | "position": 12, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "Some convenient utility functions." 7 | } 8 | } -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.3.2+/utilities/fit-to.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # Fit to Height / Width 6 | 7 | Thanks to [ntjess](https://github.com/ntjess) for the code. 8 | 9 | ## Fit to Height 10 | 11 | If you need to make an image fill the remaining slide height, you can try the `fit-to-height` function: 12 | 13 | ```typst 14 | #utils.fit-to-height(1fr)[BIG] 15 | ``` 16 | 17 | Function definition: 18 | 19 | ```typst 20 | #let fit-to-height( 21 | width: none, prescale-width: none, grow: true, shrink: true, height, body 22 | ) = { .. } 23 | ``` 24 | 25 | Parameters: 26 | 27 | - `width`: If specified, this will determine the width of the content after scaling. So, if you want the scaled content to fill half of the slide width, you can use `width: 50%`. 28 | - `prescale-width`: This parameter allows you to make Typst's layout assume that the given content is to be laid out in a container of a certain width before scaling. For example, you can use `prescale-width: 200%` assuming the slide's width is twice the original. 29 | - `grow`: Whether it can grow, default is `true`. 30 | - `shrink`: Whether it can shrink, default is `true`. 31 | - `height`: The specified height. 32 | - `body`: The specific content. 33 | 34 | ## Fit to Width 35 | 36 | If you need to limit the title width to exactly fill the slide width, you can try the `fit-to-width` function: 37 | 38 | ```typst 39 | #utils.fit-to-width(1fr)[#lorem(20)] 40 | ``` 41 | 42 | Function definition: 43 | 44 | ```typst 45 | #let fit-to-width(grow: true, shrink: true, width, body) = { .. } 46 | ``` 47 | 48 | Parameters: 49 | 50 | - `grow`: Whether it can grow, default is `true`. 51 | - `shrink`: Whether it can shrink, default is `true`. 52 | - `width`: The specified width. 53 | - `body`: The specific content. -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.3.2+/utilities/oop.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Object-Oriented Programming 6 | 7 | Touying provides some convenient utility functions for object-oriented programming. 8 | 9 | --- 10 | 11 | ```typst 12 | #let call-or-display(self, it) = { 13 | if type(it) == function { 14 | return it(self) 15 | } else { 16 | return it 17 | } 18 | } 19 | ``` 20 | Call or display as-is. 21 | 22 | --- 23 | 24 | ```typst 25 | #let methods(self) = { .. } 26 | ``` 27 | Used to bind self to methods and return, very commonly used. -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.3.x/dynamic/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Dynamic Slides", 3 | "position": 7, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "To create animations in PDF, we need to create multiple slightly different pages for the same slide. This allows animation by switching between these pages, and we refer to these pages as subslides." 7 | } 8 | } -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.3.x/dynamic/cover.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 4 3 | --- 4 | 5 | # Cover Function 6 | 7 | As you already know, both `uncover` and `#pause` use the `cover` function to conceal content that is not visible. So, what exactly is the `cover` function here? 8 | 9 | ## Default Cover Function: `hide` 10 | 11 | The `cover` function is a method stored in `s.methods.cover`, which is later used by `uncover` and `#pause`. 12 | 13 | The default `cover` function is the [hide](https://typst.app/docs/reference/layout/hide/) function. This function makes the internal content invisible without affecting the layout. 14 | 15 | ## Updating the Cover Function 16 | 17 | In some cases, you might want to use your own `cover` function. In that case, you can set your own `cover` function using: 18 | 19 | ```typst 20 | let s = (s.methods.update-cover)(self: s, is-method: true, cover-fn) 21 | ``` 22 | 23 | Here, if you set `is-method: false`, Touying will wrap `cover-fn` into a method for you. 24 | 25 | ## Semi-Transparent Cover Function 26 | 27 | Touying supports a semi-transparent cover function, which can be enabled by adding: 28 | 29 | ```typst 30 | #let s = (s.methods.enable-transparent-cover)(self: s) 31 | ``` 32 | 33 | You can adjust the transparency through the `alpha: ..` parameter. 34 | 35 | :::warning[Warning] 36 | 37 | Note that the `transparent-cover` here does not preserve text layout like `hide` does because it adds an extra layer of `box`, which may disrupt the original structure of the page. 38 | 39 | ::: 40 | 41 | :::tip[Internals] 42 | 43 | The `enable-transparent-cover` method is defined as: 44 | 45 | ```typst 46 | #let s.methods.enable-transparent-cover = ( 47 | self: none, 48 | constructor: rgb, 49 | alpha: 85%, 50 | ) => { 51 | self.methods.cover = (self: none, body) => { 52 | utils.cover-with-rect( 53 | fill: utils.update-alpha( 54 | constructor: constructor, 55 | self.page-args.fill, 56 | alpha, 57 | ), 58 | body 59 | ) 60 | } 61 | self 62 | } 63 | ``` 64 | 65 | It creates a semi-transparent rectangular mask with the same color as the background to simulate the effect of transparent content. Here, `constructor: rgb` and `alpha: 85%` indicate the background color's construction function and transparency level, respectively. 66 | 67 | ::: -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.3.x/dynamic/handout.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 6 3 | --- 4 | 5 | # Handout Mode 6 | 7 | While watching slides and attending lectures, the audience often wishes to have handouts for reviewing challenging concepts. Therefore, it's beneficial for the author to provide handouts for the audience, preferably before the lecture for better preparation. 8 | 9 | The handout mode differs from the regular mode as it doesn't require intricate animation effects. It retains only the last subslide of each slide. 10 | 11 | Enabling handout mode is simple: 12 | 13 | ```typst 14 | #let s = (s.methods.enable-handout-mode)(self: s) 15 | ``` 16 | -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.3.x/external/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "External Tools", 3 | "position": 13, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "Integrate external tools with Touying." 7 | } 8 | } -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.3.x/external/pdfpc.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Pdfpc 6 | 7 | [pdfpc](https://pdfpc.github.io/) is a "Presenter Console with multi-monitor support for PDF files." This means you can use it to display slides in the form of PDF pages and it comes with some known excellent features, much like PowerPoint. 8 | 9 | pdfpc has a JSON-formatted `.pdfpc` file that can provide additional information for PDF slides. While you can manually write this file, you can also manage it through Touying. 10 | 11 | 12 | ## Adding Metadata 13 | 14 | Touying remains consistent with [Polylux](https://polylux.dev/book/external/pdfpc.html) to avoid conflicts between APIs. 15 | 16 | For example, you can add notes using `#pdfpc.speaker-note("This is a note that only the speaker will see.")`. 17 | 18 | 19 | ## Pdfpc Configuration 20 | 21 | To add pdfpc configurations, you can use 22 | 23 | ```typst 24 | #let s = (s.methods.append-preamble)(self: s, pdfpc.config( 25 | duration-minutes: 30, 26 | start-time: datetime(hour: 14, minute: 10, second: 0), 27 | end-time: datetime(hour: 14, minute: 40, second: 0), 28 | last-minutes: 5, 29 | note-font-size: 12, 30 | disable-markdown: false, 31 | default-transition: ( 32 | type: "push", 33 | duration-seconds: 2, 34 | angle: ltr, 35 | alignment: "vertical", 36 | direction: "inward", 37 | ), 38 | )) 39 | ``` 40 | 41 | Add the corresponding configurations. Refer to [Polylux](https://polylux.dev/book/external/pdfpc.html) for specific configuration details. 42 | 43 | 44 | ## Exporting .pdfpc File 45 | 46 | Assuming your document is `./example.typ`, you can export the `.pdfpc` file directly using: 47 | 48 | ```sh 49 | typst query --root . ./example.typ --field value --one "" > ./example.pdfpc 50 | ``` 51 | 52 | With the compatibility of Touying and Polylux, you can make Polylux also support direct export by adding the following code: 53 | 54 | ```typst 55 | #import "@preview/touying:0.3.1" 56 | 57 | #locate(loc => touying.pdfpc.pdfpc-file(loc)) 58 | ``` -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.3.x/external/typst-preview.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # Typst Preview 6 | 7 | The Typst Preview extension for VS Code provides an excellent slide mode, allowing us to preview and present slides. 8 | 9 | Press `Ctrl/Cmd + Shift + P` and type `Typst Preview: Preview current file in slide mode` to open the preview in slide mode. 10 | 11 | Press `Ctrl/Cmd + Shift + P` and type `Typst Preview: Preview current file in browser and slide mode` to open the slide mode in the browser. 12 | 13 | Now, you can press keys like `F11` to enter fullscreen mode in the browser, making it suitable for slide presentations. 14 | 15 | Since Typst Preview is based on SVG, it can play GIF animations, which is very helpful for dynamic slides. -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.3.x/integration/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Package Integration", 3 | "position": 8, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "Discover how to integrate third-party packages with Touying." 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.3.x/integration/codly.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 5 3 | --- 4 | 5 | # Codly 6 | 7 | When using Codly, we should initialize it using the `s.methods.append-preamble` method. 8 | 9 | ```typst 10 | #import "@preview/touying:0.3.1": * 11 | #import "@preview/codly:0.2.0": * 12 | 13 | #let s = themes.simple.register(s, aspect-ratio: "16-9") 14 | #let s = (s.methods.append-preamble)(self: s)[ 15 | #codly(languages: ( 16 | rust: (name: "Rust", icon: "\u{fa53}", color: rgb("#CE412B")), 17 | )) 18 | ] 19 | #let (init, slides) = utils.methods(s) 20 | #show heading.where(level: 2): set block(below: 1em) 21 | #show: init 22 | #show: codly-init.with() 23 | 24 | #let (slide,) = utils.slides(s) 25 | #show: slides 26 | 27 | #slide[ 28 | == First slide 29 | 30 | #raw(lang: "rust", block: true, 31 | `pub fn main() { 32 | println!("Hello, world!"); 33 | }`.text) 34 | ] 35 | ``` 36 | 37 | ![image](https://github.com/touying-typ/touying/assets/34951714/0be2fbaf-cc03-4776-932f-259503d5e23a) 38 | -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.3.x/integration/fletcher.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 4 3 | --- 4 | 5 | # Fletcher 6 | 7 | Touying provides the `touying-reducer`, which adds `pause` and `meanwhile` animations to Fletcher. 8 | 9 | An example: 10 | 11 | ```typst 12 | #import "@preview/touying:0.3.1": * 13 | #import "@preview/cetz:0.2.1" 14 | #import "@preview/fletcher:0.4.2" as fletcher: node, edge 15 | 16 | #let cetz-canvas = touying-reducer.with(reduce: cetz.canvas, cover: cetz.draw.hide.with(bounds: true)) 17 | #let fletcher-diagram = touying-reducer.with(reduce: (arr, ..args) => fletcher.diagram(..args, ..arr)) 18 | 19 | #let s = themes.metropolis.register(s, aspect-ratio: "16-9", footer: self => self.info.institution) 20 | #let (init, slides) = utils.methods(s) 21 | #show: init 22 | 23 | #let (slide,) = utils.slides(s) 24 | #show: slides.with(title-slide: false, outline-slide: false) 25 | 26 | // cetz animation 27 | #slide[ 28 | Cetz in Touying: 29 | 30 | #cetz-canvas({ 31 | import cetz.draw: * 32 | 33 | rect((0,0), (5,5)) 34 | 35 | (pause,) 36 | 37 | rect((0,0), (1,1)) 38 | rect((1,1), (2,2)) 39 | rect((2,2), (3,3)) 40 | 41 | (pause,) 42 | 43 | line((0,0), (2.5, 2.5), name: "line") 44 | }) 45 | ] 46 | 47 | // fletcher animation 48 | #slide[ 49 | Fletcher in Touying: 50 | 51 | #fletcher-diagram( 52 | node-stroke: .1em, 53 | node-fill: gradient.radial(blue.lighten(80%), blue, center: (30%, 20%), radius: 80%), 54 | spacing: 4em, 55 | edge((-1,0), "r", "-|>", `open(path)`, label-pos: 0, label-side: center), 56 | node((0,0), `reading`, radius: 2em), 57 | edge((0,0), (0,0), `read()`, "--|>", bend: 130deg), 58 | pause, 59 | edge(`read()`, "-|>"), 60 | node((1,0), `eof`, radius: 2em), 61 | pause, 62 | edge(`close()`, "-|>"), 63 | node((2,0), `closed`, radius: 2em, extrude: (-2.5, 0)), 64 | edge((0,0), (2,0), `close()`, "-|>", bend: -40deg), 65 | ) 66 | ] 67 | ``` 68 | 69 | ![image](https://github.com/touying-typ/touying/assets/34951714/9ba71f54-2a5d-4144-996c-4a42833cc5cc) -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.3.x/integration/mitex.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # MiTeX 6 | 7 | During the process of creating slides, we often already have a LaTeX math equation that we simply want to paste into the slides without transcribing it into a Typst math equation. In such cases, we can use [MiTeX](https://github.com/mitex-rs/mitex). 8 | 9 | Example: 10 | 11 | ```typst 12 | #import "@preview/mitex:0.2.1": * 13 | 14 | Write inline equations like #mi("x") or #mi[y]. 15 | 16 | Also block equations (this case is from #text(blue.lighten(20%), link("https://katex.org/")[katex.org])): 17 | 18 | #mitex(` 19 | \newcommand{\f}[2]{#1f(#2)} 20 | \f\relax{x} = \int_{-\infty}^\infty 21 | \f\hat\xi\,e^{2 \pi i \xi x} 22 | \,d\xi 23 | `) 24 | ``` 25 | 26 | ![image](https://github.com/mitex-rs/mitex/assets/34951714/c425b2ae-b50b-46a8-a451-4d9e8e70626b) 27 | -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.3.x/integration/polylux.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 6 3 | --- 4 | 5 | # Polylux 6 | 7 | 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: 8 | 9 | ```typst 10 | #import "@preview/touying:0.3.1" 11 | 12 | #locate(loc => touying.pdfpc.pdfpc-file(loc)) 13 | ``` 14 | 15 | Assuming your document is `./example.typ`, you can then export the `.pdfpc` file directly using the following command: 16 | 17 | ```sh 18 | typst query --root . ./example.typ --field value --one "" > ./example.pdfpc 19 | ``` 20 | 21 | This eliminates the need for an additional `polylux2pdfpc` program. -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.3.x/progress/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Progress", 3 | "position": 11, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "Manage and display progress in Touying, such as counters and sections." 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.3.x/progress/counters.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Touying Counters 6 | 7 | The states of Touying are placed under the `states` namespace, including all counters. 8 | 9 | ## Slide Counter 10 | 11 | You can access the slide counter using `states.slide-counter` and display the current slide number with `states.slide-counter.display()`. 12 | 13 | ## Last-Slide Counter 14 | 15 | In some cases, we may need to add an appendix to slides, leading to the requirement to freeze the last-slide counter. Therefore, a second counter is maintained here. 16 | 17 | You can use `states.last-slide-number` to display the number of the last slide before the appendix. 18 | 19 | ## Progress 20 | 21 | You can use 22 | 23 | ```typst 24 | #states.touying-progress(ratio => ..) 25 | ``` 26 | 27 | to show the current progress. 28 | 29 | ## Appendix 30 | 31 | You can use 32 | 33 | ```typst 34 | // appendix by freezing last-slide-number 35 | #let s = (s.methods.appendix)(self: s) 36 | #let (slide,) = utils.methods(s) 37 | 38 | #slide[ 39 | appendix 40 | ] 41 | ``` 42 | 43 | syntax to enter the appendix. 44 | 45 | Additionally, `#let s = (s.methods.appendix-in-outline)(self: s, false)` can be used to hide the appendix section from the outline. -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.3.x/progress/sections.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # Touying Sections 6 | 7 | Touying maintains its own sections state to record the sections and subsections of slides. 8 | 9 | ## touying-outline 10 | 11 | `#touying-outline(enum-args: (:), padding: 0pt)` is used to display a simple outline. 12 | 13 | ## touying-final-sections 14 | 15 | `#states.touying-final-sections(final-sections => ..)` is used to customize the display of the outline. 16 | 17 | ## touying-progress-with-sections 18 | 19 | ```typst 20 | #states.touying-progress-with-sections((current-sections: .., final-sections: .., current-slide-number: .., last-slide-number: ..) => ..) 21 | ``` 22 | 23 | This is the most powerful one, allowing you to build any complex progress display with its functionalities. -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.3.x/themes/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Themes", 3 | "position": 9, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "One convenient aspect of using Touying is that you can use the themes provided by Touying or create your own themes or templates with the help of Touying." 7 | } 8 | } -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.3.x/utilities/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Utilities", 3 | "position": 12, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "Some convenient utility functions." 7 | } 8 | } -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.3.x/utilities/fit-to.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # Fit to Height / Width 6 | 7 | Thanks to [ntjess](https://github.com/ntjess) for the code. 8 | 9 | ## Fit to Height 10 | 11 | If you need to make an image fill the remaining slide height, you can try the `fit-to-height` function: 12 | 13 | ```typst 14 | #utils.fit-to-height(1fr)[BIG] 15 | ``` 16 | 17 | Function definition: 18 | 19 | ```typst 20 | #let fit-to-height( 21 | width: none, prescale-width: none, grow: true, shrink: true, height, body 22 | ) = { .. } 23 | ``` 24 | 25 | Parameters: 26 | 27 | - `width`: If specified, this will determine the width of the content after scaling. So, if you want the scaled content to fill half of the slide width, you can use `width: 50%`. 28 | - `prescale-width`: This parameter allows you to make Typst's layout assume that the given content is to be laid out in a container of a certain width before scaling. For example, you can use `prescale-width: 200%` assuming the slide's width is twice the original. 29 | - `grow`: Whether it can grow, default is `true`. 30 | - `shrink`: Whether it can shrink, default is `true`. 31 | - `height`: The specified height. 32 | - `body`: The specific content. 33 | 34 | ## Fit to Width 35 | 36 | If you need to limit the title width to exactly fill the slide width, you can try the `fit-to-width` function: 37 | 38 | ```typst 39 | #utils.fit-to-width(1fr)[#lorem(20)] 40 | ``` 41 | 42 | Function definition: 43 | 44 | ```typst 45 | #let fit-to-width(grow: true, shrink: true, width, body) = { .. } 46 | ``` 47 | 48 | Parameters: 49 | 50 | - `grow`: Whether it can grow, default is `true`. 51 | - `shrink`: Whether it can shrink, default is `true`. 52 | - `width`: The specified width. 53 | - `body`: The specific content. -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.3.x/utilities/oop.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Object-Oriented Programming 6 | 7 | Touying provides some convenient utility functions for object-oriented programming. 8 | 9 | --- 10 | 11 | ```typst 12 | #let call-or-display(self, it) = { 13 | if type(it) == function { 14 | return it(self) 15 | } else { 16 | return it 17 | } 18 | } 19 | ``` 20 | Call or display as-is. 21 | 22 | --- 23 | 24 | ```typst 25 | #let methods(self) = { .. } 26 | ``` 27 | Used to bind self to methods and return, very commonly used. -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.4.0+/dynamic/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Dynamic Slides", 3 | "position": 8, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "To create animations in PDF, we need to create multiple slightly different pages for the same slide. This allows animation by switching between these pages, and we refer to these pages as subslides." 7 | } 8 | } -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.4.0+/dynamic/handout.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 6 3 | --- 4 | 5 | # Handout Mode 6 | 7 | While watching slides and attending lectures, the audience often wishes to have handouts for reviewing challenging concepts. Therefore, it's beneficial for the author to provide handouts for the audience, preferably before the lecture for better preparation. 8 | 9 | The handout mode differs from the regular mode as it doesn't require intricate animation effects. It retains only the last subslide of each slide. 10 | 11 | Enabling handout mode is simple: 12 | 13 | ```typst 14 | #let s = (s.methods.enable-handout-mode)(self: s) 15 | ``` 16 | -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.4.0+/dynamic/simple.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Simple Animations 6 | 7 | Touying provides two markers for simple animation effects: `#pause` and `#meanwhile`. 8 | 9 | ## pause 10 | 11 | The purpose of `#pause` is straightforward – it separates the subsequent content into the next subslide. You can use multiple `#pause` to create multiple subslides. Here's a simple example: 12 | 13 | ```typst 14 | #slide[ 15 | First #pause Second 16 | 17 | #pause 18 | 19 | Third 20 | ] 21 | ``` 22 | 23 | ![image](https://github.com/touying-typ/touying/assets/34951714/a3bed1d3-e660-456d-8a54-a914436f43bf) 24 | 25 | This example will create three subslides, gradually revealing the content. 26 | 27 | As you can see, `#pause` can be used inline or on a separate line. 28 | 29 | ## meanwhile 30 | 31 | In some cases, you may need to display additional content simultaneously with `#pause`. In such cases, you can use `#meanwhile`. 32 | 33 | ```typst 34 | #slide[ 35 | First 36 | 37 | #pause 38 | 39 | Second 40 | 41 | #meanwhile 42 | 43 | Third 44 | 45 | #pause 46 | 47 | Fourth 48 | ] 49 | ``` 50 | 51 | ![image](https://github.com/touying-typ/touying/assets/34951714/24ca19a3-b27c-4d31-ab75-09c37911e6ac) 52 | 53 | This example will create only two subslides, with "First" and "Third" displayed simultaneously, and "Second" and "Fourth" displayed simultaneously. 54 | 55 | ## Handling layout functions 56 | 57 | If you use layout functions like `grid` inside `slide[..]`, you might be surprised to find that subsequent `#pause` and `#meanwhile` do not work. This is because Touying cannot detect the content inside layout functions. But you can use the `composer` parameter of `#slide()` to meet most requirements. 58 | 59 | :::tip[Internals] 60 | 61 | Touying doesn't rely on `counter` and `locate` to implement `#pause`. Instead, it has a parser written in Typst script. It parses the input content block as a sequence and then transforms and reorganizes this sequence into the series of subslides we need. 62 | 63 | ::: -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.4.0+/external/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "External Tools", 3 | "position": 14, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "Integrate external tools with Touying." 7 | } 8 | } -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.4.0+/external/pdfpc.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Pdfpc 6 | 7 | [pdfpc](https://pdfpc.github.io/) is a "Presenter Console with multi-monitor support for PDF files." This means you can use it to display slides in the form of PDF pages and it comes with some known excellent features, much like PowerPoint. 8 | 9 | pdfpc has a JSON-formatted `.pdfpc` file that can provide additional information for PDF slides. While you can manually write this file, you can also manage it through Touying. 10 | 11 | 12 | ## Adding Metadata 13 | 14 | Touying remains consistent with [Polylux](https://polylux.dev/book/external/pdfpc.html) to avoid conflicts between APIs. 15 | 16 | For example, you can add notes using `#pdfpc.speaker-note("This is a note that only the speaker will see.")`. 17 | 18 | 19 | ## Pdfpc Configuration 20 | 21 | To add pdfpc configurations, you can use 22 | 23 | ```typst 24 | #let s = (s.methods.append-preamble)(self: s, pdfpc.config( 25 | duration-minutes: 30, 26 | start-time: datetime(hour: 14, minute: 10, second: 0), 27 | end-time: datetime(hour: 14, minute: 40, second: 0), 28 | last-minutes: 5, 29 | note-font-size: 12, 30 | disable-markdown: false, 31 | default-transition: ( 32 | type: "push", 33 | duration-seconds: 2, 34 | angle: ltr, 35 | alignment: "vertical", 36 | direction: "inward", 37 | ), 38 | )) 39 | ``` 40 | 41 | Add the corresponding configurations. Refer to [Polylux](https://polylux.dev/book/external/pdfpc.html) for specific configuration details. 42 | 43 | 44 | ## Exporting .pdfpc File 45 | 46 | Assuming your document is `./example.typ`, you can export the `.pdfpc` file directly using: 47 | 48 | ```sh 49 | typst query --root . ./example.typ --field value --one "" > ./example.pdfpc 50 | ``` 51 | 52 | With the compatibility of Touying and Polylux, you can make Polylux also support direct export by adding the following code: 53 | 54 | ```typst 55 | #import "@preview/touying:0.4.0" 56 | 57 | #locate(loc => touying.pdfpc.pdfpc-file(loc)) 58 | ``` -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.4.0+/external/typst-preview.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # Typst Preview 6 | 7 | The Typst Preview extension for VS Code provides an excellent slide mode, allowing us to preview and present slides. 8 | 9 | Press `Ctrl/Cmd + Shift + P` and type `Typst Preview: Preview current file in slide mode` to open the preview in slide mode. 10 | 11 | Press `Ctrl/Cmd + Shift + P` and type `Typst Preview: Preview current file in browser and slide mode` to open the slide mode in the browser. 12 | 13 | Now, you can press keys like `F11` to enter fullscreen mode in the browser, making it suitable for slide presentations. 14 | 15 | Since Typst Preview is based on SVG, it can play GIF animations, which is very helpful for dynamic slides. -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.4.0+/integration/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Package Integration", 3 | "position": 9, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "Discover how to integrate third-party packages with Touying." 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.4.0+/integration/codly.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 5 3 | --- 4 | 5 | # Codly 6 | 7 | When using Codly, we should initialize it using the `s.methods.append-preamble` method. 8 | 9 | ```typst 10 | #import "@preview/touying:0.4.0": * 11 | #import "@preview/codly:0.2.0": * 12 | 13 | #let s = themes.simple.register(aspect-ratio: "16-9") 14 | #let s = (s.methods.append-preamble)(self: s)[ 15 | #codly(languages: ( 16 | rust: (name: "Rust", icon: "\u{fa53}", color: rgb("#CE412B")), 17 | )) 18 | ] 19 | #let (init, slides) = utils.methods(s) 20 | #show heading.where(level: 2): set block(below: 1em) 21 | #show: init 22 | #show: codly-init.with() 23 | 24 | #let (slide, empty-slide) = utils.slides(s) 25 | #show: slides 26 | 27 | #slide[ 28 | == First slide 29 | 30 | #raw(lang: "rust", block: true, 31 | `pub fn main() { 32 | println!("Hello, world!"); 33 | }`.text) 34 | ] 35 | ``` 36 | 37 | ![image](https://github.com/touying-typ/touying/assets/34951714/0be2fbaf-cc03-4776-932f-259503d5e23a) 38 | -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.4.0+/integration/fletcher.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 4 3 | --- 4 | 5 | # Fletcher 6 | 7 | Touying provides the `touying-reducer`, which adds `pause` and `meanwhile` animations to Fletcher. 8 | 9 | An example: 10 | 11 | ```typst 12 | #import "@preview/touying:0.4.0": * 13 | #import "@preview/cetz:0.2.2" 14 | #import "@preview/fletcher:0.4.3" as fletcher: node, edge 15 | 16 | // cetz and fletcher bindings for touying 17 | #let cetz-canvas = touying-reducer.with(reduce: cetz.canvas, cover: cetz.draw.hide.with(bounds: true)) 18 | #let fletcher-diagram = touying-reducer.with(reduce: fletcher.diagram, cover: fletcher.hide) 19 | 20 | #let s = themes.metropolis.register(aspect-ratio: "16-9", footer: self => self.info.institution) 21 | #let (init, slides) = utils.methods(s) 22 | #show: init 23 | 24 | #let (slide, empty-slide) = utils.slides(s) 25 | #show: slides.with(title-slide: false, outline-slide: false) 26 | 27 | // cetz animation 28 | #slide[ 29 | Cetz in Touying: 30 | 31 | #cetz-canvas({ 32 | import cetz.draw: * 33 | 34 | rect((0,0), (5,5)) 35 | 36 | (pause,) 37 | 38 | rect((0,0), (1,1)) 39 | rect((1,1), (2,2)) 40 | rect((2,2), (3,3)) 41 | 42 | (pause,) 43 | 44 | line((0,0), (2.5, 2.5), name: "line") 45 | }) 46 | ] 47 | 48 | // fletcher animation 49 | #slide[ 50 | Fletcher in Touying: 51 | 52 | #fletcher-diagram( 53 | node-stroke: .1em, 54 | node-fill: gradient.radial(blue.lighten(80%), blue, center: (30%, 20%), radius: 80%), 55 | spacing: 4em, 56 | edge((-1,0), "r", "-|>", `open(path)`, label-pos: 0, label-side: center), 57 | node((0,0), `reading`, radius: 2em), 58 | edge((0,0), (0,0), `read()`, "--|>", bend: 130deg), 59 | pause, 60 | edge(`read()`, "-|>"), 61 | node((1,0), `eof`, radius: 2em), 62 | pause, 63 | edge(`close()`, "-|>"), 64 | node((2,0), `closed`, radius: 2em, extrude: (-2.5, 0)), 65 | edge((0,0), (2,0), `close()`, "-|>", bend: -40deg), 66 | ) 67 | ] 68 | ``` 69 | 70 | ![image](https://github.com/touying-typ/touying/assets/34951714/9ba71f54-2a5d-4144-996c-4a42833cc5cc) -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.4.0+/integration/mitex.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # MiTeX 6 | 7 | During the process of creating slides, we often already have a LaTeX math equation that we simply want to paste into the slides without transcribing it into a Typst math equation. In such cases, we can use [MiTeX](https://github.com/mitex-rs/mitex). 8 | 9 | Example: 10 | 11 | ```typst 12 | #import "@preview/mitex:0.2.1": * 13 | 14 | Write inline equations like #mi("x") or #mi[y]. 15 | 16 | Also block equations (this case is from #text(blue.lighten(20%), link("https://katex.org/")[katex.org])): 17 | 18 | #mitex(` 19 | \newcommand{\f}[2]{#1f(#2)} 20 | \f\relax{x} = \int_{-\infty}^\infty 21 | \f\hat\xi\,e^{2 \pi i \xi x} 22 | \,d\xi 23 | `) 24 | ``` 25 | 26 | ![image](https://github.com/mitex-rs/mitex/assets/34951714/c425b2ae-b50b-46a8-a451-4d9e8e70626b) 27 | -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.4.0+/progress/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Progress", 3 | "position": 12, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "Manage and display progress in Touying, such as counters and sections." 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.4.0+/progress/counters.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Touying Counters 6 | 7 | The states of Touying are placed under the `states` namespace, including all counters. 8 | 9 | ## Slide Counter 10 | 11 | You can access the slide counter using `states.slide-counter` and display the current slide number with `states.slide-counter.display()`. 12 | 13 | ## Last-Slide Counter 14 | 15 | In some cases, we may need to add an appendix to slides, leading to the requirement to freeze the last-slide counter. Therefore, a second counter is maintained here. 16 | 17 | You can use `states.last-slide-number` to display the number of the last slide before the appendix. 18 | 19 | ## Progress 20 | 21 | You can use 22 | 23 | ```typst 24 | #states.touying-progress(ratio => ..) 25 | ``` 26 | 27 | to show the current progress. 28 | 29 | ## Appendix 30 | 31 | You can use 32 | 33 | ```typst 34 | // appendix by freezing last-slide-number 35 | #let s = (s.methods.appendix)(self: s) 36 | #let (slide, empty-slide) = utils.methods(s) 37 | 38 | #slide[ 39 | appendix 40 | ] 41 | ``` 42 | 43 | syntax to enter the appendix. 44 | 45 | Additionally, `#let s = (s.methods.appendix-in-outline)(self: s, false)` can be used to hide the appendix section from the outline. -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.4.0+/progress/sections.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # Touying Sections 6 | 7 | Touying maintains its own sections state to record the sections and subsections of slides. 8 | 9 | ## touying-outline 10 | 11 | `#touying-outline(enum-args: (:), padding: 0pt)` is used to display a simple outline. 12 | 13 | ## touying-final-sections 14 | 15 | `#states.touying-final-sections(final-sections => ..)` is used to customize the display of the outline. 16 | 17 | ## touying-progress-with-sections 18 | 19 | ```typst 20 | #states.touying-progress-with-sections((current-sections: .., final-sections: .., current-slide-number: .., last-slide-number: ..) => ..) 21 | ``` 22 | 23 | This is the most powerful one, allowing you to build any complex progress display with its functionalities. -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.4.0+/themes/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Themes", 3 | "position": 10, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "One convenient aspect of using Touying is that you can use the themes provided by Touying or create your own themes or templates with the help of Touying." 7 | } 8 | } -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.4.0+/utilities/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Utilities", 3 | "position": 13, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "Some convenient utility functions." 7 | } 8 | } -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.4.0+/utilities/fit-to.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # Fit to Height / Width 6 | 7 | Thanks to [ntjess](https://github.com/ntjess) for the code. 8 | 9 | ## Fit to Height 10 | 11 | If you need to make an image fill the remaining slide height, you can try the `fit-to-height` function: 12 | 13 | ```typst 14 | #utils.fit-to-height(1fr)[BIG] 15 | ``` 16 | 17 | Function definition: 18 | 19 | ```typst 20 | #let fit-to-height( 21 | width: none, prescale-width: none, grow: true, shrink: true, height, body 22 | ) = { .. } 23 | ``` 24 | 25 | Parameters: 26 | 27 | - `width`: If specified, this will determine the width of the content after scaling. So, if you want the scaled content to fill half of the slide width, you can use `width: 50%`. 28 | - `prescale-width`: This parameter allows you to make Typst's layout assume that the given content is to be laid out in a container of a certain width before scaling. For example, you can use `prescale-width: 200%` assuming the slide's width is twice the original. 29 | - `grow`: Whether it can grow, default is `true`. 30 | - `shrink`: Whether it can shrink, default is `true`. 31 | - `height`: The specified height. 32 | - `body`: The specific content. 33 | 34 | ## Fit to Width 35 | 36 | If you need to limit the title width to exactly fill the slide width, you can try the `fit-to-width` function: 37 | 38 | ```typst 39 | #utils.fit-to-width(1fr)[#lorem(20)] 40 | ``` 41 | 42 | Function definition: 43 | 44 | ```typst 45 | #let fit-to-width(grow: true, shrink: true, width, body) = { .. } 46 | ``` 47 | 48 | Parameters: 49 | 50 | - `grow`: Whether it can grow, default is `true`. 51 | - `shrink`: Whether it can shrink, default is `true`. 52 | - `width`: The specified width. 53 | - `body`: The specific content. -------------------------------------------------------------------------------- /touying/docs/versioned_docs/version-0.4.0+/utilities/oop.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Object-Oriented Programming 6 | 7 | Touying provides some convenient utility functions for object-oriented programming. 8 | 9 | --- 10 | 11 | ```typst 12 | #let call-or-display(self, it) = { 13 | if type(it) == function { 14 | return it(self) 15 | } else { 16 | return it 17 | } 18 | } 19 | ``` 20 | Call or display as-is. 21 | 22 | --- 23 | 24 | ```typst 25 | #let methods(self) = { .. } 26 | ``` 27 | Used to bind self to methods and return, very commonly used. -------------------------------------------------------------------------------- /touying/docs/versioned_sidebars/version-0.2.x-sidebars.json: -------------------------------------------------------------------------------- 1 | { 2 | "tutorialSidebar": [ 3 | { 4 | "type": "autogenerated", 5 | "dirName": "." 6 | } 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /touying/docs/versioned_sidebars/version-0.3.2+-sidebars.json: -------------------------------------------------------------------------------- 1 | { 2 | "tutorialSidebar": [ 3 | { 4 | "type": "autogenerated", 5 | "dirName": "." 6 | } 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /touying/docs/versioned_sidebars/version-0.3.x-sidebars.json: -------------------------------------------------------------------------------- 1 | { 2 | "tutorialSidebar": [ 3 | { 4 | "type": "autogenerated", 5 | "dirName": "." 6 | } 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /touying/docs/versioned_sidebars/version-0.4.0+-sidebars.json: -------------------------------------------------------------------------------- 1 | { 2 | "tutorialSidebar": [ 3 | { 4 | "type": "autogenerated", 5 | "dirName": "." 6 | } 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /touying/docs/versions.json: -------------------------------------------------------------------------------- 1 | [ 2 | "0.4.0+", 3 | "0.3.2+", 4 | "0.3.x", 5 | "0.2.x" 6 | ] 7 | -------------------------------------------------------------------------------- /touying/examples/aqua-zh.typ: -------------------------------------------------------------------------------- 1 | #import "../lib.typ": * 2 | 3 | #let s = themes.aqua.register(aspect-ratio: "16-9", lang: "zh") 4 | #let s = (s.methods.info)( 5 | self: s, 6 | title: [标题], 7 | subtitle: [副标题], 8 | author: [作者], 9 | date: datetime.today(), 10 | institution: [机构], 11 | ) 12 | #let (init, slides, touying-outline, alert) = utils.methods(s) 13 | #show: init 14 | 15 | #show strong: alert 16 | 17 | #let (slide, empty-slide, title-slide, outline-slide, focus-slide) = utils.slides(s) 18 | #show: slides 19 | 20 | = 第一节 21 | 22 | == 小标题 23 | 24 | #slide[ 25 | #lorem(40) 26 | ] 27 | 28 | #slide[ 29 | #lorem(40) 30 | ] 31 | 32 | == 总结 33 | 34 | #align(center + horizon)[ 35 | #set text(size: 3em, weight: "bold", s.colors.primary) 36 | 37 | THANKS FOR ALL 38 | 39 | 敬请指正！ 40 | ] -------------------------------------------------------------------------------- /touying/examples/aqua.typ: -------------------------------------------------------------------------------- 1 | #import "../lib.typ": * 2 | 3 | #let s = themes.aqua.register(aspect-ratio: "16-9", lang: "en") 4 | #let s = (s.methods.info)( 5 | self: s, 6 | title: [Title], 7 | subtitle: [Subtitle], 8 | author: [Authors], 9 | date: datetime.today(), 10 | institution: [Institution], 11 | ) 12 | #let (init, slides, touying-outline, alert) = utils.methods(s) 13 | #show: init 14 | 15 | #show strong: alert 16 | 17 | #let (slide, empty-slide, title-slide, outline-slide, focus-slide) = utils.slides(s) 18 | #show: slides 19 | 20 | = The Section 21 | 22 | == Slide Title 23 | 24 | #slide[ 25 | #lorem(40) 26 | ] 27 | 28 | #focus-slide[ 29 | Another variant with primary color in background... 30 | ] 31 | 32 | == Summary 33 | 34 | #align(center + horizon)[ 35 | #set text(size: 3em, weight: "bold", s.colors.primary) 36 | THANKS FOR ALL 37 | ] 38 | 39 | -------------------------------------------------------------------------------- /touying/examples/dewdrop.typ: -------------------------------------------------------------------------------- 1 | #import "../lib.typ": * 2 | 3 | #let s = themes.dewdrop.register( 4 | aspect-ratio: "16-9", 5 | footer: [Dewdrop], 6 | navigation: "mini-slides", 7 | // navigation: none, 8 | ) 9 | #let s = (s.methods.info)( 10 | self: s, 11 | title: [Title], 12 | subtitle: [Subtitle], 13 | author: [Authors], 14 | date: datetime.today(), 15 | institution: [Institution], 16 | ) 17 | #let (init, slides, touying-outline, alert) = utils.methods(s) 18 | #show: init 19 | 20 | #show strong: alert 21 | 22 | #let (slide, empty-slide, title-slide, new-section-slide, focus-slide) = utils.slides(s) 23 | #show: slides 24 | 25 | = Section A 26 | 27 | == Subsection A.1 28 | 29 | #slide[ 30 | A slide with equation: 31 | 32 | $ x_(n+1) = (x_n + a/x_n) / 2 $ 33 | ] 34 | 35 | == Subsection A.2 36 | 37 | #slide[ 38 | A slide without a title but with *important* infos 39 | ] 40 | 41 | = Section B 42 | 43 | == Subsection B.1 44 | 45 | #slide[ 46 | #lorem(80) 47 | ] 48 | 49 | #focus-slide[ 50 | Wake up! 51 | ] 52 | 53 | == Subsection B.2 54 | 55 | #slide[ 56 | We can use `#pause` to #pause display something later. 57 | 58 | #pause 59 | 60 | Just like this. 61 | 62 | #meanwhile 63 | 64 | Meanwhile, #pause we can also use `#meanwhile` to #pause display other content synchronously. 65 | ] 66 | 67 | // appendix by freezing last-slide-number 68 | #let s = (s.methods.appendix)(self: s) 69 | #let (slide,) = utils.slides(s) 70 | 71 | = Appendix 72 | 73 | === Appendix 74 | 75 | #slide[ 76 | Please pay attention to the current slide number. 77 | ] -------------------------------------------------------------------------------- /touying/examples/metropolis.typ: -------------------------------------------------------------------------------- 1 | #import "../lib.typ": * 2 | 3 | #let s = themes.metropolis.register(aspect-ratio: "16-9", footer: self => self.info.institution) 4 | #let s = (s.methods.info)( 5 | self: s, 6 | title: [Title], 7 | subtitle: [Subtitle], 8 | author: [Authors], 9 | date: datetime.today(), 10 | institution: [Institution], 11 | ) 12 | #let (init, slides, touying-outline, alert) = utils.methods(s) 13 | #show: init 14 | 15 | #set text(font: "Fira Sans", weight: "light", size: 20pt) 16 | #show math.equation: set text(font: "Fira Math") 17 | #set strong(delta: 100) 18 | #set par(justify: true) 19 | #show strong: alert 20 | 21 | #let (slide, empty-slide, title-slide, new-section-slide, focus-slide) = utils.slides(s) 22 | #show: slides 23 | 24 | = First Section 25 | 26 | #slide[ 27 | A slide without a title but with some *important* information. 28 | ] 29 | 30 | == A long long long long long long long long long long long long long long long long long long long long long long long long Title 31 | 32 | #slide[ 33 | A slide with equation: 34 | 35 | $ x_(n+1) = (x_n + a/x_n) / 2 $ 36 | 37 | #lorem(200) 38 | ] 39 | 40 | = Second Section 41 | 42 | #focus-slide[ 43 | Wake up! 44 | ] 45 | 46 | == Simple Animation 47 | 48 | #slide[ 49 | A simple #pause dynamic slide with #alert[alert] 50 | 51 | #pause 52 | 53 | text. 54 | ] 55 | 56 | // appendix by freezing last-slide-number 57 | #let s = (s.methods.appendix)(self: s) 58 | #let (slide,) = utils.slides(s) 59 | 60 | = Appendix 61 | 62 | #slide[ 63 | Appendix. 64 | ] -------------------------------------------------------------------------------- /touying/examples/simple.typ: -------------------------------------------------------------------------------- 1 | #import "../lib.typ": * 2 | 3 | #let s = themes.simple.register(aspect-ratio: "16-9", footer: [Simple slides]) 4 | #let (init, slides) = utils.methods(s) 5 | #show: init 6 | 7 | #let (slide, empty-slide, title-slide, centered-slide, focus-slide) = utils.slides(s) 8 | #show: slides 9 | 10 | #title-slide[ 11 | = Keep it simple! 12 | #v(2em) 13 | 14 | Alpha #footnote[Uni Augsburg] #h(1em) 15 | Bravo #footnote[Uni Bayreuth] #h(1em) 16 | Charlie #footnote[Uni Chemnitz] #h(1em) 17 | 18 | July 23 19 | ] 20 | 21 | == First slide 22 | 23 | #slide[ 24 | #lorem(20) 25 | ] 26 | 27 | #focus-slide[ 28 | _Focus!_ 29 | 30 | This is very important. 31 | ] 32 | 33 | = Let's start a new section! 34 | 35 | == Dynamic slide 36 | 37 | #slide[ 38 | Did you know that... 39 | 40 | #pause 41 | 42 | ...you can see the current section at the top of the slide? 43 | ] -------------------------------------------------------------------------------- /touying/examples/slides.typ: -------------------------------------------------------------------------------- 1 | #import "../lib.typ": * 2 | 3 | #let s = themes.default.register(aspect-ratio: "16-9") 4 | // #let s = themes.simple.register(aspect-ratio: "16-9", footer: [Simple slides]) 5 | // #let s = themes.metropolis.register(aspect-ratio: "16-9", footer: [Custom footer]) 6 | // #let s = themes.dewdrop.register(aspect-ratio: "16-9", footer: [Dewdrop]) 7 | // #let s = themes.university.register(aspect-ratio: "16-9") 8 | // #let s = themes.aqua.register(aspect-ratio: "16-9") 9 | #let s = (s.methods.info)( 10 | self: s, 11 | title: [Title], 12 | subtitle: [Subtitle], 13 | author: [Authors], 14 | date: datetime.today(), 15 | institution: [Institution], 16 | ) 17 | #let s = (s.methods.enable-transparent-cover)(self: s) 18 | #let (init, slides, touying-outline, alert) = utils.methods(s) 19 | #show: init 20 | 21 | #show strong: alert 22 | 23 | #let (slide, empty-slide) = utils.slides(s) 24 | #show: slides 25 | 26 | = Let's start a new section 27 | 28 | == First Title 29 | 30 | First content 31 | 32 | #pause 33 | 34 | with a pause. 35 | 36 | == Second Title 37 | 38 | Second content. -------------------------------------------------------------------------------- /touying/examples/university.typ: -------------------------------------------------------------------------------- 1 | #import "../lib.typ": * 2 | 3 | #let s = themes.university.register(aspect-ratio: "16-9") 4 | #let s = (s.methods.info)( 5 | self: s, 6 | title: [Title], 7 | subtitle: [Subtitle], 8 | author: [Authors], 9 | date: datetime.today(), 10 | institution: [Institution], 11 | ) 12 | #let (init, slides, touying-outline, alert) = utils.methods(s) 13 | #show: init 14 | 15 | #show strong: alert 16 | 17 | #let (slide, empty-slide, title-slide, focus-slide, matrix-slide) = utils.slides(s) 18 | #show: slides.with(title-slide: false) 19 | 20 | #title-slide(authors: ([Author A], [Author B])) 21 | 22 | = The Section 23 | 24 | == Slide Title 25 | 26 | #slide[ 27 | #lorem(40) 28 | ] 29 | 30 | #slide(subtitle: emph[What is the problem?])[ 31 | #lorem(40) 32 | ] 33 | 34 | #focus-slide[ 35 | Another variant with primary color in background... 36 | ] 37 | 38 | #matrix-slide[ 39 | left 40 | ][ 41 | middle 42 | ][ 43 | right 44 | ] 45 | 46 | #matrix-slide(columns: 1)[ 47 | top 48 | ][ 49 | bottom 50 | ] 51 | 52 | #matrix-slide(columns: (1fr, 2fr, 1fr), ..(lorem(8),) * 9) -------------------------------------------------------------------------------- /touying/lib.typ: -------------------------------------------------------------------------------- 1 | #import "slide.typ": pause, meanwhile, slides-end, touying-equation, touying-reducer 2 | #import "utils/utils.typ" 3 | #import "utils/states.typ" 4 | #import "utils/pdfpc.typ" 5 | #import "utils/components.typ" 6 | #import "themes/themes.typ" -------------------------------------------------------------------------------- /touying/themes/default.typ: -------------------------------------------------------------------------------- 1 | #import "../slide.typ": s 2 | 3 | // export default self 4 | #let register(self: s, aspect-ratio: "16-9") = { 5 | self.page-args += ( 6 | paper: "presentation-" + aspect-ratio, 7 | ) 8 | self 9 | } 10 | -------------------------------------------------------------------------------- /touying/themes/themes.typ: -------------------------------------------------------------------------------- 1 | #import "default.typ" 2 | #import "simple.typ" 3 | #import "metropolis.typ" 4 | #import "dewdrop.typ" 5 | #import "university.typ" 6 | #import "aqua.typ" -------------------------------------------------------------------------------- /touying/typst.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "touying" 3 | version = "0.4.0" 4 | entrypoint = "lib.typ" 5 | authors = ["OrangeX4", "Andreas Kröpelin", "ntjess", "Enivex", "Pol Dellaiera", "pride7"] 6 | license = "MIT" 7 | description = "A powerful package for creating presentation slides in Typst." 8 | repository = "https://github.com/touying-typ/touying" 9 | keywords = ["presentation", "slides", "lecture", "touying"] 10 | categories = ["presentation"] 11 | exclude = ["examples"] 12 | compiler = "0.11.0" -------------------------------------------------------------------------------- /touying/utils/components.typ: -------------------------------------------------------------------------------- 1 | #let cell = block.with(width: 100%, height: 100%, above: 0pt, below: 0pt, breakable: false) --------------------------------------------------------------------------------