html模板继承,模板继承

Jinja 中最强大的部分就是模板继承。模板继承允许你构建一个包含你站点共同元素的基 本模板“骨架”,并定义子模板可以覆盖的 块 。

听起来复杂,实际上很简单。从例子上手是最易于理解的。

基本模板

这个模板,我们会把它叫做 base.html ,定义了一个简单的 HTML 骨架文档,你可 能使用一个简单的两栏页面。用内容填充空的块是子模板的工作:

{% block head %}

{% block title %}{% endblock %} - My Webpage

{% endblock %}

{% block content %}{% endblock %}

在本例中, {% block %} 标签定义了四个字幕版可以填充的块。所有的 block 标签 告诉模板引擎子模板可以覆盖模板中的这些部分。

子模板

一个子模板看起来是这样:

{% extends "base.html" %}

{% block title %}Index{% endblock %}

{% block head %}

{{ super() }}

.important { color: #336699; }

{% endblock %}

{% block content %}

Index

Welcome on my awesome homepage.

{% endblock %}

{% extend %} 标签是这里的关键。它告诉模板引擎这个模板“继承”另一个模板。 当模板系统对这个模板求值时,首先定位父模板。 extends 标签应该是模板中的第一个 标签。它前面的所有东西都会按照普通情况打印出来,而且可能会导致一些困惑。更多 该行为的细节以及如何利用它,见 Null-Master 退回 。

模板的文件名依赖于模板加载器。例如 FileSystemLoader 允许你用文件名访 问其它模板。你可以使用斜线访问子目录中的模板:

{% extends "layout/default.html" %}

这种行为也可能依赖于应用内嵌的 Jinja 。注意子模板没有定义 footer 块,会 使用父模板中的值。

你不能在同一个模板中定义多个同名的 {% block %} 标签。因为块标签以两种 方向工作,所以存在这种限制。即一个块标签不仅提供一个可以填充的部分,也在父级 定义填充的内容。如果同一个模板中有两个同名的 {% blok %} 标签,父模板 无法获知要使用哪一个块的内容。

如果你想要多次打印一个块,无论如何你可以使用特殊的 self 变量并调用与块同名 的函数:

{% block title %}{% endblock %}

{{ self.title() }}

{% block body %}{% endblock %}

Super 块

可以调用 super 来渲染父级块的内容。这会返回父级块的结果:

{% block sidebar %}

Table Of Contents

...

{{ super() }}

{% endblock %}

命名块结束标签

Jinja2 允许你在块的结束标签中加入的名称来改善可读性:

{% block sidebar %}

{% block inner_sidebar %}

...

{% endblock inner_sidebar %}

{% endblock sidebar %}

无论如何, endblock 后面的名称一定与块名匹配。

嵌套块和作用域

嵌套块可以胜任更复杂的布局。而默认的块不允许访问块外作用域中的变量:

{% for item in seq %}

{% block loop_item %}{{ item }}{% endblock %}

{% endfor %}

这个例子会输出空的  项,因为 item 在块中是不可用的。其原因是,如果 块被子模板替换,变量在其块中可能是未定义的或未被传递到上下文。

从 Jinja 2.2 开始,你可以显式地指定在块中可用的变量,只需在块声明中添加 scoped 修饰,就把块设定到作用域中:

{% for item in seq %}

{% block loop_item scoped %}{{ item }}{% endblock %}

{% endfor %}

当覆盖一个块时,不需要提供 scoped 修饰。

模板对象

Changed in version 2.4.

当一个模板对象被传递到模板上下文,你也可以从那个对象继承。假设调用 代码传递layout_template 布局模板到环境,这段代码会工作:

{% extends layout_template %}

之前 layout_template 变量一定是布局模板文件名的字符串才能工作。

### 如何在 HTML 和 CSS 中实现图片的水平垂直居中 为了使一张图片在网页上既水平又垂直居中,可以通过多种 CSS 技巧来完成这一目标。以下是几种常见的方法及其具体实现。 #### 方法一:使用 Flexbox 布局 Flexbox 是一种强大的布局工具,能够轻松实现子元素相对于父容器的水平和垂直居中效果。通过设置 `display: flex` 并结合 `align-items` 和 `justify-content` 属性即可达成目的。 ```css .container { display: flex; align-items: center; /* 垂直居中 */ justify-content: center; /* 水平居中 */ height: 100vh; /* 设置高度为视口高度 */ } .image { max-width: 100%; } ``` 这种方法简单直观,适用于现代浏览器环境[^3]。 --- #### 方法二:利用 Grid 布局 CSS Grid 提供了一种更灵活的方式来定义二维空间内的布局结构。借助 `place-items` 或单独指定 `align-items` 和 `justify-items` 可以快速让图片位于中心位置。 ```css .container { display: grid; place-items: center; /* 同时控制水平和垂直方向上的对齐方式 */ height: 100vh; } .image { max-width: 100%; } ``` Grid 的优势在于它不仅支持单列或多列设计,还允许开发者更加精细地调整网格单元格之间的间距和其他样式属性。 --- #### 方法三:基于绝对定位与 Transform 属性 当不希望引入新的布局模式时,传统的绝对定位加 transform 能够很好地解决问题。此方案兼容性较好,在大多数场景下表现稳定可靠。 ```css .container { position: relative; height: 100vh; } .image { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* 将自身尺寸的一半作为偏移量 */ max-width: 100%; } ``` 上述代码片段展示了如何通过计算百分比位移并应用变换函数达到精确居中的效果。 --- #### 方法四:表格模型模拟法 如果项目需求不允许采用最新的标准特性,则可以考虑退回到早期版本的技术——即把整个区域当作一个虚拟表单项处理: ```css .container { display: table-cell; text-align: center; /* 控制横向排列 */ vertical-align: middle; /* 处理纵向分布 */ height: 100vh; } .image { max-width: 100%; } ``` 尽管这种做法较为古老,但在某些特定条件下仍然具有一定的实用价值[^2]。 --- #### 总结 以上列举了几种主流途径帮助解决图片在页面内同时满足水平及垂直方向上的居中展示问题。每种策略都有各自的适用范围和技术特点,实际操作过程中应根据具体情况选择最适合的方式加以运用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值