当前位置：网站首页 > 技术文章 > 正文

Python自动化运维系列:Django搭建个人博客之前端篇

zhezhongyun 2025-07-08 00:20 13 浏览

Hello，各位小伙伴们！我是小安Sir，My English name is Chanson ！Nice to meet you ！~

上次给大家分享了搭建个人博客的数据篇，链接如下：

Python自动化运维系列：Django搭建个人博客之数据篇

有了数据，接下来就把这些数据搬到前端显示出来。本次主要分享下如何搭建个人博客的页面，主要涉及Template模板、urls模块和views模块。

当然了，每个博客都可以有自己的主题，本次主题就以我的机器人女友吧，放图！！！

本文大纲

一. 环境信息

1.1 主机信息

操作系统：windows 10

主机IP地址：
192.168.1.107/192.168.1.105

1.2 软件版本

Python版本：3.7.0

数据库版本：Mysql 8.0.15

1.3 pip模块

Django版本：2.1.7

PyMysql版本：0.9.3

二. 基本步骤

1. 配置Bootstrap、Jquery、Css

2. 编写网页模板

三. 搭建个人博客

1. 修改views.py

2. 新增app的urls.py

3. 修改urls.py

四. 网页展示

01 配置Bootstrap、Jquery、Css

这次就用一个简单的模板，方便大家自行修改，先从简单入门，再循序渐进。

1）在BASE_DIR目录，创建static目录，用于存放Bootstrap、Jquery和Css文件。

2）Bootstrap下载地址：
https://v3.bootcss.com/getting-started/#download

3）Bootstrap优站精选：http://www.youzhan.org

02 编写网页模板

2.1 共享模版的用途说明

这个图非常重要，如果小伙伴们看不懂，没有关系，你可以尝试复制代码进去，去感受下有这个模板的代码和没有的区别，在实战中领悟！

本次网站使用base.html和content.html以及index.html。使用规则如下：

1）base.html 包含网站的基础模板，共享标题以及页尾元素。

2）index.html 网站的首页。

3）content.html 网站的基础模板，显示单篇博文详细信息。

2.2 模板目录结构

2.3 模板文件

2.3.1 base.html

{% load staticfiles %}

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>{% block title %}{% endblock %}</title>
    <link href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}" rel="stylesheet">
    <link href="{% static 'blog/css/blog_nav.css' %}" rel="stylesheet">
    {% block css %}{% endblock %}
</head>

<!--body background="../static/blog/images/背景.jpeg"
      style=" background-repeat:repeat-y ; background-size:100% "-->

<nav class="navbar navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#my-nav" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <!--a class="navbar-brand" href="#"></a-->
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="my-nav">
      <ul class="nav navbar-nav">
        <li class="active"><a href="/blog/">主页</a></li>
        <li ><a href="#">博文列表</a></li>
        <li ><a href="#">学习资源</a></li>
        <li ><a href="#">运维程序</a></li>
        <li ><a href="#">开发程序</a></li>
        <li ><a href="#"></a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">登录</a></li>
      </ul>
      <form class="navbar-form navbar-right">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">搜索</button>
      </form>
    </div>
  </div>

</nav>

{% block content %}{% endblock %}

 <footer>
    <div class="footer" role="navigation">
        <div class="container">
            <div class="navbar-text">
                <ul class="footer-text">
                    <li><a href="#">主页</a></li>
                    <li><a href="#">联系我们</a></li>
                    <li><a href="#">关于博主</a></li>
                </ul>
                <p>Copyright (c) 2019 python自动化运维 </p>
                <p><small>版权归原作者所有，如有侵权请联系删除。</small></p>
            </div>
        </div>
    </div>
</footer>


<script src="{% static 'jquery-3.2.1.min.js' %}"></script>
<script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>

{% block script %}{% endblock %}

</body>
</html>

2.3.2 index.html

{% extends 'blog/base.html' %}
{% block title %}Python自动化运维{% endblock %}
{% block content %}
    <div class="container">
        <div class="row">
            <div class="col-md-9">
                {% for showtb in showtbs %}
                    <h2><a href="{{ showtb.get_absolute_url }}">{{ showtb.title }}</a></h2> <br>
                    {% if showtb.img %}
                        <!--<img src="{{ showtb.img.url }}" width="50%" height="50%"/> -->
                        <img src="{{ showtb.img.url }}" width="30%" height="30%"/>
                    {% endif %}
                     <p>
                    {% if showtb.abstract %}
                        <p><span>摘要 : </span>
                                 {{ showtb.abstract }}   </p>
                    {% else %}
                        <p>{{ showtb.body|truncatechars:180 }}</p>
                    {% endif %}
                    <p>
                        <span>作者：{{ showtb.author }}</span>
                        <span>    发布时间：{{ showtb.created_time }}</span>
                        <span>    阅读数：{{ showtb.visitnum }}</span>
                        <span><font color="aqua">——————————————————————————————————————————————————————————————————</font></span>
                    </p>
                {% endfor %}
            </div>
        </div>
    </div>
    <div style="height: 440px; " ></div>
{% endblock %}

2.3.3 content.html

