小程序自定义单个页面标题栏_如何自定义任何页面的标题

最新推荐文章于 2024-07-30 13:02:28 发布

weixin_26723981

最新推荐文章于 2024-07-30 13:02:28 发布

阅读量1k

点赞数

文章标签：小程序 java python js vue ViewUI

原文链接：https://medium.com/@adolf.schmuck/how-to-customize-the-title-of-any-page-in-react-45ef14d2a695

版权

小程序自定义单个页面标题栏

When you create a website or web application using regular HTML, the <title> tag is what you use to define the title for your HTML document. So, for example, if you have a portfolio website, the <title> tag up in the <head> of your HTML code of your Landing Page may look something like this:

使用常规HTML创建网站或Web应用程序时， <title>标记是用于定义HTML文档<title>标记。因此，例如，如果您有一个投资组合网站，则着陆页HTML代码的<head>中的<title>标记可能看起来像这样：

<title>My Portfolio</title>

Likewise, the <title> tag on your About Page may look something like this:

同样，“关于页面”上的<title>标签可能看起来像这样：

<title>My Portfolio | About</title>

Whatever title you have here will then be shown exactly as it is in the browser’s title bar or in the page’s tab.

无论您在此处拥有什么标题，都将在浏览器标题栏中或页面标签中完全显示。

In this article, I’m going to show you how to customize the title of any page in a React application. In this example, the title as displayed in the tab is “CoderGuides | Home”.

在本文中，我将向您展示如何在React应用程序中自定义任何页面的标题。在此示例中，选项卡中显示的标题是“ CoderGuides | 家”。

Image for post — Example of Document Title: Home Page

And in this example, the displayed title is “CoderGuides | Guides”.

在此示例中，显示的标题为“ CoderGuides | 指南”。

If we go into our React app’s index.html file in the public folder, we can add whatever title we want inside the <head> using the <title> tag. As you can see here, the title is defined as “CoderGuides”.

如果进入公共文件夹中的React应用程序的index.html文件，则可以使用<title>标签在<head>内添加所需的任何标题。如您所见，标题定义为“ CoderGuides”。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/dev-logo.png" />
  <meta name="theme-color" content="#000000" /><title>CoderGuides</title>
</head>

If we go to our Home Page (note the URL: /home), we get “CoderGuides” for the title in the tab.

如果转到主页(请注意URL： / home )，则在选项卡中将获得“ CoderGuides”作为标题。

And now if we go to the Guides Page (note the URL: /guides), we also get “CoderGuides” displayed in the tab.

现在，如果我们转到“指南”页面(请注意URL： / guides )，我们还将在选项卡中显示“ CoderGuides”。

Indeed, this is what was defined for the title in the index.html file above. And you will see that by doing this, you will get the same title (i.e. “CoderGuides”) across all of your pages in your app. But, what do we do if we want to customize the title of each of our pages, so that each page in our app has its own unique title? In other words, if we go to the Home Page, we would like the title in the tab to be displayed as “CoderGuides | Home”, and when we go to the Guides page, we would like the title in the tab to be displayed as “CoderGuides | Guides”.

实际上，这就是上面的index.html文件中为标题定义的内容。您会看到，通过这样做，您将在应用程序的所有页面上获得相同的标题(即“ CoderGuides”)。但是，如果我们想自定义每个页面的标题，以便应用程序中的每个页面都有自己的唯一标题，我们该怎么办？换句话说，如果转到主页，则希望标签中的标题显示为“ CoderGuides | 主页”，然后转到“指南”页面时，我们希望标签中的标题显示为“ CoderGuides | 指南”。

To help us with this, we’re going to use a package called React Helmet. React Helmet is a document head manager for React that allows you to manage all of your changes to the document head. There are different ways that React Helmet can be used, but we’re going to use it here to help us customize the title of each of our pages.

为了帮助我们解决这个问题，我们将使用一个名为React Helmet的软件包。 React Helmet是React的文档头管理器，可让您管理对文档头的所有更改。可使用React Helmet的方法有多种，但是我们将在此处使用它来帮助我们自定义每个页面的标题。

