Handlebars 无法动态渲染 <link> 的 href 属性，因浏览器提前解析 <head>；正确做法是用 data- 属性占位后由 JS 注入，或服务端预渲染并用 {{{cssLink}}} 输出，避免 XSS 和时机问题。
Handlebars 本身不支持动态生成 <link> 的 href 属性
你不能在 <head> 中直接写 <link rel="stylesheet" href="{{cssPath}}"> —— 浏览器解析 HTML 时，<link> 标签已提前被加载器处理，此时 Handlebars 还没开始执行，变量根本不会被替换。结果是 404 或空白样式表。
正确做法：用 data- 属性占位 + JS 后置注入
把路径信息传入模板，但不指望 Handlebars 直接渲染 <link>。而是让 JS 在 DOM 加载后读取属性、创建并插入真实 <link> 标签。
- 模板中预留一个带
data-css的容器，例如：<div id="theme-loader" data-css="{{themeCss}}"></div> - JS 里读取：
const cssPath = document.getElementById('theme-loader').dataset.css; - 动态创建：
const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = cssPath; document.head.appendChild(link); - 注意：必须确保 JS 在
DOMContentLoaded或handlebars.compile()渲染完成后执行，否则data-css可能还没被注入
更稳妥的方案：服务端预渲染完整 <link> 标签
如果你用的是 Node.js（如 Express + express-handlebars），完全可以在路由层拼好 <link> 字符串，作为上下文字段传入模板：
- 后端代码示例：
res.render('page', { cssLink: `<link rel="stylesheet" href="/css/%24%7Btheme%7D.css">` }); - 模板中直接输出：
{{{cssLink}}}（注意是三花括号，避免 HTML 转义） - 这种方式绕过所有客户端时机问题，也兼容 SSR 场景
- 但要小心 XSS：确保
theme是白名单值（如只允许"light"、"dark"），不能直接拼接用户输入
别踩坑：不要用 {{#if}} 块去切换多个 <link>
比如这样写是无效的：
立即学习“前端免费学习笔记（深入）”；
<{{#if isDark}}link rel="stylesheet" href="/css/dark.css"{{else}}link rel="stylesheet" href="/css/light.css"{{/if}}>
原因有二：
- Handlebars 不会把
{{#if}}块内生成的内容当作 HTML 标签解析，它只是字符串拼接；最终可能输出<link ...>文本而非真实标签 - 即使侥幸渲染成标签，浏览器也早已跳过
<head>解析阶段，后续插入的<link>不会触发样式重载（除非手动link.onload触发）
真正需要多主题 CSS 切换时，优先走 class 注入 + 后代选择器方案，而不是反复增删 <link> —— 那才是 Handlebars 和 CSS 协作最稳的姿势。
