百度360必应搜狗淘宝本站头条
wireshark怎么抓包c++ base64for_eachwxsqlite3qt sleep
当前位置：网站首页 > 技术分析 > 正文

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

liebian365 2024-10-18 09:28 28 浏览 0 评论

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 ? 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的分享，建议收藏，并且实操喔！

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


相关推荐

记录一个ComboBox的设置问题，你可能没遇到过

ComboBox这个控件使用频率太高了，我从VC6编程开始就用它，一直用到C#到现在的Net6，要说我这么一个编程老手还能在它身上栽跟头，我都不敢相信。但是今天竟然被它无情的戏耍了。记录下这个问题，看...

组合框(Combo Box)应用之一_combo简单组合框

【分享成果，随喜正能量】对别人期待太高，本质上是对自身无能的逃避和推托，与其期待别人，不如依靠自己。你不害怕孤独，就不再寄期望于他人陪伴；你有底气解决问题，就不在寄期望于他人向你伸出援手。一个人期待值...

Qt之QComboBox定制(二)_qt on_combobox_activated

上一篇文章Qt之QComboBox定制讲到了qt实现自定义的下拉框，该篇文章主要实现了列表式的下拉框，这一节我还将继续讲解QComboBox的定制，而这一节我将会讲述更高级的用法，不仅仅是下拉列表框，...

从零开始系列，用C#做软件产品:私人日记(九)ComboBox入门

第八节的内容早已写好发布，结果一直在审核中，不知道触动了哪条神经。评论中看到有一些网友都在问为什么不用WPF来开发，在这里我统一说明下：1）WPF界面设计相对复杂。由于它是矢量的，需要额外有很多容器做...

QT-QSharedMemory_qt450-10是什么材料

1.QSharedMemory介绍...

进入Python的世界19-pyqt6不只是UI设计，其他模块功能如何运用

今天是大年初四，继续探讨pyqt6,给出使用的建议。PyQt6绝不仅仅局限于UI设计...

从零开始学Qt - 10:一文读懂Qt的元对象系统

Qt本身并不是一种编程语言，它实质上是一个跨平台的C++开发类库。它是用标准C++编写的，为开发GUI应用程序和非GUI应用程序提供了各种类。Qt对标准C++进行了扩展，引入一些新的概念和功能，例如信...

QT实现抖动文字和滚动文字，附源码

前言不知道大家有没有发现今天的文章有什么不一样，哈哈，我自己胡拼乱凑弄了一个logo，好不好看就先不说了，最起码萌萌哒...当然这不是今天的重点，在做logo的时候，我原本想让文字动起来的，奈何技术有...

Qt Concurrent的使用_qt是什么意思

1.简介QtConcurrent命名空间提供了高级api，使得无需使用诸如互斥、读写锁、等待条件或信号量等低级线程原语就可以编写多线程程序。使用QtConcurrent编写的程序会根据可用的...

Qt使用FFmpeg播放视频_qt使用ffmpeg播放视频功能

一、使用场景...

Qt中使用匿名函数lambda表达式_匿名函数lambda

一、为什么要使用匿名函数lamdba首先，lambda表达式可以使代码变得简单，C++中，一个lambda表达式表示一个可调用的代码单元。如代码：...

EtherCAT运动控制卡开发教程之Qt(中):小线段连续轨迹加工

今天，正运动小助手给大家分享一下EtherCAT运动控制卡开发教程之Qt，主要介绍一下如何通过Qt编程实现小线段轨迹连续加工，暂停与继续。...

送亲人，用1小时制作精美电子相框 | Qt 示例

今天给大家分享：...

Python之面向对象:综合应用，基于GUI实现会动的游戏英雄

引言本打算以上一篇文章作为面向对象模块的收尾，但是，犹豫了许久，还是决定再补充一篇，也就是今天这篇文章，打算基于Python的PyQt6/PySide6框架开发一个GUI程序，模拟实现一个在电脑桌面活...

Qt——常用数据类型_qt基本数据类型

1.基础类型因为Qt是一个C++框架,因此C++中所有的语法和数据类型在Qt中都是被支持的,但是Qt中也定义了一些属于自己的数据类型,下边给大家介绍一下这些基础的数类型。...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表
Copyright Your WebSite.Some Rights Reserved.