把一套英文模板改成中文站，真正花时间的从来不是翻译。文案你自己就有，复制粘贴的事。麻烦的是粘完之后——标题原本占两行，中文只剩十个字，挤成一行，下面的按钮就往上跳；细体字在英文里看着高级，换成中文糊成一片；还有那张首屏大图，上面的英文是设计师直接压在图里的，改不了。
这件事得拆成两层看：哪些工作是所有海外模板都要做一遍的，哪些是这一套模板特有的。前者是固定成本，谁都躲不掉；后者才是你挑模板时该比较的东西。下面先把固定成本说清楚，再把十一款模板按「特有成本」从低到高排开。
固定成本一 · 字体：这是差距最大的一项
几乎每套海外模板的 <head> 里都挂着一行 Google Fonts 的 <link>。它管的是英文字形，中文一个字也盖不到——浏览器拿不到中文字形，会退回系统默认字体，于是你精心挑的版式在 Windows 上变成宋体，在 Mac 上变成苹方，两边长得完全不是一回事。
那换成中文字体不就行了？这里有个量级上的差别，值得摆出具体数字。我拉了 Google Fonts 的接口实测（2026 年 9 月）：
Poppins（英文模板里最常见的字体之一）的 400 字重一共只切了 3 片，纯英文页面实际只会下载拉丁那一片，7.7 KB；
Noto Sans SC（思源黑体简体）同样是 400 一个字重，被切成了 101 个 woff2 分片，全部加起来 2.30 MB，平均每片 23 KB。
整整三百倍的差距，来自汉字数量本身。切片的意义在于浏览器只会下载页面真正用到的那几片，所以实际开销远没有 2.3 MB 那么吓人——但前提是你保留了 unicode-range 的写法。很多人图省事，直接下载一个「全量」中文字体文件塞进 @font-face，那就是实打实的几 MB，首屏直接拖垮。
更现实的一条路是：中文正文干脆不引 Web 字体，用 system-ui 加苹方、微软雅黑的系统字体栈，一个字节都不用下载；只在标题这种字数有限的地方考虑自定义字体。web.dev 的字体最佳实践里把 font-display 的取舍讲得很直白：除了 optional，其余策略在字体换入时都会带来布局位移，如果你在意稳定性就用 optional，在意「先把字显示出来」就用 swap（web.dev）。
顺带说一句：Google Fonts 的样式表是阻塞渲染的，国内网络下常常要等到超时才继续。不管你最后选哪种方案，那行 <link> 都该删掉，这不是优化，是必须做的。
固定成本二 · 版式：中文的「体积」和英文不一样
三个改完文案就会立刻暴露的地方：
细字重。英文模板的首屏大标题很爱用
font-weight: 300甚至 200，笔画少的拉丁字母撑得住，汉字笔画密，同样字重在屏幕上直接发虚。中文站通常得往上提一档到 400 或 500。负字距。标题上那句
letter-spacing: -0.02em是为了让英文单词收得更紧，中文本来就是等宽方块字，收紧之后字和字会黏在一起。中文要么归零，要么给个很小的正值。大写转换。小标题上的
text-transform: uppercase对中文不生效，看起来没事——但和它配套的那个大letter-spacing还在，中文小标题会被撑得松松垮垮。这一对得一起改。
还有一个常见的误会值得澄清：不少人以为要给中文加 word-break: break-all 来防止溢出。其实这条属性按 MDN 的定义就明确排除中日韩文字（MDN），加了对中文没用。中文默认就是逐字断行，真正需要处理的是混在中文里的长英文串和网址，那个该用 overflow-wrap: break-word。
固定成本三 · 图里的字，和地图
首屏横幅、服务图标、成就数字条——这三个位置最容易藏着写死在图片里的英文。翻代码是找不到的，得一页页看过去。真遇到了只有两条路：换图，或者把图上的文字层用 HTML 重做。挑模板时可以留个心眼：文字和背景图分离的那种，比整张合成图的省事得多。
地图同理。带 Google 地图的模板在国内就是一块白，得换成国内的地图服务。
台阶一：改完文案基本就能上线
这一层都是单页或者页面数很少的模板。文字块短、结构扁平，前面那些版式问题即使处理得粗糙一点也看不太出来。
01. 阿尔星：一页纸，表单是真能收信的
Bootstrap 5 单页 PHP / Ajax 联系表单
企业介绍、产品、团队、服务、价目、留言表单，一页滚到底。整站只有一个 HTML 文件，意味着字体和样式的修改也只需要改一处——这是单页模板在汉化上最大的便宜。
详情页里明写了带 PHP/Ajax 联系表单脚本。静态模板里的「联系表单」十有八九是个只会弹提示的空壳，这一款是真能把留言发出去的，对不想碰后端的人很实在。同时它也写明引了谷歌字体，删掉那行 <link> 是上线前的第一件事。
02. 单品推广页：三套版式，文字量本来就少
美妆护肤、保健品这一路的单品落地页，Bootstrap v5.3.3，三套布局各自按品类的气质调过。它好汉化的原因只有一个：整页的文案密度本来就低，落地页靠的是一句话卖点加大图，中文替换后需要重排的地方自然少。但如果你的产品要讲成分、讲检测报告、讲使用方法，这个骨架会不够用——它预设的信息量就是「三屏之内说服你」。
03. 六款 App 落地页：Tailwind 的改法和 Bootstrap 不一样
Tailwind CSS 3.4.1 6 个以上落地页版本 W3C 验证通过
这一款的汉化路径和前面两款完全不同，因为 Tailwind 把样式写成了类名。同样是改掉细字重和负字距这两件事：
Bootstrap 那几款：去编译后的 CSS 或 Sass 源文件里找到规则，改一处，全站生效；找不对地方就得跟一层层选择器权重。
这一款：
font-light、tracking-tight直接挂在标签上，一眼看得见改哪儿；代价是同一个类名散落在几十个标签里，只能批量替换，漏一个就有一块字重不对。
哪种顺手看你的习惯，没有优劣。关于两种框架更全面的取舍，Tailwind CSS 网站模板那一篇里说得更细。
台阶二：文案改完，还得回头调一遍版式
二十到三十几个页面的标准企业站，是大多数人真正会买的那一档。它们的共同点是：栏目齐全，但每个栏目的文案容器都是照着英文的长度设计的。中文进去以后，卡片高度不齐、导航项撑破一行、首屏标题换行点不对，这些都得一页页过。
04. 夏蔚蓝：26 个内页，改完能直接当家政站用
Bootstrap 5.3.5 3 套首页 + 26 个内页 多种页眉配置
家庭保洁、商业清洁、地毯窗户清洗、深度消毒这些细分业务都有对应栏目，注释写得详细。
它的详情页里直接写明了使用 Google Fonts——这是个好事，至少你在下载之前就知道有这一步要做。多数模板不会写，得自己翻 <head>。三套页眉配置在汉化时是个隐性成本：导航栏是中英文长度差异最大的地方（英文 Services 一个词，中文「服务项目」四个字），三套页眉就是三处要调。只用一套的话，另外两套连文件一起删掉，别留着。
05. 新能源那一款：栏目对得上，术语得自己改
太阳能、风电、节能环保这条线，服务展示、案例项目、报价方案、博客资讯都配齐了，代码注释完善。
这一款的汉化难点不在版式，在词。海外新能源站的话术体系和国内不是一套——他们讲 net zero、讲家庭储能补贴，国内要讲的是备案、并网、EPC 总包和补贴政策。照字面翻会得到一堆读起来别扭又没人搜的词。这类模板的正确用法是把它当骨架，文案整段重写，而不是逐句翻译。
06. 两套主题、16 个内页的通用款
Bootstrap v5.2.3 2 套首页 + 16 个内页 内置 chart.js
蓝橘配色的企业通用款，化工、建筑、IT 服务、初创公司都能套。定价表、客户点评、动态数字、百分比特效这些组件是现成的，还引了 chart.js 做图表。
值得注意的是它本身就带多语言组件。这不等于「已经有中文」，但说明作者在设计时考虑过语言切换这件事，栏目文字大多是从一处配置里出来的，比那些把文案硬编码进每个页面的模板好改。动态数字和百分比这两个特效要留意：数字后面的单位在英文里是 +、%、K，中文习惯写「万」「家」「年」，这些字符串常常藏在 JS 的配置对象里，不在 HTML 上。
07. 十套首页的企业级官网
10 套首页 10 种服务展示样式
集团官网、品牌展示站这个定位，风格偏稳重，大图横幅加清晰的内容分区，服务、案例、内容输出、联系的动线是完整的。
十套首页听着诱人，汉化的时候是负担。先选定一套再动手，剩下九套连同它们的图片资源一起删。这不只是省工，还关系到收录：九套结构雷同、文案相近的首页留在目录里，搜索引擎会当成内容重复的页面处理。多首页模板该怎么取舍，多首页建站模板那一篇拆得更完整。
台阶三：汉化只是第一步，后面还有活
这一层的模板体量大，或者带着业务逻辑。文案翻完只是把壳换了中文，真正的工作量在后面——组件拆分、支付流程、多语言机制、业态取舍。
08. 56 个页面，而且它自带 RTL 版
56+ 功能页面 3 套首页 + 单页版 全局 RTL 翻转 组件 CSS 独立拆分
营销咨询、广告、投资、财务这一路的企业站，三套首页之外还给了单页版本，页眉三种风格，服务页八种。
它在这篇里有个特殊身份：作者做了全局 RTL 翻转版。一套模板做过右到左的适配，说明它的布局没有靠「左边固定、右边浮动」这种写死的假设堆出来，换一种语言体系不会散架——这对汉化是个很好的信号。它还有个更实在的设计：每个页面对应的 CSS 是单独提供的，组件可以整块拿出来用，汉化一个 56 页的站，按组件分批处理比一页页翻现实得多。至于 RTL 本身是怎么回事，出海建站与 RTL 那一篇专门讲过。
「组件 CSS 单独提供」的另一面是请求数：按这个方式组织，一个页面可能要拉十几个小样式文件，开发时清爽，上线前不合并的话首屏会被这些往返拖住。它也是本篇体量最大的一款，五十多页的内容量对一家中小机构是明显过剩——别把「页面多」当成买点，页面多只意味着你要写的字多。
09. 十四个行业方向、40 多个内页的科技站合集
14+ 首页演示 40+ 内页
IT 服务、SaaS、软件开发、电脑维修、网络安全、支付方案、AI，十四个方向各有一套首页演示，页眉页脚样式也备了多种。
这种「一套顶十四套」的合集，买的时候很划算，汉化的时候先按第 07 款那个办法砍到只剩自己那一套，否则面对的是四十多页外加十四套首页的文案量。
它真正的麻烦在词而不在量。十四个方向里，网络安全、支付方案、NFT 这几套的首页文案是高度术语化的，海外那套说法和国内的招投标文件、等保合规语境不是一回事；而电脑维修那一套又太生活化。同一套模板里的十四份文案，汉化难度差得很远，挑方向的时候顺手看一眼是哪一份，比看首页好不好看实在。
10. 十大品类的电商模板：文案之外还有一整套流程
10 种品类布局主页 PHP AJAX 联系表单 W3C 验证通过
综合商城、生鲜超市、便利店、数码、母婴、家具、药店，十种布局各自成套，移动优先，支持无限页面与侧边栏。
它明写了集成 Google 地图多点位展示——门店定位这个功能对便利店、药店这类生意是刚需，但国内用不了，必须换掉，这一项的工作量比改文案大。更要紧的是电商本身：商品、购物车、结算都只是静态页面，接支付、接库存、接订单是另一件事。汉化完成的那一刻，你手上是一个漂亮的商城外壳，离能收钱还有很长的路。
11. 八套业态的餐饮模板：它是本篇里唯一自带语言切换的
8 套业态 Demo 4 种商品浏览方式 顶部多语言 + 多币种
快餐、披萨、外卖、汉堡、冰淇淋店、冰淇淋专卖、正餐、咖啡茶饮，八套 Demo 的配色和首屏结构是按业态分别调过的，不是同一个壳换图。商品有网格、列表和带筛选侧栏四种浏览方式，购物车、收藏夹、结算齐全，订单追踪和我的账户常驻顶部；堂食那一侧的订座、菜单、主厨团队、门店画廊也都在。
它顶部带多语言与多币种切换，这既是优势也是陷阱。优势是语言切换的结构已经搭好了，做中英双语不用从零开始；陷阱是这套机制意味着文案不在 HTML 里，而在语言文件或者 JS 配置里，你得先找到它、看懂它的组织方式，才能开始改——对只做纯中文站的人来说，这反而比直接改 HTML 麻烦。多币种同理，只做国内生意的话，这个开关连同它的汇率逻辑一起去掉更干净。
拿到模板包之后，按这个顺序动手
顺序比手法重要：减法 → 换掉三样东西 → 重写文案 → 回头调版式。反过来做，你会把力气花在最后要删掉的页面上。
第一步的减法不只是删多余首页。语言文件、示例数据、作者放在包里的演示图片和第三方插件的完整发行版，才是真正占地方的部分——它们不影响观感，所以最容易被留着，然后一直跟到线上。
第二步换掉的三样是 Google Fonts 那行 <link>、Google 地图、写死在图片里的英文。前两样搜关键词就能定位，第三样只能一页页看。
第三步和第四步之间要留一道口子：改完文案先别急着调版式，把首页、一个列表页、一个详情页各挑一张截图，放大到手机宽度看一遍。中文的字数差异在窄屏上暴露得最彻底，桌面端看着好好的标题，到手机上常常多出一行把按钮挤下去。看完再统一处理字重、字距和行高，比一边写一边调省事得多。
本文十一款都在童哲网网站模板板块。如果你手上的是 Bootstrap 4 时代的老模板，汉化之前先看一眼老框架模板还能不能用那一篇——框架版本的问题比语言问题更值得先解决。至于深浅配色对中文排版的影响，深色模式与暗黑风格网站模板那一篇里的模板值得顺手试一下：同一段中文在深底浅字下观感和浅底深字并不一样，字重要不要提那一档，最好在自己的文案上比过再定。
