[Python #11] [Django #4] 听说 Bootstrap 可以很容易给网页穿样式？

pixabay

本期介绍如何用 Bootstrap 给上期制作的网页穿上衣服。像我这样的 html, css 小菜鸟， Bootstrap最好不过了。

创建 html 文件及设置

👇 同上期，在 templates 文件夹创建 album.html和 base.html，之后修改 views.py 里的 template_name 改为 album.html。

$ touch templates/base.html
$ touch templates/album.html

👇 如其名，base.html 是一个基文件。在当前情况其实也不需要这文件，直接写在album.html 文件下也可，但为了以后的维护还是准守规则吧。
在文件内写入 django 的命令和 bootstrap 的css路径。

# templates/base.html

{% load static %}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

{% spaceless %}
{% endspaceless %}

{% block content %}
{% endblock content %}

👇 album.html 需要继承 base.html，在此文件内写入详细的 html 代码。
首先让我们看下如何使用 django 命令。有个继承 base.html 的代码，意味着继承 Bootstrap 的 css。
{% block content %}与 {% endblock content %}之间写入详细的 html 代码即可，这些代码也可以用 Bootstrap 的模板。不需要的部分便从模板删除后用 {% for post in all_posts_list %}, {% endfor %}命令给网页循环映射 STEEM 列表。
_{📝 Bootstrap 模板可以在官方例句的 album 获取代码。}

# templates/album.html

{% extends 'base.html' %}

{% block content %}

{% for post in all_posts_list %}
{% endfor %}

{% endblock content %}

👇 整体代码如下，比较简单。运行服务器后，访问可以看到穿好衣服的 STEEM 目录，还支持手机版。

{% extends 'base.html' %}
{% load post_extras %}

{% block content %}

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Steem Blog</title>
  </head>
  <body>
      <header>
          <div class="navbar navbar-dark bg-dark shadow-sm">
              <div class="container d-flex justify-content-between">
                  <a href="#" class="navbar-brand d-flex align-items-center">
                      <svg xmlns="https://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="mr-2" viewBox="0 0 24 24" focusable="false">
                          <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/>
                          <circle cx="12" cy="13" r="4"/>
                      </svg>
                      <strong>Steem Blog</strong>
                  </a>
              </div>
          </div>
      </header>
      <main role="main">
          <div class="album py-5 bg-light">
              <div class="container">
                  <div class="row">
                      {% for post in all_posts %}
                      <div class="col-md-4 d-flex pb-3">
                          <div class="card mb-4 shadow-sm">
                              {% with post.comment.json_metadata|str_to_dict as extras %}
                              <a href="https://www.steemit.com/@{{post.comment.author}}/{{ post.comment.permlink }}" target="_blank">
                                  <img src="{{ extras.image.0 }}" class="card-img-top" alt="" height="220" width="512">
                              </a>
                              {% endwith %}
                              <div class="card-body">
                                  <p class="card-text">{{ post.comment.root_title }}</p>
                                  <div class="d-flex justify-content-between align-items-center">
                                      <div class="btn-group">
                                      </div>
                                      <small class="text-muted">댓글 {{ post.comment.children }} </small>
                                      <small class="text-muted">보팅 {{ post.comment.active_votes|length }} </small>
                                      <small class="text-muted">보상 {{ post.comment.pending_payout_value }} </small>
                                  </div>
                              </div>
                          </div>
                      </div>
                      {% endfor %}
                  </div>
              </div>
          </div>
      </main>
    </body>
</html>
{% endblock content %}

.
.
.
.
[Cookie 😅]
Python 3.7.4
Django 2.2.4
steem-python 1.0.1
goorm IDE 1.3