1. <!--static/css/app.css-->
  2. .navbar-brand {
  3.     font-family: 'Peralta', cursive;
  4. }
  1. <!--templates/base.html-->
  2. {% load static %}<!DOCTYPE html>
  3. <html>
  4.     <head>
  5.         <meta charset="utf-8">
  6.         <title>{% block title %}Django Boards{% endblock %}</title>
  7.         <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
  8.     </head>
  9.     <body>
  10.         <div class="container">
  11.             <ol class="breadcrumb my-4">
  12.                 {% block breadcrumb %}
  13.                 {% endblock %}
  14.             </ol>
  15.         　　{% block content %}
  16.         　　{% endblock %}
  17.         </div>
  18.     </body>
  19. </html>
  20.  
  21. <!--现在我们有了 bast.html 模板，我们可以很轻松地在顶部添加一个菜单块：---->
  22. <!--templates/base.html-->
  23. {% load static %}<!DOCTYPE html>
  24. <html>
  25.     <head>
  26.         <meta charset="utf-8">
  27.         <title>{% block title %}Django Boards{% endblock %}</title>
  28.         <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
  29.     </head>
  30.     <body>
  31.         <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  32.             <div class="container">
  33.                 <a class="navbar-brand" href="{% url 'home' %}">Django Boards</a>
  34.             </div>
  35.         </nav>
  36.         <div class="container">
  37.             <ol class="breadcrumb my-4">
  38.             　　{% block breadcrumb %}
  39.             　　{% endblock %}
  40.             </ol>
  41.             {% block content %}
  42.             {% endblock %}
  43.         </div>
  44.     </body>
  45. </html>
  46.  
  47. <!--在 bast.html 模板中添加这个字体：-->
  48. {% load static %}<!DOCTYPE html>
  49. <html>
  50.     <head>
  51.         <meta charset="utf-8">
  52.         <title>{% block title %}Django Boards{% endblock %}</title>
  53.         <link href="https://fonts.googleapis.com/css?family=Peralta" rel="stylesheet">
  54.         <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
  55.         <link rel="stylesheet" href="{% static 'css/app.css' %}">
  56.     </head>
  57.     <body>
  58.         <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  59.             <div class="container">
  60.             　　<a class="navbar-brand" href="{% url 'home' %}">Django Boards</a>
  61.             </div>
  62.         </nav>
  63.         <div class="container">
  64.             <ol class="breadcrumb my-4">
  65.             　　{% block breadcrumb %}
  66.             　　{% endblock %}
  67.             </ol>
  68.             {% block content %}
  69.             {% endblock %}
  70.         </div>
  71.     </body>
  72. </html>
  1. <!--templates/home.html-->
  2. {% extends 'base.html' %}
  3. {% block breadcrumb %}
  4.     <li class="breadcrumb-item active">Boards</li>
  5. {% endblock %}
  6.  
  7. {% block content %}
  8.     <table class="table">
  9.         <thead class="thead-inverse">
  10.             <tr>
  11.                 <th>Board</th>
  12.                 <th>Posts</th>
  13.                 <th>Topics</th>
  14.                 <th>Last Post</th>
  15.             </tr>
  16.         </thead>
  17.         <tbody>
  18.         　　{% for board in boards %}
  19.         　　　　<tr>
  20.             　　　　<td>
  21.             　　　　　　<a href="{% url 'board_topics' board.pk %}">{{ board.name }}</a>
  22.             　　　　　　<small class="text-muted d-block">{{ board.description }}</small>
  23.             　　　　</td>
  24.             　　　　<td class="align-middle">0</td>
  25.            　　　　 <td class="align-middle">0</td>
  26.             　　　　<td></td>
  27.         　　　　</tr>
  28.         　　{% endfor %}
  29.         </tbody>
  30.     </table>
  31. {% endblock %}
  1. <!--templates/topics.html-->
  2. {% extends 'base.html' %}
  3.  
  4. {% block title %}
  5.     {{ board.name }} - {{ block.super }}
  6. {% endblock %}
  7.  
  8. {% block breadcrumb %}
  9.     <li class="breadcrumb-item"><a href="{% url 'home' %}">Boards</a></li>
  10.     <li class="breadcrumb-item active">{{ board.name }}</li>
  11. {% endblock %}
  12. {% block content %}
  13.     <!-- just leaving it empty for now. we will add core heresoon. -->
  14. {% endblock %}

