- document.ejs 默认模板
document.ejs模板可以为umi.js项目配置最为基本的配置之一，可以理解为index.html的入口。这是整个react的项目的根组件挂载点
在Head的title标签中可以更改
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Your App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
ps: 在document.ejs获取路由动态修改title:
if (document.URL.includes('/questionnaire')) {
document.getElementsByTagName('title')[0].innerText = `myTitle`;
}
- 在react中可以在组件的componentDidMount生命周期中设置
document.title = `myTitle`;
- Helmet
import React from "react";
import {Helmet} from "react-helmet";
class Application extends React.Component {
render () {
return (
<div className="application">
<Helmet>
<meta charSet="utf-8" />
<title>My Title</title>
<link rel="canonical" href="http://mysite.com/example" />
</Helmet>
...
</div>
);
}
};
- @umijs/plugin-layout 修改title
/**
* https://umijs.org/zh-CN/plugins/plugin-layout
* pageTitleRender?: WithFalse<(props: GetPageTitleProps, defaultPageTitle?: string, info?: {
title: string;
id: string;
pageName: string;
}) => string>;
*/
pageTitleRender: (a, defaultPageTitle, c) => {
return `${defaultPageTitle} - myTitle`;
},
ps: GetPageTitleProps 里会返回当前路径,也可动态根据路由修改title
ps: 在umi的defaultSettings中有一个title 也会影响到网页的标题
/**
* 设置为 false，在 layout 中只展示 pageName，而不是 pageName - title
*
* @name Layout 的 title，也会显示在浏览器标签上
*/
title: string | false;
