如何实现HTML/CSS跨多页面的定理、公理自动连续编号

CSS 计数器是页面级别的状态，仅在当前页面生命周期内有效，跳转页面后会自动重置，本身不支持跨HTML文件持久化编号。要实现跨页连续编号，可采用以下两种方案：

实现方案 #

方案1：纯前端本地持久化（适合静态部署场景） #

通过localStorage存储全局计数，页面加载时读取上一次的计数作为当前页面CSS计数器的初始值，页面关闭前更新累计计数到本地存储：
在所有需要计数的页面引入以下JS代码即可：

// 页面加载完成后设置计数器初始值
document.addEventListener('DOMContentLoaded', () => {
  // 读取历史累计计数，无历史记录则默认从0开始
  const axiomaBase = Number(localStorage.getItem('counter_axioma')) || 0
  const definicionBase = Number(localStorage.getItem('counter_definicion')) || 0
  // 给根元素设置CSS计数器初始值
  document.documentElement.style.counterReset = `axioma ${axiomaBase} definición ${definicionBase}`
})

// 页面卸载前保存最新的累计计数
window.addEventListener('beforeunload', () => {
  // 统计当前页面的公理、定义数量
  const currentAxioma = document.querySelectorAll('div.axiom').length
  const currentDefinicion = document.querySelectorAll('div.definition').length
  // 计算累计值更新到本地存储
  const totalAxioma = (Number(localStorage.getItem('counter_axioma')) || 0) + currentAxioma
  const totalDefinicion = (Number(localStorage.getItem('counter_definicion')) || 0) + currentDefinicion
  localStorage.setItem('counter_axioma', totalAxioma)
  localStorage.setItem('counter_definicion', totalDefinicion)
})

该方案无需后端/构建工具支持，缺点是用户清除浏览器缓存会导致计数重置，多标签页同时打开不同页面可能出现计数偏差。

方案2：构建/服务端注入初始值（适合全局固定编号场景） #

如果使用静态站点生成器（Hugo、VitePress、Hexo等）或服务端渲染，可在构建/响应阶段提前统计所有页面的公理、定义总数量，给每个页面注入对应初始值：

1. 统计当前页面前所有页面的公理总数N、定义总数M
2. 在当前页面的<head>中加入内联样式：

<style>
:root {
  counter-reset: axioma N definición M;
}
</style>

将代码中的N、M替换为实际的统计值即可。该方案生成的编号全局固定，不受用户端环境影响，适合正式公开的文档站点。

内容的提问来源于stack exchange，提问作者Rata mágica