Flask学习笔记之render_template

Flask 学着用模板 render_template

参考:https://blog.csdn.net/yy19890521/article/details/81034765

模板的位置放在templates文件夹下面,一般是html文件,我们把index.html改动成如下样式

<html>
  <head>
    <title>{{title}} - microblog</title>
  </head>
  <body>
      <h1>Hello, {{user.nickname}}!</h1>
  </body>
</html>

其中: {{}}表示这是一个变量,可以根据用户在模块端给予的参数的不同,进行调整

下面的程序就是调用了 render_template模板

from flask importrender_template
from app importapp

@app.route('/')
@app.route('/index')
def index():
    user = {'nickname': 'Miguel'} # fake user
    return render_template("index.html",
        title = 'Home',
        user = user)     #这里模块里的第一个user指的是html里面的变量user,而第二个user指的是函数index里面的变量user

说白了,其实render_template的功能是对先引入index.html,同时根据后面传入的参数,对html进行修改渲染。

然后,render_template模板其实也是接受控制语句的,修改后的index.html如下:

<html>
  <head>
    {% if title %}                                    #{% %}这样代表控制语句,意思是如果有传入title变量,则显示title-microblog
    <title>{{title}} - microblog</title>      
    {% else %}
    <title>Welcome to microblog</title>  #如果没有传入参数,则显示welcome to microblog
    {% endif %}                                      #这里大不同!!HTML里面的逻辑语句,需要用{% endif %} 来结束逻辑语句
  </head>
  <body>
      <h1>Hello, {{user.nickname}}!</h1> 
  </body>
</html>

我们再来看一个循环语句的修改版的views.py和index.html

def index():
    user = {'nickname': 'Miguel'} # fake user
    posts = [# fake array of posts
        {
            'author': { 'nickname': 'John' },
            'body': 'Beautiful day in Portland!'
        },
        {
            'author': { 'nickname': 'Susan' },
            'body': 'The Avengers movie was so cool!'
        }
    ]
    return render_template("index.html",
        title = 'Home',
        user = user,
        posts = posts)

<html>
  <head>
    {% if title %}
    <title>{{title}} - microblog</title>
    {% else %}
    <title>microblog</title>
    {% endif %}
  </head>
  <body>
    <h1>Hi, {{user.nickname}}!</h1>
    {% for post in posts %}
    <p>{{post.author.nickname}} says: <b>{{post.body}}</b></p>
    {% endfor %}
  </body>
</html>

注意,这里的访问都是用点来继承的,比如post.author.nickname

最后,如果说在以后的开发中,模板变得非常多,但是每个模板中,都有固定项目是不能变的,那如何操作呢....

比如一个页面顶端有按钮,在其他页面中也有,那不可能每个页面中都写吧

于是,我们就把一样的部分,都放在了base.html这个基本模板中,通过{% block content %}这个接口,来和base.html来做链接

通过实例来体会一下这种做法:

<!DOCTYPE>

<html lang="en">

<head>

<title>The current time</title>

</head>

<body>

<h1>My helpful timestampsite</h1>

<p>It is now {{ current_date}}.</p>

<hr>

<p>Thanks for visiting mysite.</p>

</body>

</html>

<!DOCTYPE>

<html lang="en">

<head>

<title>Future time</title>

</head>

<body>

<h1>My helpful timestampsite</h1>

<p>In {{ hour_offset }} hour(s), itwill be {{ next_time }}.</p>

<hr>

<p>Thanks for visiting mysite.</p>

</body>

</html>

很明显,我们刚才重复了大量的 HTML 代码。想象一下,如果有一个更典型的网站,它有导航条、样式表,可能还有一些 JavaScript 代码,事情必将以向每个模板填充各种冗余的 HTML 而告终。

模板继承系统解决了这些问题

第一步是定义基础模板,该框架之后将由子模板所继承。以下是我们目前所讲述范例的基础模板:

<!DOCTYPE>

<html lang="en">

<head>

<title>{% block title %}{% endblock%}</title>

</head>

<body>

<h1>My helpful timestampsite</h1>

{% block content %}{% endblock %}

{% block footer %}

<hr>

<p>Thanks for visiting mysite.</p>

{% endblock %}

</body>

</html>

