django使用html模板减少代码代码解析
看下面两个页面:
一个显示文章列表,一个显示文章详细信息,其中的部分内容相同,有可以重用的部分。
所有就此例可以设置三个html文件:重用部分,目录部分,文章部分。
重用部分:
base.html
<!DOCTYPE html> <!DOCTYPE html> <html lang="zh-CN"> {% load staticfiles %} <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>首页</title> <script type="text/javascript" src="{% static "bootstrap/js/jquery-2.0.0.min.js" %}"> </script> <script type="text/javascript" src="{% static "bootstrap/js/jquery-ui.js" %}"></script> <link href="{% static " rel="external nofollow" bootstrap/css/bootstrap-combined.min.css" %}" rel="stylesheet" media="screen" > <script type="text/javascript" src="{% static "bootstrap/js/bootstrap.min.js" %}"s></script> </head> <body> <div class="container-fluid" id="LG"> <div class="row-fluid"> <img src="{% static "img/head1.png" %}" alt="返回主页"> <div class="span12" > </div> </div> <div class="row-fluid"> <div class="span2"> </div> <div class="span6"> <ul class="nav nav-tabs"> <li class="active"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a> </li> <li> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >资料</a> </li> <li > <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >信息</a> </li> </ul> {% block context %} 添加内容 {% endblock context %} </div> <div class="span4"> </div> </div> </div> </body> </html>
使用{%blockcontext%}{%endblockcontext%}标签,添加不同内容
目录部分
index.html
{% extends "blog/base.html" %} {% block context %} {% if latest_article_list %} <ul> {% for article in latest_article_list %} <li> <a href="{% url 'blog:detail' article.id %}" rel="external nofollow" > {{ article.title }} </a> </li> {% endfor %} </ul> {% else %} <p>No articles are available.</p> {% endif %} {% endblock context %}
使用{%extends"blog/base.html"%}载入模板文件,模板文件的位置为相对于templates的路径。
文章部分:
detail.html
{% extends "blog/base.html" %} {% block context %} <h1>{{ article.title }}</h1> <p>{{ article.content }}</p> {% endblock context %}
django文档地址:http://python.usyiyi.cn/django_182/ref/templates/language.html
总结
以上就是本文关于django使用html模板减少代码代码解析的全部内容,希望对大家有所帮助。感兴趣的朋友可以继续参阅本站:
如有不足之处,欢迎留言指出。感谢朋友们对本站的支持!
相关文章
Python 实现判断图片格式并转换,将转换的图像存到生成的文件夹中
今天小编就为大家分享一篇Python判断图片格式并转换,将转换的图像存到生成的文件夹中,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-01-01python+excel接口自动化获取token并作为请求参数进行传参操作
这篇文章主要介绍了python+excel接口自动化获取token并作为请求参数进行传参操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11Python数据可视化plt.savefig如何将图片存入固定路径
这篇文章主要介绍了Python数据可视化plt.savefig如何将图片存入固定路径问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-09-09
最新评论