Django做一个简单的博客系统(2)----改写模板

最新推荐文章于 2024-05-11 10:37:38 发布

天道酬勤Fan

最新推荐文章于 2024-05-11 10:37:38 发布

阅读量243

点赞数

文章标签： python Django

本文链接：https://blog.csdn.net/weixin_42567323/article/details/102622172

版权

前言

上一篇文章写了创建博客的一些准备工作,包括项目与app的创建,相关配置,数据表的创建,以及数据的导入(用的是Django自带的后台管理系统),本篇文章主要记录一下模板的写入.
感谢大神的教程:Django搭建个人博客.

一.编写视图函数

先写一个简单的函数(改写上一篇文章中的article_list函数):
article/views.py:

def article_list(request):
    articles = ArticlePost.objects.all()    # 获取ArticlePost中的所有数据
    context = {'articles':articles}
    return render(request,'article/list.html',context)

其中:

articles = ArticlePost.objects.all():是获取ArticlePost中的所有数据;
return render(request,‘article/list.html’,context):返回list页面并且将context作为参数传入

那么我们就需要一个基本的list.html了:
templates/article/list.html(在templates下又创建了一个文件夹:article):

{% for article in articles %}
    <p>{{ article.title }}</p>
{% endfor %}

配置url:
article/url.py:

from django.urls import path
from article import views

app_name = 'article'    # 正在部署的应用的名称

urlpatterns = [
    # 参数name用于反查url地址,相当于给url起个名字
    path('article-list/',views.article_list,name='article_list' ),
]

运行项目:
在这里插入图片描述

嗯,要是这样拿出去,肯定不行,所以接下来就会页面进行美化一下.
这里我们会用到Boostrap以及模板的继承,导入等知识.

二.改写模板

在templates下建立三个html文件:base.html,header.html,footer.html:

base.html是整个项目的模板基础,所有的网页都从它继承;
header.html是网页顶部的导航栏;
footer.html是网页底部的注脚.

base.html:

<!-- 载入静态文件 -->
{% load staticfiles %}

<!DOCTYPE html>
<!-- 网站主语言 -->
<html lang="zh-cn">

<head>
    <!-- 网站采用的字符编码 -->
    <meta charset="utf-8">
    <!-- 预留网站标题的位置 -->
    <title>{% block title %}{% endblock %}</title>
    <!-- 引入bootstrap的css文件 -->
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
</head>

<body>
    <!-- 引入导航栏 -->
    {% include 'header.html' %}
    <!-- 预留具体页面的位置 -->
    {% block content %}{% endblock content %}
    <!-- 引入注脚 -->
    {% include 'footer.html' %}
    <!-- bootstrap.js 依赖 jquery.js 和popper.js，因此在这里引入 -->
    <script src="/static/jquery/jquery-3.3.1.js"></script>
{#    <script src="{% static 'jquery/jquery-3.3.1.js' %}"></script>#}
    <script src="/static/popper/popper-1.14.4.js"></script>
{#    <script src="{% static 'popper/popper-1.14.4.js' %}"></script>#}
    <!-- 引入bootstrap的js文件 -->
    <script src="/static/bootstrap/js/bootstrap.min.js"></script>
{#    <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>#}
</body>

</html>

header.html

<!-- 定义导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">

    <!-- 导航栏商标 -->
    <a class="navbar-brand" href="#">我的博客</a>

    <!-- 导航入口 -->
    <div>
      <ul class="navbar-nav">
        <!-- 条目 -->
        <li class="nav-item">
          <a class="nav-link" href="#">文章</a>
        </li>
      </ul>
    </div>

  </div>
</nav>

footer.html

{% load staticfiles %}
<!-- Footer -->
<div>
    <br><br><br>
</div>
<footer class="py-3 bg-dark fixed-bottom">
    <div class="container">
        <p class="m-0 text-center text-white">Copyright &copy; www.fan.com 2019</p>
    </div>
</footer>

接下来就重写我们的list.html,这里会用到模板继承与导入:
article/list.html:

<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "base.html" %}
{% load staticfiles %}

<!-- 写入 base.html 中定义的 title -->
{% block title %}
    首页
{% endblock title %}

<!-- 写入 base.html 中定义的 content -->
{% block content %}

<!-- 定义放置文章标题的div容器 -->
<div class="container">
    <div class="row mt-2">

        {% for article in articles %}
        <!-- 文章内容 -->
        <div class="col-4 mb-4">
        <!-- 卡片容器 -->
            <div class="card h-100">
                <!-- 标题 -->
                <h4 class="card-header">{{ article.title }}</h4>
                <!-- 摘要 -->
                <div class="card-body">
                    <p class="card-text">{{ article.body|slice:'100' }}...</p>
                </div>
                <!-- 注脚 -->
                <div class="card-footer">
                    <a href="#" class="btn btn-primary">阅读本文</a>
                </div>
            </div>
        </div>
        {% endfor %}

    </div>
</div>
{% endblock content %}

注:boostrap,模板的继承与导入这里就不再提了.

再次运行:
在这里插入图片描述 页面美观了很多啊!!

本文就先记录一下模板的改写,接下来会持续更新的!

写在最后

本文是个人的一些学习笔记,如有侵权,请及时联系我进行删除,谢谢大家.

天道酬勤Fan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Django做一个简单的博客系统(2)----改写模板

前言    上一篇文章写了创建博客的一些准备工作,包括项目与app的创建,相关配置,数据表的创建,以及数据的导入(用的是Django自带的后台管理系统),本篇文章主要记录一下模板的写入.    感谢大神的教程:Django搭建个人博客.一.编写视图函数    先写一个简单...
复制链接

扫一扫