为Python的web框架编写前端模版的教程

2020-02-23 00:59:10

字体：大中小

来源：转载

供稿：网友

虽然我们跑通了一个最简单的MVC，但是页面效果肯定不会让人满意。

对于复杂的HTML前端页面来说，我们需要一套基础的CSS框架来完成页面布局和基本样式。另外，jQuery作为操作DOM的JavaScript库也必不可少。

从零开始写CSS不如直接从一个已有的功能完善的CSS框架开始。有很多CSS框架可供选择。我们这次选择uikit这个强大的CSS框架。它具备完善的响应式布局，漂亮的UI，以及丰富的HTML组件，让我们能轻松设计出美观而简洁的页面。

可以从uikit首页下载打包的资源文件。

所有的静态资源文件我们统一放到www/static目录下，并按照类别归类：

由于前端页面肯定不止首页一个页面，每个页面都有相同的页眉和页脚。如果每个页面都是独立的HTML模板，那么我们在修改页眉和页脚的时候，就需要把每个模板都改一遍，这显然是没有效率的。

常见的模板引擎已经考虑到了页面上重复的HTML部分的复用问题。有的模板通过include把页面拆成三部分：

<html>  <% include file="inc_header.html" %>  <% include file="index_body.html" %>  <% include file="inc_footer.html" %></html>

这样，相同的部分inc_header.html和inc_footer.html就可以共享。

但是include方法不利于页面整体结构的维护。jinjia2的模板还有另一种“继承”方式，实现模板的复用更简单。

“继承”模板的方式是通过编写一个“父模板”，在父模板中定义一些可替换的block（块）。然后，编写多个“子模板”，每个子模板都可以只替换父模板定义的block。比如，定义一个最简单的父模板：

<!-- base.html --><html>  <head>    <title>{% block title%} 这里定义了一个名为title的block {% endblock %}</title>  </head>  <body>    {% block content %} 这里定义了一个名为content的block {% endblock %}  </body></html>

对于子模板a.html，只需要把父模板的title和content替换掉：

{% extends 'base.html' %}{% block title %} A {% endblock %}{% block content %}<h1>Chapter A</h1><p>blablabla...</p>{% endblock %}

上一篇：在Python中使用SQLite的简单教程

下一篇：为Python程序添加图形化界面的教程

学习交流

笔记本开机提示error loading os错误的问

笔记本开机提示error loading os错误的问题怎么解决...

热门图片

猜你喜欢的新闻

猜你喜欢的关注