关于本站开展技术架构迁移的说明

2026-10-03

为进一步降低站点运行成本、提升内容可维护性、扩大浏览器兼容范围，本站于2026年9月至10月对底层技术架构进行系统性迁移。本次迁移不涉及内容层与视觉层的整体改版，但涉及渲染方式、组件体系、样式组织、URL 规范、构建流程等基础机制的全面调整。现将迁移背景、主要内容及后续安排说明如下。

一、迁移背景

（一）原架构的局限。本站原采用 Vue 3 单页应用方案，构建产物依赖客户端 JavaScript 渲染。该方案在交互密集的应用中具有优势，但对以内容发布为主要目的的站点而言存在以下局限：

（二）本站定位的变化。随着本站内容以"备忘录""规范说明""公告"等长文为主，交互需求趋弱，静态内容发布需求趋强。原架构与站点定位之间的适配度下降。

（三）兼容性要求。本站明确将浏览器兼容范围扩展至 Internet Explorer 7 及以上的所有浏览器，原架构基于现代 JavaScript 特性，无法覆盖该范围。

基于以上三点，本站决定对技术架构进行调整。

（一）构建体系迁移。由 Vue 3 + Vite 方案调整为 Eleventy 3 + Nunjucks 方案。Eleventy 为静态站点生成器，在构建阶段完成全部页面渲染，输出纯 HTML、CSS 与少量辅助脚本。迁移后：

（二）组件体系迁移。由 Vue 单文件组件调整为 Nunjucks macro。原 .vue 文件中以 props 传参、以 slot 分发内容的方式，统一改为 Nunjucks 的宏调用，参数以字典形式传入。以按钮组件为例，原写法为：

<GovButton variant="primary">提交</GovButton>

迁移后写法为：

{{ button({ text: "提交", type: "primary" }) }}

两种方式在职责上等价：均实现"一处定义、多处引用"。差异在于前者运行于客户端，后者运行于构建时。

（三）样式体系重组。原样式以 Vue 单文件组件内的 <style scoped> 形式就近维护，存在重复定义、难以全局复用的问题。本次调整将样式按用途分为三类：

每个页面在 frontmatter 中声明所需样式文件，构建时按需拼装 <link> 标签，避免全站加载无关样式。

（四）URL 规范调整。原标签页 URL 使用原始中文字符，存在编码歧义、跨平台兼容性差的问题。本次调整引入拼音转换规则，将中文标签统一转换为带声调数字的拼音形式，例如：

针对拼音重名（如"文章"与"纹章"拼音相同）的情况，采用构建时预计算映射表的方式，按标签字典序为冲突项添加数字后缀，确保每条 URL 唯一。

（五）浏览器兼容扩展。本次迁移明确将兼容范围扩展至 Internet Explorer 7 及以上版本。主要策略包括：

需要说明的是，IE7 用户仅能获得静态内容阅读能力，动态功能（如评论、检索、发布后台）不在此兼容范围内。

（六）工程化完善。新增构建前清理步骤，每次构建均先删除旧产物目录，避免历史文件残留。同时补充：

（七）内容创作方式调整。文章由 Vue 组件形式调整为标准 Markdown 文件，正文中可直接引用 Nunjucks 宏、读取站点全局数据，无需编写脚本逻辑。组件调用与 Markdown 语法可混用，写作门槛降低。

（一）内容为先。页面以纯 HTML 交付，禁用脚本的浏览器、早期浏览器、文本浏览器均可正常阅读。

（二）构建轻量。站点不再包含应用级 JavaScript 框架，构建产物体积显著下降，构建时间缩短。

（三）样式可控。样式按页面按需加载，避免了全站样式的冗余加载，也便于后续按组件粒度调整。

（四）URL 稳定。标签、归档、文章等各类页面 URL 规范统一，便于分享、收藏与搜索引擎收录。

（五）维护便利。新增文章仅需添加 Markdown 文件，无需改动路由、组件或构建脚本。

（一）逐步将原站其他栏目内容迁移至新架构，保持 URL 结构一致性。

（二）针对现代浏览器补充增强功能，例如评论、检索、阅读进度指示等，以渐进增强方式提供，不影响基础阅读。

（三）持续监测 IE7 等早期浏览器下的可读性，发现问题及时在 ie7.css 中补充补丁。

（四）完善发布流程，探索基于 Cloudflare Workers 与 GitHub API 的在线发布方案，降低内容维护的技术门槛。

本站为个人技术项目，本次迁移属技术架构调整，不涉及任何机构或组织的立场表达。视觉设计仍参照政府网站规范进行，旨在为用户提供规范、清晰、易读的信息服务。所有内容仅代表个人观点，与任何机构无关。

特此说明。

附：主要参考文件

简要说明