美文网首页博客
Python+Django搭建个人博客(4)-Django模板

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

作者: DayBreakL | 来源:发表于2020-03-28 22:28 被阅读0次

    模板演示

    • 建立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模板

        本文链接:https://www.haomeiwen.com/subject/chseuhtx.html