create-react-app Title(网页标题) 和 Meta 标签

🌙
手机阅读
本文目录结构
a'xi'he

Title(网页标题) 和 Meta 标签

更改标题标签

你可以在生成的项目的 public 文件夹中找到 HTML 源文件。

你可以编辑其中的 <title> 标签,将标题从 “React App” 更改为其他任何内容。

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

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

如果你在生产环境中为自己的应用程序使用自定义服务器,并希望在将标题发送到浏览器之前修改标题,则可以按照 本章节中的建议操作。

或者,你可以将每个页面预构建为静态 HTML 文件,然后加载 JavaScript 包,此处将 在这篇文章中 对此进行介绍。

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

由于 Create React App 不支持服务器端渲染,你可能想知道如何动态修改 <meta> 标签化并反映当前的 URL。

要解决此问题,我们建议在 HTML 中添加占位符,如下所示:

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

然后,在服务器上,无论你使用哪个后端服务器,都可以将 index.html 读入内存并将 __OG_TITLE____OG_DESCRIPTION__ 和任何其他占位符替换为取决于当前 URL 的值。

只需确保清理和插值转义,以便将它们嵌入到 HTML 中是安全的!

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

将数据从服务器注入页面

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

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

然后,在服务器上,你可以在发送响应之前将 __SERVER_DATA__ 替换为实际 JSON 数据。

然后,客户端代码可以读取window.SERVER_DATA 以使用它。

确保在 将 JSON 发送到客户端之前对其进行清理,因为它会使你的应用容易受到 XSS 攻击。

axihe
axihe

AXIHE / 精选教程

浏览全部教程

HTML

CSS

JS

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang
axihe