模板知一二

  1. 模板引擎是什么?答:一个可以让我们在html中使用特殊语法来标记处变量的引擎。
  2. 模板是什么?答:借助于模板引擎的,包含固定内容和动态部分的可重用文件称为模板。
  3. 渲染是什么意思呢?答:模板引擎读取特殊语法标记,并根据传入的数据替换变量,得到最终的HTML文件的过程。
  4. Jinja2里常见的3种界定符:
  • 语句: {% if判断,for循环%}
    if与end if配合使用,for与end for配合使用
  • 表达式: {{ 字符串,变量,函数调用 }}
  • 注释: {# #}
  1. Jinja2支持通过点来获取变量的属性,user.name等同于user[‘name’]
  2. Jinja2 for循环中有一些特殊的变量可供使用:
    在这里插入图片描述
  3. 在视图函数中渲染模板时,使用Flask提供的渲染函数render_template()

可以在参数部分传入函数对象,然后在模板中通过添加括号调用。
可以在模板中通过set定义变量或者通过end和endset将一部分标签定义为变量
在这里插入图片描述
在这里插入图片描述

  1. 模板中可用的全局变量有:
    在这里插入图片描述
  2. 如何设置一个模板全局变量呢?
  • 使用app.context_processor装饰器注册一个函数,这个函数返回一个包含变量键值对的字典。
  • 当调用render_template()渲染任意一个模板时,所有被app.context_processor装饰器注册的函数都会被执行。
  • 使用app.context_processor(函数名)的方式
  • 使用匿名函数app.context_processor(lambda: dict(name=123))
  1. 在模板中可以使用哪些全局函数?
  • Jinja2内置的
    在这里插入图片描述
  • Flask内置的
    在这里插入图片描述
  1. 如何注册自定义的全局函数?
  • 使用app.template_global装饰器可以将函数注册为模板全局函数,默认名为函数名,可通过name参数指定。
  • 使用app.add_template_global(函数名)
  1. 过滤器是什么?答:修改和过滤变量值的特殊函数,用管道符 号 | 隔开。

过滤器也可以作用于一部分模板数据,用filter和endfilter来声明
在这里插入图片描述

  1. Jinja2提供的内置过滤器有哪些?
    在这里插入图片描述
    在这里插入图片描述

  2. 根据Flask的设置,Jinja2会自动对模板中的变量进行转义, 所以不用手动使用escape过滤器或调用escape()函数

  3. 如何将文本标记为安全而不转义?

  • 使用safe过滤器
  • 在渲染前将变量转化为Markup对象
  1. 如何自定义过滤器?
  • 使用app.template_filter装饰器可以将函数注册为模板全局函数,默认名为函数名,可通过name参数指定。
  • 使用app.add_template_filter(函数名)
  • 过滤器函数接收变量为参数并返回加工后的数据
  1. 测试器是什么?答:用来测试变量或表达式,返回布尔值的特殊函数。
  2. Jinja2内置的测试器有哪些?
    在这里插入图片描述
  3. 如何自定义测试器?
  • 使用app.template_test装饰器可以将函数注册为模板全局函数,默认名为函数名,可通过name参数指定。
  • 使用app.add_template_test(函数名)
  • 过滤器函数接收变量为参数并返回布尔值
  1. 如何更改Jinja2的设置? 答:可以通过app.jinja_env来修改,其创建的Environment对象存储了所有的配置选项,上下文变量,全局函数,过滤器和测试器。
  2. 如何通过修改Jinja2配置的方式添加自定义的全局对象,过滤器和测试器?
  • 全局对象:app.jinja_env.globals[‘bar’] = bar # bar为函数名
  • 过滤器:app.jinja_env.filters[‘bar’] = bar
  • 测试器:app.jinja_env.tests[‘bar’] = bar
  1. 局部模板是什么呢?将各个模板中共用的html代码抽离出来,定义成一个html文件,通常以下划线开头

引入方法 : {% include ‘_a.html’%}

  1. 宏(macro)是什么呢?答:可以理解为函数,定义了宏以后,在需要使用的模板中引入。
  2. 怎么定义一个宏呢?
    使用macro和endmacro
    在这里插入图片描述
  3. 怎么导入和使用宏呢?
    在这里插入图片描述
  4. include的局部模板默认可以访问当前模板中的上下文
    import的宏默认不可以访问当前模板中的上下文

方案:通过with context进行包含
在这里插入图片描述

  1. 如何实现模板继承?
  • 在基模板中通过block和endblock定义块
    在这里插入图片描述
  • 在子模板中继承和覆盖特定块,entends必须是子模板的第一个标签
    在这里插入图片描述
  • 通过super向基模板中的块增内容
    在这里插入图片描述
  1. 渲染出来的HTML文件各行之间有空格,如何去除?
  • 在边界符前后增加-
    在这里插入图片描述
  • 改动jinja_env配置
    在这里插入图片描述

trim_blocks用来删除Jinja2语句后的第一个空行
lstrip_blocks用于删除所在行之前的空格和制表符
宏内的空白控制行为不受这两个变量的控制,需要通过 - 手动设置

  1. 要改动静态文件存放的位置的话,可以在实例化Flask对象时通过static_folder参数指定。

实例化Flask对象时指定static_url_path参数,可以自定义某个静态文件的URL路径。

  1. 如何在模板中设置一个图片链接?
    在这里插入图片描述
  2. 应当为网站配置一个收藏夹头像,网站头像的图片facicon.ico,不然浏览器会自动获取,获取不到就会报错。

如何给Web项目添加Favicon呢?
答:

  • 找一个宽高相同的ico格式的文件,命名为favicon.ico,放到static目录下。
  • 在<head>部分添加一个<.link>元素,然后将rel属性设置为icon。
    在这里插入图片描述
  1. 为什么要使用CSS框架?答:CSS框架内置了大量可以直接使用的CSS样式类和JavaScript函数,类似于jQuery至于JavaScript。

比如Bootstrap,是最流行的开源前端CSS框架之一。

  • 如果不需要使用Bootstrap提供的js功能,可以不加载
  • Bootstrap依赖于jQuery和Popper.js,需单独下载
  • 引入顺序有要求:jQuery -> Popper.js -> Bootstrap
    在这里插入图片描述
  1. 如何使用宏加载静态资源呢?
  • 定义宏
    在这里插入图片描述
  • 加载本地或CDN上的资源
    在这里插入图片描述
    在这里插入图片描述
  1. 消息闪现是什么?答:通过flash()函数实现,在视图函数传入消息内容,闪现到模板中进行展现。
  • flash()函数将要发送的消息存放在session对象中
  • session依赖于密钥,所以需要设置密钥
  • 模板中通过全局函数get_flash_messages()获取消息并将其展现出来
  • 当同一个页面包含多条要闪现的消息时,使用for循环进行迭代
    在这里插入图片描述
  • 当get_flash_messages()被调用,session中存储的所有消息会被移除
  1. 当有异常发生时,如何展示自定义的错误页面?
  • 编写错误页面,如404.html
  • 通过app.errorhandler()装饰器注册错误处理函数
  • 装饰器需要以错误状态码或异常类为参数
  • 错误处理函数需要以异常类为参数
    异常类有哪些属性呢?
    在这里插入图片描述
  • 错误处理函数return时需要注明HTTP状态码
    在这里插入图片描述
  1. 如果你把Jinja2代码写到了单独了js或css文件中,如何才能使它正确执行呢?

只有使用render_template()传入的模板文件才会被渲染,也就是说单独的js文件不会被渲染

  • 使用行内/嵌入式js和css
    将js或css内容以<script>或<style>标签全部定义在当前html中而不是别的文件;忽略语法错误
  • 定义为js/css变量
  • 在HTML中,"data-*"被称为自定义数据属性,用以用它来存储自定义的数据,供js获取
    在这里插入图片描述
  • 在js中通过$element.data(‘data-username’)获取其属性值
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值