基于Django的博客系统之增加类别导航栏(六)

上一篇:基于Django的博客系统之用HayStack连接elasticsearch增加搜索功能(五)
下一篇:

功能概述

  1. 博客类型导航栏。

需求详细描述

1. 博客类型导航栏

  • 描述: 在博客首页添加类型导航栏,用户可以通过导航栏选择不同类型的博客文章。
  • 功能要求:
    • 导航栏位置:页面顶部或侧边栏。
    • 支持多种博客类型(如技术、生活、旅行等)。
    • 点击导航栏中的类型标签,显示对应类型的博客文章。
  • 用户故事:
    • 作为用户,我希望能够通过导航栏快速浏览特定类型的博客文章。

具体实现

在 Django 中实现博客类别导航栏功能可以通过以下步骤完成:

1.定义模型

首先,你需要定义一个模型来存储博客的类别信息。在你的 Django 应用中创建一个名为 models.py 的文件,并添加如下代码:

python 复制代码
from django.db import models

class Category(models.Model):
    name = models.CharField(max_length=100)

    def __str__(self):
        return self.name

2.修改post模型:

在你的 Django 应用中的post模型增加category外键,并添加如下代码:

python 复制代码
class Post(models.Model):
    title = models.CharField(max_length=200)
    content = models.TextField()
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)
    author = models.ForeignKey(CustomUser, on_delete=models.CASCADE)
    category = models.ForeignKey(BlogCategory, on_delete=models.SET_NULL, null=True)

    def __str__(self):
        return self.title

3.迁移数据库:

运行以下命令创建数据库迁移文件并应用迁移:

bash 复制代码
python manage.py makemigrations
python manage.py migrate

4.创建视图:

在之前的post视图来增加类别导航栏的显示。在你的应用中的 views.py 文件中添加以下代码:

python 复制代码
def post_list(request):
    users = CustomUser.objects.all()  # 假设你有一个名为 User 的模型,用来存储用户信息
    posts = Post.objects.all()
    carousels = Carousel.objects.filter(active=True)
    categories = BlogCategory.objects.all()
    return render(request, 'blog/post_list.html', {'categories': categories, 'posts': posts, 'user_list': users, 'carousels': carousels})

5.增加模板:

在你的post_list.xml应用中创建一个名为 navbar.html 的模板文件来渲染类别导航栏。在模板中,你可以使用 Bootstrap 或其他前端框架来设计导航栏。以下是一个简单的例子:

html 复制代码
<!-- navbar.html -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        {% for category in categories %}
          <li class="nav-item">
            <a class="nav-link" href="#">{{ category.name }}</a>
          </li>
        {% endfor %}
      </ul>
    </div>
  </div>
</nav>

现在,当你访问你的网站时,类别导航栏应该会显示在页面的顶部,并包含你在数据库中定义的所有类别。

6.效果如下:

相关推荐
小蒜学长13 小时前
基于SpringBoot+Vue的健身房管理系统的设计与实现(代码+数据库+LW)
java·数据库·vue.js·spring boot·后端
失散1313 小时前
分布式专题——2 深入理解Redis线程模型
java·数据库·redis·分布式·架构
DemonAvenger13 小时前
数据库迁移实战:最小化停机时间的方法与经验分享
数据库·sql·性能优化
xhbh66613 小时前
Python操作MySQL的两种姿势:原生SQL与ORM框架SQLAlchemy详解
数据库·oracle
计算机毕业设计木哥14 小时前
Python毕业设计推荐:基于Django的饮食计划推荐与交流分享平台 饮食健康系统 健康食谱计划系统
开发语言·hadoop·spring boot·后端·python·django·课程设计
CookieCrusher17 小时前
数据泄露危机逼近:五款电脑加密软件为企业筑起安全防线
运维·数据库·windows·安全·文件加密·数据防泄漏·dlp
这周也會开心18 小时前
SQL-窗口函数
数据库·sql
TDengine (老段)20 小时前
TDengine 时间函数 WEEKDAY() 用户手册
大数据·数据库·物联网·时序数据库·iot·tdengine·涛思数据
TDengine (老段)20 小时前
从 ETL 到 Agentic AI:工业数据管理变革与 TDengine IDMP 的治理之道
数据库·数据仓库·人工智能·物联网·时序数据库·etl·tdengine
LQ深蹲不写BUG1 天前
MySql的事务机制
数据库·mysql