Django的模板语法

在开始讲django的Model层之前，先学习模版语法的基本使用。
相信很多新手小白不会HTML。看着这么长的文件看的眼睛疼。

Django的模板语法分为三大类

插值 {{ data.xxxx }}
逻辑 {% if xxx %} {% endif %}
注释 {# 我是注释 #}

目前，我们只学注释语句、逻辑中的块语法和拓展语句。属于是类jinja2语法。
它的作用是减少我们的HTML的代码量，以方便我们学习后续的内容。
观察一下我们的现在项目中的页面。
可以发现，只有有两处地方不一致（实际上三个，还有一个后续再处理）。

再观察一下我们的项目中的templates里面的文件。可以发现有很多重复的代码。
接下来，我们将把重复的部分抽离出来，做成一个模板文件，再利用块语句来实现代码优化。

块语句

html

{# block 代表的是 块 #}

{# xxx 是块名 就像是变量名 #}
{# endblock 是声明block语句结束 #}

{% block xxx  %}  {% endblock %}

拓展语句

html

{# 拓展至那一个个模板文件 #}
{# 拓展至 "base.html" #}


{% extends "base.html" %}

注释

html

<!-- html注释 -->
{# 模板语句注释 #}

它们的区别在于，模板的注释在文件渲染后不可见，而html的注释是可见的。

base.html

在项目的templates下新建一个名为base.html的文件。
写入以下的内容。

html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="/static/css/bootstrap.min.css">
  <link rel="stylesheet" href="/static/css/themes.min.css">
  <link rel="stylesheet" href="/static/css/style.css">
  <title>
    {% block page_title %}

    {% endblock %}
  </title>
</head>
<style media="screen">
  body {
    background: url(/media/bg.jpg) no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
    background-color: #CCCCCC;
  }

  a:hover {
    text-decoration: none;
  }
</style>

<body>
  <header class="bg-dark">
    <nav class="container navbar navbar-expand-lg navbar-dark">
      <a class="navbar-brand" href="/">花若盛開 蝴蝶自來</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item ">
            <a class="nav-link" href="/article/">All Post</a>
          </li>


        </ul>

      </div>
    </nav>
  </header>

  <main class="container">
    <div class="row mt-2">
      <article class="col-sm-12 col-md-8">
{% block content %}

{% endblock %}

      </article>
      <aside class="col-sm-12 col-md-4">
        <div class="card mb-4">
          <div class="card-body">
            <h5 class="card-title text-primary">About Me</h5>
            <ul class="list-group">
              <li class="list-group-item list-group-item-action">
                <p class="">Email: yusing-wong@outlook.com </p>

              </li>
              <li class="list-group-item list-group-item-action">
                <a href='https://github.com/sing-gor' target="_blank" class="">GitHub: github.com/sing-gor </a>

              </li>
              <li class="list-group-item list-group-item-action">
                <a href="http://wongyusing.com/" target="_blank" class="">Blog: wongyusing.com </a>

              </li>

            </ul>

          </div>
        </div>

        <div class="card mb-4">
          <div class="card-body ">
            <h5 class="card-title text-primary">Category</h5>
            <div class="list-group w-100">
              <a href="https://elixirschool.com/en/" target="_blank" class="list-group-item list-group-item-action ">Elixir</a>

              <a href="https://docs.python.org/3/" target="_blank" class="list-group-item list-group-item-action">Python</a>
              <a href="https://www.typescriptlang.org/docs/home.html" target="_blank" class="list-group-item list-group-item-action">TypeScript</a>
              <a href="https://www.w3schools.com/js/" target="_blank" class="list-group-item list-group-item-action">JavaScript</a>
              <a href="http://gobook.io/read/github.com/lunny/gopl-zh/" class="list-group-item list-group-item-action ">Go Lang (正在学习)</a>
              <a href="http://lrthw.github.io/" target="_blank" class="list-group-item list-group-item-action ">Ruby</a>
              <a href="https://www.w3schools.com/html/default.asp" target="_blank" class="list-group-item list-group-item-action ">HTML</a>
              <a href="https://www.w3schools.com/css/default.asp" target="_blank" class="list-group-item list-group-item-action ">CSS</a>
              <a href="https://www.w3schools.com/sql/default.asp" target="_blank" class="list-group-item list-group-item-action ">Postgresql</a>



            </div>
          </div>
        </div>
        <div class="card mb-4">
          <div class="card-body">
            <h5 class="card-title text-primary">Tag Cloud</h5>

            <a href="https://hexdocs.pm/phoenix/Phoenix.html" target="_blank" class="tag-cloud">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-Phoenix"></use>
              </svg>
            </a>
            <a href="https://www.tornadoweb.org/en/stable/" target="_blank" class="tag-cloud">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-tornado"></use>
              </svg>
            </a>
            <a href="https://docs.djangoproject.com/en/2.2/" target="_blank" class="tag-cloud">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-django"></use>
              </svg>
            </a>
            <a href="https://guides.rubyonrails.org/" target="_blank" class="tag-cloud">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-rails-plain"></use>
              </svg>
            </a>
            <a href="https://angular.io/start" target="_blank" class="tag-cloud">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-angular"></use>
              </svg>
            </a>
            <a href="https://v4.bootcss.com/docs/4.0/getting-started/introduction/" target="_blank" class="tag-cloud">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-bootstrap"></use>
              </svg>
            </a>
            <a href="http://lesscss.org" target="_blank" class="tag-cloud">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-less"></use>
              </svg>
            </a>
            <a href="https://sass-lang.com/documentation" target="_blank" class="tag-cloud">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-Sass"></use>
              </svg>
            </a>
            <a href="https://rxjs-dev.firebaseapp.com/" target="_blank" class="tag-cloud">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-rx"></use>
              </svg>
            </a>
            <a href="https://docs.nestjs.com/" target="_blank" class="tag-cloud">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-nest"></use>
              </svg>
            </a>
            <a href="https://www.rabbitmq.com/" target="_blank" class="tag-cloud">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-RabbitMQ"></use>
              </svg>
            </a>




          </div>
        </div>

      </aside>

    </div>
  </main>
  <footer class="mt-4 mb-0 pb-4">
    <div class="container">
      <p class="text-center mt-4 site-footer-data">Copyright © 2019 Sing. Powered by Django2.0 .</p>
      <p class="text-center mt-4 site-footer-data">Author: yusing-wong@outlook.com</p>
    </div>
  </footer>
  <script src="/static/js/jquery.slim.min.js"></script>
  <script src="/static/js/popper.min.js"></script>
  <script src="/static/js/bootstrap.min.js"></script>
  <script src="/static/js/iconfont.js"></script>
</body>

</html>

article_list.html

将templates下的article_list.html里面的内容替换成下面的代码。

html

{% extends "base.html" %}
  All Posts
{% block page_title %}

{% endblock %}



{% block content %}


<div class="site-posts-list mt-4">
  <h2 class="text-center">All Post</h2>

  <div class="jumbotron w-100 py-5 mx-auto">
    <h2>
      <a href="/article/1/">人来人往</a>
    </h2>
    <p class="lead">
    <p class="lead text-center"> 朋友已走 <br> 刚升职的你举杯到凌晨还未够 <br> 用尽心机拉我手 <br> 缠在我颈背后 <br> 说你男友有事忙是借口 <br> 说到终于饮醉酒 <br> …
    </p>
  </div>

  <div class="jumbotron w-100 py-5 mx-auto">
    <h2>
      <a href="/article/2/">新禅院钟声</a>
    </h2>
    <p class="lead">
    <p class="lead text-center"> 云寒雨冷寂寥夜半景色凄清 <br> 荒山悄静 依稀稳约传来了夜半钟 <br> 钟声惊破梦更难成 <br> 是谁令我愁难磬非莫磬 <br> 情如泡影鸳鸯梦三生约 <br> 何堪追认旧爱一朝断 …
    </p>
  </div>

  <div class="jumbotron w-100 py-5 mx-auto">
    <h2>
      <a href="/article/3/">挪威的森林</a>
    </h2>
    <p class="lead">
    <p class="lead text-center"> 让我将你心儿摘下 <br> 试着将它慢慢溶化 <br> 看我在你心中是否仍完美无暇 <br> 是否依然为我丝丝牵挂 <br> 依然爱我无法自拔 <br> 心中是否有我未曾到过的地方啊 <br> …
    </p>
  </div>


</div>


{% endblock %}

然后在浏览器访问http://localhost:8000/article/，看一下，页面有没有发生变化？？

没有变化就对了

虽然没有任何变化，但是我们的代码量变少了。
阅读的时候就会变得更为清爽。
接下来讲一下它原理。
大家回头看一下我们尚未改造的html文件。
仔细观察，其实只有两个地方有区别，分别是

html

{# 第10行的title标签 #}
<title>xxx</title>

{# 第51行的 article 标签 #}
<article class="col-sm-12 col-md-8">
    内容省略
</article>

回头看一下base.html和article_list.html。有没有想到什么？？
其实，可以把它们看成是插槽和插件。如下图所示：

大家现在可以尝试将剩余的文件进行改造。