{% extends 'blog/base.html' %}
{% load staticfiles %}
{% block title %}博客详情页{% endblock %}
{% block css %}
    <link rel="stylesheet" href="{% static 'blog/css/github.css' %}">
{% endblock %}

{% block content %}
    <div class="container">
        <div class="row">
            <div class="col-md-9">
                <h1>{{ showblogs.title }}</h1>
                <p>
                <p>
                    <strong>{{ showblogs.author }}</strong>
                        {{ showblogs.created_time|date:'Y年m月d日' }}
                        分类：
                    {% for category in showblogs.category.all %}
                          <a href="#">{{ category.name }}</a>
                    {% endfor %}
                        标签：
                    {% for tag in showblogs.tags.all %}
                          <a href="#">{{ tag.name }}</a>
                    {% endfor %}
                        浏览量：
                              {{ showblogs.visitnum }}
                <p>
                    {% if showblogs.img %}
                        <img src="{{ showblogs.img.url }}" width="60%" height="60%"/>
                    {% endif %}
                    <hr />
                    <p>
                        {{ showblogs.toc  |safe }}
                        {{ showblogs.body |safe }}
                    </p>
                </p>
            </div>
        </div>
    </div>

{% endblock %}

03 搭建个人博客

3.1 修改views.py

views.py是负责如何把这些数据取出来，如何存进去等程序逻辑。

1）当网站有数据需要输出的时候，则通过渲染函数(render,或者网页显示)把数据存放到指定的位置中，得到的结果再交给HttpResponse输出给浏览器。

2）使用locals()函数把当前内存中的局部变量使用字典打包起来，可以在.html模板中接收到所有的局部变量。

 1from django.shortcuts import render
 2from . import models
 3import markdown,pygments
 4
 5def index(request):
 6    showtbs = models.Blogcontent.objects.all()
 7    return render(request,'blog/index.html',locals())
 8
 9def content(request,blog_id):
10    showblogs = models.Blogcontent.objects.get(id=blog_id)
11    md = markdown.Markdown(extensions=[
12        'markdown.extensions.extra',
13        'markdown.extensions.codehilite',
14        'markdown.extensions.toc',
15    ])
16    showblogs.body = md.convert(showblogs.body)
17    showblogs.toc = md.toc
18    showblogs.increase_visiting()
19    return render(request, 'blog/content.html', locals())

3.2 编写pyblog/blog/urls.py

把app(blog)的首页和博文详情的网页链接都当成一个app，方便调用。

1from django.conf.urls import url
2from . import views
3
4app_name = 'blog'
5urlpatterns = [
6    url(r'^#39;, views.index,name='blog_index'),
7    url(r'^(?P<blog_id>[0-9]+)', views.content,name='blog_content'),
8]

3.3 编写pyblog/pyblog/urls.py

"^"表示字符串开头， "#34;表示字符串结尾。"^#34;指的是根网址。

 1from django.conf.urls import url,include
 2from django.contrib import admin
 3from django.conf import settings
 4from django.conf.urls.static import static
 5from blog import views as blog_views
 6
 7urlpatterns = [
 8    url('^#39;,blog_views.index),
 9    url(r'^admin/', admin.site.urls),
10    url(r'^blog/',include('blog.urls') ),
11] + static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT )

1）第8行网站首页

2）第10行 blog.urls，为app(blog)设置一个urls.py文件，根据app对路由规则进行分类

3）第11行 static（settings....) ，urls.py 的文件中加入以下内容，这样就为media 的ROOT目录设置好了路由。

04 网页展示

4.1 网站首页

4.2 博文详情页面

总结

总结一下，如果老铁们像我这样对网页设计不是很熟，可以找些梯度网站，比如简单/中等/困难的网站，慢慢学习Django架站，循序渐进。

不知道小伙伴们有没有理清 urls.py、views.py、admin.py、models.py 这几者的关系，如果没有请牢记以下信息，慢慢在实战中感受哈！

1）models.py 和 admin.py：models.py 创建数据表格，然后写入admin.py，让admin界面可以处理数据库内容。

2）models.py 和 views.py：将models.py 导入到views.py，如何把这些数据取出来，如何存进去等程序逻辑。简单说，把models的类名在views.py里换成另外一个别名，网页代码只需用到别名加列名，就可以显示该表指定列的数据。

3）views.py 和 urls.py(总)：urls.py作为网址的解析并且对应到views.py中函数的主要处理者。而views.py会在对应的网页显示数据，就可以让网站的各个网页之间顺利地运行。

4）urls.py(总) 和 urls.py（app）可以对路由规则进行分类。这样有多个APP时，import urls.py(总)就不会报错，也方便管理。

个人博客的搭建是不是特别有意思呢？

如果你想拥有自己的小网站，千万不要错误小安Sir的分享，建议收藏，并且实操喔！

如果你在这个过程中遇到困难，请您联系我喔，咱们可以一起讨论解决喔！

nav-right 属性

上一篇：Material Design设计规范学习心得
下一篇：10个冷门但非常实用前端开发者很少用的CSS规则

Python自动化运维系列:Django搭建个人博客之前端篇

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

接口测试遇到500报错?别慌，你的头部可能有点问题

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

现在页面实时聊天都使用Websocket技术实现吗?

关于HTML5被简称做H5，你怎么看?（html5缩写）