https://touying-typ.github.io/assets/js/81f2290c.ea82ee3f.js

1"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[6966],{89857:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>l,default:()=>d,frontMatter:()=>s,metadata:()=>c,toc:()=>r});var i=n(85893),o=n(11151);const s={sidebar_position:6},l="Multi-File Architecture",c={id:"tutorials/multi-file",title:"Multi-File Architecture",description:"Touying features a syntax as concise as native Typst documents, along with numerous customizable configuration options, yet it still maintains real-time incremental compilation performance, making it suitable for writing large-scale slides.",source:"@site/docs/tutorials/multi-file.md",sourceDirName:"tutorials",slug:"/tutorials/multi-file",permalink:"/docs/tutorials/multi-file",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/en/tutorials/multi-file.md",tags:[],version:"current",sidebarPosition:6,frontMatter:{sidebar_position:6},sidebar:"tutorialSidebar",previous:{title:"Waypoints",permalink:"/docs/tutorials/dynamic/waypoints"},next:{title:"Progress & Sections",permalink:"/docs/category/progress--sections"}},a={},r=[{value:"Configuration and Content Separation",id:"configuration-and-content-separation",level:2},{value:"Multiple Sections",id:"multiple-sections",level:2}];function u(e){const t={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.h1,{id:"multi-file-architecture",children:"Multi-File Architecture"}),"\n",(0,i.jsx)(t.p,{children:"Touying features a syntax as concise as native Typst documents, along with numerous customizable configuration options, yet it still maintains real-time incremental compilation performance, making it suitable for writing large-scale slides."}),"\n",(0,i.jsx)(t.p,{children:"If you need to write a large set of slides, such as a course manual spanning tens or hundreds of pages, you can also try Touying's multi-file architecture."}),"\n",(0,i.jsx)(t.h2,{id:"configuration-and-content-separation",children:"Configuration and Content Separation"}),"\n",(0,i.jsxs)(t.p,{children:["A simple Touying multi-file architecture consists of three files: a global configuration file ",(0,i.jsx)(t.code,{children:"globals.typ"}),", a main entry file ",(0,i.jsx)(t.code,{children:"main.typ"}),", and a content file ",(0,i.jsx)(t.code,{children:"content.typ"})," for storing the actual content."]}),"\n",(0,i.jsxs)(t.p,{children:["These three files are separated to allow both ",(0,i.jsx)(t.code,{children:"main.typ"})," and ",(0,i.jsx)(t.code,{children:"content.typ"})," to import ",(0,i.jsx)(t.code,{children:"globals.typ"})," without causing circular references."]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"globals.typ"})," can be used to store some global custom functions and initialize Touying themes:"]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-typst",children:'// globals.typ\n#import "@preview/touying:0.7.4": *\n#import themes.university: *\n\n// as well as some utility functions\n'})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"main.typ"}),", as the main entry point of the project, applies show rules by importing ",(0,i.jsx)(t.code,{children:"globals.typ"})," and includes ",(0,i.jsx)(t.code,{children:"content.typ"})," using ",(0,i.jsx)(t.code,{children:"#include"}),":"]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-typst",children:'// main.typ\n#import "/globals.typ": *\n\n#show: university-theme.with(\n  aspect-ratio: "16-9",\n  config-info(\n    title: [Title],\n    subtitle: [Subtitle],\n    author: [Authors],\n    date: datetime.today(),\n    institution: [Institution],\n    contact: [contact\\@mail.com],\n    logo: emoji.school,\n  ),\n)\n\n#include "content.typ"\n'})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"content.typ"})," is where you write the actual content:"]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-typst",children:'// content.typ\n#import "/globals.typ": *\n\n= The Section\n\n== Slide Title\n\nHello, Touying!\n\n#focus-slide[\n  Focus on me.\n]\n'})}),"\n",(0,i.jsx)(t.h2,{id:"multiple-sections",children:"Multiple Sections"}),"\n",(0,i.jsxs)(t.p,{children:["Implementing multiple sections is also straightforward. You only need to create a ",(0,i.jsx)(t.code,{children:"sections"})," directory and move the ",(0,i.jsx)(t.code,{children:"content.typ"})," file to the ",(0,i.jsx)(t.code,{children:"sections.typ"})," directory, for example:"]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-typst",children:'// main.typ\n#import "/globals.typ": *\n\n#show: university-theme.with(\n  aspect-ratio: "16-9",\n  config-info(\n    title: [Title],\n    subtitle: [Subtitle],\n    author: [Authors],\n    date: datetime.today(),\n    institution: [Institution],\n    contact: [contact\\@mail.com],\n    logo: emoji.school,\n  ),\n)\n\n#include "sections/content.typ"\n// #include "sections/another-section.typ"\n'})}),"\n",(0,i.jsx)(t.p,{children:"And"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-typst",children:'// sections/content.typ\n#import "/globals.typ": *\n\n= The Section\n\n== Slide Title\n\nHello, Touying!\n\n#focus-slide[\n  Focus on me.\n]\n'})}),"\n",(0,i.jsx)(t.p,{children:"Now, you have learned how to use Touying to achieve a multi-file architecture for large-scale slides."})]})}function d(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(u,{...e})}):u(e)}},11151:(e,t,n)=>{n.d(t,{Z:()=>c,a:()=>l});var i=n(67294);const o={},s=i.createContext(o);function l(e){const t=i.useContext(s);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:l(e.components),i.createElement(s.Provider,{value:t},e.children)}}}]);