Django 博客文章查看与静态文件设置

举报
宇宙之一粟 发表于 2022/10/30 16:56:26 2022/10/30
【摘要】 前言上一篇文章 《如何利用 Django 自带的 Admin 发布和查看项目内容 》 中,我们成功的把博客标题显示出来,那么如何才能查看文章内容,从功能上来说,点击文章标题后呈现其详细内容。因此,文章标题需要做一个超链接,对象就是文章详情页。 修改 home.htmltemplates/home.html<!DOCTYPE html><html> <head> <me...

image.png

前言

上一篇文章 《如何利用 Django 自带的 Admin 发布和查看项目内容 》 中,我们成功的把博客标题显示出来,那么如何才能查看文章内容,从功能上来说,点击文章标题后呈现其详细内容。因此,文章标题需要做一个超链接,对象就是文章详情页。

修改 home.html

templates/home.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>我的博客</title>
    </head>
    <body>
    <h1>我的博客</h1>
    {% for blog in blogs %}
        <li><a href="{{ blog.id }}">{{ blog.title }} </a></li> <br>
    {% endfor %}
    </body>
</html>

修改完成后,我们刷新页面,发现每个标题就是一个超链接,当然,此时单击,并不能显示其详情。如图:

在这里插入图片描述

编辑 ./blog/views.py

./blog/views.py
我们增加响应查看博客文章内容请求的函数 blog_article():

from django.shortcuts import render
from .models import BlogArticles

# Create your views here.
def home(request):
    blogs = BlogArticles.objects.all()
    return render(request, "home.html", {"blogs": blogs})

def blog_article(request, article_id):
    article = BlogArticles.objects.get(id=article_id)
    publish_time = article.publish
    return render(request, "content.html", {"article": article, "publish": publish_time})

在函数 blog_ariticle(request, article_id)中,article_id 参数的目的是为了获得 URL 中每篇博客文章的 id

创建 ./templates/content.html

在 templates 目录下,创建一个 content.html 文件,并写入如下代码:

./templates/content.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>
            {{ article.title }}
        </title>
    </head>

    <body>
    <h1 style="text-align: center">
        {{ article.title }}
    </h1>

    <div style="text-align: center">
        {{ article.author.username }}
        <span style="margin-left: 20px">
            {{ article.publish }}
        </span>
    </div>
    <div>
        {{ article.body }}
    </div>

    </body>
</html>

配置 URL

myblog/urls.py 中增加新的 URL 路径:

myblog/urls.py 文件,代码如下:

from django.contrib import admin
from django.urls import path
from django.conf.urls import url
from blog import views

urlpatterns = [
    path('admin/', admin.site.urls),
    url(r'^$', views.home, name='home'),
    path('<int:article_id>/', views.blog_article),  # 新增
]

测试

我们此时此刻再单击一下其中一个文章题目,比如雨霖铃·寒蝉凄切,可以看到如下页面:

在这里插入图片描述

注意

如果我们修改最后代表文章 id 的数字,如果改成 9,将会出现如下页面:

在这里插入图片描述

因为不存 id 为 9 的文章,所以报错,而且显示了错误的完整信息。

为了避免出现上诉错误,我们应该在响应此请求的函数中对这种异常请求进行处理。适当修改 ./blog/view.py 中的 blog_article() 函数。

from django.shortcuts import render, get_object_or_404
from .models import BlogArticles

# Create your views here.
def home(request):
    blogs = BlogArticles.objects.all()
    return render(request, "home.html", {"blogs": blogs})

def blog_article(request, article_id):
    # article = BlogArticles.objects.get(id=article_id)
    article = get_object_or_404(BlogArticles, id=article_id)
    publish_time = article.publish
    return render(request, "content.html", {"article": article, "publish": publish_time})

再次请求 http://127.0.0.1:8000/9/, 我们会发现在 Debug 模式下的(404)错误:

在这里插入图片描述

如果我们把 myblog/settings.py 中的 DEBUG = True,改为 DEBUG = False,并且设置 ALLOWED_HOSTS = ['127.0.0.1'],类似下图:

myblog/settings.py

DEBUG = False

ALLOWED_HOSTS = ['127.0.0.1']

再重新刷新这个页面,将会看一个标准的 404 页面,如图:

在这里插入图片描述

模型和视图总结

到这一步,简单的博客就搭建完成,虽然很简陋,页面不美观,但显示了 Django 在网站开发中的最基本结构。我们学会了创建一个简单的 HelloWorld 视图,创建了第一个模型、迁移了数据库,调用了 Model API。

同时还配置了 Django 模板引擎,希望大家多多练习,熟悉这个过程。我们的优秀博客终于能向大家展示了,接下来我们来学习一下如何为这个界面进行优化。

静态文件设置

虽然能查看自己的博客文章,可能有读者会说了,这么丑的博客页面,实在看不下去了。

