Wiki & duyệt

Mọi thứ trong chương này đang chạy thật trên site: các kệ trên trang chủ ghép từ NoteCard, các hàng phân loại là một FacetNav, dải meta ngay phía trên đoạn chữ này là một TaxonomyLine, còn chòm sao nhỏ trên thanh bên là một LocalGraph. Tất cả đều là thành phần thuần hiển thị — site tự phân giải registry của mình rồi truyền vào dữ liệu đã sẵn sàng hiển thị. Bộ trợ giúp phân giải đi kèm gói dưới tên createTaxonomy và createBacklinks (cơ chế trong gói, ngữ nghĩa ở site).

§2.1Ba dòng nối dây

src/lib/taxonomy.ts (toàn bộ phần nối dây của site này)

import { createTaxonomy } from 'astro-inkstone/lib/taxonomy';
import { DOMAINS, KINDS, STATUSES } from '../content/notes/_meta/taxonomy';

export const { getWikiUnits, groupByKind, groupByDomain, groupByPrimaryDomain, tagIndex, resolveTaxonomy } =
  createTaxonomy({ kinds: KINDS, domains: DOMAINS, statuses: STATUSES },
    { collection: 'notes', locales: [{ code: 'zh', prefix: 'zh/' }], primary: 'en' });

Registry (_meta/taxonomy.ts) là dữ liệu thuần nằm trong cây nội dung: kind, domain kèm màu sắc thái, status kèm màu chấm, mỗi giá trị mang nhãn hiển thị cả tiếng Anh lẫn tiếng Trung. Thêm một giá trị ở đó, gắn nó cho một ghi chú, mọi trang duyệt tự đón lấy — các route vốn được tham số hóa theo giá trị.

§2.2Kệ sách và token của nó

Trang duyệt đứng trên một mặt nền thứ hai: browse.css cấp cho chúng nền giấy ấm, tiêu đề đầu trang bằng serif, nét kẻ kệ hai điểm và lưới thẻ, tất cả qua các token --wb-* — nửa kệ duyệt của bảng màu hai ngữ cảnh. Trang bước vào ngữ cảnh này chỉ bằng một class, wb-root, gắn trên body; bên trong đó các token chrome được ánh xạ lại, nên cùng một thanh điều hướng đặt lên nền nào cũng đứng vững.

§2.3NoteCard

Thẻ nhận dữ liệu đã phân giải xong, sẵn sàng hiển thị — nhãn thành phẩm, màu sắc thái, ngày đã định dạng, liên kết bản dịch. Thẻ vốn sống trên kệ, nên mẫu được đặt vào một khoảnh ngữ cảnh duyệt (.wb-root.wb-inset) lồng ngay trong cột đọc này:

Tham khảo2026.08
Trình diễn tổng hợp
Từng yếu tố của pipeline Markdown lên sân khấu đúng một lần trên trang này.
PipelineThường xanhEN
Tham khảo3 chapters2026.08
Bộ thành phần
Dạo một vòng ba chương qua toàn bộ thành phần đi kèm — kiêm màn trình diễn sống của một hub.
Thành phầnThường xanh
Hero · HubCard · Stats — phụ kiện của hub, dùng ngay trên chính hub

§2.4FacetNav

Chỉ mục duyệt nhiều chiều — kind, domain (kèm màu sắc thái riêng), các thẻ nổi bật, tất cả prerender thành từng viên liên kết dạng viên nang:

Chuỗi nhãn của các hàng cũng là props, mặc định tiếng Anh — bộ phía trên truyền labels={{ kind: 'Thể loại', domain: 'Lĩnh vực', tag: 'Thẻ', all: 'Tất cả →' }}, đúng bộ mà các trang phân loại tiếng Việt của site này truyền; ngoài ra không phải đổi gì thêm.

§2.5TaxonomyLine, KindBadge, StatusDot, DomainChip

Dải meta một dòng ở đầu mỗi ghi chú chính là ba nguyên tử huy hiệu ghép lại; từng nguyên tử cũng dùng riêng được:

Khuôn mẫuThiết kếĐang lớnupdated 2026.08

Các nguyên tử tách riêng, xếp vào một dòng văn chạy: một huy hiệu thể loại Hướng dẫn, một chip lĩnh vực Pipeline, một chấm trạng thái Thường xanh.

§2.6Backlinks

Bảng "liên kết ngược" dưới mỗi ghi chú trong khu vườn này do createBacklinks của gói tính ra — lật bộ phân giải wikilink của chính engine thành chỉ mục "đích ← nguồn", kèm luôn mẩu ngữ cảnh. Dưới đây là bản chạy bằng dữ liệu mẫu nội tuyến:

Cuộn xuống chân trang này để gặp bảng thật — chính chương này cũng là đích của wikilink.

§2.7LocalGraph

Cùng một chỉ mục còn trả lời câu hỏi thứ hai — cách đây một bước nhảy có những ai? — và index.localGraph(id, titleOf) trả về danh sách hàng xóm, chiều vào xếp trước. Thành phần vẽ họ trên một quỹ đạo elip quanh ghi chú: chiều vào nét liền, chiều ra nét đứt; hàng xóm có thể mang color riêng (chẳng hạn thuộc một bộ nội dung khác). Dưới đây vẽ bằng dữ liệu mẫu ở bề rộng của cột đọc; bản thật nằm trên thanh bên của mọi ghi chú có liên kết: