1. 程式人生 > >Django入門與實踐-第12章:復用模板(完結)

Django入門與實踐-第12章:復用模板(完結)

b- htm lin name color lock tar 現在 set

http://127.0.0.1:8000/
http://127.0.0.1:8000/boards/1/
http://127.0.0.1:8000/boards/2/
http://127.0.0.1:8000/boards/3/
<!--static/css/app.css-->
.navbar-brand {
    font-family: ‘Peralta‘, cursive;
}
<!--templates/base.html-->
{% load static %}<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"
> <title>{% block title %}Django Boards{% endblock %}</title> <link rel="stylesheet" href="{% static ‘css/bootstrap.min.css‘ %}"> </head> <body> <div class="container"> <ol class="breadcrumb my-4"> {% block breadcrumb %} {% endblock %}
</ol>   {% block content %}   {% endblock %} </div> </body> </html> <!--現在我們有了 bast.html 模板,我們可以很輕松地在頂部添加一個菜單塊:----> <!--templates/base.html--> {% load static %}<!DOCTYPE html> <html> <head> <meta charset="utf-8"
> <title>{% block title %}Django Boards{% endblock %}</title> <link rel="stylesheet" href="{% static ‘css/bootstrap.min.css‘ %}"> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container"> <a class="navbar-brand" href="{% url ‘home‘ %}">Django Boards</a> </div> </nav> <div class="container"> <ol class="breadcrumb my-4">   {% block breadcrumb %}   {% endblock %} </ol> {% block content %} {% endblock %} </div> </body> </html> <!--在 bast.html 模板中添加這個字體:--> {% load static %}<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>{% block title %}Django Boards{% endblock %}</title> <link href="https://fonts.googleapis.com/css?family=Peralta" rel="stylesheet"> <link rel="stylesheet" href="{% static ‘css/bootstrap.min.css‘ %}"> <link rel="stylesheet" href="{% static ‘css/app.css‘ %}"> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container">   <a class="navbar-brand" href="{% url ‘home‘ %}">Django Boards</a> </div> </nav> <div class="container"> <ol class="breadcrumb my-4">   {% block breadcrumb %}   {% endblock %} </ol> {% block content %} {% endblock %} </div> </body> </html>
<!--templates/home.html-->
{% extends ‘base.html‘ %}
{% block breadcrumb %}
    <li class="breadcrumb-item active">Boards</li>
{% endblock %}

{% block content %}
    <table class="table">
        <thead class="thead-inverse">
            <tr>
                <th>Board</th>
                <th>Posts</th>
                <th>Topics</th>
                <th>Last Post</th>
            </tr>
        </thead>
        <tbody>
          {% for board in boards %}
            <tr>
                <td>
                  <a href="{% url ‘board_topics‘ board.pk %}">{{ board.name }}</a>
                  <small class="text-muted d-block">{{ board.description }}</small>
                </td>
                <td class="align-middle">0</td>
                <td class="align-middle">0</td>
                <td></td>
            </tr>
          {% endfor %}
        </tbody>
    </table>
{% endblock %}
<!--templates/topics.html-->
{% extends ‘base.html‘ %}

{% block title %}
    {{ board.name }} - {{ block.super }}
{% endblock %}

{% block breadcrumb %}
    <li class="breadcrumb-item"><a href="{% url ‘home‘ %}">Boards</a></li>
    <li class="breadcrumb-item active">{{ board.name }}</li>
{% endblock %}
{% block content %}
    <!-- just leaving it empty for now. we will add core heresoon. -->
{% endblock %}

Django入門與實踐-第12章:復用模板(完結)