Northline 文档

引入

把样式表放进 <head>。站点托管在本域，因此可以直接使用绝对路径，也可以下载后放进自己的静态目录。

<link rel="stylesheet" href="https://cdn.wvv.ccwu.cc/northline/1.4.2/northline.css">

需要主题切换、复制按钮或移动端导航时，再在 </body> 前引入脚本。请使用 defer，脚本本身不阻塞渲染。

<script src="https://cdn.wvv.ccwu.cc/northline/1.4.2/northline.js" defer></script>

完整性校验

两个文件都提供 SHA-384 摘要。下列值对应 1.4.2，可直接写进 integrity；浏览器会在执行前比对内容。

northline.css
sha384-+yAwGqRAqTB9zd4cVi8wp8Zm/VsjxMXWGPN6v2VeizDIaq5GITMSK44Y95l4xKWE

northline.js
sha384-nBDIoalN6aWLUeTvqO4pmFRyvG/ebXNfz0iK/C2l1jWi6Ge3XQkIe0QsbeOFHdMH

带 integrity 的跨域资源还需要服务器返回 CORS 头。本站只做同源引用，跨域去引用时请自行确认响应头。

主题

样式基于 CSS 自定义属性。默认是浅色，在根元素上设置 data-theme="dark" 即切换到深色，不需要重复加载样式表。

<html lang="zh-CN" data-theme="dark">

脚本会在切换时把选择写入 localStorage，下次访问沿用。它只读取 northline-theme 这一个键。

脚本增强

northline.js 通过 data-* 属性工作，没有配置对象，也不会创建全局变量：

data-nl-theme：点击后切换深浅色主题。
data-nl-nav：配合 aria-controls 展开小屏导航。
data-nl-copy：复制同组 .code-block 内的代码。
data-nl-year：把元素文本替换为当前年份。

定制与覆盖

想改颜色，先覆盖变量，不必改组件规则。变量集中定义在 :root，跟随主题的属性在 [data-theme="dark"] 里。

:root {
  --nl-accent: #b45309;
  --nl-radius: 4px;
}

如果确实要覆盖组件，把自定义样式放在 Northline 之后加载，用同层级的类名即可。不建议使用 !important。

浏览器支持

样式依赖 :root 变量、grid、gap 与逻辑属性，目标是近三年的主流浏览器：Chrome/Edge 111+、Firefox 111+、Safari 16.4+。脚本使用 Element.closest 与原生剪贴板 API。

发现兼容问题请通过联系页面反馈，并附上浏览器版本与最小复现。