1.0.2 • Published 4 years ago
plugin-gff-thymeleaf-html v1.0.2
用途
用途, 用于 gff 的 thymeamf 模板渲染。
npm start时候, 会被渲染成为 html, npm run build时候会被把 thymleaf 模板做预处理, 保持模板输出。
使用方式
本地安装 tnpm i @ali/plugin-gff-thymeleaf-html -D 然后再 build.json 中添加配置
"plugins": [
....
'@ali/plugin-gff-thymeleaf-html',
....
],也可以增加参数
[
"@ali/plugin-gff-thymeleaf-html",
{
"data": "index.json",
"filename": "indexV2.html",
},
],| 参数名 | 作用 | 类型 | 默认值 | 备注 | |
|---|---|---|---|---|---|
| data | 用于 thymleaf 模板渲染的数据 json 地址 | string | "" | 默认使用 npm 包内置的 tempate/data.json | |
| filename | 构建后的文件名, | string | "index.html" | 只在 npm run build 时候生效 |
基础扩展
@ali/plugin-gff-thymeleaf-html 内置扩展点,可以方便进行扩展。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 其他代码 -->
<!-- gff-thymleaf:head -->
</head>
<body>
<!-- gff-thymleaf:bodyBefore -->
<!-- 其他代码 -->
<!-- gff-thymleaf:bodyAfter -->
</body>
</html>例如想要在 html头部插入额外HTML 代码片段, 可以在根目录编写一个 head.html。
<script>
// head.html文件内容
console.log('head inject');
</script>并这增加配置
[
"@ali/plugin-gff-thymeleaf-html",
{
// 其他配置....
"fragments": {
"head": "head.html"
}
},
],那么原模板会被渲染为
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 其他代码 -->
<script>
// head.html文件内容
console.log('head inject');
</script>
</head>
<body>
<!-- gff-thymleaf:bodyBefore -->
<!-- 其他代码 -->
<!-- gff-thymleaf:bodyAfter -->
</body>
</html>| 参数名 | 作用 | 类型 | 默认值 | 备注 |
|---|---|---|---|---|
| fragments | 扩展点配置 | Map<string, string> | {} | 目前支持的key为head / bodyBefore / bodyAfter |
高级扩展
如果想要彻底定制模板, 可以自行写一个模板 foo-bar.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!-- balabalabla -->
</head>
<body>
<!-- balabalabla -->
</body>
</html>并修改配置项 template, 即可使用。
[
"@ali/plugin-gff-thymeleaf-html",
{
// 其他配置....
"template": "foo-bar.html"
},
],| 参数名 | 作用 | 类型 | 默认值 | 备注 |
|---|---|---|---|---|
| template | 模板地址 | string | "" | 默认使用包内置的 tempate/index.thymleaf.html |