What To Do

该怎么办

The first thing that we need to do is to install React Helmet. So, in the terminal, run npm install --save react-helmet.

我们需要做的第一件事是安装React Helmet。因此，在终端中，运行npm install --save react-helmet。

npm install --save react-helmet

We can verify that it has been installed by checking in the dependencies in the package.json file.

我们可以通过检查package.json文件中的依赖项来验证它是否已安装。

"dependencies": {
  "react": "^16.13.1",
  "react-dom": "^16.13.1","react-helmet": "^6.0.0",
  "react-router-dom": "^5.2.0",
},

The next thing we need to do is to import React Helmet into our application, wherever we want to use it. In this case, we’re going to be using it in our Home Page component, as well as in our Guides Page component. I have them both as separate files (Home.js and Guides.js), so I’m going to import React Helmet into each of these files. So, for both Home.js and Guides.js, it’s going to look like this. If your app has, for example, a total of five pages, and you plan on customizing the title of each of those five pages, then you will need to import React Helmet into each of those five files.

接下来需要做的就是将React Helmet导入到我们的应用程序中，无论我们想在哪里使用它。在这种情况下，我们将在“主页”组件以及“指南页面”组件中使用它。我把它们都作为单独的文件( Home.js和Guides.js )，所以我将把React Helmet导入到每个文件中。因此，对于Home.js和Guides.js来说都是这样。例如，如果您的应用总共有五个页面，并且您计划自定义这五个页面中每个页面的标题，那么您将需要将React Helmet导入到这五个文件中的每个文件中。

import React from 'react';import { Helmet } from 'react-helmet';

So, now that we’ve brought in React Helmet, we are ready to use it. This is the point where we customize our title. And we’re going to use this inside of our component (in this case, our Home component). And we do this at the top, right after the return and the first open <div> tag. Notice that we add our customized title, “CoderGuides | Home”, inside the <title> tag, which in turn goes inside the opening and closing <Helmet> tags.

因此，既然我们已经带进了React Helmet，我们就可以使用它了。这是我们自定义标题的地方。我们将在组件内部使用此组件(在本例中为Home组件)。我们在return和第一个打开的<div>标记之后的顶部执行此操作。注意，我们添加了自定义标题“ CoderGuides | 主页”，位于<title>标签内，该标签依次位于打开和关闭<Helmet>标签内。

import React from 'react';
import { Helmet } from 'react-helmet';
const Home = () => {
  return (
    <div><Helmet>
        <title>CoderGuides | Home</title>
      </Helmet>
        <div>
          <h3>Welcome to CoderGuides</h3>            -- REST OF CODE --

And that’s it. Now when we go to the Home Page in the browser, we can see our customized title in the tab. Notice that the title is now displayed as “CoderGuides | Home”.

就是这样。现在，当我们在浏览器中转到主页时，可以在选项卡中看到我们自定义的标题。请注意，标题现在显示为“ CoderGuides | 家”。

And then for the Guides Page component, we do the same thing, but change the title accordingly.

然后，对于Guides Page组件，我们做同样的事情，但是相应地更改标题。

import React from 'react';
import { Helmet } from 'react-helmet';
const Guides = () => {
  return (
    <div><Helmet>
        <title>CoderGuides | Guides</title>
      </Helmet>
        <div>
          <h3>Guides</h3>            -- REST OF CODE --

And when we go to the Guides Page in the browser, we get our customized title in the tab: “CoderGuides | Guides”.

当我们在浏览器中转到“指南”页面时，我们会在选项卡中获得自定义标题：“ CoderGuides | 指南”。

And that’s all there is to it. So, to customize the title for all your pages, just repeat the same steps for each page you want to customize the title to.

这就是全部。因此，要自定义所有页面的标题，只需对要自定义标题的每个页面重复相同的步骤。

The original version of this article first appeared in CoderGuides.

本文的原始版本首次出现在CoderGuides中。