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