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

模板演示

• 建立blog下templates文件夹

• 添加博客首页HTML

  • 在templates文件夹中新建一个blog_index.html
  • 在blog_index.html写简单的欢迎内容

    
    
    
        
    
    
        
    welcome to my blog
        
    好好学习，天天向上
        
    
            
    Python
            
    C++
            
    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%}
        
    
    
    
    

    ![image](https://upload-images.jianshu.io/upload_images/12041448-5ae6bde97962f70b?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

• 判断用户是否登录

  • index.html添加

    {% if request.user.is_authenticated %}
        
    {{request.user.username}},welcome
    {% else %}
        
    请登录
    {% 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://upload-images.jianshu.io/upload_images/12041448-065ce87e2cceec15?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
    找到所有css、js、图像，修改链接如下：
    
    原：
    
    ``
    
    修改为:
    
    ``
    
    搜索关键字 css、js、img,注意还要在原路径下加`blog/`：
    
    `
`
    
    ``

    ``
    
    
    ![image](https://upload-images.jianshu.io/upload_images/12041448-564d118f89b30feb?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
    如果报错可以在终端上或者网页控制台看看怎么回事，例如：
    
    ![image](https://upload-images.jianshu.io/upload_images/12041448-ed4017160ff15922?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
    路径有问题，404，就是忘了加`blog/`

• 修改博客模板的内容

  • DayBreak's Blog

  • 我的博客有人气吗？

    image

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

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

    image

    每个

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

    ![image](https://upload-images.jianshu.io/upload_images/12041448-e83e4a70c147f3f4?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
    
    ![image](https://upload-images.jianshu.io/upload_images/12041448-c29de0cb5c094543?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
- 修改代码如下
    ```html
    {% for post in post_list %}
    

      
        

          {{post.title}}
        
        

          {{post.subtitle}}
        
      
      
Posted by
        {{post.author}}
        {{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