模板演示
-
建立blog下templates文件夹
-
添加博客首页HTML
- 在templates文件夹中新建一个blog_index.html
- 在blog_index.html写简单的欢迎内容
<!DOCTYPE html> <html> <head> <title>我的博客-首页</title> </head> <body> <h1>welcome to my blog</h1> <h3>好好学习，天天向上</h3> <ol> <li>Python</li> <li>C++</li> <li>Java</li> </ol> </body> </html>
-
将
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')
- 在templates文件夹中再建立和当前app同名的文件夹，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中修改代码为，{%代码%}表示代码逻辑将列表渲染为我们注释掉的代码一样
<!DOCTYPE html> <html> <head> <title>我的博客-首页</title> </head> <body> <h1>{{welcome}}</h1> <h3>好好学习，天天向上</h3> <ol> <!--for循环--> {%for item in language_list%} <li>{{item}}</li> <!--与python语法不一样的地方，模版中需要有结束语句，html文件不会按照缩进处理--> {%endfor%} </ol> <!-- <ol> <li>Python</li> <li>C++</li> <li>Java</li> </ol> --> </body> </html> -
获取循环次数
forloop.counter表示循环数字，从1开始<li>{{item}} -- {{forloop.counter}}</li>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的<body>中添加如下代码：<a href="{{link_dict.douban}}">豆瓣</a> <a href="{{link_dict.baidu}}">百度</a> <a href="{{link_dict.google}}">谷歌</a>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的<body>中添加if判断：<!DOCTYPE html> <html> <head> <title>我的博客-首页</title> </head> <body> <h1>{{welcome}}</h1> <h3>好好学习，天天向上</h3> {% if flag %} <p>窗前明月光，疑似地上霜</p> {% else %} <p>这里没有内容</p> {% endif %} <a href="{{link_dict.douban}}">豆瓣</a> <a href="{{link_dict.baidu}}">百度</a> <a href="{{link_dict.google}}">谷歌</a> <ol> {%for item in language_list%} <li>{{item}} -- {{forloop.counter}}</li> {%endfor%} </ol> </body> </html>
- 在
-
判断用户是否登录
-
index.html添加{% if request.user.is_authenticated %} <p>{{request.user.username}},welcome</p> {% else %} <p>请登录</p> {% endif %}image
当我在
127.0.0.1:8000/admin管理后台退出登录后：image
-
-
使用现成的博客模版
https://startbootstrap.com/ 选择自己喜欢的模板
-
例如：在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、图像，修改链接如下：
原：
`<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">`
修改为:
`<link href="{%static 'blog/vendor/bootstrap/css/bootstrap.min.css'%}" rel="stylesheet">`
搜索关键字 css、js、img,注意还要在原路径下加`blog/`：
`<header class="masthead" style="background-image: url('{%static 'blog/img/home-bg.jpg'%}')">`
`<script src="{%static 'blog/vendor/jquery/jquery.min.js'%}"></script>`
`<script src="{%static 'blog/vendor/bootstrap/js/bootstrap.bundle.min.js'%}"></script>`
如果报错可以在终端上或者网页控制台看看怎么回事，例如：
路径有问题，404，就是忘了加`blog/`
-
修改博客模板的内容
-
<title>欢迎来到我的博客</title> -
<h1>DayBreak's Blog</h1> -
<span class="subheading">我的博客有人气吗？</span>image
-
-
修改index.html，添加模板参数
-
找到index.html中和博文相关的内容
image
每个
<div class="post-preview">是一组，<a href="post.html">对应每篇博客详情页的链接
-
- 修改代码如下
```html
{% for post in post_list %}
<div class="post-preview">
<a href="{{post.link}}">
<h2 class="post-title">
{{post.title}}
</h2>
<h3 class="post-subtitle">
{{post.subtitle}}
</h3>
</a>
<p class="post-meta">Posted by
<a href="#">{{post.author}}</a>
{{post.date}}</p>
</div>
<hr>
{% endfor %}
```
-
修改
views.pydef 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
网友评论