§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

Mỗi mục trong heads là tiêu đề cho các hàng bên dưới nó, nên một sơ đồ chia nhóm là một hàng tiêu đề rồi đến các ô của nhóm; dây đi vòng qua chữ của tiêu đề giống như đi vòng qua một ô. Dây không tìm được đường giữa các ô sẽ chạy dọc lề của sơ đồ — dải hai bên các ô, nằm trong phần đệm của khung — và lớp dây phủ cả lề này, nên dây và con số của nó vẫn nằm trong hình:

Lên kế hoạchthay đổi gì

Xây dựng

Đoso với giá trị chuẩn

Mô hình nhận được gì

Mô hình tính ra gì từ đó

Hình ảnhnhiều góc nhìn

Cameratư thế và ống kính

Đặc trưng từng góc nhìn

Gộp các góc nhìn

Mặt kín

Mỗi hộp rộng ít nhất chừng mười chữ cái và mỗi cột rộng bằng từ dài nhất trong các hộp của nó, nên không từ nào bị cắt; một tên snake_case có thể xuống dòng sau dấu gạch dưới. Khi cột của trang quá hẹp để chứa tất cả, chẳng hạn trên điện thoại, sơ đồ cuộn ngang bên trong khung của nó, còn tiêu đề và chú thích đứng yên; sơ đồ giữ nguyên cấu trúc như khi được viết.

Khi nhiều dây có nhãn đi ra từ một ô, có nhãn không tìm được chỗ tránh các ô và thành một con số. Con số được đặt như một nhãn: không bao giờ đè lên ô, tiêu đề, nhãn hay con số khác. Nó nằm trên dây của nó ở chỗ dây còn trống, nếu không thì nằm cạnh dây, nối với dây bằng một nét ngắn:

Tia đi vào dải

Đi hết đoạn nàyngân sách M ô lưới

Làm lại ở cấp thô hơn một bậckhoảng vẫn chứa điểm chạm

Đi không giới hạn ngân sáchchỉ ở cấp thô nhất

Trả về khoảngnó chứa điểm chạm đầu tiên

Sang lần cắt qua kế tiếpkhông còn: tia trượt

§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: