plugin-gff-thymeleaf-html

build-scripts plugin template for developers

Usage no npm install needed!

<script type="module">
  import pluginGffThymeleafHtml from 'https://cdn.skypack.dev/plugin-gff-thymeleaf-html';
</script>

README

用途

用途, 用于 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"

基础扩展

@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