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%}
      1. {{item}}
      2. {%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%}
      1. {{item}} -- {{forloop.counter}}
      2. {%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,添加模板参数

    ![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}}


{% 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模板)