wiki 与导览组件

本章的每个组件都在本站真实运行:落地页的书架由 NoteCard 排成,分面导航是一个 FacetNav,这段文字上方的元信息条是 TaxonomyLine,侧栏那一小簇星图是 LocalGraph。它们全是纯展示组件——注册表由站点自己解析,递进来的已经是能直接显示的数据。解析工具随包提供:createTaxonomy 与 createBacklinks(机制在包里,语义在站点)。

§2.1三行接线

src/lib/taxonomy.ts(本站的全部接线)

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' });

注册表(_meta/taxonomy.ts)是内容树里的纯数据:kind、带色调的 domain、带圆点色的 status,每个值都同时有英文与中文的显示文案。在那里加一个值,给笔记标上,所有导览页自动接住——路由本来就是按值参数化的。

§2.2书架与它的 token

导览页站在另一块地面上:暖纸底、衬线版头、书架那道 2pt 粗线、卡片栅格,全部由 browse.css 经 --wb-* token 给出——这正是双语境色板的书架那一半。页面进入这套语境只需在 body 上挂一个类 wb-root;语境内部把 chrome token 重新映射了一遍,同一条导航栏放到哪块地面上都成立。

§2.3NoteCard

卡片吃的是解析完毕、能直接显示的数据——现成的标签、色调、排好版的日期、镜像链接。卡片本来住在书架上,所以样例放进了阅读列里内嵌的一小块书架语境(.wb-root.wb-inset):

参考2026.08
全要素演示
markdown 管线的每个要素在这一页各演一遍。
管线常青EN
参考3 chapters2026.08
组件合集
全部随包组件分三章走一遍——同时也是 hub 的现场演示。
组件常青
Hero · HubCard · Stats——hub 的配件,用在 hub 自己身上

§2.4FacetNav

多维度浏览索引——kind、domain(带各自的色调)、热门标签,全部预渲染成一颗颗胶囊式链接:

行标签文案也是 props,默认英文——上面这组传的是 labels={{ kind: '形式', domain: '方向', tag: '标签', all: '全部 →' }},和本站中文分类页传的一模一样;除此之外什么都不用改。

§2.5TaxonomyLine、KindBadge、StatusDot、DomainChip

笔记页头那条单行元信息,就是三个徽章原子拼在一起;每个原子也能单独使用:

模式设计生长中updated 2026.08

原子单拎出来排进行文,就是:一枚指南形式徽章、一枚管线方向 chip、一颗常青状态圆点。

§2.6Backlinks

园地里每篇笔记下方的「反向链接」面板,由包里的 createBacklinks 算出——把引擎自己的双链解析器反转成「目标 ← 来源」的索引,上下文片段一并带上。下面用内联样例数据演示:

翻到本页页脚就能看到真的那一块——本章自己就是双链的目标。

§2.7LocalGraph

同一份索引还能回答第二个问题——离这里一跳之内都有谁?——index.localGraph(id, titleOf) 把答案整理成邻居列表,入链在前。组件把它们画在笔记四周的椭圆轨道上:入链实线,出链虚线;邻居还可以自带 color(比如来自另一个内容集)。下面用样例数据按阅读列宽度画一幅;真的那幅就在每篇有链接的笔记的侧栏里: