• 2.1.1 自定义模板位置


    目录

    1. 编辑 mysite/settings.py 定义template模板位置

    不定义全局的模板,默认模板就放在 各个app自己的目录下

    2.编辑 mysite/settings.py 定义静态文件位置

    STATIC_URL 用来浏览器上匹配的

    STATICFILES_DIRS  用来当做本地文件夹路径的

    之所以定义上面两个就可以在浏览器上访问 static文件,

    因为django 用如下文件中的 配置模块自动处理了 :

    /usr/local/python3/lib/python3.6/site-packages/django$ vi conf/global_settings.py

    3.将 静态文件放到本地

    jquery bootstrap  font-awesome 可以去官网下载

    这个是我自己的网盘链接 https://share.weiyun.com/lhZ7ewUx 

    按照下图新建如下目录 下载的包 放到对应目录就可以了

    4. 新增 templates/header.html

    {% load staticfiles %} 
    
    <div class="container">
            <nav class="navbar navbar-default" role="navigation">
                    <div class="navbar-header">
                            <a class="navbra-brand" href="http://www.baidu.com"><img src="{% static 'images/pig.jpg' %}" width="100px"></a>
                    </div>
                    <div>
                            <ul class="nav navbar-nav" role="navigation">
                                    <li><a href="{% url 'blog:blog_title' %}">BLOG</a></li>
                            </ul>
                            <ul class="nav navbar-nav navbar-right" style="margin-right:10px">
                    <li><a href="#">LOGIN</a></li>
                            </ul>
                    </div>
            </nav>
    </div>

    5.新增 templates/footer.html

    <div class="container">
            <hr>
            <p class="text-center">Copy right www.itdiffer.com</p>
    </div>

    6. 修改templates/base.html

    {% load staticfiles %}
    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
        <meta http-equiv="X-UA-Compatible" conten="IE=Edge">
        <meta charset="utf-8">
        <meta name="viewport" conten="width=device-width, initial-scale=1">
        <title>{%block title%}{%endblock%}</title>
        <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
        
    </head>
    <body>
        {% include "header.html" %}
            <div class="container">
                    {% block content %}{% endblock %}
            </div>
        {% include "footer.html" %}
        {% block javascritp %}{% endblock %}
    </body>
    </html>

    7.访问浏览器http://192.168.56.101:8800/blog/

    效果如下:

  • 相关阅读:
    MongoDB 学习笔记之 MongoDB导入导出
    快学Scala 第十四课 (读取行,读取字符, 控制台读取)
    MongoDB 学习笔记之 权限管理基础
    MongoDB 学习笔记之 索引
    MongoDB 学习笔记之 游标
    MongoDB 学习笔记之 查询表达式
    MongoDB 学习笔记之 基本CRUD
    MongoDB 学习笔记之 入门安装和配置
    Eclipse设置JVM的内存参数
    cron表达式详解
  • 原文地址:https://www.cnblogs.com/yaoyuanchun/p/13969289.html
Copyright © 2020-2023  润新知