最新消息:欢迎光临 魔力 • Python!大家可以点开导航菜单中的【学习目录】,这个目录类似图书目录,更加方便学习!

Django2练习项目:开发个人博客系统(3)

Django教程 小楼一夜听春语 4411浏览 0评论

这一篇教程,我们一起为项目创建模板,也就是我们最终用来呈现数据的页面。

因为,我们是通过Django2搭建一个个人博客系统,首先要考虑的是个人博客所包含的页面以及页面的布局、功能与元素。

我们再来看一下我们的项目结构:

根据这张图中包含的页面与页面结构,我们进行页面布局,并将相同的部分抽象为模板。

1、布局规划

一个网站的外观应该有统一布局,整个站点才会显得协调一致。

根据上面结构图中列出的页面,我们规划整体的布局和每个页面的布局。

2、模板组成

有了上面的布局,我们把布局中的每一块通用内容做成页面的子模板。

这些模板包括:

  • 导航栏:nav.html
  • 底部:bottom.html
  • 侧边栏:sidebar.html
  • 分页条:paginator.html

另外,为了不在每个页面模板中都重复一些相同的HTML代码以及包含这么多的模板,我们还需要创建一个基本模板。

  • base.html

完成这些模板之后,我们再分别创建具体页面的模板:

  • index.html
  • search.html
  • category.html
  • detail.html

这些模板除了基本模板“base.html”,都可以把PyCharm自动生成的代码清空。

3、Bootstrap框架

为了能够让我们的博客系统有一个漂亮的外观,这里我们使用bootstrap这个前端框架(包括HTML、CSS 和 JS 框架)帮助我们完成视觉的优化。

首先,下载Bootstrap V3.3.7版,下载地址:https://v3.bootcss.com/getting-started/#download

这里我们只需要下载用于生产环境的Bootstrap,下载之后解压缩。

Django项目的应用目录下新建“static”文件夹。

将解压缩之后的内容,也就是css、js和fonts三个文件夹复制到“static”文件夹中。

然后,在模板中使用Bootstrap,我们可以通过以下代码实现。

示例代码:

<head>
<title>...</title>
{% load static %}
<link rel="stylesheet" href="{% static '/css/bootstrap.min.css' %}">
<script src="{% static '/js/jquery-3.3.1.min.js' %}"></script>
<script src="{% static '/js/bootstrap.min.js' %}"></script>
</head>

这段代码中,红色部分的代码就是加载Bootstrap样式表、脚本以及JQuery脚本的代码。

注意:因为Bootstrap的这些文件都存放在“static”目录中,我们需要通过“{% load static %}”引用。

完成了以上的准备工作之后,我们就可以在模板中添加代码了。

在这篇教程中,我们先根据整体布局,完成基本模板“base.html”。

示例代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{% block title %}页面标题{% endblock %}</title>
    {% load static %}
    <link rel="stylesheet" href="{% static '/css/bootstrap.min.css' %}">
    <script src="{% static '/js/jquery-3.3.1.min.js' %}"></script>
    <script src="{% static '/js/bootstrap.min.js' %}"></script>
</head>
<body>
{% include 'nav.html' %}
<!-- 顶部导航 -->
<div class="container"> <!-- 容器 -->
    <div class="row clearfix"><!-- 容器中的行 -->
        <div class="col-md-9 column"><!-- 行中的列:col-md-9表示此列宽度为页面主体宽度的9/12。 -->
            <!--主要内容-->
            {% block content %}主要内容{% endblock %}
        </div>
        <div class="col-md-3 column hidden-xs hidden-sm">
            <!-- 行中的列:col-md-3表示此列宽度为页面主体宽度的3/12;hidden-xs和hidden-sm表示在小屏幕和超小屏幕设备中打开页面时隐藏此列-->
            <!--侧边栏-->
            {% include 'sidebar.html' %}
        </div>
    </div>
</div>
<footer>
    <!--底部内容-->
    {% include 'bottom.html' %}
</footer>
</body>
</html>

在上方代码中,红色部分的代码用于支持响应式布局,加上之后才能够使用Bootstrap的响应式布局功能。

另外,代码中使用了一些Bootstrap属性,这些属性的作用,大家可以根据代码中注释进行理解。

最后,给大家一个建议。

很多朋友对HTML不是特别了解,如果想做出美观的页面还是比较有难度的。

我们可以借助一些现有的工具,降低开发难度。

例如,这个项目的教程中使用到的HTML代码,都是通过工具生成,部分代码略加改动。

这里给大家推荐,使用菜鸟教程的在线工具。

以导航栏为例:http://www.runoob.com/bootstrap/bootstrap-navbar.html

大家打开页面之后,就能够看到左侧的组件以及插件等列表,点击左侧右侧就会出现相应的示例和说明,并且可以通过【尝试一下】的功能修改代码查看效果。

当效果达到满意的程度,我们就可以将相应的代码复制到我们项目的模板文件中。

转载请注明:魔力Python » Django2练习项目:开发个人博客系统(3)

头像
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网站 (可选)