Home > Developer > Web Develop
Take a look at the following two pages:
A list of displayed articles, one that shows the details of the article, some of which are the same, and that can be reused.
All of this can be set up with three HTML files: The reuse section, the catalog section, and the article section.
Reuse section:
Base.html
1 <!DOCTYPE HTML>2 <!DOCTYPE HTML>3 <HTMLLang= "ZH-CN">4 {% load staticfiles%}5 <Head>6 <MetaCharSet= "Utf-8">7 <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge">8 <Metaname= "Viewport"content= "Width=device-width, initial-scale=1">9 <title>Home</title>Ten One <Scripttype= "Text/javascript"src= "{% static"bootstrap/js/jquery-2.0.0.min.js "%}"> </Script> A <Scripttype= "Text/javascript"src= "{% static"bootstrap/js/jquery-ui.js "%}"></Script> - <Linkhref= "{% static"bootstrap/css/bootstrap-combined.min.css "%}" rel= "stylesheet"Media= "Screen" > - <Scripttype= "Text/javascript"src= "{% static"bootstrap/js/bootstrap.min.js "%}" s></Script> the </Head> - - <Body> - <Divclass= "Container-fluid"ID= "LG"> + <Divclass= "Row-fluid"> - <imgsrc= "{% static"img/head1.png "%}" alt= "Back to Home"> + <Divclass= "Span12" > A </Div> at </Div> - - <Divclass= "Row-fluid"> - <Divclass= "Span2"> - </Div> - <Divclass= "Span6"> in <ulclass= "Nav nav-tabs"> - <Liclass= "Active"> to <ahref="#">Home</a> + </Li> - <Li> the <ahref="#">Information</a> * </Li> $ <Li>Panax Notoginseng <ahref="#">Information</a> - </Li> the </ul>+ {% block context%} to add content . {% Endbloc K Context%}</div> - <Divclass= "Span4"> $ </Div> $ </Div> - </Div> - </Body> the </HTML>
Use {% block context%} {% endblock context%} tag to add different content
Catalog section
Index.html
1 {% extends "blog/base.html"%}2 {% block context%}3 {% if latest_article_list%}4 <ul>5 {% for article in latest_article_list%}6 <Li>7 <ahref= "{% url ' blog:detail ' article.id%}">8{{Article.title}}</a>9 </Li>Ten {% endfor%} One </ul> A {% Else%} - <P>No articles is available.</P> - {% endif%} the{% Endblock context%}
Using {% extends "blog/base.html"%} to load the template file, the location of the template file is the path relative to templates.
Article section:
Detail.html
1 {% extends "blog/base.html"%} 2 {% block context%}3 < H1 > {{Article.title}} </ H1 > 4 < P > {{Article.content}} </ P > 5 {% Endblock context%}Django Document Address: http://python.usyiyi.cn/django_182/ref/templates/language.html
Django uses HTML templates to reduce code
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
