Skip to main content

标题和元标签

更改标题标签​

¥Changing the title tag

你可以在生成的项目的 public 文件夹中找到源 HTML 文件。你可以编辑其中的 <title> 标签，将标题从“React App”更改为其他任何内容。

¥You can find the source HTML file in the public folder of the generated project. You may edit the <title> tag in it to change the title from “React App” to anything else.

请注意，通常你不会经常编辑 public 文件夹中的文件。例如，添加样式表 是在不接触 HTML 的情况下完成的。

¥Note that normally you wouldn’t edit files in the public folder very often. For example, adding a stylesheet is done without touching the HTML.

如果需要根据内容动态更新页面标题，可以使用浏览器 document.title API。对于更复杂的场景，当你想从 React 组件更改标题时，你可以使用第三方库 React Helmet。

¥If you need to dynamically update the page title based on the content, you can use the browser document.title API. For more complex scenarios when you want to change the title from React components, you can use React Helmet, a third party library.

如果你在生产中为你的应用使用自定义服务器并希望在标题发送到浏览器之前修改它，你可以按照 本节 中的建议进行操作。或者，你可以将每个页面预构建为静态 HTML 文件，然后加载 JavaScript 包，这在 此处 中有所介绍。

¥If you use a custom server for your app in production and want to modify the title before it gets sent to the browser, you can follow advice in this section. Alternatively, you can pre-build each page as a static HTML file which then loads the JavaScript bundle, which is covered here.

在服务器上生成动态 <meta> 标签​

¥Generating Dynamic <meta> Tags on the Server

由于 Create React App 不支持服务器渲染，你可能想知道如何使 <meta> 标签动态化并反映当前 URL。为了解决这个问题，我们建议在 HTML 中添加占位符，如下所示：

¥Since Create React App doesn’t support server rendering, you might be wondering how to make <meta> tags dynamic and reflect the current URL. To solve this, we recommend to add placeholders into the HTML, like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta property="og:title" content="__OG_TITLE__" />
    <meta property="og:description" content="__OG_DESCRIPTION__" />
  </head>
</html>

然后，在服务器上，无论你使用何种后端，都可以将 index.html 读入内存，并根据当前 URL 将 __OG_TITLE__、__OG_DESCRIPTION__ 和任何其他占位符替换为值。确保对内插值进行清理和转义，以便它们可以安全地嵌入到 HTML 中！

¥Then, on the server, regardless of the backend you use, you can read index.html into memory and replace __OG_TITLE__, __OG_DESCRIPTION__, and any other placeholders with values depending on the current URL. Make sure to sanitize and escape the interpolated values so that they are safe to embed into HTML!

如果使用 Node 服务器，甚至可以共享客户端和服务器之间的路由匹配逻辑。然而，复制它在基本情况下也能正常工作。

¥If you use a Node server, you can even share the route matching logic between the client and the server. However duplicating it also works fine in basic cases.

从服务器向页面注入数据​

¥Injecting Data from the Server into the Page

与上一节类似，你可以在注入全局变量的 HTML 中保留一些占位符，例如：

¥Similarly to the previous section, you can leave some placeholders in the HTML that inject global variables, for example:

<!doctype html>
<html lang="en">
  <head>
    <script>
      window.SERVER_DATA = __SERVER_DATA__;
    </script>

然后，在服务器上，你可以在发送响应之前用真实数据的 JSON 替换 __SERVER_DATA__。然后客户端代码可以读取 window.SERVER_DATA 以使用它。确保 在将 JSON 发送给客户端之前对其进行清理，因为它会使你的应用容易受到 XSS 攻击。

¥Then, on the server, you can replace __SERVER_DATA__ with a JSON of real data right before sending the response. The client code can then read window.SERVER_DATA to use it. Make sure to sanitize the JSON before sending it to the client as it makes your app vulnerable to XSS attacks.