Django入门与实践-第12章：复用模板（完结）的更多相关文章

  1. Django入门与实践-第15章：用户注销(完结)

    # myproject/settings.py LOGOUT_REDIRECT_URL = 'home' http://127.0.0.1:8000/logout/ # myproject/urls. ...

  2. Django入门与实践-第26章：个性化工具（完结）

    http://127.0.0.1:8000/boards/1/topics/62/reply/ 我觉得只添加内置的个性化(humanize)包就会很不错. 它包含一组为数据添加“人性化(human t ...

  3. Django入门与实践-第13章：表单处理（完结）

    http://127.0.0.1:8000/boards/1/ http://127.0.0.1:8000/boards/2/ http://127.0.0.1:8000/boards/3/ http ...

  4. Django入门与实践-第23章：分页实现（完结）

    http://127.0.0.1:8000/boards/1/ #从现在起,我们将在 board_topics 这个视图中来操作. python manage.py shell from django ...

  5. Django入门与实践-第14章：用户注册（完结）

    http://127.0.0.1:8000/signup/ django-admin startapp accounts INSTALLED_APPS = [ 'accounts', ] # mypr ...

  6. Django入门与实践-第11章：URL 分发（完结）

    http://127.0.0.1:8000http://127.0.0.1:8000/boards/1/http://127.0.0.1:8000/boards/2/http://127.0.0.1: ...

  7. Django入门与实践-第25章：Markdown 支持（完结）

    http://127.0.0.1:8000/boards/1/topics/102/reply/ 让我们在文本区域添加 Markdown 支持来改善用户体验. 你会看到要实现这个功能非常简单. 首先, ...

  8. Django入门与实践-第24章：我的账户视图（完结）

    http://127.0.0.1:8000/settings/account/ #好的,那么,这部分将是我们最后的一个视图.之后,我们将专心来改进现有功能. #accounts/views.py fr ...

  9. Django入门与实践-第22章：基于类的视图

    http://127.0.0.1:8000/boards/1/topics/2/posts/2/edit/ http://127.0.0.1:8000/ #boards/views.py from d ...

随机推荐

  1. Gson 解析教程

    Gson 是google解析Json的一个开源框架,同类的框架fastJson,JackJson等等 本人fastJson用了两年,也是从去年才开始接触Gson,希望下面的总结会对博友有用,至于Gso ...

  2. padding 扩大边距 margin-top 与页面顶部的距离 hover鼠标移动到上面出现背景色CSS

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Java 跨域 CrossOrigin注解 Filter拦截 Nginx配置

    说明 资源请求的发起方与请求的资源不在同一个域中的: 一般的,只要网站的[协议名protocol].[主机host].[端口号port]这三个中的任意一个不同,网站间的数据请求与传输便构成了跨域调用: ...

  4. 15 MySQL--索引

    索引: http://www.cnblogs.com/linhaifeng/articles/7356064.html http://www.cnblogs.com/linhaifeng/articl ...

  5. uiview animation 卡一下

    原因:有个下载图片的地方在主线程执行,导致动画卡一下.

  6. spring cloud： eureka搭建

    1. 添加pom 依赖: <parent> <groupId>org.springframework.boot</groupId> <artifactId&g ...

  7. Linux 如何将一个文件夹的所有内容授权给某一个用户

    我们可以使用chown命令,ch这里代表change(改变)的意思,own代表英文单词的owner(拥有者),连在一起就是 change owner ,改变某个文件或者文件夹的拥有者. 一般只有roo ...

  8. inline和inline-block的间隙问题

    我们在前端布局的时候,会偶尔发现,在具有inline/inline-block属性的元素间存在一小段间隙,网上有些文章说这个间隙是6px,但我觉得应该是一个空格的宽度. 这里以inline-block ...

  9. pycharm ideavimrc设置备忘

    文件存放位置 windows下 C:\Users\你的用户名\.ideavimrc 注:如果要映射pycharm 中的一些命令可以 在pycharm 中 edit->Macros->Sta ...

  10. js ParseUrl

    js ParseUrl function parseURL(url) { var a = document.createElement('a'); a.href = url; return { sou ...