§3.1DemoMount — ของจริง

การแบ่งงานเป็นแบบเดียวกับที่แพ็กเกจทำเสมอ: มาร์กอัปจุดยึด (เวที ช่องปุ่มควบคุม ช่องคำบรรยาย) มากับแพ็กเกจ ส่วนโมดูลเดโมกับตัวโหลดของมันเป็นของไซต์ ไซต์นี้เก็บตัวโหลดไว้ที่ src/lib/demo-loader.ts และเรียก mountAllDemos() หนึ่งครั้งจากเลย์เอาต์ การเรียกนี้รันทุกหน้า แต่ chunk ของโมดูลเดโมจะถูกดึงมาเฉพาะหน้าที่มีจุดยึด [data-demo] เท่านั้น

เดโมที่รับอินพุตจากพอยน์เตอร์บน canvas ของมันต้องส่ง interactive — เวทีจะยึดท่าทางสัมผัสไว้และแสดงกากบาทเล็ง ตัวนี้เป็นแบบเฉย ๆ (เรนเดอร์อย่างเดียว) จึงไม่เปิดแฟล็ก และการปัดนิ้วผ่าน canvas ยังเลื่อนหน้าได้ตามปกติ มันวาดการแทรกสอดของคลื่นจากสองแหล่งกำเนิดด้วยโทเคนหมึกของหน้าเอง จึงเปลี่ยนตามธีมด้วย:

เดโม · การแทรกสอดของคลื่นสองแหล่งกำเนิด

เดโม · การแทรกสอดของคลื่นสองแหล่งกำเนิด

แหล่งกำเนิดจุดสองแห่งปล่อยคลื่นวงกลม ตรงที่สันคลื่นเจอสันคลื่น หมึกกองรวมกัน ตรงที่สันคลื่นเจอท้องคลื่น กระดาษโผล่ให้เห็น ลองสลับธีมดู — เดโมจะจุ่มหมึกใหม่จากโทเคนที่กำลังใช้อยู่จริง

สัญญาของโมดูลคือ default export หนึ่งตัว mount(ctx) ซึ่งคืนฟังก์ชันเก็บกวาด ส่วนตัวโหลดจะแก้ id โมดูลอย่าง waves/interference ด้วยวิธีไหนก็ได้ตามใจไซต์ (ที่นี่ใช้ import.meta.glob)

§3.2อุปกรณ์ประจำหน้า

คอมโพเนนต์ที่เหลือทำหน้าที่ล้อมกรอบบันทึก ไม่ใช่เติมเนื้อใน:

• Hero เปิดบันทึก: kicker ชื่อเรื่องแบบ display บทเกริ่นที่วิ่งผ่านไปป์ไลน์ Markdown เต็มเส้น บรรทัดเมตา และ tocLabel เสริมที่เพิ่มแถว "เกริ่น" แบบไม่มีเลขให้แถบข้าง title ใน frontmatter ของบันทึกยังคงเป็นชื่อสั้นตามบัญญัติสำหรับ <title> และการ์ด ส่วนชื่อบน hero จะยาวก็ได้
• PartHero เปิดบทของฮับ — หัวของหน้านี้เองก็คือมัน kicker ของมันไม่มีใครพิมพ์เอง: เส้นทางส่งป้าย "ภาค III · …" ของบทเข้ามาเป็น props.partLabel
• Part หั่นบันทึกหน้าเดียวยาว ๆ ออกเป็นภาค พรีเซ็ตกำหนดเลขเปลี่ยนมันเป็นแถวกลุ่ม "ภาค II · …" ในแถบข้าง หน้ารวมทุกองค์ประกอบถูกหั่นแบบนั้น
• HubCard กับ .hub-grid คือการ์ดหน้าแรกของฮับ ส่วน .path คือกล่องเส้นทางการอ่านของมัน — ทั้งคู่อยู่บนหน้าภาพรวมของแกลเลอรีนี้
• LocalToc เรนเดอร์รายการกระโดดในหน้า รับ ToC ได้ทั้งสองทรงที่พรีเซ็ตกำหนดเลขสองแบบผลิต และซ่อนตัวเองเมื่อรายการน้อยกว่าเกณฑ์ที่ตั้งได้ ดูของจริงข้างล่าง บน ToC ของบทนี้เอง
• SidebarMemory จำตำแหน่งเลื่อนของแถบข้างไว้ให้ข้ามการโหลดหน้า และจัดรายการปัจจุบัน ([aria-current="page"] โดยปริยาย) ให้อยู่กลางจอเมื่อใดที่มันจะหลุดสายตา วางไว้ในกล่องเลื่อนของแถบข้าง หลังมาร์กอัปนำทาง มันรันก่อนการวาดหน้าจอครั้งแรก แถบข้างจึงไม่มีวันกะพริบขึ้นไปอยู่บนสุด แถบข้างของเดโมนี้ก็ติดตั้งไว้
• LineageSvg ใส่กรอบการ์ดให้ SVG วาดมือ (สายตระกูลของวิธีการ ต้นไม้หมวดหมู่) — มีตัวอย่างข้างล่าง
• PageFooter คือตัวพิมพ์เล็กท้ายบันทึก — บรรทัดใต้ทุกบันทึกที่นี่
• ชิ้นส่วนฝั่งเลือกดูอยู่ในบทวิกิ ส่วนฝั่ง Markdown ของแกลเลอรีคือรวมทุกองค์ประกอบ

§3.3LocalToc กับ LineageSvg ของจริง

LocalToc ป้อนด้วย ToC ของหน้านี้เองที่สร้างตอนบิลด์ — ข้อมูลชุดเดียวกับที่แถบข้างใช้ ส่งให้บันทึกในชื่อ props.toc:

และ LineageSvg ครอบไดอะแกรมที่วาดเอง ลงหมึกด้วยโทเคนเชิงความหมายล้วน ๆ มันจึงนั่งได้บนทั้งสองธีม:

§3.4อุปกรณ์ที่ไม่มีคอมโพเนนต์

บางชิ้นเป็นคลาสธรรมดาใน base.css สำหรับไซต์ที่เรนเดอร์จากเลย์เอาต์ของตัวเอง หรือเขียนเป็น HTML ในเนื้อความ: