首页技术文章Python自动化运维系列:Django搭建个人博客之前端篇

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

发布时间：2025-01-26 19:16:35
·
23 阅读
·
0 评论
文章标签： bootstrap 的博客模板

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

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