美文网首页博客
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

        延伸阅读

        深度阅读

        • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

        栏目导航

        热点阅读

        博客

        关于我们|服务条款|联系我们|Python+Django搭建个人博客(4)-Django模板|投稿指南|网站地图|RSS订阅|排版工具|手机版

        提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

        Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

        备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

        本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

        所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！