从零开始搭建Django博客③--前端界面实现

本文主要在Ubuntu环境上搭建，为便于研究理解，采用SSH连接在虚拟机里的ubuntu-24.04.2-desktop系统搭建，当涉及一些文件操作部分便于通过桌面化进行理解，通过Nginx代理绑定域名，对外发布。

此为从零开始搭建Django博客系列的第三篇，计划用一周时间完成一个博客搭建并全程记录，便于学习和跟着操作。

从零开始搭建Django博客①--正式开始前的准备工作
 从零开始搭建Django博客②--Django的服务器内容搭建

前端页面创建

根据我们前期设计，网站前端有一些页面：

shell 复制代码

templates
├── base.html  基础页面
├── article  / 文章
│   ├── create.html  / 文章创建
│   ├── detail.html  / 文章详情
│   ├── list.html  / 文章列表
│   └── update.html  / 文章更新
└── user  / 用户
    ├── login.html  / 用户登录
    └── register.html  / 用户注册

其中base页面作为基础页面，包含了必备的样式表，其他页面可以直接引用。

现有模板的参考

对于前端设计，比较容易的是bootstrap前端框架，并且已经有了很多成熟的模板，一般我们的WEB都会采取先做好功能和前端，再去用后端服务实现它。

首先我们找到一个bootstrap模板
很有个性的个人主页简历web模板-vCard3-在线预览

下载下来，结构如下：

python 复制代码

.
├── assets  附件和静态资源
├── blog.html  博客页面
├── contact.html
├── index.html
├── resume.html  
└── works.html

assest为静态文件，只需要其中的css样式表和js脚本文件，复制进项目根目录下的static文件夹。修改项目的setting.py:

python 复制代码

STATIC_URL = '/static/'
 
STATICFILES_DIRS = [
 os.path.join(BASE_DIR, 'static'), # 添加此项
]

这样以后在需要使用静态文件是就可以通过{% static 'path' %}进行调取。

另外我们只需要blog页面作为模板，通过分析拆解页面结构，把其中属于文章部分提取出来，为了便于理解，在浏览器使用开发者工具（快捷键：F12）

! $\[Pasted image 20250423102554.png$ ]

将blog.html整体复制进项目里的base.html并对该部分代码内容进行修改。

html 复制代码

<div class="news-grid"><!-- Post -->
<!-- 以下代码代表其他页面引入部分 -->
{% block content %}{% endblock content %}
</div>

并把其中所有的静态地址如'assets/bootstrap/js/'全部改成{% static 'path' %}形式

项目页面设置

article/list.html

html 复制代码

{% extends "base.html" %}
{% load static %}

{% block content %}

{% for article in articles %}
<article class="news-item box">
    <div class="news-item__image-wrap overlay overlay--45">
        <div class="news-item__date">16<span>Jun</span></div>
        <a class="{% url 'article:article_detail' article.id} href="single-post.html"></a>
        <img class="cover lazyload" src="assets/img/image_02.jpg" alt=""/>
    </div>
    <div class="news-item__caption">
        <h2 class="title title--h4">{{ article.title }}</h2>
        <span class="bi bi-eye">{{ article.total_views }}</span>
        <p>{{ article.body|slice:'100' }}</p>
    </div>
</article><!-- Post -->
{% endfor %}

在数据库中添加测试数据后。

打开127.0.0.1:8000，得到如下页面：

逐步修改其他页面，即可完成整个博客的搭建。