当前位置：首页 > 技术分析 > 正文内容

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

ruisui883个月前 (02-10)技术分析14

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?%}





????
????{%?block?title?%}{%?endblock?%}
????
????
????{%?block?css?%}{%?endblock?%}





??
????
????
??????
????????Toggle?navigation
????????
????????
????????
??????
??????
????
???? ???? ?????? ????????主页 ????????博文列表 ????????学习资源 ????????运维程序 ????????开发程序 ???????? ?????? ?????? ????????
  • 登录
    • ?????? ?????? ???????? ?????????? ????????
    ????????搜索 ?????? ????
    ??
    {%?block?content?%}{%?endblock?%} ?
    ???? ???????? ???????????? ???????????????? ????????????????????
  • 主页
    • ????????????????????
  • 联系我们
    • ????????????????????
  • 关于博主
    • ???????????????? ????????????????

    Copyright???2019?python自动化运维?

    ????????????????

    版权归原作者所有，如有侵权请联系删除。

    ????????????
    ????????
    ????
    {%?block?script?%}{%?endblock?%}

    2.3.2 index.html

    {%?extends?'blog/base.html'?%}
{%?block?title?%}Python自动化运维{%?endblock?%}
{%?block?content?%}
????
????????
????????????
????????????????{%?for?showtb?in?showtbs?%}
????????????????????
    {{?showtb.title?}}
    ?
    
????????????????????{%?if?showtb.img?%}
????????????????????????
????????????????????????
????????????????????{%?endif?%}
?????????????????????
    
????????????????????{%?if?showtb.abstract?%}
????????????????????????
    摘要?:?
?????????????????????????????????{{?showtb.abstract?}}???
    
????????????????????{%?else?%}
????????????????????????
    {{?showtb.body|truncatechars:180?}}
    
????????????????????{%?endif?%}
????????????????????
    
????????????????????????作者：{{ showtb.author }}
????????????????????????    发布时间：{{ showtb.created_time }}
????????????????????????    阅读数：{{ showtb.visitnum }}
????????????????????????——————————————————————————————————————————————————————————————————
????????????????????
    
????????????????{%?endfor?%}
????????????
    ???????? ???? ???? {%?endblock?%}

    2.3.3 content.html

    {%?extends?'blog/base.html'?%}
{%?load?staticfiles?%}
{%?block?title?%}博客详情页{%?endblock?%}
{%?block?css?%}
????
{%?endblock?%}

{%?block?content?%}
????
????????
????????????
????????????????
    {{?showblogs.title?}}
    
????????????????
    
????????????????
    
????????????????????{{?showblogs.author?}}
????????????????????    {{?showblogs.created_time|date:'Y年m月d日'?}}
                        分类：
????????????????????{%?for?category?in?showblogs.category.all?%}
????????????????????????  {{?category.name?}}
????????????????????{%?endfor?%}
                        标签：
????????????????????{%?for?tag?in?showblogs.tags.all?%}
????????????????????????  {{?tag.name?}}
????????????????????{%?endfor?%}
                        浏览量：
????????????????????????????  {{?showblogs.visitnum?}}
????????????????
    
????????????????????{%?if?showblogs.img?%}
????????????????????????
????????????????????{%?endif?%}
????????????????????
????????????????????
    
????????????????????????{{?showblogs.toc??|safe?}}
????????????????????????{{?showblogs.body?|safe?}}
????????????????????
    
????????????????
    
????????????
????????
????

{%?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[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 网站首页


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

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


    扫描二维码推送至手机访问。

    版权声明：本文由ruisui88发布，如需转载请注明出处。

    本文链接：http://www.ruisui88.com/post/1845.html

    标签: aria-expanded
    分享给朋友：
    返回列表

    上一篇：如何基于用户帐户构建 PHP 登录_如何基于用户帐户构建 php 登录页面

    下一篇：Javaweb知识 day11 Bootstrap框架

    “Python自动化运维系列:Django搭建个人博客之前端篇” 的相关文章

    Linux发行版需要杀软吗?卡巴斯基推出免费KVRT病毒扫描清理工具

    IT之家 6 月 4 日消息，你认为使用 Linux 发行版，需要杀毒软件吗？或许很多用户认为 Linux 发行版偏小众，因此受到黑客攻击的风险也相对较小，不过卡巴斯基并不这么认为，近期推出了适用于 Linux 平台的杀毒软件。最新上线的 Linux 版本 Kaspersky Virus Remov...

    K8s里我的容器到底用了多少内存?

    作者：frostchen导语 Linux下开发者习惯在物理机或者虚拟机环境下使用top和free等命令查看机器和进程的内存使用量，近年来越来越多的应用服务完成了微服务容器化改造，过去查看、监控和定位内存使用量的方法似乎时常不太奏效。如果你的应用程序刚刚迁移到K8s中，经常被诸如以下问题所困扰：容器的...

    你感动了吗?佳能超规格镜头 RF 24-105mm F2.8深度测评

    如果要你选一支用作多题材创作的挂机镜头，那我相信很多人会选择24-105mm这个焦段的镜头。作为一支可以实现从广角到长焦的变焦镜头，24-105mm有着丰富的焦段选择。只是基于镜头体积以及光学结构上的限制，此前的24-105mm镜头只能恒定在F4的光圈。而佳能打破了这一限制，将实用焦段和恒定光圈完美...

    vue中router常见的三种传参方式

    目录：我们在使用vue开发的过程中使用router跳转的时候肯定会遇到传参的情况；一般情况就三种传参是最常见的；那我们就来看看都有那几种传参方式吧！第一种：{ path: '/mall:id', name: 'Mall', component:...

    一起学Vue:路由(vue-router)

    前言学习vue-router就要先了解路由是什么？前端路由的实现原理？vue-router如何使用？等等这些问题，就是本篇要探讨的主要问题。vue-router是什么路由是什么？大概有两种说法：从路由的用途上来解释路由就是指随着浏览器地址栏的变化，展示给用户的页面也不相同。从路由的实现原理上来解释路...

    从 Vue2.0 到 React17——React 开发入门

    作者：佚名来源：前端大全前言找工作时发现有一些公司是以React作为技术栈的，而且薪资待遇都不错，为了增加生存的筹码，所以还是得去学一下React，增加一项求生技能。因为我用Vue2.0开发项目已经四年了，故用Vue2.0开发项目的思路来学习React。前端项目是由一个个页面组成的，对于Vue来说，...

    蜀ICP备2024111239号-14