[{"data":1,"prerenderedAt":489},["ShallowReactive",2],{"sidebar-page":3,"page-\u002Fsite-migration-compliance-2026-10-03":4},null,{"id":5,"title":6,"author":7,"body":8,"cover":3,"date":477,"description":14,"extension":478,"meta":479,"navigation":480,"path":481,"seo":482,"stem":483,"tags":484,"__hash__":488},"content\u002Fsite-migration-compliance-2026-10-03.md","关于本站开展技术架构迁移的说明","AeYunDian",{"type":9,"value":10,"toc":469},"minimark",[11,15,20,28,44,51,58,61,65,71,85,104,107,148,151,154,156,167,169,172,182,217,224,231,245,248,255,288,291,298,322,329,333,339,345,351,357,363,367,370,373,379,382,386,389,392,395,400,434,439,465],[12,13,14],"p",{},"为进一步降低站点运行成本、提升内容可维护性、扩大浏览器兼容范围，本站于2026年9月至10月对底层技术架构进行系统性迁移。本次迁移不涉及内容层与视觉层的整体改版，但涉及渲染方式、组件体系、样式组织、URL 规范、构建流程等基础机制的全面调整。现将迁移背景、主要内容及后续安排说明如下。",[16,17,19],"h2",{"id":18},"一迁移背景","一、迁移背景",[12,21,22,23,27],{},"（一）",[24,25,26],"strong",{},"原架构的局限","。本站原采用 Vue 3 单页应用方案，构建产物依赖客户端 JavaScript 渲染。该方案在交互密集的应用中具有优势，但对以内容发布为主要目的的站点而言存在以下局限：",[29,30,31,35,38,41],"ul",{},[32,33,34],"li",{},"首屏渲染依赖脚本执行，禁用脚本的浏览器无法获取内容；",[32,36,37],{},"对早期浏览器（如 Internet Explorer 系列）兼容成本极高；",[32,39,40],{},"内容以组件形式组织，写作需要掌握 Vue 模板语法，创作门槛较高；",[32,42,43],{},"每次内容更新均需重新打包全量资源，发布流程偏重。",[12,45,46,47,50],{},"（二）",[24,48,49],{},"本站定位的变化","。随着本站内容以\"备忘录\"\"规范说明\"\"公告\"等长文为主，交互需求趋弱，静态内容发布需求趋强。原架构与站点定位之间的适配度下降。",[12,52,53,54,57],{},"（三）",[24,55,56],{},"兼容性要求","。本站明确将浏览器兼容范围扩展至 Internet Explorer 7 及以上的所有浏览器，原架构基于现代 JavaScript 特性，无法覆盖该范围。",[12,59,60],{},"基于以上三点，本站决定对技术架构进行调整。",[16,62,64],{"id":63},"二迁移主要内容","二、迁移主要内容",[12,66,22,67,70],{},[24,68,69],{},"构建体系迁移","。由 Vue 3 + Vite 方案调整为 Eleventy 3 + Nunjucks 方案。Eleventy 为静态站点生成器，在构建阶段完成全部页面渲染，输出纯 HTML、CSS 与少量辅助脚本。迁移后：",[29,72,73,76,79,82],{},[32,74,75],{},"所有页面均为预渲染的静态 HTML；",[32,77,78],{},"站点可部署于任意静态托管服务；",[32,80,81],{},"构建产物不含应用级 JavaScript 框架代码；",[32,83,84],{},"内容更新仅重新生成对应页面。",[12,86,46,87,90,91,95,96,99,100,103],{},[24,88,89],{},"组件体系迁移","。由 Vue 单文件组件调整为 Nunjucks macro。原 ",[92,93,94],"code",{},".vue"," 文件中以 ",[92,97,98],{},"props"," 传参、以 ",[92,101,102],{},"slot"," 分发内容的方式，统一改为 Nunjucks 的宏调用，参数以字典形式传入。以按钮组件为例，原写法为：",[12,105,106],{},"{% raw %}",[108,109,114],"pre",{"className":110,"code":111,"language":112,"meta":113,"style":113},"language-vue shiki shiki-themes monokai","\u003CGovButton variant=\"primary\">提交\u003C\u002FGovButton>\n","vue","",[92,115,116],{"__ignoreMap":113},[117,118,121,125,129,133,136,140,143,145],"span",{"class":119,"line":120},"line",1,[117,122,124],{"class":123},"sCdxs","\u003C",[117,126,128],{"class":127},"s8I7P","GovButton",[117,130,132],{"class":131},"sHkqI"," variant",[117,134,135],{"class":123},"=",[117,137,139],{"class":138},"s_Ekj","\"primary\"",[117,141,142],{"class":123},">提交\u003C\u002F",[117,144,128],{"class":127},[117,146,147],{"class":123},">\n",[12,149,150],{},"{% endraw %}",[12,152,153],{},"迁移后写法为：",[12,155,106],{},[108,157,161],{"className":158,"code":159,"language":160,"meta":113,"style":113},"language-njk shiki shiki-themes monokai","{{ button({ text: \"提交\", type: \"primary\" }) }}\n","njk",[92,162,163],{"__ignoreMap":113},[117,164,165],{"class":119,"line":120},[117,166,159],{},[12,168,150],{},[12,170,171],{},"两种方式在职责上等价：均实现\"一处定义、多处引用\"。差异在于前者运行于客户端，后者运行于构建时。",[12,173,53,174,177,178,181],{},[24,175,176],{},"样式体系重组","。原样式以 Vue 单文件组件内的 ",[92,179,180],{},"\u003Cstyle scoped>"," 形式就近维护，存在重复定义、难以全局复用的问题。本次调整将样式按用途分为三类：",[29,183,184,190,204],{},[32,185,186,189],{},[24,187,188],{},"基础样式","：重置、变量、布局，全站始终加载；",[32,191,192,195,196,199,200,203],{},[24,193,194],{},"组件样式","：按组件粒度拆分独立文件，如 ",[92,197,198],{},"button.css","、",[92,201,202],{},"tag.css","；",[32,205,206,209,210,199,213,216],{},[24,207,208],{},"页面样式","：按页面粒度独立维护，如 ",[92,211,212],{},"post.css",[92,214,215],{},"archive.css","。",[12,218,219,220,223],{},"每个页面在 frontmatter 中声明所需样式文件，构建时按需拼装 ",[92,221,222],{},"\u003Clink>"," 标签，避免全站加载无关样式。",[12,225,226,227,230],{},"（四）",[24,228,229],{},"URL 规范调整","。原标签页 URL 使用原始中文字符，存在编码歧义、跨平台兼容性差的问题。本次调整引入拼音转换规则，将中文标签统一转换为带声调数字的拼音形式，例如：",[29,232,233,239],{},[32,234,235,236],{},"原 URL：",[92,237,238],{},"\u002Ftags\u002F文章\u002F",[32,240,241,242],{},"新 URL：",[92,243,244],{},"\u002Ftags\u002Fwen2-zhang1\u002F",[12,246,247],{},"针对拼音重名（如\"文章\"与\"纹章\"拼音相同）的情况，采用构建时预计算映射表的方式，按标签字典序为冲突项添加数字后缀，确保每条 URL 唯一。",[12,249,250,251,254],{},"（五）",[24,252,253],{},"浏览器兼容扩展","。本次迁移明确将兼容范围扩展至 Internet Explorer 7 及以上版本。主要策略包括：",[29,256,257,260,263,270,285],{},[32,258,259],{},"输出产物不含 ES6+ 语法，脚本以 ES5 形式书写；",[32,261,262],{},"使用 jQuery 1.12.4 作为 DOM 操作与 AJAX 的兼容层；",[32,264,265,266,269],{},"补充 ",[92,267,268],{},"ie7.css"," 专用补丁样式，通过条件注释仅向 IE7 及以下加载；",[32,271,272,273,276,277,280,281,284],{},"布局以 ",[92,274,275],{},"float"," + ",[92,278,279],{},"inline-block"," 为基准，",[92,282,283],{},"flex"," 仅作现代浏览器增强；",[32,286,287],{},"不使用 CSS 变量作为唯一值来源，均带 fallback。",[12,289,290],{},"需要说明的是，IE7 用户仅能获得静态内容阅读能力，动态功能（如评论、检索、发布后台）不在此兼容范围内。",[12,292,293,294,297],{},"（六）",[24,295,296],{},"工程化完善","。新增构建前清理步骤，每次构建均先删除旧产物目录，避免历史文件残留。同时补充：",[29,299,300,307,313,319],{},[32,301,302,303,306],{},"站点地图（",[92,304,305],{},"sitemap.xml","）；",[32,308,309,310,306],{},"内容订阅（",[92,311,312],{},"feed.xml",[32,314,315,316,306],{},"搜索引擎规则（",[92,317,318],{},"robots.txt",[32,320,321],{},"自定义 404 页面。",[12,323,324,325,328],{},"（七）",[24,326,327],{},"内容创作方式调整","。文章由 Vue 组件形式调整为标准 Markdown 文件，正文中可直接引用 Nunjucks 宏、读取站点全局数据，无需编写脚本逻辑。组件调用与 Markdown 语法可混用，写作门槛降低。",[16,330,332],{"id":331},"三迁移后效果","三、迁移后效果",[12,334,22,335,338],{},[24,336,337],{},"内容为先","。页面以纯 HTML 交付，禁用脚本的浏览器、早期浏览器、文本浏览器均可正常阅读。",[12,340,46,341,344],{},[24,342,343],{},"构建轻量","。站点不再包含应用级 JavaScript 框架，构建产物体积显著下降，构建时间缩短。",[12,346,53,347,350],{},[24,348,349],{},"样式可控","。样式按页面按需加载，避免了全站样式的冗余加载，也便于后续按组件粒度调整。",[12,352,226,353,356],{},[24,354,355],{},"URL 稳定","。标签、归档、文章等各类页面 URL 规范统一，便于分享、收藏与搜索引擎收录。",[12,358,250,359,362],{},[24,360,361],{},"维护便利","。新增文章仅需添加 Markdown 文件，无需改动路由、组件或构建脚本。",[16,364,366],{"id":365},"四后续工作","四、后续工作",[12,368,369],{},"（一）逐步将原站其他栏目内容迁移至新架构，保持 URL 结构一致性。",[12,371,372],{},"（二）针对现代浏览器补充增强功能，例如评论、检索、阅读进度指示等，以渐进增强方式提供，不影响基础阅读。",[12,374,375,376,378],{},"（三）持续监测 IE7 等早期浏览器下的可读性，发现问题及时在 ",[92,377,268],{}," 中补充补丁。",[12,380,381],{},"（四）完善发布流程，探索基于 Cloudflare Workers 与 GitHub API 的在线发布方案，降低内容维护的技术门槛。",[16,383,385],{"id":384},"五说明","五、说明",[12,387,388],{},"本站为个人技术项目，本次迁移属技术架构调整，不涉及任何机构或组织的立场表达。视觉设计仍参照政府网站规范进行，旨在为用户提供规范、清晰、易读的信息服务。所有内容仅代表个人观点，与任何机构无关。",[12,390,391],{},"特此说明。",[393,394],"hr",{},[12,396,397],{},[24,398,399],{},"附：主要参考文件",[29,401,402,403,402,413,402,420,402,427],{},"\n  ",[32,404,405],{},[406,407,412],"a",{"href":408,"target":409,"rel":410},"https:\u002F\u002Fwww.11ty.dev\u002Fdocs\u002F","_blank",[411],"noopener","Eleventy 官方文档",[32,414,415],{},[406,416,419],{"href":417,"target":409,"rel":418},"https:\u002F\u002Fmozilla.github.io\u002Fnunjucks\u002F",[411],"Nunjucks 模板引擎文档",[32,421,422],{},[406,423,426],{"href":424,"target":409,"rel":425},"https:\u002F\u002Fapi.jquery.com\u002F",[411],"jQuery 1.12.4 API 文档",[32,428,429],{},[406,430,433],{"href":431,"target":409,"rel":432},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FHTML\u002FConditional_comments",[411],"MDN：条件注释（Conditional comments）",[12,435,436],{},[24,437,438],{},"简要说明",[29,440,441,447,453,459],{},[32,442,443,446],{},[24,444,445],{},"Eleventy","：静态站点生成器，构建时渲染全部页面，输出纯 HTML。",[32,448,449,452],{},[24,450,451],{},"Nunjucks","：Mozilla 开发的 JavaScript 模板引擎，本站用于组件化与数据渲染。",[32,454,455,458],{},[24,456,457],{},"jQuery 1.12.4","：jQuery 1.x 系列末版，兼容 IE6 及以上浏览器。",[32,460,461,464],{},[24,462,463],{},"条件注释","：Internet Explorer 专属的 HTML 注释语法，用于向特定版本 IE 加载专用资源。",[466,467,468],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sCdxs, html code.shiki .sCdxs{--shiki-default:#F8F8F2}html pre.shiki code .s8I7P, html code.shiki .s8I7P{--shiki-default:#F92672}html pre.shiki code .sHkqI, html code.shiki .sHkqI{--shiki-default:#A6E22E}html pre.shiki code .s_Ekj, html code.shiki .s_Ekj{--shiki-default:#E6DB74}",{"title":113,"searchDepth":470,"depth":470,"links":471},2,[472,473,474,475,476],{"id":18,"depth":470,"text":19},{"id":63,"depth":470,"text":64},{"id":331,"depth":470,"text":332},{"id":365,"depth":470,"text":366},{"id":384,"depth":470,"text":385},"2026-10-03","md",{},true,"\u002Fsite-migration-compliance-2026-10-03",{"title":6,"description":14},"site-migration-compliance-2026-10-03",[485,486,487],"技术架构","迁移","公告","I5WZy1gbyyF-BrpyA0tPrpwRa21nFwadDoAgqXlaHCo",1794733995733]