thinkjs 模板

最新推荐文章于 2024-05-10 09:48:17 发布

秦璐璐

最新推荐文章于 2024-05-10 09:48:17 发布

阅读量281

点赞数

分类专栏：知识文章标签： think

本文链接：https://blog.csdn.net/qinlulucsdn/article/details/103679785

版权

知识专栏收录该内容

139 篇文章 1 订阅

订阅专栏

进阶模板 nunjucks

模板的使用

定义
继承
引用

效果

代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>New ThinkJS Application</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      font-size: 16px;
      font-family: arial;
    }

    header {
      padding: 70px 0 70px 0;
      background-color: #4A6495
    }

    h1 {
      font-size: 36px;
      color: #fff;
      font-weight: normal;
      text-align: center;
    }
  </style>
</head>

<body>
  <header>
    <h1>A New App Created By ThinkJS AP</h1>
  </header>
  <div class="content">
    {{controller.name}}
  </div>
  <!-- 引入模板 -->
  {% include "./Footer.html" %}
</body>
<!-- 引入js -->
<script src="/static/js/index.js"></script>
</html>

文件目录

footerTel.html 定义模板

<div class="Footer">
{% block footer1 %}<div class="as">首页</div>{% endblock %}
{% block footer2 %}<div class="as">展示</div>{% endblock %}
{% block footer3 %}<div class="as">我的</div>{% endblock %}
</div>

Footer.html 继承模板 extends

{% extends "./footerTel.html" %}
{% block footer2 %}<div class="as">@展示@</div>{% endblock %}

index.html 引用模板 include

<!-- 引入模板 -->
{% include "./Footer.html" %}

在继承的同时可以修改父级的数据以实现不同的效果

秦璐璐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
thinkjs 模板

进阶模板nunjucks模板的使用定义继承引用效果代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init...
复制链接

扫一扫