Python+Django搭建个人博客(4)-Django模板

2020-03-28 本文已影响0人 DayBreakL

模板演示

建立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')

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>

    ![image](https://img.haomeiwen.com/i12041448/5ae6bde97962f70b?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

判断用户是否登录

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

    ![image](https://img.haomeiwen.com/i12041448/065ce87e2cceec15?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
    找到所有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>`
    
    
    ![image](https://img.haomeiwen.com/i12041448/564d118f89b30feb?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
    如果报错可以在终端上或者网页控制台看看怎么回事，例如：
    
    ![image](https://img.haomeiwen.com/i12041448/ed4017160ff15922?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
    路径有问题，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">对应每篇博客详情页的链接

    ![image](https://img.haomeiwen.com/i12041448/e83e4a70c147f3f4?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
    
    ![image](https://img.haomeiwen.com/i12041448/c29de0cb5c094543?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
- 修改代码如下
    ```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.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

Python+Django搭建个人博客(4)-Django模板

模板演示

理解模版系统

Django模板进阶

作业

猜你喜欢

热点阅读