跳转到主文档

自定义 HTML 模板

默认情况下,Modern.js 会内置一份 HTML 模板。应用开发中,可以通过代码片段来自定义模板内容。

自定义 HTML 片段

在应用根目录下,创建 config/html/ 目录,该目录下支持创建四种 HTML 片段。

  • top.(html|ejs)
  • head.(html|ejs)
  • body.(html|ejs)
  • bottom.(html|ejs)

这些片段将按位置注入到默认的 HTML 模板中。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello modern.js</title>
<%= topTemplate %>
<script>
// polyfill
</script>
<script>
// slardar
</script>
<%= headTemplate %>
<!-- webpack inject css -->
</head>
<body>
<div id="root"></div>
<%= bodyTemplate %>
<!-- webpack inject js -->
<!--<?- bottomTemplate ?>-->
</body>
</html>

代码片段支持 EJS 语法(默认使用 Lodash template 语法)。

例如,新增 head.ejs 文件,并添加一个自定义标签:

config/html/head.ejs
<% if (process.env.NODE_ENV === 'production') { %>
<meta name='env' content="production">
<% } else { %>
<meta name='env' content="development">
<% } %>

或在 Body 里插入一个外链脚本:

config/html/body.html
<script src="//example.com/assets/a.js"></script>

按入口设置

config/html/ 目录中的 HTML 片段对应用中的所有入口都生效。如果希望按入口自定义 HTML 片段,可以在 config/html/ 目录下新建一个以入口名命名的目录,然后在这个目录中自定义 HTML 片段。

例如,如下设置的 HTML 片段仅对入口 entry1 生效:

.
├── config/
│ └── html/
│ └── entry1
│ ├── head.html
│ └── body.html
└── src/
├── entry1/
│ └── App.jsx
└── entry2/
└── App.jsx

完全自定义 HTML 模板

某些情况下,HTML 片段无法满足自定义需求,Modern.js 提供了完全自定义方式。

注意

通常不建议直接覆盖默认的 HTML 模板,可能会失去一部分功能选项。即使需要替换,建议以内置模板为基础,按需修改。

配置方式

config/html/ 目录下,创建 index.(html|ejs) 文件。

该文件将替代默认的 HTML 模板。

内部默认 HTML 模板可以在 node_modules/.modern-js/${entryName}/index.html 中查看。

如果仅需要为单一入口设置 HTML 模板,需要将 index.(html|ejs) 文件,放置到 config/html/ 目录下以入口名命名的目录中。

例如,如下设置的 HTML 模板 index.html 仅对入口 entry1 生效:

.
├── config/
│ └── html/
│ └── entry1
│ └── index.html
└── src/
├── entry1/
│ └── App.jsx
└── entry2/
└── App.jsx