如何通过Hotwire更新页面标题？该方案是否仍被使用？

一、通过Hotwire更新页面标题的方法 #

Hotwire的Turbo提供了两种常用的页面标题更新方式：

1. 利用Turbo Stream直接更新标题元素 #

像你给出的示例那样，给<title>标签添加ID，再通过Turbo Stream的update动作替换它的内容：

<head>
  <title id="page-title">初始标题</title>
</head>
<!-- 在Turbo Frame或Turbo Stream响应内容中加入 -->
<turbo-stream action="update" target="page-title">
  <template>新页面标题</template>
</turbo-stream>

这种方式把<title>当作普通DOM元素处理，Turbo Stream会自动完成DOM更新，配合Turbo Frame的data-turbo-action="advance"属性，浏览器历史记录里的标题也会同步更新。

2. 监听Turbo导航事件手动修改 #

如果需要根据页面内容动态计算标题，可以监听Turbo的加载事件来手动修改：

document.addEventListener('turbo:load', function() {
  document.title = "新标题";
});

这种方式适合需要从页面元素提取标题文本、或者做复杂逻辑计算的场景。

二、示例中的方案是否仍被开发者使用？ #

你示例里用Turbo Stream更新<title>的方式不算"Hack"，它是利用Turbo Stream操作DOM的原生能力，至今仍有不少开发者在使用，尤其是在局部页面更新的场景下：

• 当页面只有部分内容通过Turbo Frame/Stream更新，无需重载整个页面时，这种方式能快速同步标题；
• 相比写JS监听事件，它不需要额外代码，更贴合Hotwire"少写JS"的设计理念。

不过随着Turbo版本迭代，部分场景下开发者会选择更简洁的方式：比如在Turbo Frame的响应页面里直接包含新的<title>标签，Turbo处理导航时会自动提取并更新标题（前提是使用advance或replace动作）。但如果是局部更新内容同时修改标题，Turbo Stream的方式依然是主流方案之一。

内容的提问来源于stack exchange，提问作者Kumar Patel