- document.ejs 默認(rèn)模板
document.ejs模板可以為umi.js項(xiàng)目配置最為基本的配置之一繁扎，可以理解為index.html的入口。這是整個(gè)react的項(xiàng)目的根組件掛載點(diǎn)
在Head的title標(biāo)簽中可以更改
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Your App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
ps: 在document.ejs獲取路由動(dòng)態(tài)修改title:
if (document.URL.includes('/questionnaire')) {
document.getElementsByTagName('title')[0].innerText = `myTitle`;
}
- 在react中可以在組件的componentDidMount生命周期中設(shè)置
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" />
</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 里會(huì)返回當(dāng)前路徑,也可動(dòng)態(tài)根據(jù)路由修改title
ps: 在umi的defaultSettings中有一個(gè)title 也會(huì)影響到網(wǎng)頁的標(biāo)題
/**
* 設(shè)置為 false盯捌，在 layout 中只展示 pageName，而不是 pageName - title
*
* @name Layout 的 title销部，也會(huì)顯示在瀏覽器標(biāo)簽上
*/
title: string | false;
