zoukankan      html  css  js  c++  java
  • Django基础005-Django开发的整体过程

    1.写views

    views.py代码块

    1.在前端以/article/{{ article.id }}这种方式请求后台,

    参数配置在urls.py中path('category/<int:id>',views.category),#<int:id>:配置参数,id必须和views里的方法的变量要一致,参数类型支持int,str等

    在view方法中定义变量,变量名和urls.py中一致

    2.在前端以url?key=value

    在views中用request.GET.get('key')获取参数

    3.在前端以url key-value form表单、ajax等参数上传的

    在views中用request.POST.get('key')来获取参数

    4.在前端以json,或者xml等格式请求后台

    在views用request.body来获取参数

     1 def index(request):
     2     print('index...........')
     3     categories = models.Category.objects.all()
     4     articles = models.Article.objects.all()
     5     return render(request,'index.html',{'articles':articles})
     6 
     7 
     8 def category(request,id):
     9     category_obj = models.Category.objects.get(id=id)
    10     # category_obj = models.Category.objects.filter(id=id).first()
    11     # articles = models.Article.objects.filter(category=category_obj)
    12     articles = models.Article.objects.filter(category_id=id)
    13     return render(request, 'category.html', {'articles': articles,'category_obj':category_obj})
    14 
    15 
    16 def article(request,id):
    17     article_obj = models.Article.objects.get(id=id)
    18     print(article_obj.category.name)
    19     return render(request,'detail.html',{'article_obj':article_obj})
    20 
    21 def add_article(request):
    22     # request.path_info#请求路径
    23     # request.method#请求方式
    24     # request.GET.get('key')#获取url?key=的值
    25     # request.POST.get('key')#获取url key-value
    26     # request.COOKIES#获取cookie的值
    27     # request.FILES#获取文件
    28     # request.body#body里面的内容,比如xml,json等
    29     # request.META#获取请求头
    30 
    31     print(request.method)  # 请求方式
    32     print(request.GET)  # url?key=vlauye
    33     print(request.POST)  # url  key-vlaue
    34     print(request.COOKIES)
    35     print(request.path_info)  # 请求的路径 /post /cate
    36     print(request.FILES)  # 获取文件
    37     print(request.META)  # 请求头相关的都在这里
    38     print(request.body)  # body里面的内容
    39 
    40 
    41 
    42     if request.method == 'GET':
    43         return render(request,'post.html')
    44     else:
    45         title = request.POST.get('title')
    46         content = request.POST.get('content')
    47         category = request.POST.get('category')
    48         models.Article.objects.create(title=title,content=content,category_id=category)
    49         return HttpResponseRedirect('/')

    2.配置url

    urls.py代码块

     1 from user import views #引入模块
     2 
     3 urlpatterns = [
     4     path('admin/', admin.site.urls),
     5     path('index/', views.user_info),
     6     path('welcome/',views.welcome),
     7     path('',views.index),#配置url
     8     path('category/<int:id>',views.category),#<int:id>:配置参数,id必须和views里的方法的变量要一致
     9     # path('category/<str:uri>',views.category),#配置url
    10     path('post',views.add_article),
    11     path('article/<int:id>',views.article),
    12 ]

    3.前端代码

    3.1 base.html:公共的代码块

    <!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>{{web_site.title}}</title>
    
        <meta name="description"
              content="{{web_site.desc}}">
        <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">{{web_site.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 content %}
                {% 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-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-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-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="查看【{{ category.name }}】分类下所有文章">{{ 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">
    
    
                                <a href="/tag/Virtualenv/" class="tags f-16" id="tag-1"
                                   title="【Virtualenv】标签下有3篇文章">Virtualenv</a>
    
                                <a href="/tag/Web-development/" class="tags f-16" id="tag-2"
                                   title="【后端开发】标签下有10篇文章">后端开发</a>
    
                                <a href="/tag/python-crawler/" class="tags f-16" id="tag-3"
                                   title="【Python爬虫】标签下有8篇文章">Python爬虫</a>
    
                                <a href="/tag/MD5/" class="tags f-16" id="tag-4"
                                   title="【MD5加密】标签下有2篇文章">MD5加密</a>
    
                                <a href="/tag/Requests/" class="tags f-16" id="tag-5"
                                   title="【Requests】标签下有4篇文章">Requests</a>
    
                                <a href="/tag/threading/" class="tags f-16" id="tag-6"
                                   title="【多线程】标签下有4篇文章">多线程</a>
    
                                <a href="/tag/multiprocessing/" class="tags f-16" id="tag-7"
                                   title="【多进程】标签下有2篇文章">多进程</a>
    
                                <a href="/tag/Django/" class="tags f-16" id="tag-8"
                                   title="【Django】标签下有10篇文章">Django</a>
    
                                <a href="/tag/MySQL/" class="tags f-16" id="tag-9"
                                   title="【MySQL】标签下有4篇文章">MySQL</a>
    
                                <a href="/tag/database/" class="tags f-16" id="tag-10"
                                   title="【数据库】标签下有2篇文章">数据库</a>
    
                                <a href="/tag/Nginx/" class="tags f-16" id="tag-11"
                                   title="【Nginx】标签下有4篇文章">Nginx</a>
    
                                <a href="/tag/Gunicorn/" class="tags f-16" id="tag-12"
                                   title="【Gunicorn】标签下有1篇文章">Gunicorn</a>
    
                                <a href="/tag/Redis/" class="tags f-16" id="tag-13"
                                   title="【Redis】标签下有2篇文章">Redis</a>
    
                                <a href="/tag/django-redis/" class="tags f-16" id="tag-14"
                                   title="【django-redis】标签下有1篇文章">django-redis</a>
    
                                <a href="/tag/cache/" class="tags f-16" id="tag-15"
                                   title="【Cache】标签下有1篇文章">Cache</a>
    
                                <a href="/tag/Linux/" class="tags f-16" id="tag-16"
                                   title="【Linux】标签下有8篇文章">Linux</a>
    
                                <a href="/tag/crontab/" class="tags f-16" id="tag-17"
                                   title="【crontab】标签下有1篇文章">crontab</a>
    
                                <a href="/tag/PhantomJS/" class="tags f-16" id="tag-18"
                                   title="【PhantomJS】标签下有1篇文章">PhantomJS</a>
    
                                <a href="/tag/selenium/" class="tags f-16" id="tag-19"
                                   title="【Selenium】标签下有2篇文章">Selenium</a>
    
                                <a href="/tag/queue/" class="tags f-16" id="tag-20"
                                   title="【Queue】标签下有1篇文章">Queue</a>
    
                                <a href="/tag/configparser/" class="tags f-16" id="tag-21"
                                   title="【configparser】标签下有1篇文章">configparser</a>
    
                                <a href="/tag/paramiko/" class="tags f-16" id="tag-22"
                                   title="【paramiko】标签下有1篇文章">paramiko</a>
    
                                <a href="/tag/SSH/" class="tags f-16" id="tag-23"
                                   title="【SSH】标签下有3篇文章">SSH</a>
    
                                <a href="/tag/shell/" class="tags f-16" id="tag-24"
                                   title="【shell】标签下有4篇文章">shell</a>
    
                                <a href="/tag/Scrapy/" class="tags f-16" id="tag-25"
                                   title="【Scrapy】标签下有2篇文章">Scrapy</a>
    
                                <a href="/tag/docker/" class="tags f-16" id="tag-26"
                                   title="【Docker】标签下有10篇文章">Docker</a>
    
                                <a href="/tag/docker-compose/" class="tags f-16" id="tag-27"
                                   title="【docker-compose】标签下有5篇文章">docker-compose</a>
    
                                <a href="/tag/docker-build/" class="tags f-16" id="tag-28"
                                   title="【容器化】标签下有8篇文章">容器化</a>
    
                                <a href="/tag/centos/" class="tags f-16" id="tag-29"
                                   title="【CentOS】标签下有2篇文章">CentOS</a>
    
                                <a href="/tag/pip/" class="tags f-16" id="tag-30"
                                   title="【pip】标签下有1篇文章">pip</a>
    
                                <a href="/tag/argparse/" class="tags f-16" id="tag-31"
                                   title="【argparse】标签下有1篇文章">argparse</a>
    
                                <a href="/tag/click/" class="tags f-16" id="tag-32"
                                   title="【Click】标签下有1篇文章">Click</a>
    
                                <a href="/tag/OAuth2/" class="tags f-16" id="tag-33"
                                   title="【OAuth2.0】标签下有1篇文章">OAuth2.0</a>
    
                                <a href="/tag/django-allauth/" class="tags f-16" id="tag-34"
                                   title="【django-allauth】标签下有1篇文章">django-allauth</a>
    
                                <a href="/tag/git/" class="tags f-16" id="tag-35"
                                   title="【Git】标签下有2篇文章">Git</a>
    
                                <a href="/tag/ci-cd/" class="tags f-16" id="tag-36"
                                   title="【CI/CD】标签下有6篇文章">CI/CD</a>
    
                                <a href="/tag/Jenkins/" class="tags f-16" id="tag-37"
                                   title="【Jenkins】标签下有6篇文章">Jenkins</a>
    
                                <a href="/tag/Vue/" class="tags f-16" id="tag-38"
                                   title="【Vue.js】标签下有3篇文章">Vue.js</a>
    
                                <a href="/tag/ansible/" class="tags f-16" id="tag-39"
                                   title="【Ansible】标签下有1篇文章">Ansible</a>
    
                                <a href="/tag/jinja2/" class="tags f-16" id="tag-40"
                                   title="【jinja2】标签下有1篇文章">jinja2</a>
    
                                <a href="/tag/yaml/" class="tags f-16" id="tag-41"
                                   title="【YAML】标签下有1篇文章">YAML</a>
    
                            </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

    3.2 index.html:首页代码块

    {% extends 'base.html' %}
    
    {% block content %}
        <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="{{article.title}}">
                                </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}}</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}}</p>
    
                                <div class="text-muted mb-0 f-12">
                                    <a class="cate" href="/category/hello-python/" title="查看当前分类下更多文章">
                                        <i class="fa fa-book mr-1"></i>{{article.category.name}}</a>
                                    <span><i class="fa fa-eye ml-2 mr-1"></i>226</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">
    
                        <span class="text-secondary" title="当前页已经是首页">上一页</span>
    
                        <span class="mx-2">第&nbsp;1&nbsp;/&nbsp;4&nbsp;页</span>
    
                        <a class="text-success" href="?page=2">下一页</a>
    
                    </div>
                </div>
    {% endblock %}
    index.html

    3.3 detail.html:文章详情页代码块

    <!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>{{article_obj.id}}</title>
    
        <meta name="description"
              content="{{article_obj.content}}">
        <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">
        <link href="/static/css/detail.css?v=20190918.07" rel="stylesheet">
        <link href="/static/css/monokai.css?v=20190910.2" rel="stylesheet">
        <link href="/static/css/base_comment.css?v=20190114.554" rel="stylesheet">
    
        <!--根据cookies判断是否启用暗色主题-->
    
    </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">TendCode</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>
    
                <li class="nav-item mr-2">
    
                    <a class="nav-link py-md-3 " href="/tool/"><i class="fa fa-balance-scale mr-1"></i>在线工具</a>
                </li>
    
    
                <li class="nav-item mr-2 d-none d-lg-block">
                    <a class="nav-link py-md-3" href="https://hao.tendcode.com" target="_blank"><i
                            class="fa fa-chrome mr-1"></i>微草导航</a>
                </li>
    
    
                <li class="nav-item mr-2 ">
    
                    <a class="nav-link py-md-3 " href="/about/"><i class="fa fa-anchor 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>
            <ul class="navbar-nav">
    
                <li class="nav-item mr-2">
                    <a class="nav-link py-md-3" href="/accounts/login/?next=/">登录</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link py-md-3" href="/accounts/signup/?next=/">注册</a>
                </li>
    
            </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 justify-content-center">
                <div class="col-lg-9 col-xl-10">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb bg-white border-0 rounded-0 mb-2 py-2 f-15">
                            <li class="breadcrumb-item">
                                <i class="fa fa-home mr-1"></i><a href="/">首页</a>
                            </li>
                            <li class="breadcrumb-item">
                                <a href="/category/{{article_obj.category.id}}">{{article_obj.category.name}}</a>
                            </li>
                            <li class="breadcrumb-item active d-none d-md-block" aria-current="page">{{article_obj.title}}</li>
                            <li class="breadcrumb-item active d-md-none" aria-current="page">当前位置</li>
                        </ol>
                    </nav>
                    <div class="card rounded-0 border-0" id="article">
                        <div class="card-body px-2 px-md-3 pb-0">
                            <h1 class="card-title text-center font-weight-bold text-info">{{article_obj.title}}</h1>
                            <hr>
                            <div class="text-center f-13">
                                <span class="mx-2" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="最后编辑于{{article_obj.update_time}}">{{article_obj.update_time}}</span>
                                <span class="mx-2">阅读 702</span>
                                <a class="mx-2 to-com" href="#comment-block">评论 20</a>
                            </div>
                            <div class="article-body mt-4 f-17" style="line-height:1.8">
                                {{ article_obj.content }}
                            </div>
                            <div class="tag-cloud my-4">
    
                                <a class="tags f-16" href="/tag/Web-development/">后端开发</a>
    
                                <a class="tags f-16" href="/tag/Django/">Django</a>
    
                            </div>
                            <nav class="more-page f-16">
                                <ul class="pagination justify-content-between">
                                    <li class="page-item">
    
                                        <a class="d-none d-md-block" href="/article/ansible-and-docker/" title="上一篇:使用 Ansible 工具批量操作虚拟机集群,自动化安装 Docker">
                                            <i class="fa fa-chevron-left mr-1"></i>
                                            使用 Ansible 工具批量操作虚
                                        </a>
                                        <a class="d-md-none" href="/article/ansible-and-docker/">
                                            <i class="fa fa-chevron-left mr-1"></i>上一篇</a>
    
                                    </li>
                                    <li class="page-item">
    
                                        <a class="d-none d-md-block" href="/article/python-shell-cmd/" title="下一篇:使用 python 执行 shell 命令的几种常用方式">
                                            使用 python 执行 shell
                                            <i class="fa fa-chevron-right ml-1"></i>
                                        </a>
                                        <a class="d-md-none" href="/article/python-shell-cmd/">
                                            下一篇<i class="fa fa-chevron-right ml-1"></i>
                                        </a>
    
                                    </li>
                                </ul>
                            </nav>
    
                            <div class="text-center">
                                <button class="btn btn-danger rounded-0" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="sponsor-zfb sponsor-wx" style="line-height: 1;font-size: .8rem;">
                                    <i class="fa fa-cny"></i>
                                    如果文章对你有所帮助,可以赞助本站
                                    <i class="fa fa-chevron-down"></i>
                                </button>
                            </div>
                            <div class="row p-3">
                                <div class="col text-center">
                                    <div class="collapse multi-collapse" id="sponsor-wx">
                                        <div class="p-1 text-success">微信</div>
                                        <img class="w-75" src="/static/blog/img/reward_wx.png">
                                    </div>
                                </div>
                                <div class="col text-center">
                                    <div class="collapse multi-collapse" id="sponsor-zfb">
                                        <div class="p-1 text-primary">支付宝</div>
                                        <img class="w-75" src="/static/blog/img/reward_zfb.png">
                                    </div>
                                </div>
                            </div>
                        </div>
    
                    </div>
    
    
                </div>
            </div>
        </div>
        <!--图片预览-->
        <div class="modal fade" id="img-to-big" tabindex="-1" role="dialog" aria-labelledby="img-to-bigTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document" style="max- 90%">
                <img class="rounded mx-auto d-block" alt="image" style="max- 100%">
            </div>
        </div>
        <!--前后文章-->
    
        <div class="more-blog" id="icon-pre-blog">
            <a href="/article/ansible-and-docker/">
                <i class="fa fa-angle-left fa-3x"></i>
            </a>
        </div>
    
    
        <div class="more-blog" id="icon-next-blog">
            <a href="/article/python-shell-cmd/">
                <i class="fa fa-angle-right fa-3x"></i>
            </a>
        </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>
    detail.html
  • 相关阅读:
    20200305 VMware虚拟机安装及centOS
    20200303 pandas
    20200302 数据分析之numpy以及Jupyter
    Bash(Terminal)高频命令
    E117: Unkown function: vundle#installer#new
    字符串输入之%s
    结合getchar()理解缓冲区
    在HEXO主题中添加站内搜索
    字符串的全排列
    无法启动程序,系统找不到指定的文件
  • 原文地址:https://www.cnblogs.com/cjxxl1213/p/13574244.html
Copyright © 2011-2022 走看看