其实我也觉得丑,那么如何让我们的博客变得更加美观呢?

不卖关子了,答案是自定义模板文件。在网站开发过程中,模板引擎只针对模板文件中的 {{}}{%%} 中的内容进行处理,所以我们在排版中经常会需要静态文件。

静态文件

静态文件是指 CSS,JavaScript 文件,字体,图片或者是用来组成用户界面的任何其他资源。在使用这些静态文件之前,我们需要引入并进行设置,所以有两个操作:

  1. 存放这些文件;
  2. 引用这些文件并配置好。

具体操作如下:

创建新文件夹

在项目的根目录中,除了之前文章中创建项目直接创建的 myblog 文件,自己建立的应用 blog 文件,模板文件 templates,我们需要再创建一个名为 static 的新文件夹,并可以在 static 文件夹创建 cssfontsimagesjs 文件夹,如下图所示:

Django 设置静态文件路径

打开 ./myblog/settings.py 文件,在文件的最后几行中,会看到:

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.2/howto/static-files/

STATIC_URL = '/static/'

我们在这下面新增如下代码:

# 新增
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

设置如下:

通过如上配置,指定了静态文件存放目录的位置,那么我们如何测试是否设置成功呢?

静态图片测试

我们在 ./static/images/ 文件夹中放置一个图片,笔者这里用的是自己的头像图片文件名为 su.jpg :

在这里插入图片描述

然后我们重新运行 Django,用浏览器打开 http://127.0.0.1:8000/static/images/su.jpg ,然后是否可以访问到这张静态图片?如果访问到,说明测试成功:

在这里插入图片描述

引入优秀的前端组件

现在流行众多的的前端框架——Bootstrap、React、Vue,我们可以选择其中的一种来帮助我们进入开发与学习,比如本博客系统选择出身于于世界上最好的"博客"系统 Twitter 的 BootStrap 框架。

Bootstrap,是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发。Bootstrap 基于 HTML、CSS、JAVASCRIPT ,它简洁灵活,使得 Web 开发更加快捷,简单。

我们可以到 BootStrap 官网去 下载 最新版本,选择下载编译版本的 CSS 和 JS,如下图:

在这里插入图片描述

下载好了,在电脑上解压 bootstrap-4.3.1,将解压文件夹下 dist/css/ 下的文件复制到我们项目中创建的 css 文件夹中,dist/js 下的文件复制到我们创建的 js 文件夹中,复制好如下图:

在这里插入图片描述

回到我们的博客

做完上面的操作后,我们得读者可能要问了?我们怎么用呢,接下来要回答的就是这个问题,动手让我们的 home 界面变得好看一点。

首先,回到 ./templates/home.html 文件中,在模板中加载静态文件(刚刚引入的 BootStrap 组件),在文件开头加入 {% load static %}

{% load static %}<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>主页</title>
        <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    </head>
    <body>
        <div class="container">
            <ol class="breadcrumb my-4">
                <li class="breadcrumb-item active" >
                    <a href="https://blog.csdn.net/yuzhou_1shu">欢迎来到宇宙之一粟的技术漂泊之旅
                    </a>
                </li>
            </ol>
            <table class="table">
                <thead class="thead-dark">
                    <tr>
                        <th>标题</th>
                        <th>作者</th>
                        <th>发布时间</th>
                    </tr>
                </thead>
                <tbody>
                {% for blog in blogs %}
                <tr>
                    <td>
                        <a href="{{ blog.id }}">{{ blog.title }} </a>
                    </td>
                    <td>
                        {{ blog.author }}
                    </td>
                    <td>
                        {{ blog.publish }}
                    </td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </body>
</html>

{% load static %} 用于构成静态文件完整 URL,Django 会将 {% static 'css/bootstrap.min.css' %} 返回为 /static/css/bootstrap.min.css,最后解析为
http://127.0.0.1:8000/static/css/bootstrap.min.css

注:如果你想利用 CDN,我们可以将静态文件托管在特定的网站 https://static.xx.com 中,然后将 settings 设置中将 STATIC_URL=‘https://static.xx.com’。

配置好如上操作,我们刷新我们得主页面,我们能看到如下的主页:

主页

是不是变好看一点,之前的主页是列表,现在是一个表格,显示了作者和发布时间。

总结

如果你成功运行到这一步,说明我们的静态文件配置得很成功,可能对于前端的知识不熟、或者 Bootstrap 咱们有些陌生,我建议是咱们边使用边学习。下一篇文章中,我们将继续学习 Django 中的基础模板,对网页的代码进行重构。

希望本文能对你有所帮助,如果喜欢本文,可以点个赞或关注。

这里是宇宙之一粟,下一篇文章见!

宇宙古今无有穷期,一生不过须臾,当思奋争。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。