清秋2018

导航

< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

统计

Django 基础05篇 上下文管理和前端代码复用

一、上下文管理器

在views中重复使用的代码，可以通过上下文管理器（在setting.py文件中的TEMPLATES中配置）中实现，减少代码冗余

上下文管理器的处理流程如下：

1.先走完views里面的代码，将结果返回给前端

2.然后再将上下文的结果返回给前端

3.上下文只有在返回的是html的时候，才会走上下文处理器

当views和上下文处理器中都定义了的变量值，那么HTML页面中以views中定义的为准。

1.1 上下文context_process.py代码

from . import models
def category_process(request):
    #  先走到views，然后在走到setting中的TEMPLATES上下文管理器中
    categories = models.Category.objects.all()
    return {'title': 'XXX博客', 'categories': categories}

1.2 setting.py文件中的配置

复制代码
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
                'user.context_process.category_process'
            ],
        },
    },
]  # 前后端不分离时用到
复制代码

二、前端公共代码复用

前端很多代码是在不同页面中都是一样的，每个都去修改一遍，工作量太大，并且代码重复，所以引入了公共代码复用。

1.先建立复用代码base.html，如果这一块代码不是公共的，则预留代码块

{% block body%}
//预留代码块，body是唯一
{% endblock %}

复制代码
<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="referrer" content="origin">
    <!-- TDK and ICO -->
    <title>Tend to Code_一个使用django和bootstrap搭建的个人博客_TendCode</title>

    <meta name="description"
          content="TendCode是一个Django搭建的博客，本网站后端使用Django框架搭建，前端使用Bootstrap框架，主要分享博主在Python以及其他编程语言的学习心得。">
    <meta name="keywords" content="Python自学,Python爬虫,Django博客,Python web开发,个人博客">
    <!--站长验证-->

    <link rel="shortcut icon" href="/static/blog/img/favicon.ico" type="image/x-icon"/>
    <!-- Bootstrap and font-awesome CSS -->
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="/static/js/headroom.min.js"></script>
    <!-- blog CSS -->
    <link href="/static/css/base.css" rel="stylesheet">

    <!--根据cookies判断是否启用暗色主题-->
    {% block css %}
    {% endblock %}
</head>
<body>
<!--导航开始-->

<nav class="navbar navbar-expand-md bg-white fixed-top blog-navbar py-md-0">
    <a class="navbar-brand d-md-none d-lg-block" id="site-logo-name" href="/">
        <strong class="px-2">{{ title }}</strong>
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item mr-2">

                <a class="nav-link py-md-3 active" href="/"><i class="fa fa-home mr-1"></i>首页<span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item mr-2">

                <a class="nav-link py-md-3 " href="./archive.html"><i class="fa fa-sitemap mr-1"></i>归档</a>
            </li>



            <form class="nav-item navbar-form mr-2 py-md-2" role="search" method="get" id="searchform"
                  action="/search/">
                <div class="input-group">
                    <input type="search" name="q" class="form-control rounded-0" placeholder="站内搜索" autocomplete="off"
                           required=True>
                    <div class="input-group-btn">
                        <button class="btn btn-info rounded-0" type="submit"><i class="fa fa-search"></i></button>
                    </div>
                </div><!-- /input-group -->
            </form>
        </ul>

    </div>
</nav>

<!--导航结束-->

<!--消息块-->


<!--回到顶部按钮-->
<div class="text-center" id="to-top">
    <i class="fa fa-chevron-up" id="btn-top" title="回到顶部"></i>
</div>

