第四首歌词

路由

在添加新的页面时，我们首先要在路由中声明，页面的url地址、对应的处理函数。
例如要添加http://127.0.0.1:8000/article/4/。

python
# demo/url.py

# 省略
# 从  项目的根目录下的demo 导入views文件
from demo import views

# 网址格式列表
urlpatterns = [

        # 省略

        # 后来
        # 路径方法（“article/4/”，views文件中的 第四篇文章 函数）
        # http://127.0.0.1:8000/article/4/
        path('article/4/', views.article_4),

    # 根据项目设置中的的 媒体文件 配置 媒体文件的配置（如你们在网页中看到的图片）
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

View

然后复制一个article_<数字>函数改成4如下：

python
# demo/views.py
"""
From
def article_3(request):

    response = render(request,  template_name='article_3.html')

    return response
"""

变成

python
# demo/views.py
def article_4(request):

    response = render(request,  template_name='article_4.html')

    return response

Templates

在templates中新建一个名为article_4.html的文件。
然后，打开article_3.html，把里面所有的内容复制到article_4.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>歌曲的标题</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 ">
            <a class="nav-link" href="">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item active">
            <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">

        <div class="site-posts-list mt-4">


          <div class="jumbotron w-100 py-5 mx-auto">
            <h1 class="text-center"> 歌曲的标题</h1>
            <br>
            <hr>

            <p class="lead text-center">

              歌曲的歌词
            </p>
          </div>



        </div>



      </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">
      <!-- <div class="row">

      </div> -->
      <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>

然后我们只需要在歌词的每一句话后面加上<br>就好了。
如下：

html
后来 我总算学会了如何去爱<br>
可惜你早已远去消失在人海<br>
后来终于在眼泪中明白<br>
有些人一旦错过就不再<br>
栀子花 白花瓣<br>
落在我蓝色百褶裙上<br>
爱你 你轻声说<br>
我低下头 闻见一阵芬芳<br>

……

按照这个格式将内容进行插值即可完成。
<br>是HTML中换行标签。
关于HTML我后面会给出学习的方法。
目前只学这一个。