[{"data":1,"prerenderedAt":6701},["ShallowReactive",2],{"content-fallback-/about-html/html-template-security-privacy-third-party-script-checklist":3,"related-/about-html/html-template-security-privacy-third-party-script-checklist":668},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"topic":5,"author":11,"tags":12,"image":18,"imageAlt":19,"pexelsPhotoId":20,"pexelsUrl":21,"featured":6,"readingTime":22,"body":23,"_type":662,"_id":663,"_source":664,"_file":665,"_stem":666,"_extension":667},"/about-html/html-template-security-privacy-third-party-script-checklist","about-html",false,"","HTML 模板常见漏洞：外链资源、隐私和统计脚本的风险清单","很多模板上线后出问题，不是视觉或布局，而是外链资源、统计脚本和隐私处理埋下了风险。本文从模板安全与隐私视角，整理最常见的风险点和上线前检查方法。","2026-03-14","HTMLPAGE 团队",[13,14,15,16,17],"html模板","网站安全","隐私合规","统计脚本","外链资源","/images/articles/html-template-security-privacy-third-party-script-checklist-featured.jpg","开发者检查网页安全与隐私配置，代表 HTML 模板的安全风险排查",577585,"https://www.pexels.com/photo/data-codes-through-eyeglasses-577585/",15,{"type":24,"children":25,"toc":648},"root",[26,34,54,59,82,87,124,128,135,140,173,178,184,189,212,217,240,245,251,256,279,284,302,307,313,318,341,346,352,357,362,385,391,396,419,424,430,533,539,602,607,612,617],{"type":27,"tag":28,"props":29,"children":30},"element","p",{},[31],{"type":32,"value":33},"text","很多人选 HTML 模板时，只看三件事：",{"type":27,"tag":35,"props":36,"children":37},"ul",{},[38,44,49],{"type":27,"tag":39,"props":40,"children":41},"li",{},[42],{"type":32,"value":43},"好不好看",{"type":27,"tag":39,"props":45,"children":46},{},[47],{"type":32,"value":48},"改起来快不快",{"type":27,"tag":39,"props":50,"children":51},{},[52],{"type":32,"value":53},"响应式稳不稳",{"type":27,"tag":28,"props":55,"children":56},{},[57],{"type":32,"value":58},"但模板真正容易出事故的地方，往往藏在看不见的角落：",{"type":27,"tag":35,"props":60,"children":61},{},[62,67,72,77],{"type":27,"tag":39,"props":63,"children":64},{},[65],{"type":32,"value":66},"外链脚本",{"type":27,"tag":39,"props":68,"children":69},{},[70],{"type":32,"value":71},"第三方字体",{"type":27,"tag":39,"props":73,"children":74},{},[75],{"type":32,"value":76},"统计代码",{"type":27,"tag":39,"props":78,"children":79},{},[80],{"type":32,"value":81},"表单数据流向",{"type":27,"tag":28,"props":83,"children":84},{},[85],{"type":32,"value":86},"这些地方如果没有在上线前做检查，页面看起来没问题，风险却已经埋下了。",{"type":27,"tag":28,"props":88,"children":89},{},[90,92,99,101,107,108,114,116,122],{"type":32,"value":91},"如果你已经读过 ",{"type":27,"tag":93,"props":94,"children":96},"a",{"href":95},"/about-html/html-template-modification-playbook",[97],{"type":32,"value":98},"HTML 模板怎么改不崩",{"type":32,"value":100},"、",{"type":27,"tag":93,"props":102,"children":104},{"href":103},"/about-html/html-generated-page-seo-audit-top-10-issues",[105],{"type":32,"value":106},"HTML 页面 SEO 排查 10 个问题",{"type":32,"value":100},{"type":27,"tag":93,"props":109,"children":111},{"href":110},"/about-html/html-editor-export-and-deploy-workflow",[112],{"type":32,"value":113},"HTML 编辑器导出与部署工作流",{"type":32,"value":115}," 和 ",{"type":27,"tag":93,"props":117,"children":119},{"href":118},"/topics/frontend/frontend-security-guide",[120],{"type":32,"value":121},"前端安全指南",{"type":32,"value":123},"，这篇会从模板安全和隐私出发继续补足。",{"type":27,"tag":125,"props":126,"children":127},"hr",{},[],{"type":27,"tag":129,"props":130,"children":132},"h2",{"id":131},"一模板的风险很多时候来自带来的东西太多",[133],{"type":32,"value":134},"一、模板的风险，很多时候来自“带来的东西太多”",{"type":27,"tag":28,"props":136,"children":137},{},[138],{"type":32,"value":139},"模板通常不是一张白纸，它往往自带：",{"type":27,"tag":35,"props":141,"children":142},{},[143,148,153,158,163,168],{"type":27,"tag":39,"props":144,"children":145},{},[146],{"type":32,"value":147},"组件脚本",{"type":27,"tag":39,"props":149,"children":150},{},[151],{"type":32,"value":152},"动画库",{"type":27,"tag":39,"props":154,"children":155},{},[156],{"type":32,"value":157},"字体链接",{"type":27,"tag":39,"props":159,"children":160},{},[161],{"type":32,"value":162},"图标资源",{"type":27,"tag":39,"props":164,"children":165},{},[166],{"type":32,"value":167},"表单提交脚本",{"type":27,"tag":39,"props":169,"children":170},{},[171],{"type":32,"value":172},"统计和追踪代码",{"type":27,"tag":28,"props":174,"children":175},{},[176],{"type":32,"value":177},"问题是，你很容易照着改页面，却忘了审这些资源到底从哪里来、会不会持续可用、是否会多拿数据。",{"type":27,"tag":129,"props":179,"children":181},{"id":180},"二外链资源是最容易被忽略的风险源",[182],{"type":32,"value":183},"二、外链资源是最容易被忽略的风险源",{"type":27,"tag":28,"props":185,"children":186},{},[187],{"type":32,"value":188},"所谓外链资源，包括：",{"type":27,"tag":35,"props":190,"children":191},{},[192,197,202,207],{"type":27,"tag":39,"props":193,"children":194},{},[195],{"type":32,"value":196},"外部字体",{"type":27,"tag":39,"props":198,"children":199},{},[200],{"type":32,"value":201},"CDN 脚本",{"type":27,"tag":39,"props":203,"children":204},{},[205],{"type":32,"value":206},"图片库链接",{"type":27,"tag":39,"props":208,"children":209},{},[210],{"type":32,"value":211},"第三方样式文件",{"type":27,"tag":28,"props":213,"children":214},{},[215],{"type":32,"value":216},"它们的风险不一定是立刻报错，而是：",{"type":27,"tag":35,"props":218,"children":219},{},[220,225,230,235],{"type":27,"tag":39,"props":221,"children":222},{},[223],{"type":32,"value":224},"对方资源失效后页面显示异常",{"type":27,"tag":39,"props":226,"children":227},{},[228],{"type":32,"value":229},"加载变慢",{"type":27,"tag":39,"props":231,"children":232},{},[233],{"type":32,"value":234},"无法控制版本变化",{"type":27,"tag":39,"props":236,"children":237},{},[238],{"type":32,"value":239},"某些地区访问不稳定",{"type":27,"tag":28,"props":241,"children":242},{},[243],{"type":32,"value":244},"如果一个模板严重依赖外链资源，你的稳定性其实是在借别人家的地板。",{"type":27,"tag":129,"props":246,"children":248},{"id":247},"三统计脚本越多风险不只在性能还在数据边界",[249],{"type":32,"value":250},"三、统计脚本越多，风险不只在性能，还在数据边界",{"type":27,"tag":28,"props":252,"children":253},{},[254],{"type":32,"value":255},"很多模板或站点会叠加多个统计脚本：",{"type":27,"tag":35,"props":257,"children":258},{},[259,264,269,274],{"type":27,"tag":39,"props":260,"children":261},{},[262],{"type":32,"value":263},"访问统计",{"type":27,"tag":39,"props":265,"children":266},{},[267],{"type":32,"value":268},"广告追踪",{"type":27,"tag":39,"props":270,"children":271},{},[272],{"type":32,"value":273},"热图",{"type":27,"tag":39,"props":275,"children":276},{},[277],{"type":32,"value":278},"在线客服",{"type":27,"tag":28,"props":280,"children":281},{},[282],{"type":32,"value":283},"这些脚本的问题不只是拖慢页面，还包括：",{"type":27,"tag":35,"props":285,"children":286},{},[287,292,297],{"type":27,"tag":39,"props":288,"children":289},{},[290],{"type":32,"value":291},"数据到底被谁收集",{"type":27,"tag":39,"props":293,"children":294},{},[295],{"type":32,"value":296},"是否存在重复采集",{"type":27,"tag":39,"props":298,"children":299},{},[300],{"type":32,"value":301},"是否提前声明用户数据使用方式",{"type":27,"tag":28,"props":303,"children":304},{},[305],{"type":32,"value":306},"对很多中小站点来说，脚本数量不是越多越专业，而是越多越难控制。",{"type":27,"tag":129,"props":308,"children":310},{"id":309},"四隐私问题常常发生在表单和追踪层",[311],{"type":32,"value":312},"四、隐私问题常常发生在表单和追踪层",{"type":27,"tag":28,"props":314,"children":315},{},[316],{"type":32,"value":317},"模板里最该留意的隐私点包括：",{"type":27,"tag":35,"props":319,"children":320},{},[321,326,331,336],{"type":27,"tag":39,"props":322,"children":323},{},[324],{"type":32,"value":325},"表单提交到哪里",{"type":27,"tag":39,"props":327,"children":328},{},[329],{"type":32,"value":330},"是否把邮箱、电话等数据发给第三方",{"type":27,"tag":39,"props":332,"children":333},{},[334],{"type":32,"value":335},"是否有未说明的追踪脚本",{"type":27,"tag":39,"props":337,"children":338},{},[339],{"type":32,"value":340},"Cookie 和行为追踪是否有基本告知",{"type":27,"tag":28,"props":342,"children":343},{},[344],{"type":32,"value":345},"哪怕不是大型企业站，也应该至少知道用户数据会流向哪里。",{"type":27,"tag":129,"props":347,"children":349},{"id":348},"五一个常见误区只要是热门模板就默认安全",[350],{"type":32,"value":351},"五、一个常见误区：只要是热门模板，就默认安全",{"type":27,"tag":28,"props":353,"children":354},{},[355],{"type":32,"value":356},"热门模板只是说明它传播广，不代表它的默认配置就适合你的站点。",{"type":27,"tag":28,"props":358,"children":359},{},[360],{"type":32,"value":361},"尤其是以下情况要特别小心：",{"type":27,"tag":35,"props":363,"children":364},{},[365,370,375,380],{"type":27,"tag":39,"props":366,"children":367},{},[368],{"type":32,"value":369},"模板多年未更新",{"type":27,"tag":39,"props":371,"children":372},{},[373],{"type":32,"value":374},"资源来源分散",{"type":27,"tag":39,"props":376,"children":377},{},[378],{"type":32,"value":379},"默认带广告、统计或演示用接口",{"type":27,"tag":39,"props":381,"children":382},{},[383],{"type":32,"value":384},"依赖太多第三方组件但你并不需要",{"type":27,"tag":129,"props":386,"children":388},{"id":387},"六失败案例页面正常上线三个月后突然字体和图标都失效",[389],{"type":32,"value":390},"六、失败案例：页面正常上线，三个月后突然字体和图标都失效",{"type":27,"tag":28,"props":392,"children":393},{},[394],{"type":32,"value":395},"一个很典型的情况是：",{"type":27,"tag":35,"props":397,"children":398},{},[399,404,409,414],{"type":27,"tag":39,"props":400,"children":401},{},[402],{"type":32,"value":403},"模板依赖多个外链字体和图标资源",{"type":27,"tag":39,"props":405,"children":406},{},[407],{"type":32,"value":408},"初期看都能正常加载",{"type":27,"tag":39,"props":410,"children":411},{},[412],{"type":32,"value":413},"后面其中一个资源地址失效或版本变更",{"type":27,"tag":39,"props":415,"children":416},{},[417],{"type":32,"value":418},"页面突然出现错位、乱码或空白图标",{"type":27,"tag":28,"props":420,"children":421},{},[422],{"type":32,"value":423},"这类问题的根因不是模板“突然坏了”，而是稳定性建立在你无法控制的外链上。",{"type":27,"tag":129,"props":425,"children":427},{"id":426},"七模板安全与隐私检查表",[428],{"type":32,"value":429},"七、模板安全与隐私检查表",{"type":27,"tag":431,"props":432,"children":433},"table",{},[434,458],{"type":27,"tag":435,"props":436,"children":437},"thead",{},[438],{"type":27,"tag":439,"props":440,"children":441},"tr",{},[442,448,453],{"type":27,"tag":443,"props":444,"children":445},"th",{},[446],{"type":32,"value":447},"项目",{"type":27,"tag":443,"props":449,"children":450},{},[451],{"type":32,"value":452},"要检查什么",{"type":27,"tag":443,"props":454,"children":455},{},[456],{"type":32,"value":457},"风险信号",{"type":27,"tag":459,"props":460,"children":461},"tbody",{},[462,480,497,515],{"type":27,"tag":439,"props":463,"children":464},{},[465,470,475],{"type":27,"tag":466,"props":467,"children":468},"td",{},[469],{"type":32,"value":17},{"type":27,"tag":466,"props":471,"children":472},{},[473],{"type":32,"value":474},"来自哪里、能否替换、本地化是否可行",{"type":27,"tag":466,"props":476,"children":477},{},[478],{"type":32,"value":479},"依赖多个不受控来源",{"type":27,"tag":439,"props":481,"children":482},{},[483,487,492],{"type":27,"tag":466,"props":484,"children":485},{},[486],{"type":32,"value":16},{"type":27,"tag":466,"props":488,"children":489},{},[490],{"type":32,"value":491},"是否必要、是否重复、是否说明用途",{"type":27,"tag":466,"props":493,"children":494},{},[495],{"type":32,"value":496},"叠加多个同类追踪",{"type":27,"tag":439,"props":498,"children":499},{},[500,505,510],{"type":27,"tag":466,"props":501,"children":502},{},[503],{"type":32,"value":504},"表单提交",{"type":27,"tag":466,"props":506,"children":507},{},[508],{"type":32,"value":509},"数据发往哪里、是否安全",{"type":27,"tag":466,"props":511,"children":512},{},[513],{"type":32,"value":514},"默认发往第三方服务",{"type":27,"tag":439,"props":516,"children":517},{},[518,523,528],{"type":27,"tag":466,"props":519,"children":520},{},[521],{"type":32,"value":522},"隐私告知",{"type":27,"tag":466,"props":524,"children":525},{},[526],{"type":32,"value":527},"是否说明数据收集与用途",{"type":27,"tag":466,"props":529,"children":530},{},[531],{"type":32,"value":532},"有收集但无说明",{"type":27,"tag":129,"props":534,"children":536},{"id":535},"八上线前检查清单",[537],{"type":32,"value":538},"八、上线前检查清单",{"type":27,"tag":35,"props":540,"children":543},{"className":541},[542],"contains-task-list",[544,557,566,575,584,593],{"type":27,"tag":39,"props":545,"children":548},{"className":546},[547],"task-list-item",[549,555],{"type":27,"tag":550,"props":551,"children":554},"input",{"disabled":552,"type":553},true,"checkbox",[],{"type":32,"value":556}," 是否梳理了模板依赖的外链资源来源",{"type":27,"tag":39,"props":558,"children":560},{"className":559},[547],[561,564],{"type":27,"tag":550,"props":562,"children":563},{"disabled":552,"type":553},[],{"type":32,"value":565}," 是否删除了不必要的第三方脚本与统计代码",{"type":27,"tag":39,"props":567,"children":569},{"className":568},[547],[570,573],{"type":27,"tag":550,"props":571,"children":572},{"disabled":552,"type":553},[],{"type":32,"value":574}," 是否确认表单数据的提交目标与保存方式",{"type":27,"tag":39,"props":576,"children":578},{"className":577},[547],[579,582],{"type":27,"tag":550,"props":580,"children":581},{"disabled":552,"type":553},[],{"type":32,"value":583}," 是否评估了外链资源失效后的影响",{"type":27,"tag":39,"props":585,"children":587},{"className":586},[547],[588,591],{"type":27,"tag":550,"props":589,"children":590},{"disabled":552,"type":553},[],{"type":32,"value":592}," 是否对用户数据收集与使用做了基本说明",{"type":27,"tag":39,"props":594,"children":596},{"className":595},[547],[597,600],{"type":27,"tag":550,"props":598,"children":599},{"disabled":552,"type":553},[],{"type":32,"value":601}," 是否优先将关键资源本地化或替换成可控版本",{"type":27,"tag":129,"props":603,"children":605},{"id":604},"结语",[606],{"type":32,"value":604},{"type":27,"tag":28,"props":608,"children":609},{},[610],{"type":32,"value":611},"HTML 模板的安全和隐私问题，很少在第一天就爆发，但一旦爆发，通常影响比样式错位更大。上线前把外链资源、统计脚本和数据流向查清楚，能帮你避免很多后期补洞式修复。",{"type":27,"tag":129,"props":613,"children":615},{"id":614},"延伸阅读",[616],{"type":32,"value":614},{"type":27,"tag":35,"props":618,"children":619},{},[620,627,634,641],{"type":27,"tag":39,"props":621,"children":622},{},[623],{"type":27,"tag":93,"props":624,"children":625},{"href":95},[626],{"type":32,"value":98},{"type":27,"tag":39,"props":628,"children":629},{},[630],{"type":27,"tag":93,"props":631,"children":632},{"href":103},[633],{"type":32,"value":106},{"type":27,"tag":39,"props":635,"children":636},{},[637],{"type":27,"tag":93,"props":638,"children":639},{"href":110},[640],{"type":32,"value":113},{"type":27,"tag":39,"props":642,"children":643},{},[644],{"type":27,"tag":93,"props":645,"children":646},{"href":118},[647],{"type":32,"value":121},{"title":7,"searchDepth":649,"depth":649,"links":650},3,[651,653,654,655,656,657,658,659,660,661],{"id":131,"depth":652,"text":134},2,{"id":180,"depth":652,"text":183},{"id":247,"depth":652,"text":250},{"id":309,"depth":652,"text":312},{"id":348,"depth":652,"text":351},{"id":387,"depth":652,"text":390},{"id":426,"depth":652,"text":429},{"id":535,"depth":652,"text":538},{"id":604,"depth":652,"text":604},{"id":614,"depth":652,"text":614},"markdown","content:about-html:html-template-security-privacy-third-party-script-checklist.md","content","about-html/html-template-security-privacy-third-party-script-checklist.md","about-html/html-template-security-privacy-third-party-script-checklist","md",[669,2103,2764,4105,4870,5682],{"_path":670,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":671,"description":672,"date":673,"topic":5,"author":11,"tags":674,"image":679,"imageAlt":680,"pexelsPhotoId":681,"pexelsUrl":682,"featured":6,"readingTime":683,"body":684,"_type":662,"_id":2100,"_source":664,"_file":2101,"_stem":2102,"_extension":667},"/about-html/html-template-i18n-seo-guide","HTML 模板做多语言不翻车：URL、hreflang 与 SEO 改造完整指南","多语言不是把文案翻译一遍那么简单。本文围绕 HTML 模板改造，系统讲清 URL 策略、目录结构、hreflang、canonical、翻译流程与常见重复内容问题。","2026-03-09",[13,675,676,677,678],"多语言","SEO","hreflang","国际化","/images/articles/html-template-i18n-seo-guide-featured.jpg","电脑屏幕上展示多语言网站结构与地球图标",811587,"https://www.pexels.com/photo/photo-of-a-gray-dell-laptop-displaying-pexels-webpage-811587/",14,{"type":24,"children":685,"toc":2077},[686,691,709,714,743,756,783,786,792,912,917,920,926,931,1059,1070,1075,1086,1091,1109,1112,1118,1123,1128,1146,1151,1175,1180,1185,1194,1199,1202,1215,1220,1225,1243,1248,1259,1264,1289,1292,1298,1303,1311,1316,1325,1330,1355,1360,1378,1383,1386,1392,1551,1554,1560,1567,1572,1590,1596,1601,1619,1624,1630,1635,1673,1678,1684,1689,1692,1698,1703,1752,1757,1775,1780,1808,1811,1817,1823,1854,1859,1935,1940,1971,1976,2007,2019,2022,2027,2032,2037,2072],{"type":27,"tag":28,"props":687,"children":688},{},[689],{"type":32,"value":690},"很多团队第一次做多语言页面时，思路都差不多：",{"type":27,"tag":35,"props":692,"children":693},{},[694,699,704],{"type":27,"tag":39,"props":695,"children":696},{},[697],{"type":32,"value":698},"先把中文模板复制一份",{"type":27,"tag":39,"props":700,"children":701},{},[702],{"type":32,"value":703},"再把文案翻成英文",{"type":27,"tag":39,"props":705,"children":706},{},[707],{"type":32,"value":708},"最后改一下导航和页脚",{"type":27,"tag":28,"props":710,"children":711},{},[712],{"type":32,"value":713},"页面看起来像是“多语言版”，但搜索层面很容易出事：",{"type":27,"tag":35,"props":715,"children":716},{},[717,722,727,738],{"type":27,"tag":39,"props":718,"children":719},{},[720],{"type":32,"value":721},"不同语言页面互相抢词",{"type":27,"tag":39,"props":723,"children":724},{},[725],{"type":32,"value":726},"URL 结构混乱",{"type":27,"tag":39,"props":728,"children":729},{},[730,736],{"type":27,"tag":731,"props":732,"children":734},"code",{"className":733},[],[735],{"type":32,"value":677},{"type":32,"value":737}," 没配或配错",{"type":27,"tag":39,"props":739,"children":740},{},[741],{"type":32,"value":742},"翻译了内容，却没翻 SEO 元信息",{"type":27,"tag":28,"props":744,"children":745},{},[746,748,754],{"type":32,"value":747},"所以多语言模板改造，本质上不是翻译任务，而是",{"type":27,"tag":749,"props":750,"children":751},"strong",{},[752],{"type":32,"value":753},"URL、结构、SEO、内容治理一起改",{"type":32,"value":755},"。",{"type":27,"tag":28,"props":757,"children":758},{},[759,761,765,767,773,775,781],{"type":32,"value":760},"如果你还没做过模板基础改造，建议先看 ",{"type":27,"tag":93,"props":762,"children":763},{"href":95},[764],{"type":32,"value":98},{"type":32,"value":766},"；如果你在 Nuxt 内容站里做多语言，也可以配合 ",{"type":27,"tag":93,"props":768,"children":770},{"href":769},"/topics/nuxt/nuxt-i18n-guide",[771],{"type":32,"value":772},"Nuxt i18n 完整指南",{"type":32,"value":774}," 与 ",{"type":27,"tag":93,"props":776,"children":778},{"href":777},"/topics/seo/hreflang-configuration-guide",[779],{"type":32,"value":780},"hreflang 配置指南",{"type":32,"value":782}," 一起使用。",{"type":27,"tag":125,"props":784,"children":785},{},[],{"type":27,"tag":129,"props":787,"children":789},{"id":788},"先给结论多语言模板成功与否关键看-5-个系统变量",[790],{"type":32,"value":791},"先给结论：多语言模板成功与否，关键看 5 个系统变量",{"type":27,"tag":431,"props":793,"children":794},{},[795,816],{"type":27,"tag":435,"props":796,"children":797},{},[798],{"type":27,"tag":439,"props":799,"children":800},{},[801,806,811],{"type":27,"tag":443,"props":802,"children":803},{},[804],{"type":32,"value":805},"变量",{"type":27,"tag":443,"props":807,"children":808},{},[809],{"type":32,"value":810},"要解决的问题",{"type":27,"tag":443,"props":812,"children":813},{},[814],{"type":32,"value":815},"做错会发生什么",{"type":27,"tag":459,"props":817,"children":818},{},[819,837,855,876,894],{"type":27,"tag":439,"props":820,"children":821},{},[822,827,832],{"type":27,"tag":466,"props":823,"children":824},{},[825],{"type":32,"value":826},"URL 策略",{"type":27,"tag":466,"props":828,"children":829},{},[830],{"type":32,"value":831},"不同语言页面怎么组织",{"type":27,"tag":466,"props":833,"children":834},{},[835],{"type":32,"value":836},"搜索引擎无法稳定识别语言版本",{"type":27,"tag":439,"props":838,"children":839},{},[840,845,850],{"type":27,"tag":466,"props":841,"children":842},{},[843],{"type":32,"value":844},"目录结构",{"type":27,"tag":466,"props":846,"children":847},{},[848],{"type":32,"value":849},"模板、资源、导航怎么复用",{"type":27,"tag":466,"props":851,"children":852},{},[853],{"type":32,"value":854},"维护成本飙升，页面易错链",{"type":27,"tag":439,"props":856,"children":857},{},[858,866,871],{"type":27,"tag":466,"props":859,"children":860},{},[861],{"type":27,"tag":731,"props":862,"children":864},{"className":863},[],[865],{"type":32,"value":677},{"type":27,"tag":466,"props":867,"children":868},{},[869],{"type":32,"value":870},"告诉搜索引擎语言与地区关系",{"type":27,"tag":466,"props":872,"children":873},{},[874],{"type":32,"value":875},"错误页面被错误地区收录",{"type":27,"tag":439,"props":877,"children":878},{},[879,884,889],{"type":27,"tag":466,"props":880,"children":881},{},[882],{"type":32,"value":883},"canonical",{"type":27,"tag":466,"props":885,"children":886},{},[887],{"type":32,"value":888},"避免重复内容误判",{"type":27,"tag":466,"props":890,"children":891},{},[892],{"type":32,"value":893},"多语言页互相竞争或被折叠",{"type":27,"tag":439,"props":895,"children":896},{},[897,902,907],{"type":27,"tag":466,"props":898,"children":899},{},[900],{"type":32,"value":901},"本地化流程",{"type":27,"tag":466,"props":903,"children":904},{},[905],{"type":32,"value":906},"翻译什么、不翻译什么",{"type":27,"tag":466,"props":908,"children":909},{},[910],{"type":32,"value":911},"文案翻了，SEO 信息却没同步",{"type":27,"tag":28,"props":913,"children":914},{},[915],{"type":32,"value":916},"先把这 5 个点定下来，再去翻译内容，返工会少很多。",{"type":27,"tag":125,"props":918,"children":919},{},[],{"type":27,"tag":129,"props":921,"children":923},{"id":922},"第一件事先选-url-策略不要边做边改",[924],{"type":32,"value":925},"第一件事：先选 URL 策略，不要边做边改",{"type":27,"tag":28,"props":927,"children":928},{},[929],{"type":32,"value":930},"最常见的 3 种策略如下：",{"type":27,"tag":431,"props":932,"children":933},{},[934,960],{"type":27,"tag":435,"props":935,"children":936},{},[937],{"type":27,"tag":439,"props":938,"children":939},{},[940,945,950,955],{"type":27,"tag":443,"props":941,"children":942},{},[943],{"type":32,"value":944},"方案",{"type":27,"tag":443,"props":946,"children":947},{},[948],{"type":32,"value":949},"例子",{"type":27,"tag":443,"props":951,"children":952},{},[953],{"type":32,"value":954},"优点",{"type":27,"tag":443,"props":956,"children":957},{},[958],{"type":32,"value":959},"风险",{"type":27,"tag":459,"props":961,"children":962},{},[963,998,1025],{"type":27,"tag":439,"props":964,"children":965},{},[966,971,988,993],{"type":27,"tag":466,"props":967,"children":968},{},[969],{"type":32,"value":970},"子目录",{"type":27,"tag":466,"props":972,"children":973},{},[974,980,982],{"type":27,"tag":731,"props":975,"children":977},{"className":976},[],[978],{"type":32,"value":979},"/en/",{"type":32,"value":981},", ",{"type":27,"tag":731,"props":983,"children":985},{"className":984},[],[986],{"type":32,"value":987},"/ja/",{"type":27,"tag":466,"props":989,"children":990},{},[991],{"type":32,"value":992},"维护集中，SEO 信号聚合",{"type":27,"tag":466,"props":994,"children":995},{},[996],{"type":32,"value":997},"路由与资源规则要统一",{"type":27,"tag":439,"props":999,"children":1000},{},[1001,1006,1015,1020],{"type":27,"tag":466,"props":1002,"children":1003},{},[1004],{"type":32,"value":1005},"子域名",{"type":27,"tag":466,"props":1007,"children":1008},{},[1009],{"type":27,"tag":731,"props":1010,"children":1012},{"className":1011},[],[1013],{"type":32,"value":1014},"en.example.com",{"type":27,"tag":466,"props":1016,"children":1017},{},[1018],{"type":32,"value":1019},"区域隔离清晰",{"type":27,"tag":466,"props":1021,"children":1022},{},[1023],{"type":32,"value":1024},"运维与统计更复杂",{"type":27,"tag":439,"props":1026,"children":1027},{},[1028,1033,1049,1054],{"type":27,"tag":466,"props":1029,"children":1030},{},[1031],{"type":32,"value":1032},"独立域名",{"type":27,"tag":466,"props":1034,"children":1035},{},[1036,1042,1043],{"type":27,"tag":731,"props":1037,"children":1039},{"className":1038},[],[1040],{"type":32,"value":1041},"example.cn",{"type":32,"value":981},{"type":27,"tag":731,"props":1044,"children":1046},{"className":1045},[],[1047],{"type":32,"value":1048},"example.jp",{"type":27,"tag":466,"props":1050,"children":1051},{},[1052],{"type":32,"value":1053},"地域信号强",{"type":27,"tag":466,"props":1055,"children":1056},{},[1057],{"type":32,"value":1058},"成本高，内容治理最复杂",{"type":27,"tag":28,"props":1060,"children":1061},{},[1062,1064,1069],{"type":32,"value":1063},"对大多数模板站或企业官网来说，",{"type":27,"tag":749,"props":1065,"children":1066},{},[1067],{"type":32,"value":1068},"子目录通常是最稳的起点",{"type":32,"value":755},{"type":27,"tag":28,"props":1071,"children":1072},{},[1073],{"type":32,"value":1074},"例如：",{"type":27,"tag":1076,"props":1077,"children":1081},"pre",{"className":1078,"code":1080,"language":32,"meta":7},[1079],"language-text","/zh/\n/en/\n/ja/\n",[1082],{"type":27,"tag":731,"props":1083,"children":1084},{"__ignoreMap":7},[1085],{"type":32,"value":1080},{"type":27,"tag":28,"props":1087,"children":1088},{},[1089],{"type":32,"value":1090},"这样做的好处是：",{"type":27,"tag":35,"props":1092,"children":1093},{},[1094,1099,1104],{"type":27,"tag":39,"props":1095,"children":1096},{},[1097],{"type":32,"value":1098},"导航与页脚结构更容易复用",{"type":27,"tag":39,"props":1100,"children":1101},{},[1102],{"type":32,"value":1103},"站点地图可以统一管理",{"type":27,"tag":39,"props":1105,"children":1106},{},[1107],{"type":32,"value":1108},"语言版本的关系更清晰",{"type":27,"tag":125,"props":1110,"children":1111},{},[],{"type":27,"tag":129,"props":1113,"children":1115},{"id":1114},"第二件事把模板结构和文案资源拆开",[1116],{"type":32,"value":1117},"第二件事：把模板结构和文案资源拆开",{"type":27,"tag":28,"props":1119,"children":1120},{},[1121],{"type":32,"value":1122},"多语言模板最怕“结构和文案绑死”。",{"type":27,"tag":28,"props":1124,"children":1125},{},[1126],{"type":32,"value":1127},"错误做法通常是：",{"type":27,"tag":35,"props":1129,"children":1130},{},[1131,1136,1141],{"type":27,"tag":39,"props":1132,"children":1133},{},[1134],{"type":32,"value":1135},"每种语言复制一整套 HTML 文件",{"type":27,"tag":39,"props":1137,"children":1138},{},[1139],{"type":32,"value":1140},"每个文件内部写死文案",{"type":27,"tag":39,"props":1142,"children":1143},{},[1144],{"type":32,"value":1145},"改一个按钮链接，要改所有语言版本",{"type":27,"tag":28,"props":1147,"children":1148},{},[1149],{"type":32,"value":1150},"更合理的思路是把页面拆成两层：",{"type":27,"tag":1152,"props":1153,"children":1154},"ol",{},[1155,1165],{"type":27,"tag":39,"props":1156,"children":1157},{},[1158,1163],{"type":27,"tag":749,"props":1159,"children":1160},{},[1161],{"type":32,"value":1162},"结构层",{"type":32,"value":1164},"：页面模块、导航、页脚、布局骨架",{"type":27,"tag":39,"props":1166,"children":1167},{},[1168,1173],{"type":27,"tag":749,"props":1169,"children":1170},{},[1171],{"type":32,"value":1172},"语言层",{"type":32,"value":1174},"：标题、描述、按钮、表单提示、SEO 文案",{"type":27,"tag":28,"props":1176,"children":1177},{},[1178],{"type":32,"value":1179},"你就算暂时还是静态 HTML 模板，也应该先按这个思路组织目录。",{"type":27,"tag":28,"props":1181,"children":1182},{},[1183],{"type":32,"value":1184},"推荐最小结构：",{"type":27,"tag":1076,"props":1186,"children":1189},{"className":1187,"code":1188,"language":32,"meta":7},[1079],"site/\n├─ templates/\n│  ├─ home.html\n│  ├─ pricing.html\n│  └─ contact.html\n├─ locales/\n│  ├─ zh.json\n│  ├─ en.json\n│  └─ ja.json\n├─ public/\n│  ├─ images/\n│  └─ assets/\n└─ dist/\n",[1190],{"type":27,"tag":731,"props":1191,"children":1192},{"__ignoreMap":7},[1193],{"type":32,"value":1188},{"type":27,"tag":28,"props":1195,"children":1196},{},[1197],{"type":32,"value":1198},"即便不用框架，这种结构也比“复制 30 个 html 文件”更容易维护。",{"type":27,"tag":125,"props":1200,"children":1201},{},[],{"type":27,"tag":129,"props":1203,"children":1205},{"id":1204},"第三件事hreflang-不是可选项而是多语言-seo-的路标",[1206,1208,1213],{"type":32,"value":1207},"第三件事：",{"type":27,"tag":731,"props":1209,"children":1211},{"className":1210},[],[1212],{"type":32,"value":677},{"type":32,"value":1214}," 不是可选项，而是多语言 SEO 的路标",{"type":27,"tag":28,"props":1216,"children":1217},{},[1218],{"type":32,"value":1219},"搜索引擎不会自动完美理解“这些页面只是语言不同”。",{"type":27,"tag":28,"props":1221,"children":1222},{},[1223],{"type":32,"value":1224},"你需要明确告诉它：",{"type":27,"tag":35,"props":1226,"children":1227},{},[1228,1233,1238],{"type":27,"tag":39,"props":1229,"children":1230},{},[1231],{"type":32,"value":1232},"哪个页面对应哪种语言",{"type":27,"tag":39,"props":1234,"children":1235},{},[1236],{"type":32,"value":1237},"哪些页面互为替代版本",{"type":27,"tag":39,"props":1239,"children":1240},{},[1241],{"type":32,"value":1242},"默认语言或全球版本是什么",{"type":27,"tag":28,"props":1244,"children":1245},{},[1246],{"type":32,"value":1247},"示例：",{"type":27,"tag":1076,"props":1249,"children":1254},{"className":1250,"code":1252,"language":1253,"meta":7},[1251],"language-html","\u003Clink rel=\"alternate\" hreflang=\"zh-CN\" href=\"https://example.com/zh/\" />\n\u003Clink rel=\"alternate\" hreflang=\"en\" href=\"https://example.com/en/\" />\n\u003Clink rel=\"alternate\" hreflang=\"ja\" href=\"https://example.com/ja/\" />\n\u003Clink rel=\"alternate\" hreflang=\"x-default\" href=\"https://example.com/\" />\n","html",[1255],{"type":27,"tag":731,"props":1256,"children":1257},{"__ignoreMap":7},[1258],{"type":32,"value":1252},{"type":27,"tag":28,"props":1260,"children":1261},{},[1262],{"type":32,"value":1263},"注意 3 个常见错误：",{"type":27,"tag":1152,"props":1265,"children":1266},{},[1267,1279,1284],{"type":27,"tag":39,"props":1268,"children":1269},{},[1270,1272,1277],{"type":32,"value":1271},"只给当前页面写 ",{"type":27,"tag":731,"props":1273,"children":1275},{"className":1274},[],[1276],{"type":32,"value":677},{"type":32,"value":1278},"，没写完整语言集合",{"type":27,"tag":39,"props":1280,"children":1281},{},[1282],{"type":32,"value":1283},"语言代码与页面实际语言不一致",{"type":27,"tag":39,"props":1285,"children":1286},{},[1287],{"type":32,"value":1288},"页面互相没有双向指向",{"type":27,"tag":125,"props":1290,"children":1291},{},[],{"type":27,"tag":129,"props":1293,"children":1295},{"id":1294},"第四件事canonical-和多语言要配合不要互相打架",[1296],{"type":32,"value":1297},"第四件事：canonical 和多语言要配合，不要互相打架",{"type":27,"tag":28,"props":1299,"children":1300},{},[1301],{"type":32,"value":1302},"很多站点的错误配置是：",{"type":27,"tag":35,"props":1304,"children":1305},{},[1306],{"type":27,"tag":39,"props":1307,"children":1308},{},[1309],{"type":32,"value":1310},"所有语言版本都 canonical 到主语言页面",{"type":27,"tag":28,"props":1312,"children":1313},{},[1314],{"type":32,"value":1315},"这会让搜索引擎误以为：",{"type":27,"tag":1317,"props":1318,"children":1319},"blockquote",{},[1320],{"type":27,"tag":28,"props":1321,"children":1322},{},[1323],{"type":32,"value":1324},"其它语言页面只是重复页，不值得单独收录。",{"type":27,"tag":28,"props":1326,"children":1327},{},[1328],{"type":32,"value":1329},"正确原则是：",{"type":27,"tag":35,"props":1331,"children":1332},{},[1333,1343],{"type":27,"tag":39,"props":1334,"children":1335},{},[1336,1338],{"type":32,"value":1337},"每个语言版本 canonical 到",{"type":27,"tag":749,"props":1339,"children":1340},{},[1341],{"type":32,"value":1342},"自身同语言 URL",{"type":27,"tag":39,"props":1344,"children":1345},{},[1346,1348,1353],{"type":32,"value":1347},"不同语言之间用 ",{"type":27,"tag":731,"props":1349,"children":1351},{"className":1350},[],[1352],{"type":32,"value":677},{"type":32,"value":1354}," 互相说明关系",{"type":27,"tag":28,"props":1356,"children":1357},{},[1358],{"type":32,"value":1359},"简单说：",{"type":27,"tag":35,"props":1361,"children":1362},{},[1363,1368],{"type":27,"tag":39,"props":1364,"children":1365},{},[1366],{"type":32,"value":1367},"canonical 解决“这页的标准地址是谁”",{"type":27,"tag":39,"props":1369,"children":1370},{},[1371,1376],{"type":27,"tag":731,"props":1372,"children":1374},{"className":1373},[],[1375],{"type":32,"value":677},{"type":32,"value":1377}," 解决“同一内容的不同语言版本是谁”",{"type":27,"tag":28,"props":1379,"children":1380},{},[1381],{"type":32,"value":1382},"它们不是替代关系，而是分工关系。",{"type":27,"tag":125,"props":1384,"children":1385},{},[],{"type":27,"tag":129,"props":1387,"children":1389},{"id":1388},"多语言改造清单结构seo内容要一起改",[1390],{"type":32,"value":1391},"多语言改造清单：结构、SEO、内容要一起改",{"type":27,"tag":431,"props":1393,"children":1394},{},[1395,1416],{"type":27,"tag":435,"props":1396,"children":1397},{},[1398],{"type":27,"tag":439,"props":1399,"children":1400},{},[1401,1406,1411],{"type":27,"tag":443,"props":1402,"children":1403},{},[1404],{"type":32,"value":1405},"模块",{"type":27,"tag":443,"props":1407,"children":1408},{},[1409],{"type":32,"value":1410},"必改项",{"type":27,"tag":443,"props":1412,"children":1413},{},[1414],{"type":32,"value":1415},"说明",{"type":27,"tag":459,"props":1417,"children":1418},{},[1419,1437,1455,1497,1515,1533],{"type":27,"tag":439,"props":1420,"children":1421},{},[1422,1427,1432],{"type":27,"tag":466,"props":1423,"children":1424},{},[1425],{"type":32,"value":1426},"URL",{"type":27,"tag":466,"props":1428,"children":1429},{},[1430],{"type":32,"value":1431},"语言前缀或独立域结构",{"type":27,"tag":466,"props":1433,"children":1434},{},[1435],{"type":32,"value":1436},"保证每种语言有稳定地址",{"type":27,"tag":439,"props":1438,"children":1439},{},[1440,1445,1450],{"type":27,"tag":466,"props":1441,"children":1442},{},[1443],{"type":32,"value":1444},"导航",{"type":27,"tag":466,"props":1446,"children":1447},{},[1448],{"type":32,"value":1449},"菜单文案、语言切换、链接映射",{"type":27,"tag":466,"props":1451,"children":1452},{},[1453],{"type":32,"value":1454},"切换语言后应落到同主题页面",{"type":27,"tag":439,"props":1456,"children":1457},{},[1458,1463,1492],{"type":27,"tag":466,"props":1459,"children":1460},{},[1461],{"type":32,"value":1462},"页面头部",{"type":27,"tag":466,"props":1464,"children":1465},{},[1466,1472,1473,1479,1480,1486,1487],{"type":27,"tag":731,"props":1467,"children":1469},{"className":1468},[],[1470],{"type":32,"value":1471},"title",{"type":32,"value":100},{"type":27,"tag":731,"props":1474,"children":1476},{"className":1475},[],[1477],{"type":32,"value":1478},"description",{"type":32,"value":100},{"type":27,"tag":731,"props":1481,"children":1483},{"className":1482},[],[1484],{"type":32,"value":1485},"lang",{"type":32,"value":100},{"type":27,"tag":731,"props":1488,"children":1490},{"className":1489},[],[1491],{"type":32,"value":677},{"type":27,"tag":466,"props":1493,"children":1494},{},[1495],{"type":32,"value":1496},"不可只翻正文不翻头部",{"type":27,"tag":439,"props":1498,"children":1499},{},[1500,1505,1510],{"type":27,"tag":466,"props":1501,"children":1502},{},[1503],{"type":32,"value":1504},"正文内容",{"type":27,"tag":466,"props":1506,"children":1507},{},[1508],{"type":32,"value":1509},"标题、段落、按钮、表单提示",{"type":27,"tag":466,"props":1511,"children":1512},{},[1513],{"type":32,"value":1514},"保证语义完整本地化",{"type":27,"tag":439,"props":1516,"children":1517},{},[1518,1523,1528],{"type":27,"tag":466,"props":1519,"children":1520},{},[1521],{"type":32,"value":1522},"媒体资源",{"type":27,"tag":466,"props":1524,"children":1525},{},[1526],{"type":32,"value":1527},"图片文字、图表、截图",{"type":27,"tag":466,"props":1529,"children":1530},{},[1531],{"type":32,"value":1532},"有文字的图片也要本地化",{"type":27,"tag":439,"props":1534,"children":1535},{},[1536,1541,1546],{"type":27,"tag":466,"props":1537,"children":1538},{},[1539],{"type":32,"value":1540},"结构化信息",{"type":27,"tag":466,"props":1542,"children":1543},{},[1544],{"type":32,"value":1545},"FAQ、Breadcrumb、组织信息",{"type":27,"tag":466,"props":1547,"children":1548},{},[1549],{"type":32,"value":1550},"根据语言输出对应文案",{"type":27,"tag":125,"props":1552,"children":1553},{},[],{"type":27,"tag":129,"props":1555,"children":1557},{"id":1556},"一个实用流程先做语言框架再做页面扩展",[1558],{"type":32,"value":1559},"一个实用流程：先做语言框架，再做页面扩展",{"type":27,"tag":1561,"props":1562,"children":1564},"h3",{"id":1563},"step-1先选主语言与默认语言",[1565],{"type":32,"value":1566},"Step 1：先选主语言与默认语言",{"type":27,"tag":28,"props":1568,"children":1569},{},[1570],{"type":32,"value":1571},"你要先明确：",{"type":27,"tag":35,"props":1573,"children":1574},{},[1575,1580,1585],{"type":27,"tag":39,"props":1576,"children":1577},{},[1578],{"type":32,"value":1579},"哪个语言版本是内容源头",{"type":27,"tag":39,"props":1581,"children":1582},{},[1583],{"type":32,"value":1584},"哪个 URL 是默认入口",{"type":27,"tag":39,"props":1586,"children":1587},{},[1588],{"type":32,"value":1589},"哪些语言只是试点，哪些会长期维护",{"type":27,"tag":1561,"props":1591,"children":1593},{"id":1592},"step-2先做-3-个核心页面样板",[1594],{"type":32,"value":1595},"Step 2：先做 3 个核心页面样板",{"type":27,"tag":28,"props":1597,"children":1598},{},[1599],{"type":32,"value":1600},"建议先挑：",{"type":27,"tag":35,"props":1602,"children":1603},{},[1604,1609,1614],{"type":27,"tag":39,"props":1605,"children":1606},{},[1607],{"type":32,"value":1608},"首页",{"type":27,"tag":39,"props":1610,"children":1611},{},[1612],{"type":32,"value":1613},"产品 / 服务页",{"type":27,"tag":39,"props":1615,"children":1616},{},[1617],{"type":32,"value":1618},"联系页",{"type":27,"tag":28,"props":1620,"children":1621},{},[1622],{"type":32,"value":1623},"因为这三类页面通常覆盖了导航、内容区块、转化表单和 SEO 元信息。",{"type":27,"tag":1561,"props":1625,"children":1627},{"id":1626},"step-3建立翻译与审核表",[1628],{"type":32,"value":1629},"Step 3：建立翻译与审核表",{"type":27,"tag":28,"props":1631,"children":1632},{},[1633],{"type":32,"value":1634},"不要只翻正文。至少应建立以下字段表：",{"type":27,"tag":35,"props":1636,"children":1637},{},[1638,1643,1648,1653,1658,1663,1668],{"type":27,"tag":39,"props":1639,"children":1640},{},[1641],{"type":32,"value":1642},"页面标题",{"type":27,"tag":39,"props":1644,"children":1645},{},[1646],{"type":32,"value":1647},"Meta Description",{"type":27,"tag":39,"props":1649,"children":1650},{},[1651],{"type":32,"value":1652},"H1",{"type":27,"tag":39,"props":1654,"children":1655},{},[1656],{"type":32,"value":1657},"按钮文案",{"type":27,"tag":39,"props":1659,"children":1660},{},[1661],{"type":32,"value":1662},"表单标签与错误提示",{"type":27,"tag":39,"props":1664,"children":1665},{},[1666],{"type":32,"value":1667},"FAQ 问答",{"type":27,"tag":39,"props":1669,"children":1670},{},[1671],{"type":32,"value":1672},"图片 alt",{"type":27,"tag":28,"props":1674,"children":1675},{},[1676],{"type":32,"value":1677},"这能显著减少“页面翻了，SEO 没翻”的问题。",{"type":27,"tag":1561,"props":1679,"children":1681},{"id":1680},"step-4最后才批量扩展到所有模板",[1682],{"type":32,"value":1683},"Step 4：最后才批量扩展到所有模板",{"type":27,"tag":28,"props":1685,"children":1686},{},[1687],{"type":32,"value":1688},"先验证 3 个样板页面能跑通，再批量复制规则，而不是一开始全站大改。",{"type":27,"tag":125,"props":1690,"children":1691},{},[],{"type":27,"tag":129,"props":1693,"children":1695},{"id":1694},"失败案例英文页上线了但搜索引擎还是主要收录中文页",[1696],{"type":32,"value":1697},"失败案例：英文页上线了，但搜索引擎还是主要收录中文页",{"type":27,"tag":28,"props":1699,"children":1700},{},[1701],{"type":32,"value":1702},"常见情况是这样的：",{"type":27,"tag":35,"props":1704,"children":1705},{},[1706,1711,1721,1731,1736],{"type":27,"tag":39,"props":1707,"children":1708},{},[1709],{"type":32,"value":1710},"团队把中文模板复制成英文版",{"type":27,"tag":39,"props":1712,"children":1713},{},[1714,1716],{"type":32,"value":1715},"URL 变成 ",{"type":27,"tag":731,"props":1717,"children":1719},{"className":1718},[],[1720],{"type":32,"value":979},{"type":27,"tag":39,"props":1722,"children":1723},{},[1724,1726],{"type":32,"value":1725},"但是没有配置 ",{"type":27,"tag":731,"props":1727,"children":1729},{"className":1728},[],[1730],{"type":32,"value":677},{"type":27,"tag":39,"props":1732,"children":1733},{},[1734],{"type":32,"value":1735},"英文页的 canonical 仍然指向中文页",{"type":27,"tag":39,"props":1737,"children":1738},{},[1739,1744,1745,1750],{"type":27,"tag":731,"props":1740,"children":1742},{"className":1741},[],[1743],{"type":32,"value":1471},{"type":32,"value":115},{"type":27,"tag":731,"props":1746,"children":1748},{"className":1747},[],[1749],{"type":32,"value":1478},{"type":32,"value":1751}," 没重写，只改了正文",{"type":27,"tag":28,"props":1753,"children":1754},{},[1755],{"type":32,"value":1756},"结果：",{"type":27,"tag":35,"props":1758,"children":1759},{},[1760,1765,1770],{"type":27,"tag":39,"props":1761,"children":1762},{},[1763],{"type":32,"value":1764},"搜索引擎认为英文页和中文页高度重复",{"type":27,"tag":39,"props":1766,"children":1767},{},[1768],{"type":32,"value":1769},"英文 URL 收录慢，甚至被折叠",{"type":27,"tag":39,"props":1771,"children":1772},{},[1773],{"type":32,"value":1774},"海外用户搜到的是中文版本",{"type":27,"tag":28,"props":1776,"children":1777},{},[1778],{"type":32,"value":1779},"修复顺序应该是：",{"type":27,"tag":1152,"props":1781,"children":1782},{},[1783,1788,1798,1803],{"type":27,"tag":39,"props":1784,"children":1785},{},[1786],{"type":32,"value":1787},"先修 canonical",{"type":27,"tag":39,"props":1789,"children":1790},{},[1791,1793],{"type":32,"value":1792},"再补完整 ",{"type":27,"tag":731,"props":1794,"children":1796},{"className":1795},[],[1797],{"type":32,"value":677},{"type":27,"tag":39,"props":1799,"children":1800},{},[1801],{"type":32,"value":1802},"再逐页检查元信息与导航链接",{"type":27,"tag":39,"props":1804,"children":1805},{},[1806],{"type":32,"value":1807},"最后提交 sitemap 促进重新抓取",{"type":27,"tag":125,"props":1809,"children":1810},{},[],{"type":27,"tag":129,"props":1812,"children":1814},{"id":1813},"多语言模板上线前-checklist",[1815],{"type":32,"value":1816},"多语言模板上线前 Checklist",{"type":27,"tag":1561,"props":1818,"children":1820},{"id":1819},"url-与结构",[1821],{"type":32,"value":1822},"URL 与结构",{"type":27,"tag":35,"props":1824,"children":1826},{"className":1825},[542],[1827,1836,1845],{"type":27,"tag":39,"props":1828,"children":1830},{"className":1829},[547],[1831,1834],{"type":27,"tag":550,"props":1832,"children":1833},{"disabled":552,"type":553},[],{"type":32,"value":1835}," 已确定子目录 / 子域 / 独立域方案",{"type":27,"tag":39,"props":1837,"children":1839},{"className":1838},[547],[1840,1843],{"type":27,"tag":550,"props":1841,"children":1842},{"disabled":552,"type":553},[],{"type":32,"value":1844}," 同主题页面在不同语言下 URL 规则一致",{"type":27,"tag":39,"props":1846,"children":1848},{"className":1847},[547],[1849,1852],{"type":27,"tag":550,"props":1850,"children":1851},{"disabled":552,"type":553},[],{"type":32,"value":1853}," 语言切换不会跳回首页而丢失上下文",{"type":27,"tag":1561,"props":1855,"children":1857},{"id":1856},"seo",[1858],{"type":32,"value":676},{"type":27,"tag":35,"props":1860,"children":1862},{"className":1861},[542],[1863,1880,1901,1910,1926],{"type":27,"tag":39,"props":1864,"children":1866},{"className":1865},[547],[1867,1870,1872,1878],{"type":27,"tag":550,"props":1868,"children":1869},{"disabled":552,"type":553},[],{"type":32,"value":1871}," ",{"type":27,"tag":731,"props":1873,"children":1875},{"className":1874},[],[1876],{"type":32,"value":1877},"\u003Chtml lang>",{"type":32,"value":1879}," 正确",{"type":27,"tag":39,"props":1881,"children":1883},{"className":1882},[547],[1884,1887,1888,1893,1894,1899],{"type":27,"tag":550,"props":1885,"children":1886},{"disabled":552,"type":553},[],{"type":32,"value":1871},{"type":27,"tag":731,"props":1889,"children":1891},{"className":1890},[],[1892],{"type":32,"value":1471},{"type":32,"value":774},{"type":27,"tag":731,"props":1895,"children":1897},{"className":1896},[],[1898],{"type":32,"value":1478},{"type":32,"value":1900}," 已本地化",{"type":27,"tag":39,"props":1902,"children":1904},{"className":1903},[547],[1905,1908],{"type":27,"tag":550,"props":1906,"children":1907},{"disabled":552,"type":553},[],{"type":32,"value":1909}," 每页都有正确的 canonical",{"type":27,"tag":39,"props":1911,"children":1913},{"className":1912},[547],[1914,1917,1919,1924],{"type":27,"tag":550,"props":1915,"children":1916},{"disabled":552,"type":553},[],{"type":32,"value":1918}," 每页都有完整 ",{"type":27,"tag":731,"props":1920,"children":1922},{"className":1921},[],[1923],{"type":32,"value":677},{"type":32,"value":1925}," 集合",{"type":27,"tag":39,"props":1927,"children":1929},{"className":1928},[547],[1930,1933],{"type":27,"tag":550,"props":1931,"children":1932},{"disabled":552,"type":553},[],{"type":32,"value":1934}," sitemap 包含全部语言版本",{"type":27,"tag":1561,"props":1936,"children":1938},{"id":1937},"内容",[1939],{"type":32,"value":1937},{"type":27,"tag":35,"props":1941,"children":1943},{"className":1942},[542],[1944,1953,1962],{"type":27,"tag":39,"props":1945,"children":1947},{"className":1946},[547],[1948,1951],{"type":27,"tag":550,"props":1949,"children":1950},{"disabled":552,"type":553},[],{"type":32,"value":1952}," 导航、页脚、CTA、表单提示已翻译",{"type":27,"tag":39,"props":1954,"children":1956},{"className":1955},[547],[1957,1960],{"type":27,"tag":550,"props":1958,"children":1959},{"disabled":552,"type":553},[],{"type":32,"value":1961}," 图片中的文字或截图已本地化",{"type":27,"tag":39,"props":1963,"children":1965},{"className":1964},[547],[1966,1969],{"type":27,"tag":550,"props":1967,"children":1968},{"disabled":552,"type":553},[],{"type":32,"value":1970}," FAQ、案例、信任元素未出现语言混杂",{"type":27,"tag":1561,"props":1972,"children":1974},{"id":1973},"质量",[1975],{"type":32,"value":1973},{"type":27,"tag":35,"props":1977,"children":1979},{"className":1978},[542],[1980,1989,1998],{"type":27,"tag":39,"props":1981,"children":1983},{"className":1982},[547],[1984,1987],{"type":27,"tag":550,"props":1985,"children":1986},{"disabled":552,"type":553},[],{"type":32,"value":1988}," 切换语言后链接不会 404",{"type":27,"tag":39,"props":1990,"children":1992},{"className":1991},[547],[1993,1996],{"type":27,"tag":550,"props":1994,"children":1995},{"disabled":552,"type":553},[],{"type":32,"value":1997}," 移动端排版未因文案长度变化而崩掉",{"type":27,"tag":39,"props":1999,"children":2001},{"className":2000},[547],[2002,2005],{"type":27,"tag":550,"props":2003,"children":2004},{"disabled":552,"type":553},[],{"type":32,"value":2006}," 不同语言页未错误共用同一标题或描述",{"type":27,"tag":28,"props":2008,"children":2009},{},[2010,2012,2018],{"type":32,"value":2011},"如果你在响应式模板上做这件事，还要补看 ",{"type":27,"tag":93,"props":2013,"children":2015},{"href":2014},"/about-html/html-template-responsive-breakpoints-strategy",[2016],{"type":32,"value":2017},"HTML 模板响应式断点策略",{"type":32,"value":755},{"type":27,"tag":125,"props":2020,"children":2021},{},[],{"type":27,"tag":129,"props":2023,"children":2025},{"id":2024},"最后总结",[2026],{"type":32,"value":2024},{"type":27,"tag":28,"props":2028,"children":2029},{},[2030],{"type":32,"value":2031},"多语言模板改造不是“翻译项目”，而是“内容架构项目”。",{"type":27,"tag":28,"props":2033,"children":2034},{},[2035],{"type":32,"value":2036},"真正该优先做的是：",{"type":27,"tag":1152,"props":2038,"children":2039},{},[2040,2045,2050,2062,2067],{"type":27,"tag":39,"props":2041,"children":2042},{},[2043],{"type":32,"value":2044},"先选 URL 策略",{"type":27,"tag":39,"props":2046,"children":2047},{},[2048],{"type":32,"value":2049},"再拆结构与文案",{"type":27,"tag":39,"props":2051,"children":2052},{},[2053,2055,2060],{"type":32,"value":2054},"配好 ",{"type":27,"tag":731,"props":2056,"children":2058},{"className":2057},[],[2059],{"type":32,"value":677},{"type":32,"value":2061}," 与 canonical",{"type":27,"tag":39,"props":2063,"children":2064},{},[2065],{"type":32,"value":2066},"建立元信息与翻译审核表",{"type":27,"tag":39,"props":2068,"children":2069},{},[2070],{"type":32,"value":2071},"最后再批量扩展到所有页面",{"type":27,"tag":28,"props":2073,"children":2074},{},[2075],{"type":32,"value":2076},"只要这 5 步走对，多语言就不再是“复制页面 + 人工改词”的高风险动作，而会成为一个可维护、可增长、可持续扩展的内容系统。",{"title":7,"searchDepth":649,"depth":649,"links":2078},[2079,2080,2081,2082,2084,2085,2086,2092,2093,2099],{"id":788,"depth":652,"text":791},{"id":922,"depth":652,"text":925},{"id":1114,"depth":652,"text":1117},{"id":1204,"depth":652,"text":2083},"第三件事：hreflang 不是可选项，而是多语言 SEO 的路标",{"id":1294,"depth":652,"text":1297},{"id":1388,"depth":652,"text":1391},{"id":1556,"depth":652,"text":1559,"children":2087},[2088,2089,2090,2091],{"id":1563,"depth":649,"text":1566},{"id":1592,"depth":649,"text":1595},{"id":1626,"depth":649,"text":1629},{"id":1680,"depth":649,"text":1683},{"id":1694,"depth":652,"text":1697},{"id":1813,"depth":652,"text":1816,"children":2094},[2095,2096,2097,2098],{"id":1819,"depth":649,"text":1822},{"id":1856,"depth":649,"text":676},{"id":1937,"depth":649,"text":1937},{"id":1973,"depth":649,"text":1973},{"id":2024,"depth":652,"text":2024},"content:about-html:html-template-i18n-seo-guide.md","about-html/html-template-i18n-seo-guide.md","about-html/html-template-i18n-seo-guide",{"_path":2104,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":2105,"description":2106,"date":10,"topic":5,"author":11,"tags":2107,"image":2112,"imageAlt":2113,"pexelsPhotoId":2114,"pexelsUrl":2115,"featured":6,"readingTime":683,"body":2116,"_type":662,"_id":2761,"_source":664,"_file":2762,"_stem":2763,"_extension":667},"/about-html/html-template-image-strategy-guide","HTML 模板的图片策略：清晰度、体积和统一风格怎么平衡","很多模板上线后既不清晰也不够快，问题往往出在图片策略。本文从封面图、内容图、缩略图、格式选择和风格统一出发，讲清楚模板站点该怎样处理图片。",[13,2108,2109,2110,2111],"图片优化","网页性能","视觉一致性","网页制作","/images/articles/html-template-image-strategy-guide-featured.jpg","桌面上摆放着相机与电脑屏幕，代表网站模板的图片策略与素材管理",831044,"https://www.pexels.com/photo/turned-on-laptop-computer-831044/",{"type":24,"children":2117,"toc":2749},[2118,2123,2136,2141,2173,2176,2182,2187,2205,2210,2216,2221,2226,2325,2330,2336,2341,2346,2364,2369,2375,2380,2385,2408,2413,2418,2441,2447,2452,2457,2470,2475,2481,2486,2509,2514,2519,2537,2543,2641,2647,2705,2709,2714,2718],{"type":27,"tag":28,"props":2119,"children":2120},{},[2121],{"type":32,"value":2122},"很多 HTML 模板第一眼看起来都不错，但一到真实上线就暴露出两个问题：",{"type":27,"tag":35,"props":2124,"children":2125},{},[2126,2131],{"type":27,"tag":39,"props":2127,"children":2128},{},[2129],{"type":32,"value":2130},"图片很清晰，但页面太慢",{"type":27,"tag":39,"props":2132,"children":2133},{},[2134],{"type":32,"value":2135},"页面够快，但图片风格很乱，看起来像拼起来的",{"type":27,"tag":28,"props":2137,"children":2138},{},[2139],{"type":32,"value":2140},"这说明图片不是一个“上传素材”的细节，而是一套需要事先设计的策略。",{"type":27,"tag":28,"props":2142,"children":2143},{},[2144,2146,2150,2151,2157,2158,2164,2165,2171],{"type":32,"value":2145},"如果你已经看过 ",{"type":27,"tag":93,"props":2147,"children":2148},{"href":95},[2149],{"type":32,"value":98},{"type":32,"value":100},{"type":27,"tag":93,"props":2152,"children":2154},{"href":2153},"/about-html/web-page-editor-image-optimization-workflow",[2155],{"type":32,"value":2156},"网页编辑器里的图片处理工作流",{"type":32,"value":100},{"type":27,"tag":93,"props":2159,"children":2161},{"href":2160},"/about-html/html-template-responsive-bugs-fix",[2162],{"type":32,"value":2163},"HTML 模板响应式 bug 修复",{"type":32,"value":115},{"type":27,"tag":93,"props":2166,"children":2168},{"href":2167},"/topics/design/component-library-for-landing-page",[2169],{"type":32,"value":2170},"网页设计中的组件库思维",{"type":32,"value":2172},"，这篇会专门解决模板里的图片问题。",{"type":27,"tag":125,"props":2174,"children":2175},{},[],{"type":27,"tag":129,"props":2177,"children":2179},{"id":2178},"一图片策略要先回答-3-个问题",[2180],{"type":32,"value":2181},"一、图片策略要先回答 3 个问题",{"type":27,"tag":28,"props":2183,"children":2184},{},[2185],{"type":32,"value":2186},"在改模板前，先别急着替换素材，先把下面三个问题讲明白：",{"type":27,"tag":1152,"props":2188,"children":2189},{},[2190,2195,2200],{"type":27,"tag":39,"props":2191,"children":2192},{},[2193],{"type":32,"value":2194},"这张图是负责转化，还是负责装饰",{"type":27,"tag":39,"props":2196,"children":2197},{},[2198],{"type":32,"value":2199},"它会出现在首屏，还是正文深处",{"type":27,"tag":39,"props":2201,"children":2202},{},[2203],{"type":32,"value":2204},"它需要强调品牌一致性，还是只要足够清楚",{"type":27,"tag":28,"props":2206,"children":2207},{},[2208],{"type":32,"value":2209},"这三个答案，会直接决定你该选什么尺寸、什么格式、什么压缩强度。",{"type":27,"tag":129,"props":2211,"children":2213},{"id":2212},"二不要把所有图片都当成同一种资源",[2214],{"type":32,"value":2215},"二、不要把所有图片都当成同一种资源",{"type":27,"tag":28,"props":2217,"children":2218},{},[2219],{"type":32,"value":2220},"模板里最常见的错误，就是把首屏大图、卡片缩略图、正文插图都按同一套方法处理。",{"type":27,"tag":28,"props":2222,"children":2223},{},[2224],{"type":32,"value":2225},"更合理的分法是：",{"type":27,"tag":431,"props":2227,"children":2228},{},[2229,2250],{"type":27,"tag":435,"props":2230,"children":2231},{},[2232],{"type":27,"tag":439,"props":2233,"children":2234},{},[2235,2240,2245],{"type":27,"tag":443,"props":2236,"children":2237},{},[2238],{"type":32,"value":2239},"图片类型",{"type":27,"tag":443,"props":2241,"children":2242},{},[2243],{"type":32,"value":2244},"主要任务",{"type":27,"tag":443,"props":2246,"children":2247},{},[2248],{"type":32,"value":2249},"处理重点",{"type":27,"tag":459,"props":2251,"children":2252},{},[2253,2271,2289,2307],{"type":27,"tag":439,"props":2254,"children":2255},{},[2256,2261,2266],{"type":27,"tag":466,"props":2257,"children":2258},{},[2259],{"type":32,"value":2260},"首屏主图",{"type":27,"tag":466,"props":2262,"children":2263},{},[2264],{"type":32,"value":2265},"建立第一印象",{"type":27,"tag":466,"props":2267,"children":2268},{},[2269],{"type":32,"value":2270},"清晰度优先，但要控制体积",{"type":27,"tag":439,"props":2272,"children":2273},{},[2274,2279,2284],{"type":27,"tag":466,"props":2275,"children":2276},{},[2277],{"type":32,"value":2278},"卡片缩略图",{"type":27,"tag":466,"props":2280,"children":2281},{},[2282],{"type":32,"value":2283},"提供识别与导览",{"type":27,"tag":466,"props":2285,"children":2286},{},[2287],{"type":32,"value":2288},"尺寸统一，便于列表稳定",{"type":27,"tag":439,"props":2290,"children":2291},{},[2292,2297,2302],{"type":27,"tag":466,"props":2293,"children":2294},{},[2295],{"type":32,"value":2296},"正文插图",{"type":27,"tag":466,"props":2298,"children":2299},{},[2300],{"type":32,"value":2301},"帮助解释内容",{"type":27,"tag":466,"props":2303,"children":2304},{},[2305],{"type":32,"value":2306},"语义清楚，不必过度精细",{"type":27,"tag":439,"props":2308,"children":2309},{},[2310,2315,2320],{"type":27,"tag":466,"props":2311,"children":2312},{},[2313],{"type":32,"value":2314},"装饰性背景图",{"type":27,"tag":466,"props":2316,"children":2317},{},[2318],{"type":32,"value":2319},"营造氛围",{"type":27,"tag":466,"props":2321,"children":2322},{},[2323],{"type":32,"value":2324},"尽量轻量，避免压住正文",{"type":27,"tag":28,"props":2326,"children":2327},{},[2328],{"type":32,"value":2329},"这样做最大的好处是，你不会为了追求“全站高清”把所有资源都做成超大图。",{"type":27,"tag":129,"props":2331,"children":2333},{"id":2332},"三清晰度和体积不是二选一而是优先级问题",[2334],{"type":32,"value":2335},"三、清晰度和体积不是二选一，而是优先级问题",{"type":27,"tag":28,"props":2337,"children":2338},{},[2339],{"type":32,"value":2340},"对多数模板站点来说，真正重要的是：用户在常见设备上看起来足够清楚，同时页面仍然加载顺畅。",{"type":27,"tag":28,"props":2342,"children":2343},{},[2344],{"type":32,"value":2345},"这意味着：",{"type":27,"tag":35,"props":2347,"children":2348},{},[2349,2354,2359],{"type":27,"tag":39,"props":2350,"children":2351},{},[2352],{"type":32,"value":2353},"首屏图可以稍大，但数量要少",{"type":27,"tag":39,"props":2355,"children":2356},{},[2357],{"type":32,"value":2358},"列表图应该统一尺寸，避免布局跳动",{"type":27,"tag":39,"props":2360,"children":2361},{},[2362],{"type":32,"value":2363},"装饰图应该尽量轻，不要和正文抢资源",{"type":27,"tag":28,"props":2365,"children":2366},{},[2367],{"type":32,"value":2368},"如果一张图只是为了衬托氛围，却比正文主图还重，那就是资源分配错了。",{"type":27,"tag":129,"props":2370,"children":2372},{"id":2371},"四图片风格不统一比体积超标更容易拉低成品感",[2373],{"type":32,"value":2374},"四、图片风格不统一，比体积超标更容易拉低“成品感”",{"type":27,"tag":28,"props":2376,"children":2377},{},[2378],{"type":32,"value":2379},"很多模板改造失败，不是因为没有好图，而是图片彼此完全不像同一个站点。",{"type":27,"tag":28,"props":2381,"children":2382},{},[2383],{"type":32,"value":2384},"常见混乱包括：",{"type":27,"tag":35,"props":2386,"children":2387},{},[2388,2393,2398,2403],{"type":27,"tag":39,"props":2389,"children":2390},{},[2391],{"type":32,"value":2392},"一部分是冷色商务风",{"type":27,"tag":39,"props":2394,"children":2395},{},[2396],{"type":32,"value":2397},"一部分是暖色生活风",{"type":27,"tag":39,"props":2399,"children":2400},{},[2401],{"type":32,"value":2402},"一部分是实拍，一部分是插画",{"type":27,"tag":39,"props":2404,"children":2405},{},[2406],{"type":32,"value":2407},"横图、竖图、近景、远景比例全乱",{"type":27,"tag":28,"props":2409,"children":2410},{},[2411],{"type":32,"value":2412},"这会让页面看起来像临时拼接，而不是经过设计。",{"type":27,"tag":28,"props":2414,"children":2415},{},[2416],{"type":32,"value":2417},"一个简单做法是先定义素材规则：",{"type":27,"tag":35,"props":2419,"children":2420},{},[2421,2426,2431,2436],{"type":27,"tag":39,"props":2422,"children":2423},{},[2424],{"type":32,"value":2425},"主色调范围",{"type":27,"tag":39,"props":2427,"children":2428},{},[2429],{"type":32,"value":2430},"构图偏好",{"type":27,"tag":39,"props":2432,"children":2433},{},[2434],{"type":32,"value":2435},"是否优先人物、界面、场景或产品",{"type":27,"tag":39,"props":2437,"children":2438},{},[2439],{"type":32,"value":2440},"缩略图统一比例",{"type":27,"tag":129,"props":2442,"children":2444},{"id":2443},"五首屏图片最该克制而不是最该炫耀",[2445],{"type":32,"value":2446},"五、首屏图片最该克制，而不是最该炫耀",{"type":27,"tag":28,"props":2448,"children":2449},{},[2450],{"type":32,"value":2451},"模板用户最容易犯的错，是把首屏做成“视觉展示区”，结果大图、叠层、视频、装饰线条全堆进去。",{"type":27,"tag":28,"props":2453,"children":2454},{},[2455],{"type":32,"value":2456},"首屏图片真正要完成的是两件事：",{"type":27,"tag":1152,"props":2458,"children":2459},{},[2460,2465],{"type":27,"tag":39,"props":2461,"children":2462},{},[2463],{"type":32,"value":2464},"帮助用户快速理解产品或服务",{"type":27,"tag":39,"props":2466,"children":2467},{},[2468],{"type":32,"value":2469},"不拖垮首屏加载",{"type":27,"tag":28,"props":2471,"children":2472},{},[2473],{"type":32,"value":2474},"如果一张图不能支持这两件事，再漂亮也可能是负担。",{"type":27,"tag":129,"props":2476,"children":2478},{"id":2477},"六失败案例模板换成高质量素材后页面反而更差",[2479],{"type":32,"value":2480},"六、失败案例：模板换成高质量素材后，页面反而更差",{"type":27,"tag":28,"props":2482,"children":2483},{},[2484],{"type":32,"value":2485},"一个很常见的翻车场景是：",{"type":27,"tag":35,"props":2487,"children":2488},{},[2489,2494,2499,2504],{"type":27,"tag":39,"props":2490,"children":2491},{},[2492],{"type":32,"value":2493},"原模板图片一般，但页面加载还行",{"type":27,"tag":39,"props":2495,"children":2496},{},[2497],{"type":32,"value":2498},"替换成高质量商业图后，图片体积暴涨",{"type":27,"tag":39,"props":2500,"children":2501},{},[2502],{"type":32,"value":2503},"列表页和移动端明显变慢",{"type":27,"tag":39,"props":2505,"children":2506},{},[2507],{"type":32,"value":2508},"不同来源素材风格又不统一",{"type":27,"tag":28,"props":2510,"children":2511},{},[2512],{"type":32,"value":2513},"最后网站既慢，又不像一个完整品牌。",{"type":27,"tag":28,"props":2515,"children":2516},{},[2517],{"type":32,"value":2518},"根因通常不是“高质量图片错了”，而是缺少图片分层策略。解决方式是：",{"type":27,"tag":1152,"props":2520,"children":2521},{},[2522,2527,2532],{"type":27,"tag":39,"props":2523,"children":2524},{},[2525],{"type":32,"value":2526},"先分类型",{"type":27,"tag":39,"props":2528,"children":2529},{},[2530],{"type":32,"value":2531},"再定尺寸和格式",{"type":27,"tag":39,"props":2533,"children":2534},{},[2535],{"type":32,"value":2536},"最后统一风格规则",{"type":27,"tag":129,"props":2538,"children":2540},{"id":2539},"七模板图片策略表",[2541],{"type":32,"value":2542},"七、模板图片策略表",{"type":27,"tag":431,"props":2544,"children":2545},{},[2546,2567],{"type":27,"tag":435,"props":2547,"children":2548},{},[2549],{"type":27,"tag":439,"props":2550,"children":2551},{},[2552,2557,2562],{"type":27,"tag":443,"props":2553,"children":2554},{},[2555],{"type":32,"value":2556},"决策项",{"type":27,"tag":443,"props":2558,"children":2559},{},[2560],{"type":32,"value":2561},"推荐做法",{"type":27,"tag":443,"props":2563,"children":2564},{},[2565],{"type":32,"value":2566},"不推荐做法",{"type":27,"tag":459,"props":2568,"children":2569},{},[2570,2587,2605,2623],{"type":27,"tag":439,"props":2571,"children":2572},{},[2573,2577,2582],{"type":27,"tag":466,"props":2574,"children":2575},{},[2576],{"type":32,"value":2260},{"type":27,"tag":466,"props":2578,"children":2579},{},[2580],{"type":32,"value":2581},"少量高质量图，服务主信息",{"type":27,"tag":466,"props":2583,"children":2584},{},[2585],{"type":32,"value":2586},"多张大图叠加",{"type":27,"tag":439,"props":2588,"children":2589},{},[2590,2595,2600],{"type":27,"tag":466,"props":2591,"children":2592},{},[2593],{"type":32,"value":2594},"列表缩略图",{"type":27,"tag":466,"props":2596,"children":2597},{},[2598],{"type":32,"value":2599},"统一比例与裁切方式",{"type":27,"tag":466,"props":2601,"children":2602},{},[2603],{"type":32,"value":2604},"每张图尺寸都不同",{"type":27,"tag":439,"props":2606,"children":2607},{},[2608,2613,2618],{"type":27,"tag":466,"props":2609,"children":2610},{},[2611],{"type":32,"value":2612},"装饰图",{"type":27,"tag":466,"props":2614,"children":2615},{},[2616],{"type":32,"value":2617},"轻量化，避免压住正文",{"type":27,"tag":466,"props":2619,"children":2620},{},[2621],{"type":32,"value":2622},"装饰图比正文图更重",{"type":27,"tag":439,"props":2624,"children":2625},{},[2626,2631,2636],{"type":27,"tag":466,"props":2627,"children":2628},{},[2629],{"type":32,"value":2630},"素材风格",{"type":27,"tag":466,"props":2632,"children":2633},{},[2634],{"type":32,"value":2635},"先设统一规则再选图",{"type":27,"tag":466,"props":2637,"children":2638},{},[2639],{"type":32,"value":2640},"每页临时找图",{"type":27,"tag":129,"props":2642,"children":2644},{"id":2643},"八图片策略检查清单",[2645],{"type":32,"value":2646},"八、图片策略检查清单",{"type":27,"tag":35,"props":2648,"children":2650},{"className":2649},[542],[2651,2660,2669,2678,2687,2696],{"type":27,"tag":39,"props":2652,"children":2654},{"className":2653},[547],[2655,2658],{"type":27,"tag":550,"props":2656,"children":2657},{"disabled":552,"type":553},[],{"type":32,"value":2659}," 是否区分了首屏图、缩略图、正文图和装饰图",{"type":27,"tag":39,"props":2661,"children":2663},{"className":2662},[547],[2664,2667],{"type":27,"tag":550,"props":2665,"children":2666},{"disabled":552,"type":553},[],{"type":32,"value":2668}," 首页图片数量是否已经足够克制",{"type":27,"tag":39,"props":2670,"children":2672},{"className":2671},[547],[2673,2676],{"type":27,"tag":550,"props":2674,"children":2675},{"disabled":552,"type":553},[],{"type":32,"value":2677}," 列表图是否统一尺寸与比例",{"type":27,"tag":39,"props":2679,"children":2681},{"className":2680},[547],[2682,2685],{"type":27,"tag":550,"props":2683,"children":2684},{"disabled":552,"type":553},[],{"type":32,"value":2686}," 是否建立了统一的图片风格规则",{"type":27,"tag":39,"props":2688,"children":2690},{"className":2689},[547],[2691,2694],{"type":27,"tag":550,"props":2692,"children":2693},{"disabled":552,"type":553},[],{"type":32,"value":2695}," 是否先判断图片用途，再决定体积和清晰度",{"type":27,"tag":39,"props":2697,"children":2699},{"className":2698},[547],[2700,2703],{"type":27,"tag":550,"props":2701,"children":2702},{"disabled":552,"type":553},[],{"type":32,"value":2704}," 是否避免让装饰性图片拖慢核心内容",{"type":27,"tag":129,"props":2706,"children":2707},{"id":604},[2708],{"type":32,"value":604},{"type":27,"tag":28,"props":2710,"children":2711},{},[2712],{"type":32,"value":2713},"HTML 模板的图片策略，本质上是在做资源分配。你要把清晰度、体积和风格统一这三件事同时纳入判断，模板改造后的页面才会既像一个完整产品，又不会因为素材失控而拖慢整站。",{"type":27,"tag":129,"props":2715,"children":2716},{"id":614},[2717],{"type":32,"value":614},{"type":27,"tag":35,"props":2719,"children":2720},{},[2721,2728,2735,2742],{"type":27,"tag":39,"props":2722,"children":2723},{},[2724],{"type":27,"tag":93,"props":2725,"children":2726},{"href":95},[2727],{"type":32,"value":98},{"type":27,"tag":39,"props":2729,"children":2730},{},[2731],{"type":27,"tag":93,"props":2732,"children":2733},{"href":2153},[2734],{"type":32,"value":2156},{"type":27,"tag":39,"props":2736,"children":2737},{},[2738],{"type":27,"tag":93,"props":2739,"children":2740},{"href":2160},[2741],{"type":32,"value":2163},{"type":27,"tag":39,"props":2743,"children":2744},{},[2745],{"type":27,"tag":93,"props":2746,"children":2747},{"href":2167},[2748],{"type":32,"value":2170},{"title":7,"searchDepth":649,"depth":649,"links":2750},[2751,2752,2753,2754,2755,2756,2757,2758,2759,2760],{"id":2178,"depth":652,"text":2181},{"id":2212,"depth":652,"text":2215},{"id":2332,"depth":652,"text":2335},{"id":2371,"depth":652,"text":2374},{"id":2443,"depth":652,"text":2446},{"id":2477,"depth":652,"text":2480},{"id":2539,"depth":652,"text":2542},{"id":2643,"depth":652,"text":2646},{"id":604,"depth":652,"text":604},{"id":614,"depth":652,"text":614},"content:about-html:html-template-image-strategy-guide.md","about-html/html-template-image-strategy-guide.md","about-html/html-template-image-strategy-guide",{"_path":2765,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":2766,"description":2767,"date":2768,"topic":5,"author":11,"tags":2769,"image":2773,"imageAlt":2774,"pexelsPhotoId":2775,"pexelsUrl":2776,"featured":6,"readingTime":22,"body":2777,"_type":662,"_id":4102,"_source":664,"_file":4103,"_stem":4104,"_extension":667},"/about-html/html-template-industry-selection-guide","HTML 模板行业选型指南：企业站、作品集、活动页到底该怎么选","模板不是行业词一搜就能用，真正关键的是业务目标、内容结构与后续维护成本是否匹配。本文按行业与场景给出 HTML 模板选型方法。","2026-03-07",[13,2770,2111,2771,2772],"行业模板","企业官网","落地页","/images/articles/html-template-industry-selection-guide-featured.jpg","在多个行业网站模板方案之间进行选择和比对的桌面场景",7621355,"https://www.pexels.com/photo/a-laptop-beside-a-miniature-shopping-cart-7621355/",{"type":24,"children":2778,"toc":4063},[2779,2790,2794,2812,2817,2820,2826,2907,2912,2915,2921,2926,2932,2937,2955,2960,2978,2984,2988,2996,3000,3018,3024,3028,3036,3040,3058,3064,3068,3076,3080,3098,3103,3106,3112,3117,3135,3140,3163,3168,3241,3246,3249,3255,3260,3265,3288,3293,3326,3331,3334,3340,3345,3350,3368,3373,3378,3401,3406,3409,3415,3420,3425,3499,3504,3507,3512,3518,3523,3550,3555,3561,3566,3572,3577,3600,3605,3611,3616,3634,3639,3642,3648,3764,3769,3787,3790,3796,3806,3816,3839,3849,3858,3876,3881,3889,3892,3898,3956,3959,3964,3970,3975,3981,3986,3992,3997,4003,4008,4014,4019,4022,4027],{"type":27,"tag":28,"props":2780,"children":2781},{},[2782,2784,2789],{"type":32,"value":2783},"挑模板时最常见的错误，不是“没找到好看的”，而是",{"type":27,"tag":749,"props":2785,"children":2786},{},[2787],{"type":32,"value":2788},"选了一个不适合自己业务节奏的模板",{"type":32,"value":755},{"type":27,"tag":28,"props":2791,"children":2792},{},[2793],{"type":32,"value":1074},{"type":27,"tag":35,"props":2795,"children":2796},{},[2797,2802,2807],{"type":27,"tag":39,"props":2798,"children":2799},{},[2800],{"type":32,"value":2801},"企业官网选了一个视觉很强、但信任模块很弱的模板",{"type":27,"tag":39,"props":2803,"children":2804},{},[2805],{"type":32,"value":2806},"活动页选了一个内容结构太深的模板",{"type":27,"tag":39,"props":2808,"children":2809},{},[2810],{"type":32,"value":2811},"作品集站选了一个图片加载策略很差的模板",{"type":27,"tag":28,"props":2813,"children":2814},{},[2815],{"type":32,"value":2816},"模板选型不是审美选择题，而是业务决策题。",{"type":27,"tag":125,"props":2818,"children":2819},{},[],{"type":27,"tag":129,"props":2821,"children":2823},{"id":2822},"结论先说行业模板要按目标内容结构维护方式三件事一起看",[2824],{"type":32,"value":2825},"结论先说：行业模板要按“目标、内容结构、维护方式”三件事一起看",{"type":27,"tag":431,"props":2827,"children":2828},{},[2829,2850],{"type":27,"tag":435,"props":2830,"children":2831},{},[2832],{"type":27,"tag":439,"props":2833,"children":2834},{},[2835,2840,2845],{"type":27,"tag":443,"props":2836,"children":2837},{},[2838],{"type":32,"value":2839},"判断维度",{"type":27,"tag":443,"props":2841,"children":2842},{},[2843],{"type":32,"value":2844},"你该问什么",{"type":27,"tag":443,"props":2846,"children":2847},{},[2848],{"type":32,"value":2849},"选错的代价",{"type":27,"tag":459,"props":2851,"children":2852},{},[2853,2871,2889],{"type":27,"tag":439,"props":2854,"children":2855},{},[2856,2861,2866],{"type":27,"tag":466,"props":2857,"children":2858},{},[2859],{"type":32,"value":2860},"目标",{"type":27,"tag":466,"props":2862,"children":2863},{},[2864],{"type":32,"value":2865},"这个页面主要转化什么",{"type":27,"tag":466,"props":2867,"children":2868},{},[2869],{"type":32,"value":2870},"看起来完整，但不转化",{"type":27,"tag":439,"props":2872,"children":2873},{},[2874,2879,2884],{"type":27,"tag":466,"props":2875,"children":2876},{},[2877],{"type":32,"value":2878},"内容结构",{"type":27,"tag":466,"props":2880,"children":2881},{},[2882],{"type":32,"value":2883},"真实内容能不能装进去",{"type":27,"tag":466,"props":2885,"children":2886},{},[2887],{"type":32,"value":2888},"demo 好看，实内容一上就乱",{"type":27,"tag":439,"props":2890,"children":2891},{},[2892,2897,2902],{"type":27,"tag":466,"props":2893,"children":2894},{},[2895],{"type":32,"value":2896},"维护方式",{"type":27,"tag":466,"props":2898,"children":2899},{},[2900],{"type":32,"value":2901},"后续改版难不难",{"type":27,"tag":466,"props":2903,"children":2904},{},[2905],{"type":32,"value":2906},"每次换内容都像重做",{"type":27,"tag":28,"props":2908,"children":2909},{},[2910],{"type":32,"value":2911},"很多模板翻车，并不是因为模板本身差，而是因为它服务的是另一种业务模型。",{"type":27,"tag":125,"props":2913,"children":2914},{},[],{"type":27,"tag":129,"props":2916,"children":2918},{"id":2917},"先做行业分类再做模板筛选",[2919],{"type":32,"value":2920},"先做行业分类，再做模板筛选",{"type":27,"tag":28,"props":2922,"children":2923},{},[2924],{"type":32,"value":2925},"不同类型的网站，模板重点完全不同。",{"type":27,"tag":1561,"props":2927,"children":2929},{"id":2928},"_1-企业官网",[2930],{"type":32,"value":2931},"1. 企业官网",{"type":27,"tag":28,"props":2933,"children":2934},{},[2935],{"type":32,"value":2936},"核心诉求：",{"type":27,"tag":35,"props":2938,"children":2939},{},[2940,2945,2950],{"type":27,"tag":39,"props":2941,"children":2942},{},[2943],{"type":32,"value":2944},"建立信任",{"type":27,"tag":39,"props":2946,"children":2947},{},[2948],{"type":32,"value":2949},"清楚说明服务能力",{"type":27,"tag":39,"props":2951,"children":2952},{},[2953],{"type":32,"value":2954},"带出联系或咨询动作",{"type":27,"tag":28,"props":2956,"children":2957},{},[2958],{"type":32,"value":2959},"模板重点：",{"type":27,"tag":35,"props":2961,"children":2962},{},[2963,2968,2973],{"type":27,"tag":39,"props":2964,"children":2965},{},[2966],{"type":32,"value":2967},"首页信息架构清晰",{"type":27,"tag":39,"props":2969,"children":2970},{},[2971],{"type":32,"value":2972},"有案例、客户、资质、FAQ 等信任区",{"type":27,"tag":39,"props":2974,"children":2975},{},[2976],{"type":32,"value":2977},"联系入口明显",{"type":27,"tag":1561,"props":2979,"children":2981},{"id":2980},"_2-活动页-落地页",[2982],{"type":32,"value":2983},"2. 活动页 / 落地页",{"type":27,"tag":28,"props":2985,"children":2986},{},[2987],{"type":32,"value":2936},{"type":27,"tag":35,"props":2989,"children":2990},{},[2991],{"type":27,"tag":39,"props":2992,"children":2993},{},[2994],{"type":32,"value":2995},"在短时间内让用户理解并行动",{"type":27,"tag":28,"props":2997,"children":2998},{},[2999],{"type":32,"value":2959},{"type":27,"tag":35,"props":3001,"children":3002},{},[3003,3008,3013],{"type":27,"tag":39,"props":3004,"children":3005},{},[3006],{"type":32,"value":3007},"Hero 直接讲结果",{"type":27,"tag":39,"props":3009,"children":3010},{},[3011],{"type":32,"value":3012},"CTA 明显",{"type":27,"tag":39,"props":3014,"children":3015},{},[3016],{"type":32,"value":3017},"模块不宜过深",{"type":27,"tag":1561,"props":3019,"children":3021},{"id":3020},"_3-作品集-设计展示站",[3022],{"type":32,"value":3023},"3. 作品集 / 设计展示站",{"type":27,"tag":28,"props":3025,"children":3026},{},[3027],{"type":32,"value":2936},{"type":27,"tag":35,"props":3029,"children":3030},{},[3031],{"type":27,"tag":39,"props":3032,"children":3033},{},[3034],{"type":32,"value":3035},"让作品被快速浏览和记忆",{"type":27,"tag":28,"props":3037,"children":3038},{},[3039],{"type":32,"value":2959},{"type":27,"tag":35,"props":3041,"children":3042},{},[3043,3048,3053],{"type":27,"tag":39,"props":3044,"children":3045},{},[3046],{"type":32,"value":3047},"图片加载与排版节奏",{"type":27,"tag":39,"props":3049,"children":3050},{},[3051],{"type":32,"value":3052},"分类筛选与详情展示",{"type":27,"tag":39,"props":3054,"children":3055},{},[3056],{"type":32,"value":3057},"视觉统一但不过度抢内容",{"type":27,"tag":1561,"props":3059,"children":3061},{"id":3060},"_4-教程-内容站",[3062],{"type":32,"value":3063},"4. 教程 / 内容站",{"type":27,"tag":28,"props":3065,"children":3066},{},[3067],{"type":32,"value":2936},{"type":27,"tag":35,"props":3069,"children":3070},{},[3071],{"type":27,"tag":39,"props":3072,"children":3073},{},[3074],{"type":32,"value":3075},"易读、易扫、易继续浏览",{"type":27,"tag":28,"props":3077,"children":3078},{},[3079],{"type":32,"value":2959},{"type":27,"tag":35,"props":3081,"children":3082},{},[3083,3088,3093],{"type":27,"tag":39,"props":3084,"children":3085},{},[3086],{"type":32,"value":3087},"目录与锚点",{"type":27,"tag":39,"props":3089,"children":3090},{},[3091],{"type":32,"value":3092},"阅读宽度与排版",{"type":27,"tag":39,"props":3094,"children":3095},{},[3096],{"type":32,"value":3097},"分类页与相关文章结构",{"type":27,"tag":28,"props":3099,"children":3100},{},[3101],{"type":32,"value":3102},"如果先按行业和场景分组，你会比“直接搜索模板关键词”更快找到正确方向。",{"type":27,"tag":125,"props":3104,"children":3105},{},[],{"type":27,"tag":129,"props":3107,"children":3109},{"id":3108},"企业站模板最重要的是信任结构不是炫酷动画",[3110],{"type":32,"value":3111},"企业站模板：最重要的是信任结构，不是炫酷动画",{"type":27,"tag":28,"props":3113,"children":3114},{},[3115],{"type":32,"value":3116},"很多企业站模板的误区是：",{"type":27,"tag":35,"props":3118,"children":3119},{},[3120,3125,3130],{"type":27,"tag":39,"props":3121,"children":3122},{},[3123],{"type":32,"value":3124},"首屏很大",{"type":27,"tag":39,"props":3126,"children":3127},{},[3128],{"type":32,"value":3129},"视觉很强",{"type":27,"tag":39,"props":3131,"children":3132},{},[3133],{"type":32,"value":3134},"过场很多",{"type":27,"tag":28,"props":3136,"children":3137},{},[3138],{"type":32,"value":3139},"但真正的企业站用户更关心：",{"type":27,"tag":35,"props":3141,"children":3142},{},[3143,3148,3153,3158],{"type":27,"tag":39,"props":3144,"children":3145},{},[3146],{"type":32,"value":3147},"你做什么",{"type":27,"tag":39,"props":3149,"children":3150},{},[3151],{"type":32,"value":3152},"你服务过谁",{"type":27,"tag":39,"props":3154,"children":3155},{},[3156],{"type":32,"value":3157},"你值不值得信任",{"type":27,"tag":39,"props":3159,"children":3160},{},[3161],{"type":32,"value":3162},"我该怎么联系你",{"type":27,"tag":1561,"props":3164,"children":3166},{"id":3165},"企业站模板优先检查项",[3167],{"type":32,"value":3165},{"type":27,"tag":431,"props":3169,"children":3170},{},[3171,3186],{"type":27,"tag":435,"props":3172,"children":3173},{},[3174],{"type":27,"tag":439,"props":3175,"children":3176},{},[3177,3181],{"type":27,"tag":443,"props":3178,"children":3179},{},[3180],{"type":32,"value":1405},{"type":27,"tag":443,"props":3182,"children":3183},{},[3184],{"type":32,"value":3185},"为什么重要",{"type":27,"tag":459,"props":3187,"children":3188},{},[3189,3202,3215,3228],{"type":27,"tag":439,"props":3190,"children":3191},{},[3192,3197],{"type":27,"tag":466,"props":3193,"children":3194},{},[3195],{"type":32,"value":3196},"服务说明区",{"type":27,"tag":466,"props":3198,"children":3199},{},[3200],{"type":32,"value":3201},"让用户快速理解业务范围",{"type":27,"tag":439,"props":3203,"children":3204},{},[3205,3210],{"type":27,"tag":466,"props":3206,"children":3207},{},[3208],{"type":32,"value":3209},"案例/客户区",{"type":27,"tag":466,"props":3211,"children":3212},{},[3213],{"type":32,"value":3214},"提供社会证明",{"type":27,"tag":439,"props":3216,"children":3217},{},[3218,3223],{"type":27,"tag":466,"props":3219,"children":3220},{},[3221],{"type":32,"value":3222},"资质/流程区",{"type":27,"tag":466,"props":3224,"children":3225},{},[3226],{"type":32,"value":3227},"提高可信度",{"type":27,"tag":439,"props":3229,"children":3230},{},[3231,3236],{"type":27,"tag":466,"props":3232,"children":3233},{},[3234],{"type":32,"value":3235},"联系与 CTA 区",{"type":27,"tag":466,"props":3237,"children":3238},{},[3239],{"type":32,"value":3240},"承接转化",{"type":27,"tag":28,"props":3242,"children":3243},{},[3244],{"type":32,"value":3245},"如果模板只有大图和视觉冲击，没有这些结构，再漂亮也很难撑起企业官网。",{"type":27,"tag":125,"props":3247,"children":3248},{},[],{"type":27,"tag":129,"props":3250,"children":3252},{"id":3251},"活动页模板模块少而强比内容多更重要",[3253],{"type":32,"value":3254},"活动页模板：模块少而强，比内容多更重要",{"type":27,"tag":28,"props":3256,"children":3257},{},[3258],{"type":32,"value":3259},"活动页的核心不是“讲全”，而是“讲到用户愿意立即行动”。",{"type":27,"tag":1561,"props":3261,"children":3263},{"id":3262},"活动页模板最容易犯的错",[3264],{"type":32,"value":3262},{"type":27,"tag":1152,"props":3266,"children":3267},{},[3268,3273,3278,3283],{"type":27,"tag":39,"props":3269,"children":3270},{},[3271],{"type":32,"value":3272},"首屏说不清活动价值",{"type":27,"tag":39,"props":3274,"children":3275},{},[3276],{"type":32,"value":3277},"模块过多，用户滚动疲劳",{"type":27,"tag":39,"props":3279,"children":3280},{},[3281],{"type":32,"value":3282},"CTA 被信息流淹没",{"type":27,"tag":39,"props":3284,"children":3285},{},[3286],{"type":32,"value":3287},"页面为了好看，牺牲加载速度",{"type":27,"tag":1561,"props":3289,"children":3291},{"id":3290},"活动页模板推荐结构",[3292],{"type":32,"value":3290},{"type":27,"tag":35,"props":3294,"children":3295},{},[3296,3301,3306,3311,3316,3321],{"type":27,"tag":39,"props":3297,"children":3298},{},[3299],{"type":32,"value":3300},"Hero",{"type":27,"tag":39,"props":3302,"children":3303},{},[3304],{"type":32,"value":3305},"活动亮点",{"type":27,"tag":39,"props":3307,"children":3308},{},[3309],{"type":32,"value":3310},"时间 / 规则 / 门槛",{"type":27,"tag":39,"props":3312,"children":3313},{},[3314],{"type":32,"value":3315},"证据或案例",{"type":27,"tag":39,"props":3317,"children":3318},{},[3319],{"type":32,"value":3320},"FAQ",{"type":27,"tag":39,"props":3322,"children":3323},{},[3324],{"type":32,"value":3325},"最终 CTA",{"type":27,"tag":28,"props":3327,"children":3328},{},[3329],{"type":32,"value":3330},"如果模板天然偏向长篇企业内容，你拿来做活动页，通常会显得重而慢。",{"type":27,"tag":125,"props":3332,"children":3333},{},[],{"type":27,"tag":129,"props":3335,"children":3337},{"id":3336},"作品集模板不要只看视觉要看图片与信息的平衡",[3338],{"type":32,"value":3339},"作品集模板：不要只看视觉，要看图片与信息的平衡",{"type":27,"tag":28,"props":3341,"children":3342},{},[3343],{"type":32,"value":3344},"作品集站最容易被“设计感”误导。",{"type":27,"tag":28,"props":3346,"children":3347},{},[3348],{"type":32,"value":3349},"确实，视觉很重要；但如果：",{"type":27,"tag":35,"props":3351,"children":3352},{},[3353,3358,3363],{"type":27,"tag":39,"props":3354,"children":3355},{},[3356],{"type":32,"value":3357},"分类不好找",{"type":27,"tag":39,"props":3359,"children":3360},{},[3361],{"type":32,"value":3362},"图片太大导致加载慢",{"type":27,"tag":39,"props":3364,"children":3365},{},[3366],{"type":32,"value":3367},"项目描述没有结构",{"type":27,"tag":28,"props":3369,"children":3370},{},[3371],{"type":32,"value":3372},"那么用户只会觉得“看起来不错”，却记不住你的能力。",{"type":27,"tag":1561,"props":3374,"children":3376},{"id":3375},"作品集模板重点评估",[3377],{"type":32,"value":3375},{"type":27,"tag":35,"props":3379,"children":3380},{},[3381,3386,3391,3396],{"type":27,"tag":39,"props":3382,"children":3383},{},[3384],{"type":32,"value":3385},"网格布局是否稳定",{"type":27,"tag":39,"props":3387,"children":3388},{},[3389],{"type":32,"value":3390},"图片比例是否统一",{"type":27,"tag":39,"props":3392,"children":3393},{},[3394],{"type":32,"value":3395},"项目详情页是否支持背景、过程、成果说明",{"type":27,"tag":39,"props":3397,"children":3398},{},[3399],{"type":32,"value":3400},"移动端是否依旧好看好扫",{"type":27,"tag":28,"props":3402,"children":3403},{},[3404],{"type":32,"value":3405},"作品集站最怕的不是普通，而是“只有风格，没有信息组织”。",{"type":27,"tag":125,"props":3407,"children":3408},{},[],{"type":27,"tag":129,"props":3410,"children":3412},{"id":3411},"内容站模板阅读体验与内链结构优先级最高",[3413],{"type":32,"value":3414},"内容站模板：阅读体验与内链结构优先级最高",{"type":27,"tag":28,"props":3416,"children":3417},{},[3418],{"type":32,"value":3419},"如果你做的是教程、博客、行业内容站，模板选型逻辑与官网完全不同。",{"type":27,"tag":1561,"props":3421,"children":3423},{"id":3422},"应优先看什么",[3424],{"type":32,"value":3422},{"type":27,"tag":431,"props":3426,"children":3427},{},[3428,3444],{"type":27,"tag":435,"props":3429,"children":3430},{},[3431],{"type":27,"tag":439,"props":3432,"children":3433},{},[3434,3439],{"type":27,"tag":443,"props":3435,"children":3436},{},[3437],{"type":32,"value":3438},"维度",{"type":27,"tag":443,"props":3440,"children":3441},{},[3442],{"type":32,"value":3443},"原因",{"type":27,"tag":459,"props":3445,"children":3446},{},[3447,3460,3473,3486],{"type":27,"tag":439,"props":3448,"children":3449},{},[3450,3455],{"type":27,"tag":466,"props":3451,"children":3452},{},[3453],{"type":32,"value":3454},"标题与目录层级",{"type":27,"tag":466,"props":3456,"children":3457},{},[3458],{"type":32,"value":3459},"影响扫读效率与 SEO",{"type":27,"tag":439,"props":3461,"children":3462},{},[3463,3468],{"type":27,"tag":466,"props":3464,"children":3465},{},[3466],{"type":32,"value":3467},"正文宽度与行高",{"type":27,"tag":466,"props":3469,"children":3470},{},[3471],{"type":32,"value":3472},"影响长文可读性",{"type":27,"tag":439,"props":3474,"children":3475},{},[3476,3481],{"type":27,"tag":466,"props":3477,"children":3478},{},[3479],{"type":32,"value":3480},"相关文章与分类入口",{"type":27,"tag":466,"props":3482,"children":3483},{},[3484],{"type":32,"value":3485},"影响继续浏览与内链网络",{"type":27,"tag":439,"props":3487,"children":3488},{},[3489,3494],{"type":27,"tag":466,"props":3490,"children":3491},{},[3492],{"type":32,"value":3493},"搜索与导航结构",{"type":27,"tag":466,"props":3495,"children":3496},{},[3497],{"type":32,"value":3498},"影响内容查找效率",{"type":27,"tag":28,"props":3500,"children":3501},{},[3502],{"type":32,"value":3503},"很多漂亮的模板，不适合做内容站，因为它把注意力全放在封面，而不是阅读过程本身。",{"type":27,"tag":125,"props":3505,"children":3506},{},[],{"type":27,"tag":129,"props":3508,"children":3510},{"id":3509},"一个更稳的行业模板筛选流程",[3511],{"type":32,"value":3509},{"type":27,"tag":1561,"props":3513,"children":3515},{"id":3514},"第一步先拿真实内容试填",[3516],{"type":32,"value":3517},"第一步：先拿真实内容试填",{"type":27,"tag":28,"props":3519,"children":3520},{},[3521],{"type":32,"value":3522},"不要只看 demo。把你自己的：",{"type":27,"tag":35,"props":3524,"children":3525},{},[3526,3531,3536,3541,3545],{"type":27,"tag":39,"props":3527,"children":3528},{},[3529],{"type":32,"value":3530},"标题",{"type":27,"tag":39,"props":3532,"children":3533},{},[3534],{"type":32,"value":3535},"段落",{"type":27,"tag":39,"props":3537,"children":3538},{},[3539],{"type":32,"value":3540},"图片",{"type":27,"tag":39,"props":3542,"children":3543},{},[3544],{"type":32,"value":1657},{"type":27,"tag":39,"props":3546,"children":3547},{},[3548],{"type":32,"value":3549},"联系方式",{"type":27,"tag":28,"props":3551,"children":3552},{},[3553],{"type":32,"value":3554},"替换进去，再看页面是否还成立。",{"type":27,"tag":1561,"props":3556,"children":3558},{"id":3557},"第二步检查删掉-30-demo-内容后是否依然完整",[3559],{"type":32,"value":3560},"第二步：检查“删掉 30% demo 内容后是否依然完整”",{"type":27,"tag":28,"props":3562,"children":3563},{},[3564],{"type":32,"value":3565},"很多模板靠 demo 内容撑场景，一旦真实内容更少，页面就会变得很空或失衡。",{"type":27,"tag":1561,"props":3567,"children":3569},{"id":3568},"第三步检查品牌替换成本",[3570],{"type":32,"value":3571},"第三步：检查品牌替换成本",{"type":27,"tag":28,"props":3573,"children":3574},{},[3575],{"type":32,"value":3576},"至少试改：",{"type":27,"tag":35,"props":3578,"children":3579},{},[3580,3585,3590,3595],{"type":27,"tag":39,"props":3581,"children":3582},{},[3583],{"type":32,"value":3584},"logo",{"type":27,"tag":39,"props":3586,"children":3587},{},[3588],{"type":32,"value":3589},"主色",{"type":27,"tag":39,"props":3591,"children":3592},{},[3593],{"type":32,"value":3594},"字体",{"type":27,"tag":39,"props":3596,"children":3597},{},[3598],{"type":32,"value":3599},"按钮样式",{"type":27,"tag":28,"props":3601,"children":3602},{},[3603],{"type":32,"value":3604},"如果这些动作都很费劲，后续维护成本会很高。",{"type":27,"tag":1561,"props":3606,"children":3608},{"id":3607},"第四步检查响应式和资源体积",[3609],{"type":32,"value":3610},"第四步：检查响应式和资源体积",{"type":27,"tag":28,"props":3612,"children":3613},{},[3614],{"type":32,"value":3615},"行业模板不管多漂亮，只要：",{"type":27,"tag":35,"props":3617,"children":3618},{},[3619,3624,3629],{"type":27,"tag":39,"props":3620,"children":3621},{},[3622],{"type":32,"value":3623},"手机上断行混乱",{"type":27,"tag":39,"props":3625,"children":3626},{},[3627],{"type":32,"value":3628},"图片太重",{"type":27,"tag":39,"props":3630,"children":3631},{},[3632],{"type":32,"value":3633},"动效太多",{"type":27,"tag":28,"props":3635,"children":3636},{},[3637],{"type":32,"value":3638},"它就不适合作为真实线上资产。",{"type":27,"tag":125,"props":3640,"children":3641},{},[],{"type":27,"tag":129,"props":3643,"children":3645},{"id":3644},"模板选型评分卡建议实际打分",[3646],{"type":32,"value":3647},"模板选型评分卡（建议实际打分）",{"type":27,"tag":431,"props":3649,"children":3650},{},[3651,3671],{"type":27,"tag":435,"props":3652,"children":3653},{},[3654],{"type":27,"tag":439,"props":3655,"children":3656},{},[3657,3661,3667],{"type":27,"tag":443,"props":3658,"children":3659},{},[3660],{"type":32,"value":3438},{"type":27,"tag":443,"props":3662,"children":3664},{"align":3663},"right",[3665],{"type":32,"value":3666},"权重",{"type":27,"tag":443,"props":3668,"children":3669},{},[3670],{"type":32,"value":1415},{"type":27,"tag":459,"props":3672,"children":3673},{},[3674,3692,3710,3728,3746],{"type":27,"tag":439,"props":3675,"children":3676},{},[3677,3682,3687],{"type":27,"tag":466,"props":3678,"children":3679},{},[3680],{"type":32,"value":3681},"行业匹配度",{"type":27,"tag":466,"props":3683,"children":3684},{"align":3663},[3685],{"type":32,"value":3686},"30",{"type":27,"tag":466,"props":3688,"children":3689},{},[3690],{"type":32,"value":3691},"是否天然适合你的业务表达",{"type":27,"tag":439,"props":3693,"children":3694},{},[3695,3700,3705],{"type":27,"tag":466,"props":3696,"children":3697},{},[3698],{"type":32,"value":3699},"内容承载能力",{"type":27,"tag":466,"props":3701,"children":3702},{"align":3663},[3703],{"type":32,"value":3704},"25",{"type":27,"tag":466,"props":3706,"children":3707},{},[3708],{"type":32,"value":3709},"真实内容放进去是否稳定",{"type":27,"tag":439,"props":3711,"children":3712},{},[3713,3718,3723],{"type":27,"tag":466,"props":3714,"children":3715},{},[3716],{"type":32,"value":3717},"改造成本",{"type":27,"tag":466,"props":3719,"children":3720},{"align":3663},[3721],{"type":32,"value":3722},"20",{"type":27,"tag":466,"props":3724,"children":3725},{},[3726],{"type":32,"value":3727},"换品牌、换模块、改结构是否容易",{"type":27,"tag":439,"props":3729,"children":3730},{},[3731,3736,3741],{"type":27,"tag":466,"props":3732,"children":3733},{},[3734],{"type":32,"value":3735},"响应式稳定性",{"type":27,"tag":466,"props":3737,"children":3738},{"align":3663},[3739],{"type":32,"value":3740},"15",{"type":27,"tag":466,"props":3742,"children":3743},{},[3744],{"type":32,"value":3745},"手机、平板、桌面都是否可靠",{"type":27,"tag":439,"props":3747,"children":3748},{},[3749,3754,3759],{"type":27,"tag":466,"props":3750,"children":3751},{},[3752],{"type":32,"value":3753},"性能与 SEO 基础",{"type":27,"tag":466,"props":3755,"children":3756},{"align":3663},[3757],{"type":32,"value":3758},"10",{"type":27,"tag":466,"props":3760,"children":3761},{},[3762],{"type":32,"value":3763},"资源体积、标题结构、语义是否可补",{"type":27,"tag":28,"props":3765,"children":3766},{},[3767],{"type":32,"value":3768},"建议标准：",{"type":27,"tag":35,"props":3770,"children":3771},{},[3772,3777,3782],{"type":27,"tag":39,"props":3773,"children":3774},{},[3775],{"type":32,"value":3776},"$\\ge 80$：可进入实施",{"type":27,"tag":39,"props":3778,"children":3779},{},[3780],{"type":32,"value":3781},"65~79：可试点，但要谨慎",{"type":27,"tag":39,"props":3783,"children":3784},{},[3785],{"type":32,"value":3786},"$\u003C 65$：不建议投入主要业务页面",{"type":27,"tag":125,"props":3788,"children":3789},{},[],{"type":27,"tag":129,"props":3791,"children":3793},{"id":3792},"失败案例选了看起来高级的模板结果三周后换掉",[3794],{"type":32,"value":3795},"失败案例：选了“看起来高级”的模板，结果三周后换掉",{"type":27,"tag":28,"props":3797,"children":3798},{},[3799,3804],{"type":27,"tag":749,"props":3800,"children":3801},{},[3802],{"type":32,"value":3803},"背景",{"type":32,"value":3805},"：\n一个制造业客户官网项目，初期选了很有科技感的模板。",{"type":27,"tag":28,"props":3807,"children":3808},{},[3809,3814],{"type":27,"tag":749,"props":3810,"children":3811},{},[3812],{"type":32,"value":3813},"问题出现",{"type":32,"value":3815},"：",{"type":27,"tag":35,"props":3817,"children":3818},{},[3819,3824,3829,3834],{"type":27,"tag":39,"props":3820,"children":3821},{},[3822],{"type":32,"value":3823},"首屏漂亮，但服务信息入口太弱",{"type":27,"tag":39,"props":3825,"children":3826},{},[3827],{"type":32,"value":3828},"案例区无法承载真实内容长度",{"type":27,"tag":39,"props":3830,"children":3831},{},[3832],{"type":32,"value":3833},"手机端 CTA 被动画区挤压",{"type":27,"tag":39,"props":3835,"children":3836},{},[3837],{"type":32,"value":3838},"页面加载偏慢",{"type":27,"tag":28,"props":3840,"children":3841},{},[3842,3847],{"type":27,"tag":749,"props":3843,"children":3844},{},[3845],{"type":32,"value":3846},"根因",{"type":32,"value":3848},"：\n模板服务的是品牌展示型视觉表达，不是询盘转化型企业官网。",{"type":27,"tag":28,"props":3850,"children":3851},{},[3852,3857],{"type":27,"tag":749,"props":3853,"children":3854},{},[3855],{"type":32,"value":3856},"修复方式",{"type":32,"value":3815},{"type":27,"tag":35,"props":3859,"children":3860},{},[3861,3866,3871],{"type":27,"tag":39,"props":3862,"children":3863},{},[3864],{"type":32,"value":3865},"回到信息架构重新选模板",{"type":27,"tag":39,"props":3867,"children":3868},{},[3869],{"type":32,"value":3870},"先确认模块角色，再做视觉替换",{"type":27,"tag":39,"props":3872,"children":3873},{},[3874],{"type":32,"value":3875},"把信任与联系模块放到更高优先级",{"type":27,"tag":28,"props":3877,"children":3878},{},[3879],{"type":32,"value":3880},"这说明一个非常重要的事实：",{"type":27,"tag":28,"props":3882,"children":3883},{},[3884],{"type":27,"tag":749,"props":3885,"children":3886},{},[3887],{"type":32,"value":3888},"模板不是风格文件，而是业务结构的底座。",{"type":27,"tag":125,"props":3890,"children":3891},{},[],{"type":27,"tag":129,"props":3893,"children":3895},{"id":3894},"行业模板-checklist",[3896],{"type":32,"value":3897},"行业模板 Checklist",{"type":27,"tag":35,"props":3899,"children":3901},{"className":3900},[542],[3902,3911,3920,3929,3938,3947],{"type":27,"tag":39,"props":3903,"children":3905},{"className":3904},[547],[3906,3909],{"type":27,"tag":550,"props":3907,"children":3908},{"disabled":552,"type":553},[],{"type":32,"value":3910}," 已先明确站点目标与主要转化动作",{"type":27,"tag":39,"props":3912,"children":3914},{"className":3913},[547],[3915,3918],{"type":27,"tag":550,"props":3916,"children":3917},{"disabled":552,"type":553},[],{"type":32,"value":3919}," 已用真实内容做过一次试填",{"type":27,"tag":39,"props":3921,"children":3923},{"className":3922},[547],[3924,3927],{"type":27,"tag":550,"props":3925,"children":3926},{"disabled":552,"type":553},[],{"type":32,"value":3928}," 已检查品牌替换成本",{"type":27,"tag":39,"props":3930,"children":3932},{"className":3931},[547],[3933,3936],{"type":27,"tag":550,"props":3934,"children":3935},{"disabled":552,"type":553},[],{"type":32,"value":3937}," 已检查手机端与桌面端表现",{"type":27,"tag":39,"props":3939,"children":3941},{"className":3940},[547],[3942,3945],{"type":27,"tag":550,"props":3943,"children":3944},{"disabled":552,"type":553},[],{"type":32,"value":3946}," 已确认模板资源体积与 SEO 基础结构",{"type":27,"tag":39,"props":3948,"children":3950},{"className":3949},[547],[3951,3954],{"type":27,"tag":550,"props":3952,"children":3953},{"disabled":552,"type":553},[],{"type":32,"value":3955}," 已判断它适合长期维护，而不只是 demo 展示",{"type":27,"tag":125,"props":3957,"children":3958},{},[],{"type":27,"tag":129,"props":3960,"children":3962},{"id":3961},"faq",[3963],{"type":32,"value":3320},{"type":27,"tag":1561,"props":3965,"children":3967},{"id":3966},"q1免费行业模板能不能直接商用",[3968],{"type":32,"value":3969},"Q1：免费行业模板能不能直接商用？",{"type":27,"tag":28,"props":3971,"children":3972},{},[3973],{"type":32,"value":3974},"要先看授权协议，不能只凭“能下载”判断可商用。",{"type":27,"tag":1561,"props":3976,"children":3978},{"id":3977},"q2行业模板是不是越细分越好",[3979],{"type":32,"value":3980},"Q2：行业模板是不是越细分越好？",{"type":27,"tag":28,"props":3982,"children":3983},{},[3984],{"type":32,"value":3985},"不一定。过于垂直的模板有时会限制后续扩展，关键看结构是否可改。",{"type":27,"tag":1561,"props":3987,"children":3989},{"id":3988},"q3先选模板还是先做线框",[3990],{"type":32,"value":3991},"Q3：先选模板还是先做线框？",{"type":27,"tag":28,"props":3993,"children":3994},{},[3995],{"type":32,"value":3996},"更稳的方式是先确认线框与模块需求，再选能承载这些结构的模板。",{"type":27,"tag":1561,"props":3998,"children":4000},{"id":3999},"q4模板好看但性能差值得继续改吗",[4001],{"type":32,"value":4002},"Q4：模板好看但性能差，值得继续改吗？",{"type":27,"tag":28,"props":4004,"children":4005},{},[4006],{"type":32,"value":4007},"如果要大改结构与资源，通常不如尽早换更合适的模板。",{"type":27,"tag":1561,"props":4009,"children":4011},{"id":4010},"q5怎么判断模板适不适合长期运营",[4012],{"type":32,"value":4013},"Q5：怎么判断模板适不适合长期运营？",{"type":27,"tag":28,"props":4015,"children":4016},{},[4017],{"type":32,"value":4018},"看三点：真实内容是否装得下、品牌是否容易替换、后续迭代是否容易局部修改。",{"type":27,"tag":125,"props":4020,"children":4021},{},[],{"type":27,"tag":129,"props":4023,"children":4025},{"id":4024},"内链",[4026],{"type":32,"value":4024},{"type":27,"tag":35,"props":4028,"children":4029},{},[4030,4039,4046,4054],{"type":27,"tag":39,"props":4031,"children":4032},{},[4033],{"type":27,"tag":93,"props":4034,"children":4036},{"href":4035},"/about-html/html-template-selection-by-scenario",[4037],{"type":32,"value":4038},"HTML 模板按场景选型",{"type":27,"tag":39,"props":4040,"children":4041},{},[4042],{"type":27,"tag":93,"props":4043,"children":4044},{"href":2014},[4045],{"type":32,"value":2017},{"type":27,"tag":39,"props":4047,"children":4048},{},[4049],{"type":27,"tag":93,"props":4050,"children":4051},{"href":95},[4052],{"type":32,"value":4053},"HTML 模板改造手册",{"type":27,"tag":39,"props":4055,"children":4056},{},[4057],{"type":27,"tag":93,"props":4058,"children":4060},{"href":4059},"/topics/practical-tips/webpage-making-from-zero-to-online",[4061],{"type":32,"value":4062},"网页制作从 0 到上线",{"title":7,"searchDepth":649,"depth":649,"links":4064},[4065,4066,4072,4075,4079,4082,4085,4091,4092,4093,4094,4101],{"id":2822,"depth":652,"text":2825},{"id":2917,"depth":652,"text":2920,"children":4067},[4068,4069,4070,4071],{"id":2928,"depth":649,"text":2931},{"id":2980,"depth":649,"text":2983},{"id":3020,"depth":649,"text":3023},{"id":3060,"depth":649,"text":3063},{"id":3108,"depth":652,"text":3111,"children":4073},[4074],{"id":3165,"depth":649,"text":3165},{"id":3251,"depth":652,"text":3254,"children":4076},[4077,4078],{"id":3262,"depth":649,"text":3262},{"id":3290,"depth":649,"text":3290},{"id":3336,"depth":652,"text":3339,"children":4080},[4081],{"id":3375,"depth":649,"text":3375},{"id":3411,"depth":652,"text":3414,"children":4083},[4084],{"id":3422,"depth":649,"text":3422},{"id":3509,"depth":652,"text":3509,"children":4086},[4087,4088,4089,4090],{"id":3514,"depth":649,"text":3517},{"id":3557,"depth":649,"text":3560},{"id":3568,"depth":649,"text":3571},{"id":3607,"depth":649,"text":3610},{"id":3644,"depth":652,"text":3647},{"id":3792,"depth":652,"text":3795},{"id":3894,"depth":652,"text":3897},{"id":3961,"depth":652,"text":3320,"children":4095},[4096,4097,4098,4099,4100],{"id":3966,"depth":649,"text":3969},{"id":3977,"depth":649,"text":3980},{"id":3988,"depth":649,"text":3991},{"id":3999,"depth":649,"text":4002},{"id":4010,"depth":649,"text":4013},{"id":4024,"depth":652,"text":4024},"content:about-html:html-template-industry-selection-guide.md","about-html/html-template-industry-selection-guide.md","about-html/html-template-industry-selection-guide",{"_path":95,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":4106,"description":4107,"date":4108,"modified":4109,"image":4110,"imageAlt":4111,"pexelsPhotoId":4112,"pexelsUrl":4113,"slug":4114,"category":4115,"categorySlug":5,"tags":4116,"path":95,"canonical":4121,"body":4122,"_type":662,"_id":4866,"_source":664,"_file":4867,"_stem":4868,"_extension":667,"sitemap":4869},"HTML 模板修改实战手册：从拿到模板到安全上线（不翻车）","一份可复用的 HTML 模板修改 Playbook：改哪些、怎么改、如何保证不破坏布局/响应式/SEO/性能，并包含失败案例复盘、验收清单与回滚预案。","2026-03-03T10:00:00","2026-03-15T10:00:00","/images/articles/html-template-modification-playbook-featured.jpg","笔记本电脑旁的笔记本与咖啡，桌面有工作材料",196645,"https://www.pexels.com/photo/turned-on-macbook-pro-beside-notebook-and-iphone-on-table-196645/","html-template-modification-playbook","HTML基础",[13,4117,4118,2111,4119,4120],"模板修改","网站模板","前端","上线","https://htmlpage.cn/about-html/html-template-modification-playbook",{"type":24,"children":4123,"toc":4844},[4124,4129,4157,4169,4172,4178,4183,4206,4209,4215,4221,4226,4244,4253,4259,4264,4293,4299,4317,4320,4326,4332,4337,4355,4360,4366,4371,4376,4396,4402,4415,4418,4424,4429,4476,4481,4494,4497,4503,4508,4539,4544,4574,4577,4583,4608,4617,4630,4638,4651,4660,4673,4676,4682,4715,4718,4724,4809,4812,4816],{"type":27,"tag":28,"props":4125,"children":4126},{},[4127],{"type":32,"value":4128},"拿到一套 HTML 模板后，大多数人会直接开改：换 logo、改文案、删区块、加表单……然后上线当天发现：",{"type":27,"tag":35,"props":4130,"children":4131},{},[4132,4137,4142,4147,4152],{"type":27,"tag":39,"props":4133,"children":4134},{},[4135],{"type":32,"value":4136},"手机端断版",{"type":27,"tag":39,"props":4138,"children":4139},{},[4140],{"type":32,"value":4141},"样式全局污染",{"type":27,"tag":39,"props":4143,"children":4144},{},[4145],{"type":32,"value":4146},"导航锚点失效",{"type":27,"tag":39,"props":4148,"children":4149},{},[4150],{"type":32,"value":4151},"SEO 信息没配，收录慢",{"type":27,"tag":39,"props":4153,"children":4154},{},[4155],{"type":32,"value":4156},"性能指标（LCP/CLS）爆炸",{"type":27,"tag":28,"props":4158,"children":4159},{},[4160,4162,4167],{"type":32,"value":4161},"这篇给你一套",{"type":27,"tag":749,"props":4163,"children":4164},{},[4165],{"type":32,"value":4166},"可照抄的模板修改 Playbook",{"type":32,"value":4168},"：目标不是“改得快”，而是“改得稳、能上线、可回滚”。",{"type":27,"tag":125,"props":4170,"children":4171},{},[],{"type":27,"tag":129,"props":4173,"children":4175},{"id":4174},"结论先说模板修改的本质是改动隔离-验收标准",[4176],{"type":32,"value":4177},"结论先说：模板修改的本质是“改动隔离 + 验收标准”",{"type":27,"tag":28,"props":4179,"children":4180},{},[4181],{"type":32,"value":4182},"你想要的不是把页面“改成你想要的样子”，而是：",{"type":27,"tag":35,"props":4184,"children":4185},{},[4186,4191,4196,4201],{"type":27,"tag":39,"props":4187,"children":4188},{},[4189],{"type":32,"value":4190},"改动可追踪（哪改了）",{"type":27,"tag":39,"props":4192,"children":4193},{},[4194],{"type":32,"value":4195},"改动可隔离（不影响其他页面/区块）",{"type":27,"tag":39,"props":4197,"children":4198},{},[4199],{"type":32,"value":4200},"改动可验证（有验收标准）",{"type":27,"tag":39,"props":4202,"children":4203},{},[4204],{"type":32,"value":4205},"失败可回滚（回到可用版本）",{"type":27,"tag":125,"props":4207,"children":4208},{},[],{"type":27,"tag":129,"props":4210,"children":4212},{"id":4211},"准备阶段先做-3-件事再开始改10-分钟救命",[4213],{"type":32,"value":4214},"准备阶段：先做 3 件事再开始改（10 分钟救命）",{"type":27,"tag":1561,"props":4216,"children":4218},{"id":4217},"_1-明确交付范围范围闸门",[4219],{"type":32,"value":4220},"1) 明确交付范围（范围闸门）",{"type":27,"tag":28,"props":4222,"children":4223},{},[4224],{"type":32,"value":4225},"把需求写成“必须交付 / 可选 / 不做”：",{"type":27,"tag":35,"props":4227,"children":4228},{},[4229,4234,4239],{"type":27,"tag":39,"props":4230,"children":4231},{},[4232],{"type":32,"value":4233},"必须：首屏 + 产品卖点 + 证据 + FAQ + CTA",{"type":27,"tag":39,"props":4235,"children":4236},{},[4237],{"type":32,"value":4238},"可选：动效、滚动特效、复杂轮播",{"type":27,"tag":39,"props":4240,"children":4241},{},[4242],{"type":32,"value":4243},"不做：重写整套样式系统",{"type":27,"tag":28,"props":4245,"children":4246},{},[4247,4249],{"type":32,"value":4248},"如果你需要更系统的“从 0 到上线”流程：",{"type":27,"tag":93,"props":4250,"children":4251},{"href":4059},[4252],{"type":32,"value":4062},{"type":27,"tag":1561,"props":4254,"children":4256},{"id":4255},"_2-建一个安全工作副本",[4257],{"type":32,"value":4258},"2) 建一个“安全工作副本”",{"type":27,"tag":28,"props":4260,"children":4261},{},[4262],{"type":32,"value":4263},"最小化操作：",{"type":27,"tag":35,"props":4265,"children":4266},{},[4267,4288],{"type":27,"tag":39,"props":4268,"children":4269},{},[4270,4272,4278,4280,4286],{"type":32,"value":4271},"复制一份模板目录（如 ",{"type":27,"tag":731,"props":4273,"children":4275},{"className":4274},[],[4276],{"type":32,"value":4277},"template/",{"type":32,"value":4279}," → ",{"type":27,"tag":731,"props":4281,"children":4283},{"className":4282},[],[4284],{"type":32,"value":4285},"project/",{"type":32,"value":4287},"）",{"type":27,"tag":39,"props":4289,"children":4290},{},[4291],{"type":32,"value":4292},"先能本地跑起来，再改",{"type":27,"tag":1561,"props":4294,"children":4296},{"id":4295},"_3-先跑一次基线检查",[4297],{"type":32,"value":4298},"3) 先跑一次基线检查",{"type":27,"tag":35,"props":4300,"children":4301},{},[4302,4307,4312],{"type":27,"tag":39,"props":4303,"children":4304},{},[4305],{"type":32,"value":4306},"页面是否有 404 资源？",{"type":27,"tag":39,"props":4308,"children":4309},{},[4310],{"type":32,"value":4311},"首屏是否有大图未压缩？",{"type":27,"tag":39,"props":4313,"children":4314},{},[4315],{"type":32,"value":4316},"是否用了外链字体/脚本？",{"type":27,"tag":125,"props":4318,"children":4319},{},[],{"type":27,"tag":129,"props":4321,"children":4323},{"id":4322},"playbook从结构到样式到脚本的修改顺序",[4324],{"type":32,"value":4325},"Playbook：从结构到样式到脚本的修改顺序",{"type":27,"tag":1561,"props":4327,"children":4329},{"id":4328},"step-1先改内容结构不要先改样式",[4330],{"type":32,"value":4331},"Step 1：先改内容结构（不要先改样式）",{"type":27,"tag":28,"props":4333,"children":4334},{},[4335],{"type":32,"value":4336},"优先级：",{"type":27,"tag":1152,"props":4338,"children":4339},{},[4340,4345,4350],{"type":27,"tag":39,"props":4341,"children":4342},{},[4343],{"type":32,"value":4344},"文案与层级（H1/H2/H3）",{"type":27,"tag":39,"props":4346,"children":4347},{},[4348],{"type":32,"value":4349},"区块顺序",{"type":27,"tag":39,"props":4351,"children":4352},{},[4353],{"type":32,"value":4354},"CTA 位置",{"type":27,"tag":28,"props":4356,"children":4357},{},[4358],{"type":32,"value":4359},"原因：结构稳定后，样式改动会少很多。",{"type":27,"tag":1561,"props":4361,"children":4363},{"id":4362},"step-2样式修改要局部化",[4364],{"type":32,"value":4365},"Step 2：样式修改要“局部化”",{"type":27,"tag":28,"props":4367,"children":4368},{},[4369],{"type":32,"value":4370},"最常见翻车：为了改一个按钮，改了全站按钮。",{"type":27,"tag":28,"props":4372,"children":4373},{},[4374],{"type":32,"value":4375},"建议：",{"type":27,"tag":35,"props":4377,"children":4378},{},[4379,4391],{"type":27,"tag":39,"props":4380,"children":4381},{},[4382,4384,4390],{"type":32,"value":4383},"尽量给新增/改动区块加父级作用域（如 ",{"type":27,"tag":731,"props":4385,"children":4387},{"className":4386},[],[4388],{"type":32,"value":4389},".landing-v1",{"type":32,"value":4287},{"type":27,"tag":39,"props":4392,"children":4393},{},[4394],{"type":32,"value":4395},"把“模板默认样式”与“你的覆盖样式”分开文件",{"type":27,"tag":1561,"props":4397,"children":4399},{"id":4398},"step-3脚本只做必要的并且可关闭",[4400],{"type":32,"value":4401},"Step 3：脚本只做必要的（并且可关闭）",{"type":27,"tag":35,"props":4403,"children":4404},{},[4405,4410],{"type":27,"tag":39,"props":4406,"children":4407},{},[4408],{"type":32,"value":4409},"表单提交、埋点、基础交互",{"type":27,"tag":39,"props":4411,"children":4412},{},[4413],{"type":32,"value":4414},"所有增强交互都要有开关（避免线上排障困难）",{"type":27,"tag":125,"props":4416,"children":4417},{},[],{"type":27,"tag":129,"props":4419,"children":4421},{"id":4420},"修改地图哪些文件通常该改哪些尽量别动",[4422],{"type":32,"value":4423},"修改地图：哪些文件通常该改？哪些尽量别动？",{"type":27,"tag":1561,"props":4425,"children":4427},{"id":4426},"通常需要改",[4428],{"type":32,"value":4426},{"type":27,"tag":35,"props":4430,"children":4431},{},[4432,4443,4454,4465],{"type":27,"tag":39,"props":4433,"children":4434},{},[4435,4441],{"type":27,"tag":731,"props":4436,"children":4438},{"className":4437},[],[4439],{"type":32,"value":4440},"index.html",{"type":32,"value":4442},"（结构、文案、SEO 元信息）",{"type":27,"tag":39,"props":4444,"children":4445},{},[4446,4452],{"type":27,"tag":731,"props":4447,"children":4449},{"className":4448},[],[4450],{"type":32,"value":4451},"assets/css/main.css",{"type":32,"value":4453},"（覆盖样式、响应式修正）",{"type":27,"tag":39,"props":4455,"children":4456},{},[4457,4463],{"type":27,"tag":731,"props":4458,"children":4460},{"className":4459},[],[4461],{"type":32,"value":4462},"assets/js/main.js",{"type":32,"value":4464},"（表单/追踪/轻交互）",{"type":27,"tag":39,"props":4466,"children":4467},{},[4468,4474],{"type":27,"tag":731,"props":4469,"children":4471},{"className":4470},[],[4472],{"type":32,"value":4473},"assets/img/*",{"type":32,"value":4475},"（图片替换与压缩）",{"type":27,"tag":1561,"props":4477,"children":4479},{"id":4478},"尽量少动",[4480],{"type":32,"value":4478},{"type":27,"tag":35,"props":4482,"children":4483},{},[4484,4489],{"type":27,"tag":39,"props":4485,"children":4486},{},[4487],{"type":32,"value":4488},"第三方库（vendor）文件",{"type":27,"tag":39,"props":4490,"children":4491},{},[4492],{"type":32,"value":4493},"大段复制来的插件代码",{"type":27,"tag":125,"props":4495,"children":4496},{},[],{"type":27,"tag":129,"props":4498,"children":4500},{"id":4499},"seogeo-最小集模板改完必须补齐",[4501],{"type":32,"value":4502},"SEO/GEO 最小集：模板改完必须补齐",{"type":27,"tag":28,"props":4504,"children":4505},{},[4506],{"type":32,"value":4507},"即使你不是做 SEO，这些也会直接影响“能不能被搜到、能不能被生成式引擎读懂”。",{"type":27,"tag":35,"props":4509,"children":4510},{},[4511,4516,4521,4534],{"type":27,"tag":39,"props":4512,"children":4513},{},[4514],{"type":32,"value":4515},"Title/Description（每页唯一）",{"type":27,"tag":39,"props":4517,"children":4518},{},[4519],{"type":32,"value":4520},"H1（每页一个）",{"type":27,"tag":39,"props":4522,"children":4523},{},[4524,4526,4532],{"type":32,"value":4525},"图片 ",{"type":27,"tag":731,"props":4527,"children":4529},{"className":4528},[],[4530],{"type":32,"value":4531},"alt",{"type":32,"value":4533},"（关键图要写）",{"type":27,"tag":39,"props":4535,"children":4536},{},[4537],{"type":32,"value":4538},"内链（至少 4 条，指向站内关键指南）",{"type":27,"tag":28,"props":4540,"children":4541},{},[4542],{"type":32,"value":4543},"可参考：",{"type":27,"tag":35,"props":4545,"children":4546},{},[4547,4556,4565],{"type":27,"tag":39,"props":4548,"children":4549},{},[4550],{"type":27,"tag":93,"props":4551,"children":4553},{"href":4552},"/topics/seo/google-search-console-guide",[4554],{"type":32,"value":4555},"GSC 新手指南",{"type":27,"tag":39,"props":4557,"children":4558},{},[4559],{"type":27,"tag":93,"props":4560,"children":4562},{"href":4561},"/topics/performance/image-optimization-guide",[4563],{"type":32,"value":4564},"图片优化指南",{"type":27,"tag":39,"props":4566,"children":4567},{},[4568],{"type":27,"tag":93,"props":4569,"children":4571},{"href":4570},"/topics/performance/web-vitals-guide",[4572],{"type":32,"value":4573},"Web Vitals 指南",{"type":27,"tag":125,"props":4575,"children":4576},{},[],{"type":27,"tag":129,"props":4578,"children":4580},{"id":4579},"失败案例复盘为什么改个模板会越改越乱",[4581],{"type":32,"value":4582},"失败案例复盘：为什么“改个模板”会越改越乱",{"type":27,"tag":28,"props":4584,"children":4585},{},[4586,4591,4593,4599,4601,4607],{"type":27,"tag":749,"props":4587,"children":4588},{},[4589],{"type":32,"value":4590},"案例",{"type":32,"value":4592},"：为了改首页配色，直接在 ",{"type":27,"tag":731,"props":4594,"children":4596},{"className":4595},[],[4597],{"type":32,"value":4598},"main.css",{"type":32,"value":4600}," 顶部覆盖 ",{"type":27,"tag":731,"props":4602,"children":4604},{"className":4603},[],[4605],{"type":32,"value":4606},"a { color: ... }",{"type":32,"value":755},{"type":27,"tag":28,"props":4609,"children":4610},{},[4611,4616],{"type":27,"tag":749,"props":4612,"children":4613},{},[4614],{"type":32,"value":4615},"后果",{"type":32,"value":3815},{"type":27,"tag":35,"props":4618,"children":4619},{},[4620,4625],{"type":27,"tag":39,"props":4621,"children":4622},{},[4623],{"type":32,"value":4624},"页脚链接、导航链接、按钮链接全部被改",{"type":27,"tag":39,"props":4626,"children":4627},{},[4628],{"type":32,"value":4629},"某些 hover 状态不可见",{"type":27,"tag":28,"props":4631,"children":4632},{},[4633,4637],{"type":27,"tag":749,"props":4634,"children":4635},{},[4636],{"type":32,"value":3846},{"type":32,"value":3815},{"type":27,"tag":35,"props":4639,"children":4640},{},[4641,4646],{"type":27,"tag":39,"props":4642,"children":4643},{},[4644],{"type":32,"value":4645},"没有作用域",{"type":27,"tag":39,"props":4647,"children":4648},{},[4649],{"type":32,"value":4650},"没有验收用例",{"type":27,"tag":28,"props":4652,"children":4653},{},[4654,4659],{"type":27,"tag":749,"props":4655,"children":4656},{},[4657],{"type":32,"value":4658},"修复策略",{"type":32,"value":3815},{"type":27,"tag":35,"props":4661,"children":4662},{},[4663,4668],{"type":27,"tag":39,"props":4664,"children":4665},{},[4666],{"type":32,"value":4667},"把覆盖样式限制在页面容器下",{"type":27,"tag":39,"props":4669,"children":4670},{},[4671],{"type":32,"value":4672},"建立 6 个验收截图点（桌面/平板/手机首屏、表单、FAQ、页脚）",{"type":27,"tag":125,"props":4674,"children":4675},{},[],{"type":27,"tag":129,"props":4677,"children":4679},{"id":4678},"验收标准你可以拿这段当上线门槛",[4680],{"type":32,"value":4681},"验收标准（你可以拿这段当“上线门槛”）",{"type":27,"tag":35,"props":4683,"children":4684},{},[4685,4690,4695,4700,4705,4710],{"type":27,"tag":39,"props":4686,"children":4687},{},[4688],{"type":32,"value":4689},"视觉：桌面/手机不破版；关键按钮可点击",{"type":27,"tag":39,"props":4691,"children":4692},{},[4693],{"type":32,"value":4694},"响应式：常见断点（320/375/768/1024）都 OK",{"type":27,"tag":39,"props":4696,"children":4697},{},[4698],{"type":32,"value":4699},"SEO：title/description/h1/alt 就位",{"type":27,"tag":39,"props":4701,"children":4702},{},[4703],{"type":32,"value":4704},"性能：首屏大图已压缩；CLS 不明显跳动",{"type":27,"tag":39,"props":4706,"children":4707},{},[4708],{"type":32,"value":4709},"可维护：覆盖样式与模板样式分离；改动可定位",{"type":27,"tag":39,"props":4711,"children":4712},{},[4713],{"type":32,"value":4714},"回滚：有上一版备份（或版本）",{"type":27,"tag":125,"props":4716,"children":4717},{},[],{"type":27,"tag":129,"props":4719,"children":4721},{"id":4720},"checklist模板修改到上线逐项打勾",[4722],{"type":32,"value":4723},"Checklist：模板修改到上线（逐项打勾）",{"type":27,"tag":35,"props":4725,"children":4727},{"className":4726},[542],[4728,4737,4746,4755,4764,4773,4782,4791,4800],{"type":27,"tag":39,"props":4729,"children":4731},{"className":4730},[547],[4732,4735],{"type":27,"tag":550,"props":4733,"children":4734},{"disabled":552,"type":553},[],{"type":32,"value":4736}," 建立工作副本，保留原模板不动",{"type":27,"tag":39,"props":4738,"children":4740},{"className":4739},[547],[4741,4744],{"type":27,"tag":550,"props":4742,"children":4743},{"disabled":552,"type":553},[],{"type":32,"value":4745}," 明确范围闸门（必须/可选/不做）",{"type":27,"tag":39,"props":4747,"children":4749},{"className":4748},[547],[4750,4753],{"type":27,"tag":550,"props":4751,"children":4752},{"disabled":552,"type":553},[],{"type":32,"value":4754}," 先改结构与文案，再改样式",{"type":27,"tag":39,"props":4756,"children":4758},{"className":4757},[547],[4759,4762],{"type":27,"tag":550,"props":4760,"children":4761},{"disabled":552,"type":553},[],{"type":32,"value":4763}," 样式覆盖做作用域隔离",{"type":27,"tag":39,"props":4765,"children":4767},{"className":4766},[547],[4768,4771],{"type":27,"tag":550,"props":4769,"children":4770},{"disabled":552,"type":553},[],{"type":32,"value":4772}," 图片压缩并替换路径",{"type":27,"tag":39,"props":4774,"children":4776},{"className":4775},[547],[4777,4780],{"type":27,"tag":550,"props":4778,"children":4779},{"disabled":552,"type":553},[],{"type":32,"value":4781}," 加入 SEO 最小集（title/description/h1/alt/内链）",{"type":27,"tag":39,"props":4783,"children":4785},{"className":4784},[547],[4786,4789],{"type":27,"tag":550,"props":4787,"children":4788},{"disabled":552,"type":553},[],{"type":32,"value":4790}," 移动端断点逐一检查",{"type":27,"tag":39,"props":4792,"children":4794},{"className":4793},[547],[4795,4798],{"type":27,"tag":550,"props":4796,"children":4797},{"disabled":552,"type":553},[],{"type":32,"value":4799}," 表单/按钮交互可用",{"type":27,"tag":39,"props":4801,"children":4803},{"className":4802},[547],[4804,4807],{"type":27,"tag":550,"props":4805,"children":4806},{"disabled":552,"type":553},[],{"type":32,"value":4808}," 建立回滚入口（上一版可恢复）",{"type":27,"tag":125,"props":4810,"children":4811},{},[],{"type":27,"tag":129,"props":4813,"children":4814},{"id":614},[4815],{"type":32,"value":614},{"type":27,"tag":35,"props":4817,"children":4818},{},[4819,4826,4835],{"type":27,"tag":39,"props":4820,"children":4821},{},[4822],{"type":27,"tag":93,"props":4823,"children":4824},{"href":4059},[4825],{"type":32,"value":4062},{"type":27,"tag":39,"props":4827,"children":4828},{},[4829],{"type":27,"tag":93,"props":4830,"children":4832},{"href":4831},"/about-html/web-page-editor-vs-html-editor",[4833],{"type":32,"value":4834},"网页编辑器 vs HTML 编辑器：到底差在哪",{"type":27,"tag":39,"props":4836,"children":4837},{},[4838],{"type":27,"tag":93,"props":4839,"children":4841},{"href":4840},"/about-html/online-html-editor-guide",[4842],{"type":32,"value":4843},"在线 HTML 编辑器指南",{"title":7,"searchDepth":649,"depth":649,"links":4845},[4846,4847,4852,4857,4861,4862,4863,4864,4865],{"id":4174,"depth":652,"text":4177},{"id":4211,"depth":652,"text":4214,"children":4848},[4849,4850,4851],{"id":4217,"depth":649,"text":4220},{"id":4255,"depth":649,"text":4258},{"id":4295,"depth":649,"text":4298},{"id":4322,"depth":652,"text":4325,"children":4853},[4854,4855,4856],{"id":4328,"depth":649,"text":4331},{"id":4362,"depth":649,"text":4365},{"id":4398,"depth":649,"text":4401},{"id":4420,"depth":652,"text":4423,"children":4858},[4859,4860],{"id":4426,"depth":649,"text":4426},{"id":4478,"depth":649,"text":4478},{"id":4499,"depth":652,"text":4502},{"id":4579,"depth":652,"text":4582},{"id":4678,"depth":652,"text":4681},{"id":4720,"depth":652,"text":4723},{"id":614,"depth":652,"text":614},"content:about-html:html-template-modification-playbook.md","about-html/html-template-modification-playbook.md","about-html/html-template-modification-playbook",{"loc":95},{"_path":2014,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":4871,"description":4872,"date":4873,"topic":5,"author":11,"tags":4874,"image":4879,"imageAlt":4880,"pexelsPhotoId":4881,"pexelsUrl":4882,"featured":6,"readingTime":4883,"body":4884,"_type":662,"_id":5679,"_source":664,"_file":5680,"_stem":5681,"_extension":667},"HTML 模板响应式不崩：用断点策略和移动优先避免","响应式模板从","2026-03-03",[13,4875,4876,4877,4878],"响应式设计","断点策略","移动优先","css媒体查询","/images/articles/html-template-responsive-breakpoints-strategy-featured.jpg","多种设备屏幕上的响应式设计展示",5632399,"https://www.pexels.com/photo/mockup-graphic-display-5632399/",13,{"type":24,"children":4885,"toc":5662},[4886,4891,4909,4919,4931,4934,4940,5080,5083,5089,5095,5103,5112,5130,5140,5146,5250,5253,5259,5265,5270,5281,5287,5296,5305,5323,5329,5334,5343,5348,5357,5363,5372,5375,5381,5390,5398,5406,5415,5424,5433,5443,5446,5452,5528,5531,5535,5543,5548,5556,5561,5569,5574,5582,5587,5610,5613,5617],{"type":27,"tag":28,"props":4887,"children":4888},{},[4889],{"type":32,"value":4890},"很多人用 HTML 模板改内容后，遇到一个问题：",{"type":27,"tag":35,"props":4892,"children":4893},{},[4894,4899,4904],{"type":27,"tag":39,"props":4895,"children":4896},{},[4897],{"type":32,"value":4898},"\"在电脑上好好的，但在平板上就错版了\"",{"type":27,"tag":39,"props":4900,"children":4901},{},[4902],{"type":32,"value":4903},"\"模板说是'响应式'，但某个宽度就破了\"",{"type":27,"tag":39,"props":4905,"children":4906},{},[4907],{"type":32,"value":4908},"\"我删了一个区块，结果布局全乱了\"",{"type":27,"tag":28,"props":4910,"children":4911},{},[4912,4917],{"type":27,"tag":749,"props":4913,"children":4914},{},[4915],{"type":32,"value":4916},"根本问题",{"type":32,"value":4918},"：模板的响应式设计没有遵循\"结构优先\"的原则——只是在某些尺寸加 CSS hack，而不是从\"内容流\"和\"灵活布局\"开始设计。",{"type":27,"tag":28,"props":4920,"children":4921},{},[4922,4924,4929],{"type":32,"value":4923},"这篇文章给你",{"type":27,"tag":749,"props":4925,"children":4926},{},[4927],{"type":32,"value":4928},"一套可复用的响应式断点策略",{"type":32,"value":4930},"，确保模板在任何尺寸上都不会\"莫名其妙地崩\"。",{"type":27,"tag":125,"props":4932,"children":4933},{},[],{"type":27,"tag":129,"props":4935,"children":4937},{"id":4936},"结论先说响应式-移动优先-合理的间距-明确的断点",[4938],{"type":32,"value":4939},"结论先说：响应式 = 移动优先 + 合理的间距 + 明确的断点",{"type":27,"tag":431,"props":4941,"children":4942},{},[4943,4964],{"type":27,"tag":435,"props":4944,"children":4945},{},[4946],{"type":27,"tag":439,"props":4947,"children":4948},{},[4949,4954,4959],{"type":27,"tag":443,"props":4950,"children":4951},{},[4952],{"type":32,"value":4953},"环节",{"type":27,"tag":443,"props":4955,"children":4956},{},[4957],{"type":32,"value":4958},"常见错误",{"type":27,"tag":443,"props":4960,"children":4961},{},[4962],{"type":32,"value":4963},"正确做法",{"type":27,"tag":459,"props":4965,"children":4966},{},[4967,4988,5009,5030,5051],{"type":27,"tag":439,"props":4968,"children":4969},{},[4970,4978,4983],{"type":27,"tag":466,"props":4971,"children":4972},{},[4973],{"type":27,"tag":749,"props":4974,"children":4975},{},[4976],{"type":32,"value":4977},"设计顺序",{"type":27,"tag":466,"props":4979,"children":4980},{},[4981],{"type":32,"value":4982},"先设计桌面，再改移动",{"type":27,"tag":466,"props":4984,"children":4985},{},[4986],{"type":32,"value":4987},"先设计手机，再铺到桌面",{"type":27,"tag":439,"props":4989,"children":4990},{},[4991,4999,5004],{"type":27,"tag":466,"props":4992,"children":4993},{},[4994],{"type":27,"tag":749,"props":4995,"children":4996},{},[4997],{"type":32,"value":4998},"断点选择",{"type":27,"tag":466,"props":5000,"children":5001},{},[5002],{"type":32,"value":5003},"乱定义（320px, 480px, 960px, ...）",{"type":27,"tag":466,"props":5005,"children":5006},{},[5007],{"type":32,"value":5008},"遵循常用设备（480, 768, 1024, 1440）",{"type":27,"tag":439,"props":5010,"children":5011},{},[5012,5020,5025],{"type":27,"tag":466,"props":5013,"children":5014},{},[5015],{"type":27,"tag":749,"props":5016,"children":5017},{},[5018],{"type":32,"value":5019},"布局单位",{"type":27,"tag":466,"props":5021,"children":5022},{},[5023],{"type":32,"value":5024},"混用 px 和 % 和 em，互相干扰",{"type":27,"tag":466,"props":5026,"children":5027},{},[5028],{"type":32,"value":5029},"统一用 rem（相对根字号）或 %（相对父容器）",{"type":27,"tag":439,"props":5031,"children":5032},{},[5033,5041,5046],{"type":27,"tag":466,"props":5034,"children":5035},{},[5036],{"type":27,"tag":749,"props":5037,"children":5038},{},[5039],{"type":32,"value":5040},"间距",{"type":27,"tag":466,"props":5042,"children":5043},{},[5044],{"type":32,"value":5045},"用绝对值 padding/margin",{"type":27,"tag":466,"props":5047,"children":5048},{},[5049],{"type":32,"value":5050},"用比例（gap: 1rem, 2rem, 3rem）",{"type":27,"tag":439,"props":5052,"children":5053},{},[5054,5062,5075],{"type":27,"tag":466,"props":5055,"children":5056},{},[5057],{"type":27,"tag":749,"props":5058,"children":5059},{},[5060],{"type":32,"value":5061},"媒体查询",{"type":27,"tag":466,"props":5063,"children":5064},{},[5065,5067,5073],{"type":32,"value":5066},"写死数值（",{"type":27,"tag":731,"props":5068,"children":5070},{"className":5069},[],[5071],{"type":32,"value":5072},"@media (max-width: 992px) { ... }",{"type":32,"value":5074},")",{"type":27,"tag":466,"props":5076,"children":5077},{},[5078],{"type":32,"value":5079},"用设计 token（CSS 变量）",{"type":27,"tag":125,"props":5081,"children":5082},{},[],{"type":27,"tag":129,"props":5084,"children":5086},{"id":5085},"机制为什么响应式容易崩",[5087],{"type":32,"value":5088},"机制：为什么响应式容易崩",{"type":27,"tag":1561,"props":5090,"children":5092},{"id":5091},"root-cause信息流与布局的冲突",[5093],{"type":32,"value":5094},"Root Cause：信息流与布局的冲突",{"type":27,"tag":1076,"props":5096,"children":5098},{"code":5097},"HTML 代码（拿一个电商模板举例）：\n\u003Cdiv class=\"container\">\n  \u003Cdiv class=\"featured-product\">...\u003C/div>    (宽 100%)\n  \u003Cdiv class=\"product-grid\">              \n    \u003Cdiv class=\"product-card\">...\u003C/div>    (4 列)\n    \u003Cdiv class=\"product-card\">...\u003C/div>\n    ...\n  \u003C/div>\n  \u003Cdiv class=\"testimonials\">...\u003C/div>      (3 列)\n\u003C/div>\n",[5099],{"type":27,"tag":731,"props":5100,"children":5101},{"__ignoreMap":7},[5102],{"type":32,"value":5097},{"type":27,"tag":28,"props":5104,"children":5105},{},[5106,5111],{"type":27,"tag":749,"props":5107,"children":5108},{},[5109],{"type":32,"value":5110},"在不同尺寸下",{"type":32,"value":3815},{"type":27,"tag":35,"props":5113,"children":5114},{},[5115,5120,5125],{"type":27,"tag":39,"props":5116,"children":5117},{},[5118],{"type":32,"value":5119},"桌面 (1440px)：featured-product 占 100%，product-grid 4 列，testimonials 3 列 ✅",{"type":27,"tag":39,"props":5121,"children":5122},{},[5123],{"type":32,"value":5124},"平板 (768px)：product-grid 需要 2 列，testimonials 需要 2 列，featured-product 还是 100% ✅",{"type":27,"tag":39,"props":5126,"children":5127},{},[5128],{"type":32,"value":5129},"手机 (375px)：都应该堆成 1 列 ✅",{"type":27,"tag":28,"props":5131,"children":5132},{},[5133,5138],{"type":27,"tag":749,"props":5134,"children":5135},{},[5136],{"type":32,"value":5137},"问题来了",{"type":32,"value":5139},"：如果间距、宽度、字号都写的是\"死值\"，那在某个中间尺寸（比如 600px），东西可能就卡在那儿，既不是\"2 列\"也不是\"1 列\"。",{"type":27,"tag":1561,"props":5141,"children":5143},{"id":5142},"常见的莫名其妙的断版根因",[5144],{"type":32,"value":5145},"常见的\"莫名其妙的断版\"根因",{"type":27,"tag":431,"props":5147,"children":5148},{},[5149,5169],{"type":27,"tag":435,"props":5150,"children":5151},{},[5152],{"type":27,"tag":439,"props":5153,"children":5154},{},[5155,5160,5164],{"type":27,"tag":443,"props":5156,"children":5157},{},[5158],{"type":32,"value":5159},"症状",{"type":27,"tag":443,"props":5161,"children":5162},{},[5163],{"type":32,"value":3846},{"type":27,"tag":443,"props":5165,"children":5166},{},[5167],{"type":32,"value":5168},"修复",{"type":27,"tag":459,"props":5170,"children":5171},{},[5172,5190,5208,5232],{"type":27,"tag":439,"props":5173,"children":5174},{},[5175,5180,5185],{"type":27,"tag":466,"props":5176,"children":5177},{},[5178],{"type":32,"value":5179},"768px 时，grid col 数不对",{"type":27,"tag":466,"props":5181,"children":5182},{},[5183],{"type":32,"value":5184},"CSS 里定义的断点不对",{"type":27,"tag":466,"props":5186,"children":5187},{},[5188],{"type":32,"value":5189},"调整 @media 查询粒度",{"type":27,"tag":439,"props":5191,"children":5192},{},[5193,5198,5203],{"type":27,"tag":466,"props":5194,"children":5195},{},[5196],{"type":32,"value":5197},"文字变得特别小",{"type":27,"tag":466,"props":5199,"children":5200},{},[5201],{"type":32,"value":5202},"font-size 用的是 px 而不是 rem，没随屏宽缩放",{"type":27,"tag":466,"props":5204,"children":5205},{},[5206],{"type":32,"value":5207},"改成 rem 或用媒体查询",{"type":27,"tag":439,"props":5209,"children":5210},{},[5211,5216,5227],{"type":27,"tag":466,"props":5212,"children":5213},{},[5214],{"type":32,"value":5215},"图片溢出容器",{"type":27,"tag":466,"props":5217,"children":5218},{},[5219,5221],{"type":32,"value":5220},"没设置 ",{"type":27,"tag":731,"props":5222,"children":5224},{"className":5223},[],[5225],{"type":32,"value":5226},"max-width: 100%",{"type":27,"tag":466,"props":5228,"children":5229},{},[5230],{"type":32,"value":5231},"加 max-width",{"type":27,"tag":439,"props":5233,"children":5234},{},[5235,5240,5245],{"type":27,"tag":466,"props":5236,"children":5237},{},[5238],{"type":32,"value":5239},"按钮在小屏上挤在一起",{"type":27,"tag":466,"props":5241,"children":5242},{},[5243],{"type":32,"value":5244},"padding/margin 是 px，不会自动缩小",{"type":27,"tag":466,"props":5246,"children":5247},{},[5248],{"type":32,"value":5249},"改成相对单位（rem/%)",{"type":27,"tag":125,"props":5251,"children":5252},{},[],{"type":27,"tag":129,"props":5254,"children":5256},{"id":5255},"可执行流程设计响应式模板的正确顺序",[5257],{"type":32,"value":5258},"可执行流程：设计响应式模板的正确顺序",{"type":27,"tag":1561,"props":5260,"children":5262},{"id":5261},"step-1定义你的断点关键决策",[5263],{"type":32,"value":5264},"Step 1：定义你的\"断点\"（关键决策）",{"type":27,"tag":28,"props":5266,"children":5267},{},[5268],{"type":32,"value":5269},"不要自己随意定义。用标准的设备尺寸：",{"type":27,"tag":1076,"props":5271,"children":5276},{"code":5272,"language":5273,"meta":7,"className":5274},"/* 标准断点方案（CSS Frameworks 都用这个） */\n--breakpoint-sm: 480px   (大手机)\n--breakpoint-md: 768px   (平板)\n--breakpoint-lg: 1024px  (小笔记本)\n--breakpoint-xl: 1440px  (大屏)\n\n/* 在 CSS Media Query 里用 */\n@media (min-width: 480px) { ... }\n@media (min-width: 768px) { ... }\n@media (min-width: 1024px) { ... }\n@media (min-width: 1440px) { ... }\n","css",[5275],"language-css",[5277],{"type":27,"tag":731,"props":5278,"children":5279},{"__ignoreMap":7},[5280],{"type":32,"value":5272},{"type":27,"tag":1561,"props":5282,"children":5284},{"id":5283},"step-2从最小屏幕开始设计移动优先",[5285],{"type":32,"value":5286},"Step 2：从最小屏幕开始设计（移动优先）",{"type":27,"tag":1076,"props":5288,"children":5291},{"code":5289,"language":5273,"meta":7,"className":5290},"/* 基础样式（手机，不需要媒体查询） */\n.product-grid {\n  display: grid;\n  grid-template-columns: 1fr;  /* 1 列 */\n  gap: 1rem;\n}\n\n.product-card {\n  padding: 1rem;\n  font-size: 1rem;\n}\n\n/* 扩展到平板 */\n@media (min-width: 768px) {\n  .product-grid {\n    grid-template-columns: repeat(2, 1fr);  /* 2 列 */\n    gap: 1.5rem;\n  }\n  \n  .product-card {\n    padding: 1.5rem;\n  }\n}\n\n/* 扩展到桌面 */\n@media (min-width: 1024px) {\n  .product-grid {\n    grid-template-columns: repeat(4, 1fr);  /* 4 列 */\n    gap: 2rem;\n  }\n  \n  .product-card {\n    padding: 2rem;\n  }\n}\n",[5275],[5292],{"type":27,"tag":731,"props":5293,"children":5294},{"__ignoreMap":7},[5295],{"type":32,"value":5289},{"type":27,"tag":28,"props":5297,"children":5298},{},[5299,5304],{"type":27,"tag":749,"props":5300,"children":5301},{},[5302],{"type":32,"value":5303},"关键点",{"type":32,"value":3815},{"type":27,"tag":35,"props":5306,"children":5307},{},[5308,5313,5318],{"type":27,"tag":39,"props":5309,"children":5310},{},[5311],{"type":32,"value":5312},"base 样式（手机）是最\"紧凑\"的",{"type":27,"tag":39,"props":5314,"children":5315},{},[5316],{"type":32,"value":5317},"随着屏幕变大，逐步加宽、加空间",{"type":27,"tag":39,"props":5319,"children":5320},{},[5321],{"type":32,"value":5322},"不是\"又加一个 CSS hack\"，而是\"系统化的阶段\"",{"type":27,"tag":1561,"props":5324,"children":5326},{"id":5325},"step-3用相对单位不用-px",[5327],{"type":32,"value":5328},"Step 3：用相对单位，不用 px",{"type":27,"tag":28,"props":5330,"children":5331},{},[5332],{"type":32,"value":5333},"❌ 错误（混乱的单位）：",{"type":27,"tag":1076,"props":5335,"children":5338},{"code":5336,"language":5273,"meta":7,"className":5337},".container {\n  width: 100%;\n  padding: 20px;  /* px */\n  margin-left: auto;\n  margin-right: auto;\n  max-width: 1200px;\n}\n\n.card {\n  padding: 15px;  /* px */\n  margin: 10px;\n}\n\nh1 {\n  font-size: 32px;  /* px，不会自动缩放 */\n}\n",[5275],[5339],{"type":27,"tag":731,"props":5340,"children":5341},{"__ignoreMap":7},[5342],{"type":32,"value":5336},{"type":27,"tag":28,"props":5344,"children":5345},{},[5346],{"type":32,"value":5347},"✅ 正确（一致的相对单位）：",{"type":27,"tag":1076,"props":5349,"children":5352},{"code":5350,"language":5273,"meta":7,"className":5351},"/* 先定义全局的 font-size，用 rem 相对它 */\n:root {\n  font-size: 16px;  /* 基准 */\n}\n\n.container {\n  width: 100%;\n  padding: 1rem;    /* = 16px */\n  margin-left: auto;\n  margin-right: auto;\n  max-width: 80rem; /* = 1280px */\n}\n\n.card {\n  padding: 1rem;\n  margin: 0.5rem;   /* = 8px */\n}\n\nh1 {\n  font-size: 2rem;  /* = 32px，但如果改根字号，会自动缩放 */\n}\n\n/* 在小屏幕，可以缩小根字号 */\n@media (max-width: 480px) {\n  :root {\n    font-size: 14px;  /* 自动缩放所有 rem */\n  }\n}\n",[5275],[5353],{"type":27,"tag":731,"props":5354,"children":5355},{"__ignoreMap":7},[5356],{"type":32,"value":5350},{"type":27,"tag":1561,"props":5358,"children":5360},{"id":5359},"step-4确保图片和内容能流动",[5361],{"type":32,"value":5362},"Step 4：确保图片和内容能\"流动\"",{"type":27,"tag":1076,"props":5364,"children":5367},{"code":5365,"language":5273,"meta":7,"className":5366},"/* 图片必须 responsive */\nimg {\n  max-width: 100%;\n  height: auto;\n}\n\n/* 视频也要响应 */\niframe {\n  max-width: 100%;\n  height: auto;\n  aspect-ratio: 16 / 9;\n}\n\n/* 表格在小屏幕滚动 */\n@media (max-width: 768px) {\n  table {\n    display: block;\n    overflow-x: auto;\n  }\n}\n",[5275],[5368],{"type":27,"tag":731,"props":5369,"children":5370},{"__ignoreMap":7},[5371],{"type":32,"value":5365},{"type":27,"tag":125,"props":5373,"children":5374},{},[],{"type":27,"tag":129,"props":5376,"children":5378},{"id":5377},"实战案例电商模板的某个尺寸就断版问题",[5379],{"type":32,"value":5380},"实战案例：电商模板的\"某个尺寸就断版\"问题",{"type":27,"tag":28,"props":5382,"children":5383},{},[5384,5389],{"type":27,"tag":749,"props":5385,"children":5386},{},[5387],{"type":32,"value":5388},"原始模板问题",{"type":32,"value":3815},{"type":27,"tag":1076,"props":5391,"children":5393},{"code":5392},"宽度 > 1024px：4 列网格，正常 ✅\n宽度 768-1023px：尝试 2 列，但有些 CSS 还假设是 4 列，导致挤 ❌\n宽度 480-767px：堆成 1 列，但 padding 还是按大屏设（太宽） ❌\n宽度 \u003C 480px：完全崩 ❌\n",[5394],{"type":27,"tag":731,"props":5395,"children":5396},{"__ignoreMap":7},[5397],{"type":32,"value":5392},{"type":27,"tag":28,"props":5399,"children":5400},{},[5401,5405],{"type":27,"tag":749,"props":5402,"children":5403},{},[5404],{"type":32,"value":3846},{"type":32,"value":3815},{"type":27,"tag":1076,"props":5407,"children":5410},{"code":5408,"language":5273,"meta":7,"className":5409},"/* 原始 CSS */\n.product-grid {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  padding: 2rem;  /* 桌面的间距 */\n}\n\n@media (max-width: 768px) {\n  .product-grid {\n    grid-template-columns: repeat(2, 1fr);\n  }\n  /* 忘记改 padding 了 */\n}\n\n/* 没有手机的 media query */\n",[5275],[5411],{"type":27,"tag":731,"props":5412,"children":5413},{"__ignoreMap":7},[5414],{"type":32,"value":5408},{"type":27,"tag":28,"props":5416,"children":5417},{},[5418,5423],{"type":27,"tag":749,"props":5419,"children":5420},{},[5421],{"type":32,"value":5422},"修复（重写，从移动优先）",{"type":32,"value":3815},{"type":27,"tag":1076,"props":5425,"children":5428},{"code":5426,"language":5273,"meta":7,"className":5427},"/* 基础：手机 1 列 */\n.product-grid {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 1rem;\n  padding: 1rem;\n}\n\n/* 平板 2 列 */\n@media (min-width: 768px) {\n  .product-grid {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 1.5rem;\n    padding: 1.5rem;\n  }\n}\n\n/* 桌面 4 列 */\n@media (min-width: 1024px) {\n  .product-grid {\n    grid-template-columns: repeat(4, 1fr);\n    gap: 2rem;\n    padding: 2rem;\n  }\n}\n",[5275],[5429],{"type":27,"tag":731,"props":5430,"children":5431},{"__ignoreMap":7},[5432],{"type":32,"value":5426},{"type":27,"tag":28,"props":5434,"children":5435},{},[5436,5441],{"type":27,"tag":749,"props":5437,"children":5438},{},[5439],{"type":32,"value":5440},"结果",{"type":32,"value":5442},"：365px 到 2560px，任何宽度都能正确显示",{"type":27,"tag":125,"props":5444,"children":5445},{},[],{"type":27,"tag":129,"props":5447,"children":5449},{"id":5448},"checklist响应式验证清单",[5450],{"type":32,"value":5451},"Checklist：响应式验证清单",{"type":27,"tag":35,"props":5453,"children":5455},{"className":5454},[542],[5456,5465,5474,5483,5492,5501,5510,5519],{"type":27,"tag":39,"props":5457,"children":5459},{"className":5458},[547],[5460,5463],{"type":27,"tag":550,"props":5461,"children":5462},{"disabled":552,"type":553},[],{"type":32,"value":5464}," 用 Chrome DevTools 的响应式设计模式（Ctrl+Shift+M）",{"type":27,"tag":39,"props":5466,"children":5468},{"className":5467},[547],[5469,5472],{"type":27,"tag":550,"props":5470,"children":5471},{"disabled":552,"type":553},[],{"type":32,"value":5473}," 在标准尺寸 (480, 768, 1024, 1440) 测试 ✅",{"type":27,"tag":39,"props":5475,"children":5477},{"className":5476},[547],[5478,5481],{"type":27,"tag":550,"props":5479,"children":5480},{"disabled":552,"type":553},[],{"type":32,"value":5482}," 在\"边界值\"尺寸（比如 481, 767, 1023）也测（不应该突然跳 layout）",{"type":27,"tag":39,"props":5484,"children":5486},{"className":5485},[547],[5487,5490],{"type":27,"tag":550,"props":5488,"children":5489},{"disabled":552,"type":553},[],{"type":32,"value":5491}," 所有 grid/flex 在小屏是 1 列 or 2 列？✅",{"type":27,"tag":39,"props":5493,"children":5495},{"className":5494},[547],[5496,5499],{"type":27,"tag":550,"props":5497,"children":5498},{"disabled":552,"type":553},[],{"type":32,"value":5500}," 所有文字、按钮在小屏还能点吗？✅",{"type":27,"tag":39,"props":5502,"children":5504},{"className":5503},[547],[5505,5508],{"type":27,"tag":550,"props":5506,"children":5507},{"disabled":552,"type":553},[],{"type":32,"value":5509}," 没有 horizontal scrollbar（除非你想要）",{"type":27,"tag":39,"props":5511,"children":5513},{"className":5512},[547],[5514,5517],{"type":27,"tag":550,"props":5515,"children":5516},{"disabled":552,"type":553},[],{"type":32,"value":5518}," 图片都缩放了，没有溢出？",{"type":27,"tag":39,"props":5520,"children":5522},{"className":5521},[547],[5523,5526],{"type":27,"tag":550,"props":5524,"children":5525},{"disabled":552,"type":553},[],{"type":32,"value":5527}," 检查\"最常见的遗漏\"：表格、表单、视频",{"type":27,"tag":125,"props":5529,"children":5530},{},[],{"type":27,"tag":129,"props":5532,"children":5533},{"id":3961},[5534],{"type":32,"value":3320},{"type":27,"tag":28,"props":5536,"children":5537},{},[5538],{"type":27,"tag":749,"props":5539,"children":5540},{},[5541],{"type":32,"value":5542},"Q：我该用多少个断点？",{"type":27,"tag":28,"props":5544,"children":5545},{},[5546],{"type":32,"value":5547},"A：通常 3~4 个足够（480, 768, 1440）。更多的断点更灵活，但也更复杂。",{"type":27,"tag":28,"props":5549,"children":5550},{},[5551],{"type":27,"tag":749,"props":5552,"children":5553},{},[5554],{"type":32,"value":5555},"Q：用 Bootstrap / Tailwind，还是自己写 CSS？",{"type":27,"tag":28,"props":5557,"children":5558},{},[5559],{"type":32,"value":5560},"A：Bootstrap/Tailwind 已经定义好了断点和单位系统，推荐用。自己写的话，要很仔细。",{"type":27,"tag":28,"props":5562,"children":5563},{},[5564],{"type":27,"tag":749,"props":5565,"children":5566},{},[5567],{"type":32,"value":5568},"Q：我应该在什么尺寸\"强制 1 列\"？",{"type":27,"tag":28,"props":5570,"children":5571},{},[5572],{"type":32,"value":5573},"A：通常 \u003C 480px（大手机）。但要看你的内容，如果是\"两列信息对比\"，可能 \u003C 768px 就要 1 列。",{"type":27,"tag":28,"props":5575,"children":5576},{},[5577],{"type":27,"tag":749,"props":5578,"children":5579},{},[5580],{"type":32,"value":5581},"Q：怎么把一个\"不响应式\"的模板改成响应式？",{"type":27,"tag":28,"props":5583,"children":5584},{},[5585],{"type":32,"value":5586},"A：",{"type":27,"tag":1152,"props":5588,"children":5589},{},[5590,5595,5600,5605],{"type":27,"tag":39,"props":5591,"children":5592},{},[5593],{"type":32,"value":5594},"改所有 px 成 rem",{"type":27,"tag":39,"props":5596,"children":5597},{},[5598],{"type":32,"value":5599},"加 3~4 个 media query，定义不同尺寸下的 grid column 数",{"type":27,"tag":39,"props":5601,"children":5602},{},[5603],{"type":32,"value":5604},"测试边界值",{"type":27,"tag":39,"props":5606,"children":5607},{},[5608],{"type":32,"value":5609},"（可能需要重构 HTML，如果设计得太死）",{"type":27,"tag":125,"props":5611,"children":5612},{},[],{"type":27,"tag":129,"props":5614,"children":5615},{"id":4024},[5616],{"type":32,"value":4024},{"type":27,"tag":35,"props":5618,"children":5619},{},[5620,5631,5641,5652],{"type":27,"tag":39,"props":5621,"children":5622},{},[5623,5629],{"type":27,"tag":93,"props":5624,"children":5626},{"href":5625},"/topics/design/web-design-10-rules-for-beginners",[5627],{"type":32,"value":5628},"网页设计 10 条规则",{"type":32,"value":5630},"：设计基础",{"type":27,"tag":39,"props":5632,"children":5633},{},[5634,5639],{"type":27,"tag":93,"props":5635,"children":5636},{"href":95},[5637],{"type":32,"value":5638},"HTML 模板改造 Playbook",{"type":32,"value":5640},"：改模板技巧",{"type":27,"tag":39,"props":5642,"children":5643},{},[5644,5650],{"type":27,"tag":93,"props":5645,"children":5647},{"href":5646},"/topics/design/typography-readability-parameters",[5648],{"type":32,"value":5649},"排版可读性参数表",{"type":32,"value":5651},"：字号与行距",{"type":27,"tag":39,"props":5653,"children":5654},{},[5655,5660],{"type":27,"tag":93,"props":5656,"children":5657},{"href":4561},[5658],{"type":32,"value":5659},"网站性能优化",{"type":32,"value":5661},"：加载速度",{"title":7,"searchDepth":649,"depth":649,"links":5663},[5664,5665,5669,5675,5676,5677,5678],{"id":4936,"depth":652,"text":4939},{"id":5085,"depth":652,"text":5088,"children":5666},[5667,5668],{"id":5091,"depth":649,"text":5094},{"id":5142,"depth":649,"text":5145},{"id":5255,"depth":652,"text":5258,"children":5670},[5671,5672,5673,5674],{"id":5261,"depth":649,"text":5264},{"id":5283,"depth":649,"text":5286},{"id":5325,"depth":649,"text":5328},{"id":5359,"depth":649,"text":5362},{"id":5377,"depth":652,"text":5380},{"id":5448,"depth":652,"text":5451},{"id":3961,"depth":652,"text":3320},{"id":4024,"depth":652,"text":4024},"content:about-html:html-template-responsive-breakpoints-strategy.md","about-html/html-template-responsive-breakpoints-strategy.md","about-html/html-template-responsive-breakpoints-strategy",{"_path":5683,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":5684,"description":5685,"date":5686,"topic":5,"author":11,"tags":5687,"image":18,"imageAlt":19,"imageQuery":5691,"pexelsPhotoId":20,"pexelsUrl":21,"featured":6,"readingTime":4883,"body":5692,"_type":662,"_id":6698,"_source":664,"_file":6699,"_stem":6700,"_extension":667},"/about-html/html-template-security-privacy-audit","HTML 模板上线前怎么做安全与隐私审计：外链资源、统计脚本和数据暴露清单","很多 HTML 模板看起来页面完整、样式正常，但真正的风险藏在外链资源、统计脚本和隐私细节里。本文给出一套上线前安全与隐私审计清单，帮助你在不重写模板的前提下先把底线守住。","2026-03-25",[13,5688,5689,5690,2111],"隐私审计","安全审计","第三方脚本","cybersecurity web developer",{"type":24,"children":5693,"toc":6661},[5694,5699,5717,5722,5745,5750,5776,5782,5897,5902,5905,5911,5916,5921,5948,5953,5958,5963,5986,5991,6031,6034,6040,6045,6067,6072,6078,6085,6090,6108,6114,6119,6125,6130,6135,6140,6143,6149,6154,6160,6231,6236,6259,6264,6267,6273,6278,6283,6311,6316,6321,6326,6331,6371,6374,6380,6385,6394,6399,6404,6422,6427,6430,6436,6441,6459,6463,6468,6486,6491,6514,6519,6522,6527,6585,6588,6593,6598,6621,6626,6630],{"type":27,"tag":28,"props":5695,"children":5696},{},[5697],{"type":32,"value":5698},"很多人拿到 HTML 模板后，会先关注：",{"type":27,"tag":35,"props":5700,"children":5701},{},[5702,5707,5712],{"type":27,"tag":39,"props":5703,"children":5704},{},[5705],{"type":32,"value":5706},"风格是不是够像目标行业",{"type":27,"tag":39,"props":5708,"children":5709},{},[5710],{"type":32,"value":5711},"结构是不是已经比较完整",{"type":27,"tag":39,"props":5713,"children":5714},{},[5715],{"type":32,"value":5716},"改改文案和图片能不能快速上线",{"type":27,"tag":28,"props":5718,"children":5719},{},[5720],{"type":32,"value":5721},"真正让模板站点翻车的，经常不是这些，而是一些隐藏更深的问题：",{"type":27,"tag":35,"props":5723,"children":5724},{},[5725,5730,5735,5740],{"type":27,"tag":39,"props":5726,"children":5727},{},[5728],{"type":32,"value":5729},"模板自带了你根本没注意到的第三方脚本",{"type":27,"tag":39,"props":5731,"children":5732},{},[5733],{"type":32,"value":5734},"外链资源一旦失效，页面直接错乱",{"type":27,"tag":39,"props":5736,"children":5737},{},[5738],{"type":32,"value":5739},"联系方式、隐私说明和统计逻辑都不在你的控制里",{"type":27,"tag":39,"props":5741,"children":5742},{},[5743],{"type":32,"value":5744},"页面源码里还残留测试链接、示例账号或无用依赖",{"type":27,"tag":28,"props":5746,"children":5747},{},[5748],{"type":32,"value":5749},"所以模板上线前，除了改文案和视觉，更应该做一次安全与隐私审计。",{"type":27,"tag":28,"props":5751,"children":5752},{},[5753,5755,5761,5762,5768,5769,5775],{"type":32,"value":5754},"如果你还在补模板改造基础，可以先看 ",{"type":27,"tag":93,"props":5756,"children":5758},{"href":5757},"/about-html/template-style-swap-without-rewrite",[5759],{"type":32,"value":5760},"HTML 模板不重写也能换风格",{"type":32,"value":100},{"type":27,"tag":93,"props":5763,"children":5765},{"href":5764},"/about-html/web-editor-html-code-audit-checklist",[5766],{"type":32,"value":5767},"网页编辑器生成 HTML 后怎么做代码审计",{"type":32,"value":115},{"type":27,"tag":93,"props":5770,"children":5772},{"href":5771},"/topics/practical-tips/free-website-security-checklist-domain-backup-export",[5773],{"type":32,"value":5774},"免费建站的安全清单",{"type":32,"value":755},{"type":27,"tag":129,"props":5777,"children":5779},{"id":5778},"先给结论模板审计的重点不是有没有漏洞感而是哪些东西不该悄悄存在",[5780],{"type":32,"value":5781},"先给结论：模板审计的重点不是“有没有漏洞感”，而是“哪些东西不该悄悄存在”",{"type":27,"tag":431,"props":5783,"children":5784},{},[5785,5806],{"type":27,"tag":435,"props":5786,"children":5787},{},[5788],{"type":27,"tag":439,"props":5789,"children":5790},{},[5791,5796,5801],{"type":27,"tag":443,"props":5792,"children":5793},{},[5794],{"type":32,"value":5795},"审计层",{"type":27,"tag":443,"props":5797,"children":5798},{},[5799],{"type":32,"value":5800},"要看什么",{"type":27,"tag":443,"props":5802,"children":5803},{},[5804],{"type":32,"value":5805},"最常见问题",{"type":27,"tag":459,"props":5807,"children":5808},{},[5809,5826,5843,5861,5879],{"type":27,"tag":439,"props":5810,"children":5811},{},[5812,5816,5821],{"type":27,"tag":466,"props":5813,"children":5814},{},[5815],{"type":32,"value":17},{"type":27,"tag":466,"props":5817,"children":5818},{},[5819],{"type":32,"value":5820},"CSS、JS、字体、图标、图片来源",{"type":27,"tag":466,"props":5822,"children":5823},{},[5824],{"type":32,"value":5825},"依赖失效、来源不可控",{"type":27,"tag":439,"props":5827,"children":5828},{},[5829,5833,5838],{"type":27,"tag":466,"props":5830,"children":5831},{},[5832],{"type":32,"value":5690},{"type":27,"tag":466,"props":5834,"children":5835},{},[5836],{"type":32,"value":5837},"统计、客服、弹窗、热图",{"type":27,"tag":466,"props":5839,"children":5840},{},[5841],{"type":32,"value":5842},"过度采集、拖慢页面",{"type":27,"tag":439,"props":5844,"children":5845},{},[5846,5851,5856],{"type":27,"tag":466,"props":5847,"children":5848},{},[5849],{"type":32,"value":5850},"隐私信息",{"type":27,"tag":466,"props":5852,"children":5853},{},[5854],{"type":32,"value":5855},"表单、联系方式、政策页、埋点",{"type":27,"tag":466,"props":5857,"children":5858},{},[5859],{"type":32,"value":5860},"信息不一致、采集边界不清",{"type":27,"tag":439,"props":5862,"children":5863},{},[5864,5869,5874],{"type":27,"tag":466,"props":5865,"children":5866},{},[5867],{"type":32,"value":5868},"模板残留",{"type":27,"tag":466,"props":5870,"children":5871},{},[5872],{"type":32,"value":5873},"示例链接、假数据、测试内容",{"type":27,"tag":466,"props":5875,"children":5876},{},[5877],{"type":32,"value":5878},"误发布、信任下降",{"type":27,"tag":439,"props":5880,"children":5881},{},[5882,5887,5892],{"type":27,"tag":466,"props":5883,"children":5884},{},[5885],{"type":32,"value":5886},"迁移能力",{"type":27,"tag":466,"props":5888,"children":5889},{},[5890],{"type":32,"value":5891},"能否脱离原模板来源继续维护",{"type":27,"tag":466,"props":5893,"children":5894},{},[5895],{"type":32,"value":5896},"被外链和私有资源绑死",{"type":27,"tag":28,"props":5898,"children":5899},{},[5900],{"type":32,"value":5901},"很多模板的问题，并不是黑客意义上的“严重漏洞”，而是上线后会不断制造维护、隐私和信任风险。",{"type":27,"tag":125,"props":5903,"children":5904},{},[],{"type":27,"tag":129,"props":5906,"children":5908},{"id":5907},"一先审外链资源模板真正依赖了谁",[5909],{"type":32,"value":5910},"一、先审外链资源：模板真正依赖了谁",{"type":27,"tag":28,"props":5912,"children":5913},{},[5914],{"type":32,"value":5915},"模板最容易被忽略的一层，是外链依赖。",{"type":27,"tag":1561,"props":5917,"children":5919},{"id":5918},"需要盘点的对象",[5920],{"type":32,"value":5918},{"type":27,"tag":35,"props":5922,"children":5923},{},[5924,5929,5934,5938,5943],{"type":27,"tag":39,"props":5925,"children":5926},{},[5927],{"type":32,"value":5928},"样式库 CDN",{"type":27,"tag":39,"props":5930,"children":5931},{},[5932],{"type":32,"value":5933},"第三方 JS",{"type":27,"tag":39,"props":5935,"children":5936},{},[5937],{"type":32,"value":196},{"type":27,"tag":39,"props":5939,"children":5940},{},[5941],{"type":32,"value":5942},"图标库",{"type":27,"tag":39,"props":5944,"children":5945},{},[5946],{"type":32,"value":5947},"远程图片或视频资源",{"type":27,"tag":1561,"props":5949,"children":5951},{"id":5950},"为什么这层最重要",[5952],{"type":32,"value":5950},{"type":27,"tag":28,"props":5954,"children":5955},{},[5956],{"type":32,"value":5957},"因为页面看起来是你自己的，但真正运行时，很多关键资源可能并不在你手里。",{"type":27,"tag":28,"props":5959,"children":5960},{},[5961],{"type":32,"value":5962},"只要外链失效、变慢或策略变化，就会出现：",{"type":27,"tag":35,"props":5964,"children":5965},{},[5966,5971,5976,5981],{"type":27,"tag":39,"props":5967,"children":5968},{},[5969],{"type":32,"value":5970},"页面样式错乱",{"type":27,"tag":39,"props":5972,"children":5973},{},[5974],{"type":32,"value":5975},"首屏明显变慢",{"type":27,"tag":39,"props":5977,"children":5978},{},[5979],{"type":32,"value":5980},"图标和字体缺失",{"type":27,"tag":39,"props":5982,"children":5983},{},[5984],{"type":32,"value":5985},"统计逻辑不可控",{"type":27,"tag":1561,"props":5987,"children":5989},{"id":5988},"外链资源审计清单",[5990],{"type":32,"value":5988},{"type":27,"tag":35,"props":5992,"children":5994},{"className":5993},[542],[5995,6004,6013,6022],{"type":27,"tag":39,"props":5996,"children":5998},{"className":5997},[547],[5999,6002],{"type":27,"tag":550,"props":6000,"children":6001},{"disabled":552,"type":553},[],{"type":32,"value":6003}," 是否列出了所有外链 CSS / JS / 字体 / 图标资源",{"type":27,"tag":39,"props":6005,"children":6007},{"className":6006},[547],[6008,6011],{"type":27,"tag":550,"props":6009,"children":6010},{"disabled":552,"type":553},[],{"type":32,"value":6012}," 是否确认这些资源必须存在，而不是模板残留",{"type":27,"tag":39,"props":6014,"children":6016},{"className":6015},[547],[6017,6020],{"type":27,"tag":550,"props":6018,"children":6019},{"disabled":552,"type":553},[],{"type":32,"value":6021}," 是否评估过替换为本地托管或可控资源",{"type":27,"tag":39,"props":6023,"children":6025},{"className":6024},[547],[6026,6029],{"type":27,"tag":550,"props":6027,"children":6028},{"disabled":552,"type":553},[],{"type":32,"value":6030}," 是否避免依赖来源不明的公共地址",{"type":27,"tag":125,"props":6032,"children":6033},{},[],{"type":27,"tag":129,"props":6035,"children":6037},{"id":6036},"二第三方脚本审计最容易被带上车也最容易拖慢和泄露",[6038],{"type":32,"value":6039},"二、第三方脚本审计：最容易被带上车，也最容易拖慢和泄露",{"type":27,"tag":28,"props":6041,"children":6042},{},[6043],{"type":32,"value":6044},"很多模板自带：",{"type":27,"tag":35,"props":6046,"children":6047},{},[6048,6052,6057,6062],{"type":27,"tag":39,"props":6049,"children":6050},{},[6051],{"type":32,"value":16},{"type":27,"tag":39,"props":6053,"children":6054},{},[6055],{"type":32,"value":6056},"客服弹窗",{"type":27,"tag":39,"props":6058,"children":6059},{},[6060],{"type":32,"value":6061},"营销追踪",{"type":27,"tag":39,"props":6063,"children":6064},{},[6065],{"type":32,"value":6066},"社交分享插件",{"type":27,"tag":28,"props":6068,"children":6069},{},[6070],{"type":32,"value":6071},"这些东西在演示时看起来“功能丰富”，但上线后很可能变成风险。",{"type":27,"tag":1561,"props":6073,"children":6075},{"id":6074},"第三方脚本最常见的-3-个问题",[6076],{"type":32,"value":6077},"第三方脚本最常见的 3 个问题",{"type":27,"tag":6079,"props":6080,"children":6082},"h4",{"id":6081},"_1-你并不清楚它采集了什么",[6083],{"type":32,"value":6084},"1. 你并不清楚它采集了什么",{"type":27,"tag":28,"props":6086,"children":6087},{},[6088],{"type":32,"value":6089},"尤其是表单、热图、弹窗类脚本，很可能会记录：",{"type":27,"tag":35,"props":6091,"children":6092},{},[6093,6098,6103],{"type":27,"tag":39,"props":6094,"children":6095},{},[6096],{"type":32,"value":6097},"点击行为",{"type":27,"tag":39,"props":6099,"children":6100},{},[6101],{"type":32,"value":6102},"输入过程",{"type":27,"tag":39,"props":6104,"children":6105},{},[6106],{"type":32,"value":6107},"页面路径和来源信息",{"type":27,"tag":6079,"props":6109,"children":6111},{"id":6110},"_2-它会抢首屏性能",[6112],{"type":32,"value":6113},"2. 它会抢首屏性能",{"type":27,"tag":28,"props":6115,"children":6116},{},[6117],{"type":32,"value":6118},"如果统计、客服、热图和营销脚本都在首轮执行，页面会明显变慢。",{"type":27,"tag":6079,"props":6120,"children":6122},{"id":6121},"_3-它脱离了你的长期控制",[6123],{"type":32,"value":6124},"3. 它脱离了你的长期控制",{"type":27,"tag":28,"props":6126,"children":6127},{},[6128],{"type":32,"value":6129},"一旦服务下线、策略改变或账号失效，页面的一部分行为就会不可预测。",{"type":27,"tag":1561,"props":6131,"children":6133},{"id":6132},"一个简单原则",[6134],{"type":32,"value":6132},{"type":27,"tag":28,"props":6136,"children":6137},{},[6138],{"type":32,"value":6139},"所有第三方脚本默认都应该被当成“非必要资源”，除非你能清楚说出它的业务价值与边界。",{"type":27,"tag":125,"props":6141,"children":6142},{},[],{"type":27,"tag":129,"props":6144,"children":6146},{"id":6145},"三隐私审计页面不是只要能提交表单就算安全",[6147],{"type":32,"value":6148},"三、隐私审计：页面不是只要能提交表单就算安全",{"type":27,"tag":28,"props":6150,"children":6151},{},[6152],{"type":32,"value":6153},"模板类页面最容易出现的隐私问题，不一定是技术漏洞，而是信息管理很随意。",{"type":27,"tag":1561,"props":6155,"children":6157},{"id":6156},"重点检查-4-类内容",[6158],{"type":32,"value":6159},"重点检查 4 类内容",{"type":27,"tag":431,"props":6161,"children":6162},{},[6163,6177],{"type":27,"tag":435,"props":6164,"children":6165},{},[6166],{"type":27,"tag":439,"props":6167,"children":6168},{},[6169,6173],{"type":27,"tag":443,"props":6170,"children":6171},{},[6172],{"type":32,"value":447},{"type":27,"tag":443,"props":6174,"children":6175},{},[6176],{"type":32,"value":5800},{"type":27,"tag":459,"props":6178,"children":6179},{},[6180,6193,6205,6218],{"type":27,"tag":439,"props":6181,"children":6182},{},[6183,6188],{"type":27,"tag":466,"props":6184,"children":6185},{},[6186],{"type":32,"value":6187},"表单",{"type":27,"tag":466,"props":6189,"children":6190},{},[6191],{"type":32,"value":6192},"字段是否必要、提交地址是否明确、失败是否可追踪",{"type":27,"tag":439,"props":6194,"children":6195},{},[6196,6200],{"type":27,"tag":466,"props":6197,"children":6198},{},[6199],{"type":32,"value":3549},{"type":27,"tag":466,"props":6201,"children":6202},{},[6203],{"type":32,"value":6204},"页面、页脚、隐私页是否一致",{"type":27,"tag":439,"props":6206,"children":6207},{},[6208,6213],{"type":27,"tag":466,"props":6209,"children":6210},{},[6211],{"type":32,"value":6212},"政策页面",{"type":27,"tag":466,"props":6214,"children":6215},{},[6216],{"type":32,"value":6217},"是否存在隐私政策、条款、Cookie 说明",{"type":27,"tag":439,"props":6219,"children":6220},{},[6221,6226],{"type":27,"tag":466,"props":6222,"children":6223},{},[6224],{"type":32,"value":6225},"埋点",{"type":27,"tag":466,"props":6227,"children":6228},{},[6229],{"type":32,"value":6230},"是否采集超过业务需要的数据",{"type":27,"tag":1561,"props":6232,"children":6234},{"id":6233},"模板常见的隐私问题",[6235],{"type":32,"value":6233},{"type":27,"tag":35,"props":6237,"children":6238},{},[6239,6244,6249,6254],{"type":27,"tag":39,"props":6240,"children":6241},{},[6242],{"type":32,"value":6243},"表单 action 还指向原模板演示地址",{"type":27,"tag":39,"props":6245,"children":6246},{},[6247],{"type":32,"value":6248},"联系电话还是模板示例号码",{"type":27,"tag":39,"props":6250,"children":6251},{},[6252],{"type":32,"value":6253},"隐私政策页缺失或没有入口",{"type":27,"tag":39,"props":6255,"children":6256},{},[6257],{"type":32,"value":6258},"页面埋点多，但没人知道谁在看数据",{"type":27,"tag":28,"props":6260,"children":6261},{},[6262],{"type":32,"value":6263},"这些问题不一定会立刻造成事故，但会直接影响可信度与合规底线。",{"type":27,"tag":125,"props":6265,"children":6266},{},[],{"type":27,"tag":129,"props":6268,"children":6270},{"id":6269},"四模板残留审计很多信任问题不是被攻击而是被默认内容坑了",[6271],{"type":32,"value":6272},"四、模板残留审计：很多信任问题不是被攻击，而是被“默认内容”坑了",{"type":27,"tag":28,"props":6274,"children":6275},{},[6276],{"type":32,"value":6277},"模板项目最尴尬的一类问题，是上线后还残留演示内容。",{"type":27,"tag":1561,"props":6279,"children":6281},{"id":6280},"典型残留项",[6282],{"type":32,"value":6280},{"type":27,"tag":35,"props":6284,"children":6285},{},[6286,6291,6296,6301,6306],{"type":27,"tag":39,"props":6287,"children":6288},{},[6289],{"type":32,"value":6290},"示例邮箱和电话",{"type":27,"tag":39,"props":6292,"children":6293},{},[6294],{"type":32,"value":6295},"假客户 Logo",{"type":27,"tag":39,"props":6297,"children":6298},{},[6299],{"type":32,"value":6300},"示例博客标题和日期",{"type":27,"tag":39,"props":6302,"children":6303},{},[6304],{"type":32,"value":6305},"社交链接还指向模板作者",{"type":27,"tag":39,"props":6307,"children":6308},{},[6309],{"type":32,"value":6310},"版权信息还是模板商或演示品牌",{"type":27,"tag":1561,"props":6312,"children":6314},{"id":6313},"为什么这类问题严重",[6315],{"type":32,"value":6313},{"type":27,"tag":28,"props":6317,"children":6318},{},[6319],{"type":32,"value":6320},"因为它直接破坏用户对站点的信任感。",{"type":27,"tag":28,"props":6322,"children":6323},{},[6324],{"type":32,"value":6325},"页面一旦出现“这不是一个真的站”的信号，很多转化会在用户还没来得及理解产品前就结束了。",{"type":27,"tag":1561,"props":6327,"children":6329},{"id":6328},"发布前最低检查",[6330],{"type":32,"value":6328},{"type":27,"tag":35,"props":6332,"children":6334},{"className":6333},[542],[6335,6344,6353,6362],{"type":27,"tag":39,"props":6336,"children":6338},{"className":6337},[547],[6339,6342],{"type":27,"tag":550,"props":6340,"children":6341},{"disabled":552,"type":553},[],{"type":32,"value":6343}," 所有联系方式已替换",{"type":27,"tag":39,"props":6345,"children":6347},{"className":6346},[547],[6348,6351],{"type":27,"tag":550,"props":6349,"children":6350},{"disabled":552,"type":553},[],{"type":32,"value":6352}," 所有社交链接已替换",{"type":27,"tag":39,"props":6354,"children":6356},{"className":6355},[547],[6357,6360],{"type":27,"tag":550,"props":6358,"children":6359},{"disabled":552,"type":553},[],{"type":32,"value":6361}," 所有版权与品牌文案已确认",{"type":27,"tag":39,"props":6363,"children":6365},{"className":6364},[547],[6366,6369],{"type":27,"tag":550,"props":6367,"children":6368},{"disabled":552,"type":553},[],{"type":32,"value":6370}," 所有假案例和演示数据已清理",{"type":27,"tag":125,"props":6372,"children":6373},{},[],{"type":27,"tag":129,"props":6375,"children":6377},{"id":6376},"五模板上线前最值得做的一轮安全与隐私审计流程",[6378],{"type":32,"value":6379},"五、模板上线前最值得做的一轮安全与隐私审计流程",{"type":27,"tag":28,"props":6381,"children":6382},{},[6383],{"type":32,"value":6384},"推荐顺序如下：",{"type":27,"tag":1076,"props":6386,"children":6389},{"className":6387,"code":6388,"language":32,"meta":7},[1079],"先列全部外链资源\n  -> 再核查第三方脚本用途\n  -> 再检查表单与隐私边界\n  -> 再清理模板残留内容\n  -> 最后确认迁移与本地托管能力\n",[6390],{"type":27,"tag":731,"props":6391,"children":6392},{"__ignoreMap":7},[6393],{"type":32,"value":6388},{"type":27,"tag":1561,"props":6395,"children":6397},{"id":6396},"为什么迁移能力也属于安全问题",[6398],{"type":32,"value":6396},{"type":27,"tag":28,"props":6400,"children":6401},{},[6402],{"type":32,"value":6403},"因为如果你的模板：",{"type":27,"tag":35,"props":6405,"children":6406},{},[6407,6412,6417],{"type":27,"tag":39,"props":6408,"children":6409},{},[6410],{"type":32,"value":6411},"强依赖外链资源",{"type":27,"tag":39,"props":6413,"children":6414},{},[6415],{"type":32,"value":6416},"图片和脚本无法本地托管",{"type":27,"tag":39,"props":6418,"children":6419},{},[6420],{"type":32,"value":6421},"核心逻辑在第三方账户下",{"type":27,"tag":28,"props":6423,"children":6424},{},[6425],{"type":32,"value":6426},"那站点长期并不安全，它只是暂时可用。",{"type":27,"tag":125,"props":6428,"children":6429},{},[],{"type":27,"tag":129,"props":6431,"children":6433},{"id":6432},"失败案例页面样式没问题但上线后被客服和热图脚本拖慢又过度采集",[6434],{"type":32,"value":6435},"失败案例：页面样式没问题，但上线后被客服和热图脚本拖慢又过度采集",{"type":27,"tag":1561,"props":6437,"children":6439},{"id":6438},"现象",[6440],{"type":32,"value":6438},{"type":27,"tag":35,"props":6442,"children":6443},{},[6444,6449,6454],{"type":27,"tag":39,"props":6445,"children":6446},{},[6447],{"type":32,"value":6448},"模板首页看起来完整",{"type":27,"tag":39,"props":6450,"children":6451},{},[6452],{"type":32,"value":6453},"运营还觉得“功能比想象中多”",{"type":27,"tag":39,"props":6455,"children":6456},{},[6457],{"type":32,"value":6458},"上线后发现首屏变慢，且表单行为被多个脚本跟踪",{"type":27,"tag":1561,"props":6460,"children":6461},{"id":3846},[6462],{"type":32,"value":3846},{"type":27,"tag":28,"props":6464,"children":6465},{},[6466],{"type":32,"value":6467},"排查后通常会发现：",{"type":27,"tag":1152,"props":6469,"children":6470},{},[6471,6476,6481],{"type":27,"tag":39,"props":6472,"children":6473},{},[6474],{"type":32,"value":6475},"模板自带多个营销脚本",{"type":27,"tag":39,"props":6477,"children":6478},{},[6479],{"type":32,"value":6480},"团队没有逐个核实这些脚本是否还需要",{"type":27,"tag":39,"props":6482,"children":6483},{},[6484],{"type":32,"value":6485},"隐私页和埋点边界没有同步更新",{"type":27,"tag":1561,"props":6487,"children":6489},{"id":6488},"更稳的修法",[6490],{"type":32,"value":6488},{"type":27,"tag":1152,"props":6492,"children":6493},{},[6494,6499,6504,6509],{"type":27,"tag":39,"props":6495,"children":6496},{},[6497],{"type":32,"value":6498},"列出全部第三方脚本",{"type":27,"tag":39,"props":6500,"children":6501},{},[6502],{"type":32,"value":6503},"删除不直接带来价值的部分",{"type":27,"tag":39,"props":6505,"children":6506},{},[6507],{"type":32,"value":6508},"把重要资源改为可控托管",{"type":27,"tag":39,"props":6510,"children":6511},{},[6512],{"type":32,"value":6513},"补齐隐私说明和政策入口",{"type":27,"tag":28,"props":6515,"children":6516},{},[6517],{"type":32,"value":6518},"模板上线最怕的不是少一点功能，而是多了一堆你并不真正掌控的东西。",{"type":27,"tag":125,"props":6520,"children":6521},{},[],{"type":27,"tag":129,"props":6523,"children":6525},{"id":6524},"模板安全审计清单",[6526],{"type":32,"value":6524},{"type":27,"tag":35,"props":6528,"children":6530},{"className":6529},[542],[6531,6540,6549,6558,6567,6576],{"type":27,"tag":39,"props":6532,"children":6534},{"className":6533},[547],[6535,6538],{"type":27,"tag":550,"props":6536,"children":6537},{"disabled":552,"type":553},[],{"type":32,"value":6539}," 已盘点全部外链资源和第三方脚本",{"type":27,"tag":39,"props":6541,"children":6543},{"className":6542},[547],[6544,6547],{"type":27,"tag":550,"props":6545,"children":6546},{"disabled":552,"type":553},[],{"type":32,"value":6548}," 不清楚用途的脚本已移除或核实",{"type":27,"tag":39,"props":6550,"children":6552},{"className":6551},[547],[6553,6556],{"type":27,"tag":550,"props":6554,"children":6555},{"disabled":552,"type":553},[],{"type":32,"value":6557}," 表单、联系方式和隐私说明已完成一致性检查",{"type":27,"tag":39,"props":6559,"children":6561},{"className":6560},[547],[6562,6565],{"type":27,"tag":550,"props":6563,"children":6564},{"disabled":552,"type":553},[],{"type":32,"value":6566}," 模板示例内容、假数据和默认链接已清理",{"type":27,"tag":39,"props":6568,"children":6570},{"className":6569},[547],[6571,6574],{"type":27,"tag":550,"props":6572,"children":6573},{"disabled":552,"type":553},[],{"type":32,"value":6575}," 页面核心资源尽量可本地托管或可迁移",{"type":27,"tag":39,"props":6577,"children":6579},{"className":6578},[547],[6580,6583],{"type":27,"tag":550,"props":6581,"children":6582},{"disabled":552,"type":553},[],{"type":32,"value":6584}," 已确认上线后不会被原模板环境或外链服务绑死",{"type":27,"tag":125,"props":6586,"children":6587},{},[],{"type":27,"tag":129,"props":6589,"children":6591},{"id":6590},"总结",[6592],{"type":32,"value":6590},{"type":27,"tag":28,"props":6594,"children":6595},{},[6596],{"type":32,"value":6597},"HTML 模板真正的安全风险，很多时候不在“代码看起来是否高级”，而在于：",{"type":27,"tag":1152,"props":6599,"children":6600},{},[6601,6606,6611,6616],{"type":27,"tag":39,"props":6602,"children":6603},{},[6604],{"type":32,"value":6605},"你依赖了谁",{"type":27,"tag":39,"props":6607,"children":6608},{},[6609],{"type":32,"value":6610},"谁在采集数据",{"type":27,"tag":39,"props":6612,"children":6613},{},[6614],{"type":32,"value":6615},"页面里还残留了什么",{"type":27,"tag":39,"props":6617,"children":6618},{},[6619],{"type":32,"value":6620},"你能不能脱离模板来源继续维护",{"type":27,"tag":28,"props":6622,"children":6623},{},[6624],{"type":32,"value":6625},"只要把这几层在上线前先审一遍，模板就不再只是“能用的演示页”，而会更接近真正可运营的站点资产。",{"type":27,"tag":129,"props":6627,"children":6628},{"id":614},[6629],{"type":32,"value":614},{"type":27,"tag":35,"props":6631,"children":6632},{},[6633,6640,6647,6654],{"type":27,"tag":39,"props":6634,"children":6635},{},[6636],{"type":27,"tag":93,"props":6637,"children":6638},{"href":5757},[6639],{"type":32,"value":5760},{"type":27,"tag":39,"props":6641,"children":6642},{},[6643],{"type":27,"tag":93,"props":6644,"children":6645},{"href":5764},[6646],{"type":32,"value":5767},{"type":27,"tag":39,"props":6648,"children":6649},{},[6650],{"type":27,"tag":93,"props":6651,"children":6652},{"href":5771},[6653],{"type":32,"value":5774},{"type":27,"tag":39,"props":6655,"children":6656},{},[6657],{"type":27,"tag":93,"props":6658,"children":6659},{"href":110},[6660],{"type":32,"value":113},{"title":7,"searchDepth":649,"depth":649,"links":6662},[6663,6664,6669,6678,6682,6687,6690,6695,6696,6697],{"id":5778,"depth":652,"text":5781},{"id":5907,"depth":652,"text":5910,"children":6665},[6666,6667,6668],{"id":5918,"depth":649,"text":5918},{"id":5950,"depth":649,"text":5950},{"id":5988,"depth":649,"text":5988},{"id":6036,"depth":652,"text":6039,"children":6670},[6671,6677],{"id":6074,"depth":649,"text":6077,"children":6672},[6673,6675,6676],{"id":6081,"depth":6674,"text":6084},4,{"id":6110,"depth":6674,"text":6113},{"id":6121,"depth":6674,"text":6124},{"id":6132,"depth":649,"text":6132},{"id":6145,"depth":652,"text":6148,"children":6679},[6680,6681],{"id":6156,"depth":649,"text":6159},{"id":6233,"depth":649,"text":6233},{"id":6269,"depth":652,"text":6272,"children":6683},[6684,6685,6686],{"id":6280,"depth":649,"text":6280},{"id":6313,"depth":649,"text":6313},{"id":6328,"depth":649,"text":6328},{"id":6376,"depth":652,"text":6379,"children":6688},[6689],{"id":6396,"depth":649,"text":6396},{"id":6432,"depth":652,"text":6435,"children":6691},[6692,6693,6694],{"id":6438,"depth":649,"text":6438},{"id":3846,"depth":649,"text":3846},{"id":6488,"depth":649,"text":6488},{"id":6524,"depth":652,"text":6524},{"id":6590,"depth":652,"text":6590},{"id":614,"depth":652,"text":614},"content:about-html:html-template-security-privacy-audit.md","about-html/html-template-security-privacy-audit.md","about-html/html-template-security-privacy-audit",1778574568762]