https://touying-typ.github.io/assets/js/b89f5fac.15682ec0.js

1"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[1266],{81179:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>r,contentTitle:()=>l,default:()=>h,frontMatter:()=>s,metadata:()=>a,toc:()=>c});var i=t(85893),o=t(11151);const s={sidebar_position:3},l="Settings and Config",a={id:"tutorials/settings",title:"Settings and Config",description:"Global Styles",source:"@site/docs/tutorials/settings.md",sourceDirName:"tutorials",slug:"/tutorials/settings",permalink:"/docs/tutorials/settings",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/en/tutorials/settings.md",tags:[],version:"current",sidebarPosition:3,frontMatter:{sidebar_position:3},sidebar:"tutorialSidebar",previous:{title:"Sections and Subsections",permalink:"/docs/tutorials/sections"},next:{title:"Page Layout",permalink:"/docs/tutorials/layout"}},r={},c=[{value:"Global Styles",id:"global-styles",level:2},{value:"Global Information",id:"global-information",level:2},{value:"Preamble",id:"preamble",level:2},{value:"Show-Rule Config Overrides",id:"show-rule-config-overrides",level:2},{value:"Local Config Overrides",id:"local-config-overrides",level:2},{value:"Deferred Config Show Rules",id:"deferred-config-show-rules",level:2},{value:"Frozen Counters",id:"frozen-counters",level:2},{value:"Accessing Config Information",id:"accessing-config-information",level:2},{value:"Querying the Entire Config",id:"querying-the-entire-config",level:3},{value:"Querying by Key",id:"querying-by-key",level:3},{value:"Default Values",id:"default-values",level:3},{value:"Accessing Custom Config",id:"accessing-custom-config",level:3}];function d(e){const n={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",img:"img",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"settings-and-config",children:"Settings and Config"}),"\n",(0,i.jsx)(n.h2,{id:"global-styles",children:"Global Styles"}),"\n",(0,i.jsxs)(n.p,{children:["For Touying, global styles refer to set rules or show rules that need to be applied everywhere, such as ",(0,i.jsx)(n.code,{children:"#set text(size: 20pt)"}),"."]}),"\n",(0,i.jsxs)(n.p,{children:["Themes in Touying encapsulate some of their own global styles, which are placed in ",(0,i.jsx)(n.code,{children:"#self.methods.init"}),". For example, the simple theme encapsulates:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"config-methods(\n  init: (self: none, body) => {\n    set text(fill: self.colors.neutral-darkest, size: 25pt)\n    show footnote.entry: set text(size: .6em)\n    show strong: self.methods.alert.with(self: self)\n    show heading.where(level: self.slide-level + 1): set text(1.4em)\n\n    body\n  },\n)\n"})}),"\n",(0,i.jsxs)(n.p,{children:["If you are not a theme creator but simply want to add some of your own global styles to your slides, you can easily place them before or after ",(0,i.jsx)(n.code,{children:"#show: xxx-theme.with()"}),". For example, the metropolis theme recommends that you add the following global styles yourself:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#set text(font: "Fira Sans", weight: "light", size: 20pt)\n#show math.equation: set text(font: "Fira Math")\n#set strong(delta: 100)\n#set par(justify: true)\n'})}),"\n",(0,i.jsx)(n.h2,{id:"global-information",children:"Global Information"}),"\n",(0,i.jsx)(n.p,{children:"Like Beamer, Touying helps you better maintain global information through a unified API design, allowing you to easily switch between different themes. Global information is a typical example of this."}),"\n",(0,i.jsx)(n.p,{children:"You can set the title, subtitle, author, date, institution, contact and logo information of your slides with:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typc",children:"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: [logo.png],\n  extra: (supervisor:[Supervisor],),\n)\n"})}),"\n",(0,i.jsx)(n.p,{children:"You can even pass extra information, to maintain presentation information not covered by the other attributes."}),"\n",(0,i.jsxs)(n.p,{children:["Later on, you can access them through ",(0,i.jsx)(n.code,{children:"self.info"}),"."]}),"\n",(0,i.jsxs)(n.p,{children:["This information is generally used in the theme's ",(0,i.jsx)(n.code,{children:"title-slide"}),", ",(0,i.jsx)(n.code,{children:"header"}),", and ",(0,i.jsx)(n.code,{children:"footer"}),", such as ",(0,i.jsx)(n.code,{children:'#show: metropolis-theme.with(aspect-ratio: "16-9", footer: self => self.info.institution)'}),"."]}),"\n",(0,i.jsxs)(n.p,{children:["The ",(0,i.jsx)(n.code,{children:"date"})," can accept ",(0,i.jsx)(n.code,{children:"datetime"})," format and ",(0,i.jsx)(n.code,{children:"content"})," format, and the date display format of the ",(0,i.jsx)(n.code,{children:"datetime"})," format can be changed with:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typc",children:'config-common(datetime-format: "[year]-[month]-[day]")\n'})}),"\n",(0,i.jsx)(n.h2,{id:"preamble",children:"Preamble"}),"\n",(0,i.jsxs)(n.p,{children:["The ",(0,i.jsx)(n.code,{children:"config-common(preamble: ...)"})," option lets you run setup code on every slide without repeating it manually. This is useful when integrating packages like ",(0,i.jsx)(n.code,{children:"codly"}),":"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#show: simple-theme.with(\n  config-common(preamble: {\n    codly(languages: codly-languages)\n  }),\n)\n"})}),"\n",(0,i.jsx)(n.p,{children:"However you may also set this locally for individual slides, see below."}),"\n",(0,i.jsx)(n.h2,{id:"show-rule-config-overrides",children:"Show-Rule Config Overrides"}),"\n",(0,i.jsxs)(n.p,{children:["You can override any configuration for all following slides and the current one, using ",(0,i.jsx)(n.code,{children:"#show: touying-set-config.with(...)"}),", just like you would write a ",(0,i.jsx)(n.code,{children:"show"}),"/",(0,i.jsx)(n.code,{children:"set"}),"-rule normally."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n#import themes.simple: *\n\n#show: simple-theme.with(aspect-ratio: "16-9")\n\n== Normal Slide\n\nThis slide uses the default settings.\n\n\n\n== Blue Backgroun

1d Slide\n#show: touying-set-config.with(config-page(fill: blue.lighten(80%)))\nThis slide has a blue background applied via `touying-set-config`.\n\n== Red Accent Slide\n#show: touying-set-config.with(config-colors(primary: red))\nThis slide uses a red primary color, e.g. in `#alert` boxes.\n\n#alert[This is an alert box with red accent color.]\n\n== Changed Cover\n#show: touying-set-config.with(config-methods(\n  cover: utils.semi-transparent-cover,\n))\nInitial Content.\n\n#pause\n\nContent that appears with a semi-transparent cover effect.\n'})}),"\n",(0,i.jsx)(n.img,{alt:"Touying example output",src:t(99161).Z+"",width:"3440",height:"2937"}),"\n",(0,i.jsx)(n.h2,{id:"local-config-overrides",children:"Local Config Overrides"}),"\n",(0,i.jsxs)(n.p,{children:["If you want to affect only one specific slide, you can set the config locally via ",(0,i.jsx)(n.code,{children:"#slide(config: ...)[...]"}),"."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"\n== Local Config \n#slide(config:config-page(fill: purple.lighten(90%)))[\nOnly this slide has a light purple background, but the next slide goes back being light blue.\n]\n"})}),"\n",(0,i.jsx)(n.h2,{id:"deferred-config-show-rules",children:"Deferred Config Show Rules"}),"\n",(0,i.jsxs)(n.p,{children:["You may even defer a config change to the beginning of the next slide.\nThis is also how ",(0,i.jsx)(n.code,{children:"show: appendix"})," works, but also useful for setting a custom preamble or similar that affects not just the slide's content. (Note that config-common has no effect, you can also write your config dict without it.)"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"\n== Content Slide\nSome content.\n#show: touying-set-config.with(defer:true, config-common(appendix:true))\n// you can just write `show: appendix`\n== Appendix\nPage counter does no longer increase.\n#show: touying-set-config.with(defer:true, (preamble:{codly(languages: codly-languages)}))\n== Deferred Config Change\nNow we have codly available.\n"})}),"\n",(0,i.jsx)(n.h2,{id:"frozen-counters",children:"Frozen Counters"}),"\n",(0,i.jsx)(n.p,{children:"When using animation, figure and theorem counters inside a single slide keep advancing per subslide by default. To freeze a counter (so it does not change between subslides), use:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"config-common(frozen-counters: (counter(figure.where(kind: image)),))\n"})}),"\n",(0,i.jsxs)(n.p,{children:["For custom figure kinds, pass ",(0,i.jsx)(n.code,{children:'counter(figure.where(kind: "Name"))'})," rather than the selector itself; ",(0,i.jsx)(n.code,{children:"frozen-counters"})," expects counters. This is also useful when working with the ",(0,i.jsx)(n.a,{href:"/docs/integration/theorion",children:"Theorion"})," package:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"config-common(frozen-counters: (theorem-counter,))\n"})}),"\n",(0,i.jsx)(n.h2,{id:"accessing-config-information",children:"Accessing Config Information"}),"\n",(0,i.jsxs)(n.p,{children:["You can use ",(0,i.jsx)(n.code,{children:"touying-get-config"})," to access the stored config for a slide. This will be the global config combined with any overrides you made for that slide."]}),"\n",(0,i.jsxs)(n.p,{children:["Note that it is evaluated at ",(0,i.jsx)(n.code,{children:"context"})," time and inserted into the document flow where you request it, thus it is only available as content."]}),"\n",(0,i.jsx)(n.h3,{id:"querying-the-entire-config",children:"Querying the Entire Config"}),"\n",(0,i.jsxs)(n.p,{children:["Call ",(0,i.jsx)(n.code,{children:"touying-get-config()"})," without arguments to get the full config dictionary. You can then access nested values using normal dictionary syntax:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#touying-get-config().info.author\n\n#touying-get-config().common.handout\n"})}),"\n",(0,i.jsxs)(n.p,{children:["Since ",(0,i.jsx)(n.code,{children:"common"})," fields are registered at the top level, you can access them directly:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#touying-get-config().handout  // same as .common.handout\n"})}),"\n",(0,i.jsx)(n.h3,{id:"querying-by-key",children:"Querying by Key"}),"\n",(0,i.jsx)(n.p,{children:"Pass a dot-separated string key to retrieve a specific sub-config or value directly:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#touying-get-config("info.author")\n\n#touying-get-config("info")  // returns the entire info sub-dict\n'})}),"\n",(0,i.jsx)(n.h3,{id:"default-values",children:"Default Values"}),"\n",(0,i.jsxs)(n.p,{children:["If the key does not exist, ",(0,i.jsx)(n.code,{children:"touying-get-config"})," will panic by default. To provide a fallback value instead, use the ",(0,i.jsx)(n.code,{children:"default"})," parameter:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#touying-get-config("random.dict.value", default: "default value")\n'})}),"\n",(0,i.jsx)(n.h3,{id:"accessing-custom-config",children:"Accessing Custom Config"}),"\n",(0,i.jsxs)(n.p,{children:["If you set custom keys via ",(0,i.jsx)(n.code,{children:"touying-set-config"}),", they become available immediately after the ",(0,i.jsx)(n.code,{children:"show"})," rule:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#show: touying-set-config.with((random: (dict: (value: 123))))\n\n#touying-get-config("random.dict.value")  // displays "123"\n'})}),"\n",(0,i.jsx)(n.admonition,{title:"Warning",type:"warning",children:(0,i.jsxs)(n.p,{children:["When accessing custom config, you must use the string key form (",(0,i.jsx)(n.code,{children:'touying-get-config("random.dict.value")'}),") rather than chaining dictionary access (",(0,i.jsx)(n.code,{children:'touying-get-config("random.dict").value'}),"), because the latter attempts to access ",(0,i.jsx)(n.code,{children:".value"})," on a content element, which will fail."]})})]})}function h(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},99161:(e,n,t)=>{t.d(n,{Z:()=>i});const i=t.p+"assets/images/799b424b-50e42b43a5364eb8712f612b11079c6c.png"},11151:(e,n,t)=>{t.d(n,{Z:()=>a,a:()=>l});var i=t(67294);const o={},s=i.createContext(o);function l(e){const n=i.useContext(s);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:l(e.components),i.createElement(s.Provider,{value:n},e.children)}}}]);