1"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[6708],{12824:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>r,contentTitle:()=>d,default:()=>h,frontMatter:()=>o,metadata:()=>c,toc:()=>l});var s=t(85893),i=t(11151);const o={sidebar_position:2},d="Sections and Subsections",c={id:"tutorials/sections",title:"Sections and Subsections",description:"Structure",source:"@site/docs/tutorials/sections.md",sourceDirName:"tutorials",slug:"/tutorials/sections",permalink:"/docs/tutorials/sections",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/en/tutorials/sections.md",tags:[],version:"current",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"tutorialSidebar",previous:{title:"Code Style",permalink:"/docs/tutorials/code-styles"},next:{title:"Settings and Config",permalink:"/docs/tutorials/settings"}},r={},l=[{value:"Structure",id:"structure",level:2},{value:"Numbering",id:"numbering",level:2},{value:"Table of Contents",id:"table-of-contents",level:2},{value:"Special Heading Labels",id:"special-heading-labels",level:2},{value:"Appendix",id:"appendix",level:2}];function a(e){const n={code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{id:"sections-and-subsections",children:"Sections and Subsections"}),"\n",(0,s.jsx)(n.h2,{id:"structure",children:"Structure"}),"\n",(0,s.jsx)(n.p,{children:"Like Beamer, Touying also has the concept of sections and subsections."}),"\n",(0,s.jsx)(n.p,{children:"Generally, first-level, second-level, and third-level headings correspond to sections, subsections, and subsubsections, respectively, such as in the dewdrop theme."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n#import themes.dewdrop: *\n\n#show: dewdrop-theme.with(aspect-ratio: "16-9")\n\n= Section\n\n== Subsection\n\n=== Title\n\nHello, Touying!\n'})}),"\n",(0,s.jsx)(n.img,{alt:"Touying example output",src:t(51980).Z+"",width:"3440",height:"995"}),"\n",(0,s.jsx)(n.p,{children:"However, there are many times when we do not need subsections, so we also use first-level and second-level headings to correspond to sections and titles, respectively, such as in the university theme."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n#import themes.university: *\n\n#show: university-theme.with(aspect-ratio: "16-9")\n\n= Section\n\n== Title\n\nHello, Touying!\n'})}),"\n",(0,s.jsx)(n.img,{alt:"Touying example output",src:t(40111).Z+"",width:"3440",height:"995"}),"\n",(0,s.jsxs)(n.p,{children:["In fact, we can control this behavior through the ",(0,s.jsx)(n.code,{children:"slide-level"})," parameter of the ",(0,s.jsx)(n.code,{children:"config-common"})," function. ",(0,s.jsx)(n.code,{children:"slide-level"})," represents the complexity of the nesting structure, starting from 0. For example, ",(0,s.jsx)(n.code,{children:"#show: university-theme.with(config-common(slide-level: 2))"})," is equivalent to both ",(0,s.jsx)(n.code,{children:"section"})," and ",(0,s.jsx)(n.code,{children:"subsection"})," creating new slides; while ",(0,s.jsx)(n.code,{children:"#show: university-theme.with(config-common(slide-level: 3))"})," is equivalent to ",(0,s.jsx)(n.code,{children:"section"}),", ",(0,s.jsx)(n.code,{children:"subsection"}),", and ",(0,s.jsx)(n.code,{children:"subsubsection"})," all creating new slides."]}),"\n",(0,s.jsx)(n.h2,{id:"numbering",children:"Numbering"}),"\n",(0,s.jsx)(n.p,{children:"To add numbering to sections and subsections, we simply use"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#set heading(numbering: "1.1")\n#show heading.where(level: 1): set heading(numbering: "1.")\n'})}),"\n",(0,s.jsxs)(n.p,{children:["This sets the default numbering to ",(0,s.jsx)(n.code,{children:"1.1"}),", and the section corresponds to the numbering ",(0,s.jsx)(n.code,{children:"1."}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"table-of-contents",children:"Table of Contents"}),"\n",(0,s.jsx)(n.p,{children:"Displaying a table of contents in Touying is straightforward:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n#import themes.simple: *\n#import "@preview/numbly:0.1.0": numbly\n\n#set heading(numbering: numbly("{1}.", default: "1.1"))\n\n#show: simple-theme.with(aspect-ratio: "16-9")\n\n= Section\n\n== Subsection\n\n#components.adaptive-columns(outline(indent: 1em))\n'})}),"\n",(0,s.jsx)(n.img,{alt:"Touying example output",src:t(33372).Z+"",width:"3440",height:"995"}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"outline(indent: 1em)"}
1)," is a native Typst function for the table of contents. The ",(0,s.jsx)(n.code,{children:"#components.adaptive-columns()"})," function ensures that the table of contents occupies only one page, adapting by setting ",(0,s.jsx)(n.code,{children:"#columns(1, body)"})," or ",(0,s.jsx)(n.code,{children:"#columns(2, body)"}),", and so on."]}),"\n",(0,s.jsxs)(n.p,{children:["If you need a ",(0,s.jsx)(n.code,{children:"outline"})," function that can display the current progress, you might consider using ",(0,s.jsx)(n.code,{children:"#components.progressive-outline()"})," or ",(0,s.jsx)(n.code,{children:"#components.custom-progressive-outline()"}),", as seen in the dewdrop theme. Or write your own by manipulating the ",(0,s.jsx)(n.code,{children:"outline.entry"})," elements, for certain effects you may want to use ",(0,s.jsx)(n.code,{children:"#utils.section-relationship"}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"special-heading-labels",children:"Special Heading Labels"}),"\n",(0,s.jsx)(n.p,{children:"Touying recognises special labels on headings to control slide behavior:"}),"\n",(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Label"}),(0,s.jsx)(n.th,{children:"Effect"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"<touying:hidden>"})}),(0,s.jsx)(n.td,{children:"The slide is not rendered at all (content and page are suppressed)."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"<touying:skip>"})}),(0,s.jsx)(n.td,{children:"The heading does not create a new-section slide."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"<touying:unnumbered>"})}),(0,s.jsx)(n.td,{children:"The slide is not counted in the slide counter."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"<touying:unoutlined>"})}),(0,s.jsxs)(n.td,{children:["The heading is excluded from the ",(0,s.jsx)(n.code,{children:"outline()"}),"."]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"<touying:unbookmarked>"})}),(0,s.jsx)(n.td,{children:"No PDF bookmark is generated for this heading."})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"<touying:handout>"})}),(0,s.jsx)(n.td,{children:"The slide is shown only in handout mode."})]})]})]}),"\n",(0,s.jsx)(n.p,{children:"Example \u2014 a hidden outline slide that does not appear in the final PDF:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n#import themes.simple: *\n#import "@preview/numbly:0.1.0": numbly\n\n#set heading(numbering: numbly("{1}.", default: "1.1"))\n\n#show: simple-theme.with(aspect-ratio: "16-9")\n\n== Outline <touying:hidden>\n\n#components.adaptive-columns(outline(title: none, indent: 1em))\n\n= First Section\n\n== Slide One\n\nContent.\n'})}),"\n",(0,s.jsx)(n.img,{alt:"Touying example output",src:t(50437).Z+"",width:"3440",height:"1966"}),"\n",(0,s.jsx)(n.h2,{id:"appendix",children:"Appendix"}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"appendix"})," function stops the slide counter so appendix slides do not affect the total count displayed in the footer."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n#import themes.simple: *\n\n#show: simple-theme\
1n\n= Main Section\n\n== Introduction\n\nMain content here. Check the slide number in the footer.\n\n#show: appendix\n\n= Appendix\n\n== Appendix Slide\n\nThe slide number is frozen at the last main-section slide.\n'})}),"\n",(0,s.jsx)(n.img,{alt:"Touying example output",src:t(23458).Z+"",width:"3440",height:"1966"})]})}function h(e={}){const{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(a,{...e})}):a(e)}},40111:(e,n,t)=>{t.d(n,{Z:()=>s});const s=t.p+"assets/images/35130d29-9ec9a6a5b78375f0b19691320e6f4b78.png"},33372:(e,n,t)=>{t.d(n,{Z:()=>s});const s=t.p+"assets/images/a047bc0e-76414524b116f78556e489d0e08c439e.png"},51980:(e,n,t)=>{t.d(n,{Z:()=>s});const s=t.p+"assets/images/a14ad896-a1fd039d0a21f09aaee6d362ad57d8af.png"},23458:(e,n,t)=>{t.d(n,{Z:()=>s});const s=t.p+"assets/images/e97b0de8-fd8dfbab4655fa82c186367788494630.png"},50437:(e,n,t)=>{t.d(n,{Z:()=>s});const s=t.p+"assets/images/f45c9481-3485ec8a74b33b95303a74e525be0fe8.png"},11151:(e,n,t)=>{t.d(n,{Z:()=>c,a:()=>d});var s=t(67294);const i={},o=s.createContext(i);function d(e){const n=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:d(e.components),s.createElement(o.Provider,{value:n},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.