Nodejs学习八（art-templat中的include-extent-block语法）_node的.art文件的block是什么-优快云博客

本文链接：https://blog.youkuaiyun.com/Wu_JingYi0829/article/details/123470933

这个模板语法作用类似于slot插槽

1、在layout.html页面中写好公共模板

应用 {{block '模板名称'}}（默认内容）{{/block}}

（默认内容）是指：自页面中若有内容进行替代将会代替默认内容，若无则显示的是默认内容。
应用 {{include '文件地址'}}

将该文件的内容引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
    <script src="../node_modules/jquery/dist/jquery.js"></script>
    <script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>
    {{block 'style'}}
    <!-- 填充孩子们的自己的样式等 -->
    {{/block}}
    {{block 'script'}}
    <!-- 填充孩子们的自己的脚本等 -->
    {{/block}}
</head>

<body>
    {{include './Header.html'}}

    {{block 'content'}}
    <h1>默认内容</h1>
    {{/block}}

    {{include './Footer.html'}}

</body>
</html>

2、在Header.html,Footer.html中写入代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    公共的首部/底部
</body>
</html>

3、在index.html页面中使用

应用{{extend '公共文件地址'}}

引入layout公共页面，这样 layout中的头部信息、js、公共的头部和底部就可以统一使用了
应用 {{block '模板名称'}}该页面自己的脚本{{/block}}

{{extend './layout.html'}}


{{block 'style'}}
<style>
    body{
        background-color: aqua;
    }
</style>
{{/block}}

{{block 'content'}}
<h1>这里是index页面的填坑内容 不再是默认内容</h1>

{{/block}}



{{block 'script'}}
<script>
    window.alert("这个是index页面自己的js脚本")
</script>
{{/block}}