Python自动化运维必看系列:Django搭建[进阶版]博客之网页篇

Hello,大家好!我是安老师,最近这段时间在准备阿里云ACP考试,托老铁们的福,已经顺利通过考试了并拿到ACP认证了!在此,谢谢各位老铁们的关注与鼓励,非常感谢!

Python自动化运维必看系列:Django搭建[进阶版]博客之网页篇


回归主题,上节分享主要讲搭建进阶版博客的数据篇,涉及数据库和models模块,那本次分享就说下搭建进阶版博客的页面展示吧,主要涉及模板、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

由于安老师对Bootstrap和Jqery以及Css这三个的用法不是特别了解,暂时只知道怎么用能够显示出什么样的效果。正所谓术业有专攻,如果老铁们有这方面的了解,就不要吐槽安老师了,感激不尽,哈哈!

在这里,我们可以在网上找个模板,这次就用一个简单的模板,方便大家自行修改,先从简单入门,再循序渐进。

Python自动化运维必看系列:Django搭建[进阶版]博客之网页篇

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>&nbsp;&nbsp;&nbsp;&nbsp;发布时间:{{ showtb.created_time }}</span>
                        <span>&nbsp;&nbsp;&nbsp;&nbsp;阅读数:{{ 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>
                    &nbsp;&nbsp;&nbsp;&nbsp;{{ showblogs.created_time|date:'Y年m月d日' }}
                   &nbsp;&nbsp;&nbsp;&nbsp;分类:
                    {% for category in showblogs.category.all %}
                        &nbsp;&nbsp;<a href="#">{{ category.name }}</a>
                    {% endfor %}
                   &nbsp;&nbsp;&nbsp;&nbsp;标签:
                    {% for tag in showblogs.tags.all %}
                        &nbsp;&nbsp;<a href="#">{{ tag.name }}</a>
                    {% endfor %}
                   &nbsp;&nbsp;&nbsp;&nbsp;浏览量:
                            &nbsp;&nbsp;{{ 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'^$', 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

"^"表示字符串开头, "$"表示字符串结尾。"^$"指的是根网址。

 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('^$',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  网站首页

Python自动化运维必看系列:Django搭建[进阶版]博客之网页篇


4.2  博文详情页面

Python自动化运维必看系列:Django搭建[进阶版]博客之网页篇


Python自动化运维必看系列:Django搭建[进阶版]博客之网页篇


总结

总结一下,如果老铁们像我这样对网页设计不是很熟,可以找个简单/中等/困难的网站,慢慢学习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(总)就不会报错,也方便管理。


上一篇:Django rest_framework 增删改查


下一篇:express中使用art-template