django博客项目-博客首页搭建

最新推荐文章于 2022-11-25 23:12:45 发布
最新推荐文章于 2022-11-25 23:12:45 发布
阅读量135 收藏
点赞数
分类专栏： django python
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/no_name_sky/article/details/117219595
版权
该博客介绍了如何使用Bootstrap构建导航栏，并根据用户是否登录显示不同内容，包括登录、注销功能。同时展示了使用栅栏系统进行页面分栏布局，以及文章列表的渲染。涉及知识点包括Bootstrap的使用、Django模板语法、ORM查询语句和前端样式编写。
摘要由CSDN通过智能技术生成

导航栏搭建

导航栏的显示分为登录和没有登录的两种情况显示。从https://v3.bootcss.com/components/网站上拿到对应导航栏booststrap样式代码，修改部分内容即可。添加了注销功能。

代码

前端代码：
文件名:index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">博客园</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">随笔 <span class="sr-only">(current)</span></a></li>
        <li><a href="#">博文</a></li>

      </ul>
      <ul class="nav navbar-nav navbar-right">
          {% if request.user.is_authenticated %}
          <li><a href="#"><span id="user_icon" class="glyphicon glyphicon-user"></span>{{ request.user.username }}</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">修改密码</a></li>
                    <li><a href="#">修改头像</a></li>
                    <li><a href="/logout/">注销</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                  </ul>
                </li>
          {% else %}
              <li><a href="/login/">登录</a></li>
              <li><a href="/register/">注册</a></li>
          {% endif %}

      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
</body>
</html>

后端代码

# urls.py
url(r'^logout/', blog_views.logout, name="logout"),

# views.py
def logout(request):
    auth.logout(request)  # 等价于 request.session.flush()

    return redirect('/login/')

知识点

booststrap 使用
auth注销功能使用

效果展示

登录前：
在这里插入图片描述

登录后：
在这里插入图片描述

首页主体布局搭建

利用栅栏系统分栏分为了三大块，左侧、中间、右侧。

代码

<!--系统首页分栏-->
<div class="container-fluid">
    <div class="col-md-3">
<!--        面板样式展示-->
        <div class="panel panel-default">
            <div class="panel-heading">Panel heading without title</div>
            <div class="panel-body">
            Panel content
            </div>
        </div>
        <div class="panel panel-info">
            <div class="panel-heading">Panel heading without title</div>
            <div class="panel-body">
            Panel content
            </div>
        </div>
    </div>
    <div class="col-md-6">中间</div>
    <div class="col-md-3">
<!--        面板样式展示-->
        <div class="panel panel-success">
            <div class="panel-heading">Panel heading without title</div>
            <div class="panel-body">
            Panel content
            </div>
        </div>
        <div class="panel panel-danger">
            <div class="panel-heading">Panel heading without title</div>
            <div class="panel-body">
            Panel content
            </div>
        </div>
    </div>

</div>

知识点

bootstrap 分栏

效果展示

在这里插入图片描述

文章列表渲染

代码

前端代码:index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <style>
        .pub_info{
            margin-top:10px
        }
        .pub_info .glyphicon-comment{
            vertical-align: -2px
        }
        .pub_info .glyphicon-thumbs-up{
            vertical-align: -2px
        }
    </style>
</head>
<body>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">博客园</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">随笔 <span class="sr-only">(current)</span></a></li>
        <li><a href="#">博文</a></li>

      </ul>
      <ul class="nav navbar-nav navbar-right">
          {% if request.user.is_authenticated %}
          <li><a href="#"><span id="user_icon" class="glyphicon glyphicon-user"></span>{{ request.user.username }}</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">修改密码</a></li>
                    <li><a href="#">修改头像</a></li>
                    <li><a href="/logout/">注销</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                  </ul>
                </li>
          {% else %}
              <li><a href="/login/">登录</a></li>
              <li><a href="/register/">注册</a></li>
          {% endif %}

      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<!--系统首页分栏-->
