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

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

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

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

前端页面创建

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

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

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

现有模板的参考

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

首先我们找到一个bootstrap模板
很有个性的个人主页简历web模板-vCard3-在线预览
下载下来，结构如下：

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

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

STATIC_URL = '/static/'
 
STATICFILES_DIRS =