最近在使用UMI进行项目的构建,由于项目需要多个页面,每个页面都需要有特定的HTML模板。
根据 UMI 官方文档:
修改默认模板
新建src/pages/document.ejs
,umi 约定如果这个文件存在,会作为默认模板,比如:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Your App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
配置模板
模板里可通过 context
来获取到 umi 提供的变量,context
包含:
-
route
,路由信息,需要打包出多个静态HTML
时(即配置了exportStatic
时)有效 -
config
,用户配置信息
比如:
<link rel="icon" type="image/x-icon" href="<%= context.config.publicPath %>favicon.png" />
关于针对特定页面指定模板
-
网上的解决方法1:
通过配置路由的document
属性,指定路由特定的document
。
routes: [
{ exact: true, path: '/a', component: '@/pages/a/index.tsx', title: 'a', document: './src/pages/a.ejs' },
{ exact: true, path: '/b', component: '@/pages/b/index.tsx', title: 'b', document: './src/pages/b.ejs' },
],
此功能需开启 exportStatic
配置,否则只会输出一个HTML
文件。
查阅UMI3.x路由文档,routes
并不存在document
属性,此方法无效。
-
网上解决方法2:
约定式路由可通过注释扩展 document
属性,路径从项目根目录开始找
/**
* document: ./src/documents/404.ejs
*/
这个路由就会以 ./src/documents/404.ejs
为模板输出 HTML。
查阅UMI3.x约定式路由文档,并未找到此方法,同时也尝试过,此方法无效。
-
最后解决方法3:
维持一个document.ejs
,在此模板的基础上,使用context
进行模板区分
<% if(context.route.path==='/a') { %>
<h2>a模板</h2>
<% } else {%>
<h2>b模板</h2>
<% } %>
通过context.route.patch
获取到当前路由,再使用if-else
语句判断
注意:使用这方法需要exportStatic: { htmlSuffix: false }
,只输出一个html,访问的路由变成/a.html
变成/a