这个叫做  base.html 的模板定义了一个简单的HTML 框架文档。子模板的作用就是重载、添加或保留那些块的内容。我们使用一个以前已经见过的模板标签:  {% block %} 。 所有的  {% block %} 标签告诉模板引擎,子模板可以重载这些部分。 每个 {% block%} 标签所要做的是告诉模板引擎,该模板下的这一块内容将有可能被子模板覆盖。

现在我们已经有了一个基本模板,我们可以修改  current_datetime.html 模板来 使用它:

{% extends "base.html" %}

{% block title %}The current time{%endblock %}

{% block content %}

<p>It is now {{ current_date}}.</p>

{% endblock %}

再为  hours_ahead 视图创建一个模板,看起来是这样的:

{% extends "base.html" %}     #通过这句话,来进行继承挂钩,和主体base.html进行链接

{% block title %}Future time{% endblock %}

{% block content %}

<p>In {{ hour_offset }} hour(s), itwill be {{ next_time }}.</p>

{% endblock %}

每个模板只包含对自己而言独一无二的代码。无需多余的部分。如果想进行站点级的设计修改,仅需修改  base.html ,所有其它模板会立即反映出所作修改。以下是其工作方式。 在加载  current_datetime.html 模板时,模板引擎发现了  {% extends %} 标签, 注意到该

模板是一个子模板。模板引擎立即装载其父模板,即本例中的base.html。此时,模板引擎注意到  base.html 中的三个  {% block %} 标签,并用子模板的内容替换这些 block。因此,引擎将会使用我们在  { block title %} 中定义的标题,对  {% block content %} 也是如此。 所以,网页标题一块将由  {% block title %} 替换,同样地,网页的内容一块将由  {% block content %} 替换。注意由于子模板并没有定义  footer 块,模板系统将使用在父模板中定义的值。 父模板  {% block %} 标签中的内容总是被当作一条退路。继承并不会影响到模板的上下文。 换句话说,任何处在继承树上的模板都可以访问到你传到模板中的每一个模板变量。你可以根据需要使用任意多的继承次数。

使用继承的一种常见方式是下面的三层法:

1.  创建  base.html 模板,在其中定义站点的主要外观感受。 这些都是不常修改甚至从不修改的部分。

2.  为网站的每个区域创建  base_SECTION.html 模板(例如,  base_photos.html 和  base_forum.html )。这些模板对  base.html 进行拓展,并包含区域特定的风格与设计。

3.  为每种类型的页面创建独立的模板,例如论坛页面或者图片库。 这些模板拓展相应的区域模板。

这个方法可最大限度地重用代码,并使得向公共区域(如区域级的导航)添加内容成为一件轻松的工作。

以下是使用模板继承的一些诀窍:

如果在模板中使用  {% extends %} ,必须保证其为模板中的第一个模板标记。 否则,模板继承将不起作用。

一般来说,基础模板中的  {% block %} 标签越多越好。 记住,子模板不必定义父模板中所有的代码块,因此你可以用合理的缺省值对一些代码块进行填充,然后只对子模板所需的代码块进行(重)定义。

如果发觉自己在多个模板之间拷贝代码,你应该考虑将该代码段放置到父模板的某个  {% block %} 中。

如果你需要访问父模板中的块的内容,使用  {{ block.super }} 这个标签吧,这一个魔法变量将会表现出父模板中的内容。 如果只想在上级代码块基础上添加内容,而不是全部重载,该变量就显得非常有用了。

不允许在同一个模板中定义多个同名的  {% block %} 。 存在这样的限制是因为block 标签的工作方式是双向的。 也就是说,block 标签不仅挖了一个要填的坑,也定义了在 父 模板中这个坑所填充的内容。如果模板中出现了两个相同名称的  {% block %} 标签,父模板将无从得知要使用哪个块的内容。

{% extends %} 对所传入模板名称使用的加载方法和  get_template() 相同。 也就是说,会将模板名称被添加到  TEMPLATE_DIRS 设置之后。

多数情况下,  {% extends %} 的参数应该是字符串,但是如果直到运行时方能确定父模板名,这个参数也可以是个变量。这使得你能够实现一些很酷的动态功能。

发布了127 篇原创文章 · 获赞 10 · 访问量 24万+

猜你喜欢

转载自blog.csdn.net/u012599545/article/details/104353251
今日推荐