plugin-gff-thymeleaf-html

build-scripts plugin template for developers

latest

npm

Version: 1.0.2

Version published: 4 years ago

Maintainers: 1

Created: 4 years ago

Source

用途

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

FAQs

What is plugin-gff-thymeleaf-html?

Is plugin-gff-thymeleaf-html well maintained?

Package last updated on 25 Oct 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install