有使用 nunjucks 模板的朋友吗,请教个问题

2020-09-26 20:48:28 +08:00
 ob

我建了几个 html 文件,布局如下: base.html

<!DOCTYPE html>
<html lang="en">
<head>
    //头部内容
</head>
<body>
{% block header %}
<header>
    //导航内容
</header>
{% endblock %}

<main role="main">
{% block main %}
{% endblock %}
</main>

<script src="jquery-3.4.1.min.js"></script>

{% block script %}
{% endblock %}
<script type="text/javascript">cnzz 统计代码</script>
</body>
</html>

test.html

{% include "base.html" %}

{% block main %}
<div class="test">
    //test 页面内容
</div>
{% endblock %}

这样生成的页面,查看右键源代码结果是这样的:

<!DOCTYPE html>
<html lang="en">
<head>
    //头部内容
</head>
<body>
<header>
    //导航内容
</header>

<main role="main">
//这里面是空白
</main>

<script src="jquery-3.4.1.min.js"></script>

<script type="text/javascript">cnzz 统计代码</script>
</body>
</html>


<div class="test">
    //test 内容
</div>

上面只是示例代码
问题来了,test.html include base.html,然后用 block main 覆盖 base 的 main,查看右键源码的时候,他是在底部又生成了一份<div>,而且是在</html>外面,不是覆盖 base 的 main 位置,感觉很奇怪,虽然浏览器页面渲染显示也正常,没啥影响,有谁知道这种情况的吗?是否属于正常结果,还是我的使用方式不对?看官方文档说是覆盖的。

另外一个问题,用这种方式引入的 cnzz 统计代码,好像统计不到访问数据,日志打印一堆请求 ip,cnzz 统计出来的 ip 只有 1 个或 0 个的(可能是本地测试的才统计到),完全对不上,我 cnzz 加了 display: none,不显示小图标,按理不影响统计吧?

860 次点击
所在节点    程序员
4 条回复
hoyixi
2020-09-26 20:54:57 +08:00
{% include "base.html" %}

=======
是 include, 还是 extends ? 我咋记得是 extends ?自己去看看文档
ob
2020-09-26 21:00:34 +08:00
@hoyixi 非常感谢,问题解决,用了 extends 确实覆盖在原来的 main 位置,好神奇,两个用法,竟然都能正常显示,看来我一直用错了。。
hoyixi
2020-09-26 21:03:22 +08:00
看你昵称,还以为你写过 PHP,写顺手了 :)
ob
2020-09-26 21:06:42 +08:00
@hoyixi 没有,前端渣,很少写界面的东西。。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/710724

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX