1"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[5451],{79578:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>a,contentTitle:()=>o,default:()=>p,frontMatter:()=>i,metadata:()=>l,toc:()=>d});var s=t(85893),r=t(11151);const i={sidebar_position:1},o="Slide Counters and Progress",l={id:"tutorials/progress/counters",title:"Slide Counters and Progress",description:"Touying provides a set of counters and utilities for tracking and displaying presentation progress.",source:"@site/docs/tutorials/progress/counters.md",sourceDirName:"tutorials/progress",slug:"/tutorials/progress/counters",permalink:"/docs/tutorials/progress/counters",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/en/tutorials/progress/counters.md",tags:[],version:"current",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"tutorialSidebar",previous:{title:"Progress & Sections",permalink:"/docs/category/progress--sections"},next:{title:"Navigation Elements",permalink:"/docs/tutorials/progress/navigation"}},a={},d=[{value:"Slide Counter",id:"slide-counter",level:2},{value:"Total Slide Number",id:"total-slide-number",level:2},{value:"Progress Bar",id:"progress-bar",level:2},{value:"Appendix",id:"appendix",level:2}];function c(e){const n={code:"code",h1:"h1",h2:"h2",img:"img",p:"p",pre:"pre",strong:"strong",...(0,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{id:"slide-counters-and-progress",children:"Slide Counters and Progress"}),"\n",(0,s.jsx)(n.p,{children:"Touying provides a set of counters and utilities for tracking and displaying presentation progress."}),"\n",(0,s.jsx)(n.h2,{id:"slide-counter",children:"Slide Counter"}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"utils.slide-counter"})," is the primary Typst counter that increments on every slide."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"// Get the current slide number\n#context utils.slide-counter.get()\n"})}),"\n",(0,s.jsx)(n.p,{children:"Use it in a custom 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.default: *\n\n#show: default-theme.with(\n aspect-ratio: "16-9",\n config-page(\n footer: context [Slide #utils.slide-counter.get()],\n ),\n)\n\n= Section\n\n== First Slide\n\nContent here.\n\n== Second Slide\n\nMore content.\n'})}),"\n",(0,s.jsx)(n.img,{alt:"Touying example output",src:t(16338).Z+"",width:"3440",height:"995"}),"\n",(0,s.jsx)(n.h2,{id:"total-slide-number",children:"Total Slide Number"}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"utils.last-slide-number"})," holds the number of the last slide ",(0,s.jsx)(n.strong,{children:"before the appendix"}),'. This is what you typically want to show as the denominator in a "slide X of Y" footer:']}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:'#context utils.slide-counter.get() + " / " + utils.last-slide-number\n'})}),"\n",(0,s.jsx)(n.h2,{id:"progress-bar",children:"Progress Bar"}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"utils.touying-progress"})," provides a ratio (0.0\u20131.0) representing how far through the presentation you are:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typst",children:"#utils.touying-progress(ratio => {\n // ratio is a float between 0.0 and 1.0\n box(width: ratio * 100%, height: 4pt, fill: primary)\n})\n"})}),"\n",(0,s.jsx)(n.p,{children:"This is how the metropolis and aqua themes implement their progress bars."}),"\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"})," show rule stops the slide counter so that appendix slides do not change the total shown 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\nThe slide count increments normally here.\n\n== Second Slide\n\nStill counting.\n\n#show: appendix\n\n= Appendix\n\n== Backup Slide\n\nThe footer still shows the count from the last main slide.\n'})}),"\n",(0,s.jsx)(n.img,{alt:"Touying example output",src:t(72991).Z+"",width:"3440",height:"2937"})]})}function p(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(c,{...e})}):c(e)}},72991:(e,n,t)=>{t.d(n,{Z:()=>s});const s=t.p+"assets/images/3ba75054-cf52b7d2568ef156566c9d202846f529.png"},16338:(e,n,t)=>{t.d(n,{Z:()=>s});const s=t.p+"assets/images/3ed0cabf-875fee466867bb1d45e41515b137c2e2.png"},11151:(e,n,t)=>{t.d(n,{Z:()=>l,a:()=>o});var s=t(67294);const r={},i=s.createContext(r);function o(e){const n=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(i.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.