build-scripts plugin template for developers
npm install @aligov/plugin-gff-thymeleaf-html用途, 用于 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 时候生效 |
内置扩展点,可以方便进行扩展。`
`例如想要在 html头部插入额外HTML 代码片段, 可以在根目录编写一个 head.html。
`
`并这增加配置
`
[
"@ali/plugin-gff-thymeleaf-html",
{
// 其他配置.... "fragments": {
"head": "head.html"
}
},
],
`那么原模板会被渲染为
`
`| 参数名 | 作用 | 类型 | 默认值 | 备注 |
| -------- | ------------------------------------------- | ------ | ------------ | --------------------------------------- |
| fragments | 扩展点配置 | Map | {} | 目前支持的key为head / bodyBefore / bodyAfter |
高级扩展
如果想要彻底定制模板, 可以自行写一个模板 foo-bar.html
`
`并修改配置项
template, 即可使用。
`
[
"@ali/plugin-gff-thymeleaf-html",
{
// 其他配置.... "template": "foo-bar.html"
},
],
``
| 参数名 | 作用 | 类型 | 默认值 | 备注 |
| -------- | ------------------------------------------- | ------ | ------------ | --------------------------------------- |
| template | 模板地址 | string | "" | 默认使用包内置的 tempate/index.thymleaf.html |