域名个人用户可以做企业网站吗搜索引擎排名国内
本文主要在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 = [os.path.join(BASE_DIR, 'static'), # 添加此项
]
这样以后在需要使用静态文件是就可以通过{% static 'path' %}进行调取。
另外我们只需要blog页面作为模板，通过分析拆解页面结构，把其中属于文章部分提取出来，为了便于理解，在浏览器使用开发者工具（快捷键：F12）
![[Pasted image 20250423102554.png]]
将blog.html整体复制进项目里的base.html并对该部分代码内容进行修改。
<div class="news-grid"><!-- Post -->
<!-- 以下代码代表其他页面引入部分 -->
{% block content %}{% endblock content %}
</div>
并把其中所有的静态地址如‘assets/bootstrap/js/’全部改成{% static 'path' %}形式
项目页面设置
article/list.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，得到如下页面：
逐步修改其他页面，即可完成整个博客的搭建。