python搭建个人博客推荐_Python+Django搭建个人博客(4)-Django模板

模板演示

建立blog下templates文件夹

添加博客首页HTML

在templates文件夹中新建一个blog_index.html

在blog_index.html写简单的欢迎内容

我的博客-首页

welcome to my blog

好好学习，天天向上

1. Python
2. C++
3. Java

将blog/views.py中的index函数修改为：

def index(request):

# render渲染，表示返回渲染的网页blog_index.html

return render(request,'blog_index.html')

访问http://127.0.0.1:8000/blog/,就是blog_index.html的内容

image

理解模版系统

在views.py中指定渲染某个模版，如：

def index(request):

return render(request,'blog_index.html')

Django会自动搜寻各个App的templates文件夹，然后在blog/templates/blog_index.html中找到。

不同的app中可能存在同名的html文件，容易产生冲突怎么办？

在templates文件夹中再建立和当前app同名的文件夹，html文件放到该文件夹中，即原来的blog/templates/blog_index.html,改为blog/templates/blog/blog_index.html

修改views.py内容：

return render(request,'blog/blog_index.html')

为了更规范，html的文件名也不再叫blog_index.html,改为index.html,所以对应的view.py中的内容改为return render(request,'blog/index.html')

Django模板进阶

变量 {{变量}}

将index.html中的h1内容用{{welcome}}代替

image

将views.py中的index函数添加一个字典

def index(request):

return render(request,'blog/index.html',{'welcome':'欢迎来到本渣的博客首页'})

welcome变量的地方被替代

image

渲染列表

在views.py中index函数修改为如下语句，

def index(request):

language_list=['Python','C++','Java']

return render(request,'blog/index.html',{'welcome':'欢迎来到本渣的博客首页','language_list':language_list})

在index.html中修改代码为，{%代码%}表示代码逻辑

将列表渲染为我们注释掉的代码一样

我的博客-首页

{{welcome}}

好好学习，天天向上

{%for item in language_list%}

{{item}}

{%endfor%}

获取循环次数 forloop.counter表示循环数字，从1开始

{{item}} -- {{forloop.counter}}

image

如果要从0计数，用forloop.counter0

渲染字典

在views.py中index函数修改为如下语句:

def index(request):

language_list=['Python','C++','Java']

link_dict={

'douban':'https://www.douban.com/',

'baidu':'https://www.baidu.com/',

'google':'https://www.google.com.hk/'}

return render(request,'blog/index.html',

{'welcome':'欢迎来到本渣的博客首页',

'language_list':language_list,

'link_dict':link_dict})

在index.html的

中添加如下代码：

豆瓣

百度

谷歌

image

模版中的条件判断

在views.py中index函数修改为如下语句:

def index(request):

language_list=['Python','C++','Java']

link_dict={

'douban':'https://www.douban.com/',

'baidu':'https://www.baidu.com/',

'google':'https://www.google.com.hk/'

}

flag=True

return render(request,'blog/index.html',

{'welcome':'欢迎来到本渣的博客首页',

'language_list':language_list,

'link_dict':link_dict,

'flag':flag}

)

在index.html的

中添加if判断：我的博客-首页

{{welcome}}

好好学习，天天向上

{% if flag %}

窗前明月光，疑似地上霜

{% else %}

这里没有内容

{% endif %}

豆瓣

百度

谷歌

{%for item in language_list%}

{{item}} -- {{forloop.counter}}

{%endfor%}


判断用户是否登录

index.html添加

{% if request.user.is_authenticated %}

{{request.user.username}},welcome

{% else %}

请登录

{% endif %}

image

当我在127.0.0.1:8000/admin管理后台退出登录后：

image

使用现成的博客模版

例如：在themes下选择blog

image

选择clean blog模板

image

下载模板、解压

image

image

用下载模板的index.html文件，替换掉我们之前的index.html文件，可以看到如图，因为找不到相关的js、css、图片等素材

image

拷贝素材

在项目的根目录中新建一个static文件夹

image

在static文件夹下新建一个对应的blog文件夹，拷贝下载素材中的css、img、js、vendor四个素材到blog文件夹中

image

修改setting.py

打开setting.py,在最后一行添加

STATICFILES_DIRS=[os.path.join('static')]

修改index.html

加载static:{% load static %}


找到所有css、js、图像，修改链接如下：

原：

``

修改为:

``

搜索关键字 css、js、img,注意还要在原路径下加`blog/`：

``

``

``


如果报错可以在终端上或者网页控制台看看怎么回事，例如：


路径有问题，404，就是忘了加`blog/`

修改博客模板的内容

欢迎来到我的博客

DayBreak's Blog

我的博客有人气吗？

image

修改index.html，添加模板参数

找到index.html中和博文相关的内容

image

每个

是一组， 对应每篇博客详情页的链接



- 修改代码如下

```html

{% for post in post_list %}

{{post.title}}

{{post.subtitle}}

Posted by

{{post.date}}

{% endfor %}

```

修改views.py

def index(request):

post_list=[

{

'link':'/first_blog',

'title':'震惊！这是第一篇博客的大标题',

'subtitle':'不用震惊，这是第一篇博客的副标题',

'author':'DayBreak',

'date':'2020-03-27'

},

{

'link':'https://www.baidu.com',

'title':'震惊！这是第二篇博客的大标题',

'subtitle':'不用震惊，这是第二篇博客的副标题',

'author':'DayBreak',

'date':'2020-03-27'

}

]

return render(request,'blog/index.html',

{'post_list':post_list}

)

image

作业

image