<!--主要内容块-->
<main>
    <div class="container">
        <div class="row">
            {% block body %}
            {% endblock %}
            <div class="col-lg-4">


                <!--个人空间-->
                <div class="card border-0 rounded-0 px-3 mb-2 mb-md-3 d-none d-lg-block" id="home-card">
                    <div class="card-header bg-white px-0">
                        <strong><i class="fa fa-paper-plane mr-2 f-17"></i>个人空间</strong>
                    </div>
                    <div class="card-body px-0 pt-3 pb-1">
                        <div class="row text-center">
                            <div class="col">
                                <a href="https://github.com/Hopetree" target="_blank" title="进入博主的Github查看博客源码">
                                    <img style="max-width:40px" alt="博主的github" src="https://tendcode.com/static/blog/img/github.png">
                                    <p class="mt-2">Github</p>
                                </a>
                            </div>
                            <div class="col">
                                <a href="/timeline/" target="_blank" title="查看网站建站历程">
                                    <img style="max-width:40px" alt="网站的建站历程" src="https://tendcode.com/static/blog/img/blog.png">
                                    <p class="mt-2">Timeline</p>
                                </a>
                            </div>

                            <div class="col">
                                <a href="/timeline/" target="_blank" title="查看网站建站历程">
                                    <img style="max-width:40px" alt="网站的建站历程" src="https://tendcode.com/static/blog/img/blog.png">
                                    <p class="mt-2">Timeline</p>
                                </a>
                            </div>

                        </div>
                    </div>
                </div>
                <!--文章分类-->
                <div class="card border-0 rounded-0 px-3 mb-2 mb-md-3" id="category-card">
                    <div class="card-header bg-white px-0">
                        <strong><i class="fa fa-book mr-2 f-17"></i>文章分类</strong>
                    </div>

                    <ul class="list-group list-group-flush f-16">
                        {% for category in categories %}
                        <li class="list-group-item d-flex justify-content-between align-items-center pr-2 py-2">
                            <a class="category-item" href="/category/{{ category.id }}"
                               title="查看【CI/CD】分类下所有文章">{{ category.name }}</a>
                            <span class="badge text-center" title="当前分类下有{{ category.article_set.count }}篇文章">{{ category.article_set.count }}</span>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
                <!--标签云-->
                <div class="card border-0 rounded-0 px-3 mb-2 mb-md-3" id="tag-card">
                    <div class="card-header bg-white px-0">
                        <strong><i class="fa fa-tags mr-2 f-17"></i>标&nbsp;签&nbsp;云</strong>
                    </div>
                    <div class="card-body px-0 py-3">
                        <div class="tag-cloud">

                            {% for tag in tag_list %}
                            <a href="/tag/{{ tag }}/" class="tags f-16" id="tag-1"
                               title="【{{ tag }}】标签下有3篇文章">{{ tag }}</a>
                            {%  endfor %}


                        </div>
                    </div>
                </div>
                <!--友链-->
                <div class="d-none d-lg-block">
                    <div class="card border-0 rounded-0 px-3 mb-2 mb-md-3" id="friends-card">
                        <div class="card-header bg-white px-0">
                            <strong><i class="fa fa-link mr-2 f-17"></i>友情链接</strong>
                        </div>
                        <div class="card-body px-0 py-3">
                            <div class="tool-list">


                                <div class="w-50 float-left text-center mb-2">
                                    <div class="mx-2">
                                        <a href="https://github.com/Hopetree/izone" title="izone 博客项目的源代码"
                                           target="_blank">
                                            博客源码</a>
                                    </div>
                                </div>

                                <div class="w-50 float-left text-center mb-2">
                                    <div class="mx-2">
                                        <a href="https://frostming.com" title="一个基于 Flask 开发的博客" target="_blank">
                                            Frost&#39;s Blog</a>
                                    </div>
                                </div>

                                <div class="w-50 float-left text-center mb-2">
                                    <div class="mx-2">
                                        <a href="https://zmrenwu.com" title="Django 博客教程分享者" target="_blank">
                                            追梦人物</a>
                                    </div>
                                </div>

                                <div class="w-50 float-left text-center mb-2">
                                    <div class="mx-2">
                                        <a href="https://www.dusaiphoto.com/" title="Django 搭建的博客，分享博客教程"
                                           target="_blank">
                                            杜赛的个人网站</a>
                                    </div>
                                </div>

                                <div class="w-50 float-left text-center mb-2">
                                    <div class="mx-2">
                                        <a href="https://www.jerrycoding.com/" title="Jerry 的个人博客" target="_blank">
                                            Jerry Coding</a>
                                    </div>
                                </div>

                                <div class="w-50 float-left text-center mb-2">
                                    <div class="mx-2">
                                        <a href="https://boywithacoin.cn/" title="Stray_Camel的个人技术博客" target="_blank">
                                            Stray_Camel</a>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<!--js cookie 插件-->
<script src="/static/js/js.cookie.min.js?v=20191123.12"></script>
<script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
    $(function () {
        var myElement = document.querySelector(".blog-navbar");
        var headroom = new Headroom(myElement);
        headroom.init()
    });
</script>
<script src="/static/js/base.js?v=20191123.0909890"></script>


<footer class="container-fluid mt-4 py-0">
    <div class="card-body text-center px-0 f-14">
        <p class="card-text mb-1">Copyright&nbsp;&copy;&nbsp;<span id="year-info"></span>
           &nbsp;Powered&nbsp;by&nbsp;Django.
        </p>


    </div>
</footer>
</body>
</html>
base.html
复制代码

 

2.在index.html中要复用base.html代码

先继承base.html   

{% extends 'base.html' %}

在加入不复用的代码，也可以使用include来加入其它html

{% block body%}

{% include ‘xx.html’%}

{% endblock %}

复制代码
{% extends 'base.html' %}

{% block body %}
    <div class="col-lg-8">


                <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">


                        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>


                        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>


                        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>


                        <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>


                    </ol>
                    <div class="carousel-inner">


                        <div class="carousel-item active">

                            <a href="./detail.html">
                                <img class="w-100" src="https://tendcode.com/cdn/article/180415/jiandan.png"
                                     alt="容器化部署博客（3）—— 5分钟完成项目迁移">
                            </a>
                        </div>


                        <div class="carousel-item">

                            <a href="/article/set-up-django-with-nginx-and-gunicorn/">
                                <img class="w-100" src="https://tendcode.com/cdn/article/180415/jiandan.png"
                                     alt="在 Linux 服务器上使用 Nginx + Gunicorn 部署 Django 项目的正确姿势">
                            </a>
                        </div>


                        <div class="carousel-item">

                            <a href="/article/virtualenv-for-python/">
                                <img class="w-100" src="https://tendcode.com/cdn/article/180415/jiandan.png"
                                     alt="Python虚拟环境Virtualenv分别在Windows和Linux上的安装和使用">
                            </a>
                        </div>


                        <div class="carousel-item">

                            <a href="/article/jiandan-meizi-spider/">
                                <img class="w-100" src="https://tendcode.com/cdn/article/180415/jiandan.png" alt="煎蛋网妹子图爬虫">
                            </a>
                        </div>

                    </div>
                    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
                <div class="text-secondary font-weight-bold py-2 f-15 choice">


                    <a class="pb-2  active" href="/">
                        <i class="fa fa-bars mr-1"></i>时间排序</a>

                </div>


                <div class="summary-list">
                    {% for article in articles %}
                    <div class="media mb-1 mb-sm-2 p-2 p-lg-3">
                        <div class="align-self-center mr-2 mr-lg-3 w-25 modal-open">
                            <a href="/article/{{ article.id }}" target="_blank">
                                <img class="w-100 article-img" src="https://tendcode.com/cdn/article/191029/python_shell.png"
                                     alt="Python 模板渲染库 yaml 和 jinja2 的实战经验分享">
                            </a>
                        </div>
                        <div class="media-body">

                            <div class="text-muted mb-2 f-12">


                                <img class="avatar"
                                     src="https://tendcode.com/media/avatar/2019/07/27/91ef76c6a7efce1b99717f97a851f3deb48f6510.png"
                                     alt="Hopetree">

                                <span>Hopetree</span>
                                <span><i class="fa fa-calendar-times-o ml-2 mr-1"></i>{{ article.create_time |date:"Y-m-d H:i:s" }}</span>
                                <!-- -->
                            </div>
                            <h2 class="mt-0 font-weight-bold text-info f-17">
                                <a href="/article/{{ article.id }}" target="_blank">{{ article.title }}</a>
                            </h2>
                            <p class="d-none d-sm-block mb-2 f-15">{{ article.content | truncatechars:50 }}</p>

                            <div class="text-muted mb-0 f-12">
                                <a class="cate" href="/category/{{ article.category.id }}" title="查看当前分类下更多文章">
                                    <i class="fa fa-book mr-1"></i>{{ article.category.name }}</a>
                                <span><i class="fa fa-eye ml-2 mr-1"></i>{{ article.read_count }}</span>
                                <a href="/article/yaml_and_jinja2/#comment-block" target="_blank" title="查看文章评论">
                                    <i class="fa fa-comments ml-2 mr-1"></i>8</a>
                            </div>
                        </div>
                    </div>
                   {% endfor %}





                </div>
                <div class="text-center mt-2 mt-sm-1 mt-md-0 mb-3 f-16">
                    {% if articles.has_previous %}
                        <a class="text-success" href="?page={{ articles.previous_page_number }}">上一页</a>
                    {% else %}
                        <span class="text-secondary" title="当前页已经是首页">上一页</span>
                    {% endif %}
                    <span class="mx-2">第&nbsp;{{ articles.number }}&nbsp;/&nbsp;{{ articles.paginator.num_pages }}&nbsp;页</span>
                    {% if articles.has_next %}
                        <a class="text-success" href="?page={{ articles.next_page_number }}">下一页</a>
                    {% else %}
                        <span class="text-secondary" title="当前页已经是尾页">下一页</span>
                    {% endif %}


                </div>
            </div>
{% endblock %}
index.html
复制代码

 

posted on   清秋2018  阅读(180)  评论(0)  编辑  收藏  举报

编辑推荐：
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· winform 绘制太阳，地球，月球 运作规律
· 上周热点回顾（3.3-3.9）
点击右上角即可分享
微信分享提示
AI IDE Trae