如何从Handlebars视图中设置布局的页面标题？

嘿，这个需求太常见啦！我之前做项目的时候也经常碰到，针对你给出的这个布局，有两种特别好用的方法能实现动态设置标题，我给你一步步说清楚：

方法一：通过模板变量传递标题（简单直接） #

先看你给出的布局代码，里面的标题是固定的Page title，咱们先把它改成Handlebars变量，比如{{pageTitle}}，修改后的布局代码如下：

<!DOCTYPE html>
<html>
    <head>
        <title>{{pageTitle}}</title>
    </head>
    <body>
        <div>
            {{{body}}}
        </div>
    </body>
</html>

之后在渲染具体视图的时候，把标题作为数据的一部分传进去就好。比如你用Node.js的express-handlebars的话，渲染逻辑大概是这样：

app.get('/home', (req, res) => {
  res.render('home', {
    pageTitle: '我的首页', // 这里填你要设置的页面标题
    // 其他视图需要的业务数据...
  });
});

这种方法逻辑清晰，特别适合标题需要从后端数据里获取的场景。

方法二：用块助手让视图直接控制标题（更灵活） #

要是你希望标题完全由视图自己决定，不想在后端渲染时额外传数据，那用Handlebars的块助手就最合适了。现在主流的Handlebars集成（比如express-handlebars）大多内置了contentFor和block助手，直接用就行。

先修改布局，把标题部分改成可替换的块，还能加个默认标题兜底：

<!DOCTYPE html>
<html>
    <head>
        <title>{{{block "title" "默认页面标题"}}}</title>
    </head>
    <body>
        <div>
            {{{body}}}
        </div>
    </body>
</html>

然后在你的具体视图文件里，用contentFor助手来定义标题内容：

{{#contentFor "title"}}
  我的个人博客 - 最新技术文章
{{/contentFor}}

<!-- 下面是视图的其他内容 -->
<h1>欢迎来到我的技术博客</h1>
<p>这里会更新前端开发的干货内容...</p>

这样渲染的时候，视图里的标题会自动替换布局里的块内容，完全由视图自主控制，用起来特别顺手！

对了，要是你用的Handlebars环境没内置这些助手，自己写也超简单，不过一般主流框架集成都已经帮你搞定了，不用额外操心～

备注：内容来源于stack exchange，提问作者acmoune