<div class="container-fluid">
    <div class="col-md-3">
<!--        面板样式展示-->
        <div class="panel panel-default">
            <div class="panel-heading">Panel heading without title</div>
            <div class="panel-body">
            Panel content
            </div>
        </div>
        <div class="panel panel-info">
            <div class="panel-heading">Panel heading without title</div>
            <div class="panel-body">
            Panel content
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="article_list">
            {% for article in article_list %}
            <div class="article_item">
                <h5><a href="">{{ article.title }}</a></h5>
                <div class="article-desc">
                    <span class="media-left">
                        <a href=""><img width="56px" height="56px" src="/media/{{ article.user.avatar }}"></a>
                    </span>
                    <span class="media-right">
                        {{ article.desc }}
                    </span>
                </div>
                <div class="small pub_info">
                    <span><a href="">{{ article.user.username }}</a></span>&nbsp;&nbsp;
                    <span>发布于&nbsp;&nbsp;{{ article.create_time|date:"Y-m-d H:i" }}</span>&nbsp;&nbsp;&nbsp;
                    <span class="glyphicon glyphicon-comment"></span>评论({{ article.comment_count }})&nbsp;&nbsp;
                    <span class="glyphicon glyphicon-thumbs-up"></span>点赞({{ article.up_count }})
                </div>

            </div>
            <hr>
            {% endfor %}
        </div>
    </div>
    <div class="col-md-3">
<!--        面板样式展示-->
        <div class="panel panel-success">
            <div class="panel-heading">Panel heading without title</div>
            <div class="panel-body">
            Panel content
            </div>
        </div>
        <div class="panel panel-danger">
            <div class="panel-heading">Panel heading without title</div>
            <div class="panel-body">
            Panel content
            </div>
        </div>
    </div>

</div>
</body>
</html>

后端代码：views.py

def index(request):
    article_list = models.Article.objects.all()
    print(article_list)
    return render(request, 'index.html', {'article_list': article_list})

知识点

ORM 查询语句
前端style样式编写
bootstrap 使用
django 模板语法

效果展示

在这里插入图片描述

