§3.1DemoMount — chạy thật

Phân công vẫn theo nếp quen của gói: markup điểm gắn (sân khấu, slot điều khiển, slot chú thích) đi kèm gói; mô-đun demo và loader của nó thuộc về site. Site này giữ loader ở src/lib/demo-loader.ts và gọi mountAllDemos() đúng một lần từ layout; lời gọi chạy trên mọi trang, nhưng chunk của mô-đun demo chỉ được tải về cho trang nào thật sự mang một điểm gắn [data-demo].

Demo nào nhận thao tác con trỏ trên canvas thì truyền interactive — sân khấu khi đó chiếm cử chỉ chạm và hiện con trỏ chữ thập. Demo dưới đây là loại thụ động (chỉ vẽ), nên bỏ cờ đó và vuốt ngang canvas vẫn cuộn trang như thường. Nó vẽ giao thoa sóng hai nguồn bằng chính token mực của trang, nên đổi giao diện là đổi theo:

Demo · Giao thoa sóng hai nguồn

Demo · Giao thoa sóng hai nguồn

Hai nguồn điểm phát sóng tròn; nơi đỉnh gặp đỉnh, mực tụ lại; nơi đỉnh gặp lõm, giấy lộ ra. Thử lật giao diện — demo tự chấm mực lại từ token đang sống.

Bản hợp đồng mô-đun là một default export duy nhất, mount(ctx), trả về hàm dọn dẹp; loader phân giải id mô-đun kiểu waves/interference theo cách nào tùy site (ở đây là import.meta.glob).

§3.2Phụ kiện trang

Các thành phần còn lại đóng khung ghi chú thay vì lấp đầy nó:

• Hero mở màn một ghi chú: kicker, tiêu đề cỡ display, đoạn dẫn chạy qua trọn pipeline Markdown, dòng meta, và tocLabel tùy chọn để thêm một hàng "mở đầu" không đánh số vào thanh bên. title trong frontmatter vẫn là tên ngắn chuẩn cho <title> và các thẻ; tiêu đề trên hero được phép dài.
• PartHero mở màn một chương của hub — chính phần đầu của trang này. Kicker của nó không bao giờ gõ tay: route truyền nhãn "Phần III · …" của chương vào qua props.partLabel.
• Part chia một ghi chú dài dạng một trang thành nhiều phần; preset đánh số biến nó thành các hàng nhóm kiểu "PHẦN II · Nền móng" trên thanh bên. Trang trình diễn tổng hợp được cắt đúng kiểu đó.
• HubCard và .hub-grid là dàn thẻ cửa ngõ của hub; .path là hộp lộ trình đọc của nó — cả hai đều có mặt trên trang tổng quan của phòng trưng bày này.
• LocalToc render danh sách nhảy trong trang; nó nhận cả hai dạng ToC mà hai preset đánh số sinh ra, và tự ẩn khi ít mục hơn ngưỡng cấu hình. Ngay bên dưới, chạy thật trên ToC của chính chương này.
• SidebarMemory giữ thanh bên đang cuộn đúng chỗ người đọc rời đi, xuyên qua các lần tải trang, và canh giữa mục hiện tại (mặc định [aria-current="page"]) mỗi khi nó lọt khỏi tầm nhìn. Đặt nó trong hộp cuộn của thanh bên, sau phần markup điều hướng; nó chạy trước lượt vẽ đầu tiên, nên thanh bên không bao giờ chớp về đầu. Thanh bên của bản demo này đang mang nó.
• LineageSvg đóng khung một SVG không có chữ — cây phả hệ, cây phân loại — thành thẻ; sơ đồ có chữ thì là FlowDiagram, bên dưới.
• PageFooter là dòng chữ in nhỏ dưới chân ghi chú — chính dòng nằm dưới mọi ghi chú nơi đây.
• Các mảnh ghép duyệt nằm ở chương wiki; còn phía Markdown của phòng trưng bày là trình diễn tổng hợp.

§3.3LocalToc và FlowDiagram, chạy thật

LocalToc được đút cho ToC sinh lúc build của chính trang này — cùng dữ liệu thanh bên tiêu thụ, trao cho ghi chú qua props.toc:

Cùng hình đó dưới dạng FlowDiagram — các ô là HTML tự co giãn theo chữ, mũi tên được đo sau khi dàn trang, nên với bất kỳ phông nào chữ cũng không tràn khỏi ô:

tokens.css

base.csscột đọc

browse.csskệ duyệt

componentsdùng cả hai

§3.4FlowDiagram — ô co giãn theo chữ

Sơ đồ có chữ thì dùng FlowDiagram (hoặc khối mermaid). <svg> đặt tọa độ bằng tay kèm <text> được vẽ theo một phông và vỡ ở phông rộng hơn — mà mỗi site dùng phông riêng; LineageSvg chỉ dành cho SVG không có chữ mà phông có thể làm méo. Đặc tả là dữ liệu: cols, nodes (col / row / span, tone, lines, tag, ghost cho ghi chú nét đứt, mono cho đường dẫn), edges (label, dashed, off cho liên kết đứt), lanes và heads tùy chọn:

Tác giả

Rà soát

Build

Viếtmột ghi chú hoặc một thành phần

Mở PRmột nhánh

Rà soátduyệt hoặc hỏi

Build và triển khaikhi merge

§3.5Phụ kiện không cần thành phần

Vài món chỉ là class trơn trong base.css, dành cho site muốn render chúng từ layout của mình hoặc viết thẳng bằng HTML trong bài: