007_设置程序样式
/* 一: 安装程序 1 安装程序 2 settings.py 二: 修改base.html 三: 修改index.html 四: 修改topics.html 五: 修改topic.html 六: 完整code */
一: 安装程序
1 安装程序
1 输入命令:
pip install django-bootstrap4
2 settings.py
1 输入代码:
# 第三方应用程序 'bootstrap4',
二: 修改base.html
<!-- 加载 bootstrap4 模板标签库，这个库提供了一些方便的标签和过滤器，用于在模板中使用 Bootstrap 4 --> {% load bootstrap4 %} <!doctype html> <html lang="en"> <head> <!-- 设置文档的字符编码为 UTF-8 --> <meta charset="utf-8"> <!-- 设置视口（viewport）的宽度等于设备的宽度，初始缩放比例为 1，不允许用户缩放 --> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- 设置页面的标题为 "Learning Log" --> <title>Learning Log</title> <!-- 插入 Bootstrap 的 CSS 文件，这个文件提供了 Bootstrap 的样式 --> {% bootstrap_css %} <!-- 插入 Bootstrap 的 JavaScript 文件，这个文件提供了 Bootstrap 的交互功能 --> {% bootstrap_javascript jquery='full' %} </head> <body> <!-- 创建一个 Bootstrap 导航栏，这个导航栏在中等和更大的设备上始终可见，在小设备上可以折叠 --> <nav class="navbar navbar-expand-md navbar-light bg-light mb-4 border"> <!-- 创建一个链接，链接的文本是 "Learning Log"，点击这个链接会导航到首页 --> <a class="navbar-brand" href="{% url 'learning_logs:index' %}">Learning Log</a> <!-- 创建一个按钮，点击这个按钮会切换导航栏的可见性 --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navber-toggler-icon"> </span> </button> <!-- 创建一个可折叠的区域，包含了导航栏的主要内容 --> <div class="collapse navbar-collapse" id="navbarCollapse"> <!-- 创建一个列表，包含了导航栏的主要链接 --> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <!-- 创建一个链接，链接的文本是 "Topics"，点击这个链接会导航到主题页面 --> <a class="nav-link" href="{% url 'learning_logs:topics' %}">Topics</a> </li> </ul> <!-- 创建一个列表，包含了导航栏的用户相关的链接 --> <ul class="navbar-nav ml-auto"> <!-- 如果用户已经登录 --> {% if user.is_authenticated %} <li class="nav-item"> <!-- 显示一个欢迎消息，包含了用户的用户名 --> <span class="navbar-text">Hello, {{user.username}}.</span> </li> <li class="nav-item"> <!-- 创建一个链接，链接的文本是 "Log out"，点击这个链接会导航到登出页面 --> <a class="nav-link" href="{% url 'users:logout' %}">Log out</a> </<li> <!-- 如果用户没有登录 --> {% else %} <li class="nav-item"> <!-- 创建一个链接，链接的文本是 "Register"，点击这个链接会导航到注册页面 --> <a class="nav-link" href="{% url 'users:register' %}">Register</a> </li> <li class="nav-item"> <!-- 创建一个链接，链接的文本是 "Log in"，点击这个链接会导航到登录页面 --> <a class="nav-link" href="{% url 'users:login' %}">Log in</a> </li> {% endif %} </ul> </div> </nav> <!-- 创建一个主要内容区域，包含了页面的标题和内容 --> <main role="main" class="container"> <div class="pb-2 mb-2 border-bottom"> <!-- 定义一个可以被子模板填充的区域，用于显示页面的标题 --> {% block page_header %} {% endblock page_header %} </div> <div> <!-- 定义一个可以被子模板填充的区域，用于显示页面的内容 --> {% block content %} {% endblock content %} </div> </main> </body> </html>
三: 修改index.html
<!-- 使用 extends 标签来继承 "learning_logs/base.html" 模板 --> {% extends "learning_logs/base.html" %} <!-- 使用 block 标签来填充 "page_header" 区块 --> {% block page_header %} <!-- 创建一个 Bootstrap jumbotron 组件，用于显示大的标题和一些简单的介绍信息 --> <div class="jumbotron"> <!-- 创建一个大的标题 --> <h1 class="display-3">Track your learning.</h1> <!-- 创建一个段落，用于显示一些简单的介绍信息 --> <p class="lead"> Make your own Learning Log, and keep a list of the topics you're learning about. Whenever you learn something new about a topic, make an entry summarizing what you've learned. </p> <!-- 创建一个链接，链接的文本是 "Register »"，点击这个链接会导航到注册页面 --> <!-- 这个链接使用了 Bootstrap 的 "btn" 和 "btn-primary" 类，所以它看起来像一个蓝色的按钮 --> <!-- "btn-lg" 类使得这个按钮看起来更大，"role" 属性指定了这个链接的角色是一个按钮 --> <a class="btn btn-lg btn-primary" href="{% url 'users:register' %}" role="button"> Register » </a> </div> <!-- 结束 "page_header" 区块 --> {% endblock page_header %}
四: 修改topics.html
1 <!-- 使用 extends 标签来继承 "learning_logs/base.html" 模板 --> 2 {% extends "learning_logs/base.html" %} 3 4 <!-- 使用 block 标签来填充 "page_header" 区块 --> 5 {% block page_header %} 6 <!-- 创建一个标题，标题的文本是 "Topics" --> 7 <h1>Topics</h1> 8 <!-- 结束 "page_header" 区块 --> 9 {% endblock page_header %} 10 11 <!-- 使用 block 标签来填充 "content" 区块 --> 12 {% block content %} 13 <!-- 创建一个无序列表 --> 14 <ul> 15 <!-- 使用 for 标签来遍历 topics 查询集 --> 16 {% for topic in topics %} 17 <!-- 对于每个 topic，创建一个列表项 --> 18 <li> 19 <h3> 20 <!-- 创建一个链接，链接的文本是 topic 的字符串表示 --> 21 <!-- 点击这个链接会导航到对应的 topic 页面 --> 22 <a href="{% url 'learning_logs:topic' topic.id %}">{{ topic }}</a> 23 </h3> 24 </li> 25 <!-- 如果 topics 查询集是空的，显示一个消息 --> 26 {% empty %} 27 <li> 28 <h3>No topics have been added yet.</h3> 29 </li> 30 <!-- 结束 for 标签 --> 31 {% endfor %} 32 </ul> 33 34 <!-- 创建一个标题，标题的文本是 "Add a new topic" --> 35 <!-- 点击这个标题会导航到添加新主题的页面 --> 36 <h3><a href="{% url 'learning_logs:new_topic' %}">Add a new topic</a></h3> 37 38 <!-- 结束 "content" 区块 --> 39 {% endblock content %}
五: 修改topic.html
1 <!-- 使用 extends 标签来继承 "learning_logs/base.html" 模板 --> 2 {% extends 'learning_logs/base.html' %} 3 4 <!-- 使用 block 标签来填充 "page_header" 区块 --> 5 {% block page_header %} 6 <!-- 创建一个标题，标题的文本是 "Topic" --> 7 <h1>Topic</h1> 8 <!-- 结束 "page_header" 区块 --> 9 {% endblock page_header %} 10 11 <!-- 使用 block 标签来填充 "content" 区块 --> 12 {% block content %} 13 <!-- 创建一个段落 --> 14 <p> 15 <!-- 创建一个链接，链接的文本是 "Add new entry" --> 16 <!-- 点击这个链接会导航到添加新条目的页面 --> 17 <a href="{% url 'learning_logs:new_entry' topic.id %}"> Add new entry</a> 18 </p> 19 20 <!-- 创建一个无序列表 --> 21 <ul> 22 <!-- 使用 for 标签来遍历 entries 查询集 --> 23 {% for entry in entries %} 24 <!-- 对于每个 entry，创建一个 Bootstrap 卡片组件 --> 25 <div class="card mb-3"> 26 <!-- 创建卡片的头部，显示条目的添加日期和一个 "Edit entry" 的链接 --> 27 <h4 class="card-header"> 28 <!-- 使用 date 过滤器来格式化条目的添加日期 --> 29 {{entry.date_added|date:'M d, Y H:i'}} 30 <small> 31 <!-- 创建一个链接，链接的文本是 "Edit entry" --> 32 <!-- 点击这个链接会导航到编辑条目的页面 --> 33 <a href="{% url 'learning_logs:edit_entry' entry.id %}"> Edit entry </a> 34 </small> 35 </h4> 36 <!-- 创建卡片的主体，显示条目的文本 --> 37 <!-- 使用 linebreaks 过滤器来将文本中的换行符转换为 HTML 的 <br> 标签 --> 38 <div class="card-body"> 39 {{entry.text|linebreaks}} 40 </div> 41 </div> 42 43 <!-- 如果 entries 查询集是空的，显示一个消息 --> 44 {% empty %} 45 <p>There are no entries for this topic yet.</p> 46 <!-- 结束 for 标签 --> 47 {% endfor %} 48 </ul> 49 50 <!-- 结束 "content" 区块 --> 51 {% endblock content %}
六: 完整code
压缩包: 链接