no_name_sky
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Django搭建个人博客-杜赛.pdf
08-03
Django搭建个人博客-杜赛（来自于杜赛个人博客！） Django是一个由Python写成的开源Web应用框架，可以用它以更高的效率、更少的代码，搭建一个高性能的个人网站。 如果你以前从未接触过web开发，并且想快速上线自己...
Django学习(三)——创建主页
yuanzhiqj的博客
03-12 442
参考书籍：《Python编程从入门到实践》—Eric Matthes 使用Django创建网页的过程通常分为三个阶段:定义URL、编写视图和编写模板。 URL模式描述了URL是如何设计的，让Django知道如何将浏览器请求与网站URL匹配，以确定返回哪个网页。 每个URL都被映射到特定的视图——视图函数获取并处理网页所需的数据。视图函数通常调用一个模板，后者生成浏览器能够理解的网页 映射URL...
【Web 三件套】个人简单博客系统页面搭建（附源码）
热门推荐
吞吞吐吐大魔王的博客
02-20 4万+
文章目录1. 成品展示2. 知识准备3. 博客系统页面搭建3.1 基本介绍3.2 博客列表页3.3 博客详情页3.4 博客登录页3.5 博客编辑页3.6 公共页面样式3.7 markdown 编辑器引入4. 总结 1. 成品展示 以下为个人搭建的一个简单博客系统页面，以后会不断改进，并且与后端结合，形成一个完整的博客系统 2. 知识准备 该博客系统页面是由 HTML + CSS + JavaScript 搭建的，如果没有了解过这些知识的友友，可以通过本人之前写好的几篇相关文章入门 文章一：《超多动图带
django 自定义html5,在Django中使用自定义Tag创建动态导航栏
weixin_39652154的博客
06-19 284
在使用Django开发web系统时，通常会去定义一些导航栏来动态的显示当前所在的标签，类似于下面这样的：这个时候我们通常会将这一块定义成一个block，然后再在每个页面中进行扩展，编写和修改起来也是比较麻烦的。我通过在网看了一些高人的代码，发现可以使用自定义Tag来很好的满足这种需求。下面写一Demo，比较简单，有兴趣的同志可以再进一步进行扩展。1、创建工程和app。使用django-admin....
6 - 真正的 Django 博客首页视图
weixin_33852020的博客
05-17 128
在此之前我们已经编写了 Blog 的首页视图，并且配置了 URL 和模板，让 Django 能够正确地处理 HTTP 请求并返回合适的 HTTP 响应。不过我们仅仅在首页返回了一句话：欢迎访问我的博客。这是个 Hello World 级别的视图函数，我们需要编写真正的首页视图函数，当用户访问我们的博客首页时，他将看到我们发表的博客文章列表，就像 演示项目 里展示的这样。 首页视图函数 上一节我们阐...
个人博客项目——首页功能实现
weixin_46631713的博客
03-30 1499
1、文章列表 1.1 接口说明 接口url：/articles 请求方式：POST 请求参数： 参数名称 参数类型 说明 page int 当前页数 pageSize int 每页显示的数量 返回数据： { "success": true, "code": 200, "msg": "success", "data": [ { "id": 1, "title": "springbo
django-blog-it：django博客-完全自定义，可通过一键安装程序使用
02-04
总结起来，django-blog-it是一个基于Django框架的、高度可定制的博客系统，提供了一键安装功能，方便用户快速搭建和个性化自己的博客。通过深入学习和使用，无论是对Django框架的熟悉还是对Web开发的实践，都将是一...
使用django-blog-zinnia搭建的个人博客网站。.zip
09-28
这个压缩包文件“goto456_com-use-zinnia-master”包含了使用django-blog-zinnia搭建博客的源代码和配置文件，是学习和实践Django博客开发的良好资源。 【知识点详细说明】: 1. **Django框架**：Django是用Python...
使用 Django 搭建技术博客网站
最新发布
05-19
在这一内容详尽且全面深入的教程之中，我们将以高度的细致性与专业性来全面阐释如何切实有效地运用 Django 框架成功构建出一个功能齐全且完备的技术博客网站。于此篇文章里，将会广泛且深入地涵盖从最为基础的环境...
django-使用python+django开发的博客应用-项目实战.zip
01-27
在本项目实战中，我们将深入探讨如何使用Python与Django框架构建一个功能完善的博客应用程序。Django是一个高级的、免费的开源Web框架，遵循模型-视图-控制器（MVC）设计模式，专为快速开发安全且可维护的网站而设计...
Django项目实战1-个人博客首页实现
weixin_41446786的博客
07-29 1745
环境：Windows 10 （64 位），Python 版本为 3.7.6（64 位），django 版本为 2.2.3 1、环境配置： （1）安装python3（我自己是python3.7.6） （2）虚拟环境搭建（两种方法） 1）virtualenv创建和管理虚拟环境 ①安装 virtualenv：pip install virtualenv -i https://pypi.douban.com/simple/ ②创建虚拟环境：virtualenv 指定一个非中文目录作为虚拟环境目录 ③激活虚拟环境
Django 3.2.5博客开发教程:实现网站首页
学亮编程手记
07-27 761
实现首页模板前，我们先把共公的页面模板base.html调用好。首先我们先看导航部分，除开首页和关于博主之外，其它的其实是我们的文章分类名。如图： 我们只需要在首页视图函数里，查询出所有的文章分类名称，然后在模板页面上展示就行。 blog/views.py from .models import Category #从models里导入Category类 def index(request): allcategory = Category.objects.all()#通过Category表查出所
个人博客项目
qq_44773719的博客
05-18 9090
一.项目功能描述： 主要分为4大功能模块，用户登录功能，文章评论功能，发布和修改文章功能，文章分类。登录首页之后可以查看所有文章的信息，但是此时只能查看，不能修改。如果想要对文章进行操作，就需要用户登录(利用数据库保存的用户名和密码)。用户登陆之后可以对文章进行评论，发布新的文章，修改和删除已经发布的文章，创建和删除新的文章类型。 二.项目流程 首先在输入url，根据不同的url调用后台 Controller 中的方法，Controller 中的方法再调用 Servise 逻辑层中的方法，Service 中
【项目实战】个人博客系统(8)——博客详情首页显示
历乱的日记簿
07-20 487
一、文章内容显示 博客详情页面文章的显示格式、文章访问数量、评论数量的处理。 接口实现类： 文章显示格式：使用开源的Markdown编辑器：Editor，调用工具类方法来增加扩展 访问数量：在持久层接口定义方法updateViews来更新文章访问数量，点击文章后数值自增 评论数量：在持久层接口定义方法getCommentCountById来根据博客id查询出评论数量 1、博客详情实体类 public class DetailedBlog { //博客信息 private Long id
17--Django-项目实战-博客开发-登录功能和首页页面搭建
摘 月
11-25 432
1、步骤 1.获取用户输入的用户名、密码、验证码 2.验证参数，先写错误的逻辑 3.保存用户信息 4.登录成功跳转首页views.py 2、验证码实现 前提：安装pillow库 路由配置：urls.py 二、登录页面搭建 步骤： 1.通过ajax和layer组件实现登录页面，登录成功跳转首页 2.验证码img标签src属性需要指定路由地址 三、首页功能实现 1、获取所有用户的文章 views.py 2、修改密码功能 步骤： 1.获取用户输入的原密码、新密码、确认密码 2.验证原密码是否正确，确认密码是否和新
Django博客项目（二）—— 博客首页
kalath_aiur的博客
03-08 536
前情提要： Django博客项目（一）—— 注册和登录页面 本文将继续介绍博客项目的第二部分，博客首页的实现。 效果图 首先还是先来看一下完成后的效果： 未登录时，导航栏包括首页、博客列表、登录、注册菜单。 登录之后，会增加发表博客、注销登录菜单。 首页显示评论数量最多的三篇博客，显示内容如图所示。 最后一部分显示最近发表的三篇博客的信息 路由配置 在应用的urls.py文件中添加首页的路...
Django实现博客主页（/分页/）
Laughing_G的博客
10-16 326
目标： 实现 view函数部分： from django.shortcuts import render,HttpResponse,redirect from django.forms import Form,fields,widgets from django.core.exceptions import ValidationError from app01 import models ...
博客系统项目：设计篇
水布天
12-22 7059
博客系统项目：设计篇1 由来2 需求3 设计3.1 功能设计3.1.1 用例图3.1.2 实体类图3.1.3 实体关系图3.2 数据设计3.2.1 数据模型4 版面设计4.1 首页版面4.2 详情页版面 1 由来 博客在2021年的今天已经不是一个新鲜的词汇，如果用一句话概述，就是电子化信息留存，跟我们以前的日记、摘要、报纸有很多相似之处。其来来源已久，搭载着网络这片土壤，生根发芽，茁壮生长。从最早的文字到图片到音频再到视频，一直是博客的范畴。还有近期火起来的vblog,视频的盛行。作为一个自称是技术出身的
Django搭建blog网站（一）
niepangu的专栏
05-05 7950
一、前言自学地址--&gt;&gt;&gt;&gt;&gt;追梦人物博客：https://www.zmrenwu.com/post/2/1.1.环境python版本：3.6Django版本：1.11.61.2.预览效果最终搭建的blog的样子，基本上满足需求了。框架搭好了，至于CSS，可以根据自己喜好随意搭配。二、建立博客应用2.1.建立项目和应用创建工程blogprojectdjango-adm...
Django博客系统搭建教程
"搭建博客系统，使用Django框架，适合初学者和开发者，代码可在作者GitHub获取，主要针对Mac环境" 本资源是一本面向Django初学者和博客开发者的手册，旨在教授如何在Mac环境下搭建博客系统。书中提供的代码可以在...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值