Django 博客文章查看与静态文件设置
前言
上一篇文章 《如何利用 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 文件，字体，图片或者是用来组成用户界面的任何其他资源。在使用这些静态文件之前，我们需要引入并进行设置，所以有两个操作：
- 存放这些文件；
- 引用这些文件并配置好。
具体操作如下：
创建新文件夹
在项目的根目录中，除了之前文章中创建项目直接创建的 myblog 文件，自己建立的应用 blog 文件，模板文件 templates，我们需要再创建一个名为 static 的新文件夹，并可以在 static 文件夹创建 css、fonts、images、js 文件夹，如下图所示：
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 中的基础模板，对网页的代码进行重构。
希望本文能对你有所帮助，如果喜欢本文，可以点个赞或关注。
这里是宇宙之一粟，下一篇文章见！
宇宙古今无有穷期，一生不过须臾，当思奋争。
- 点赞
- 收藏
- 关注作者
评论（0）