カスタムフィルタは、静的なテンプレートファイルの別名は、コンポーネント逆引き参照を継承しました

その他 2019-10-06 22:59:20 訪問数: null

コンテンツ今日

  1. テンプレートの継承
  2. パッケージ
  3. カスタムフィルタ
  4. inclusion_tag
  5. 静的な設定ファイル
  6. エイリアスと逆解析
  7. URL名前空間

テンプレートの継承

なぜテンプレートの継承？

多くのページがありますが見つかり書き込みhtmlページを繰り返す必要はないホイールを作成するための同様のスタイルを持っています

Webフレームワークは、HTMLページを動的に生成するための非常に便利な方法を必要とします。最も一般的な方法は、テンプレートを使用することです。

必要なテンプレートの一部は、静的なHTMLページと同様に、静的な部分に動的なコンテンツのためのいくつかの特別なテンプレート構文が含まれています。

テンプレートから分離デザインテンプレートを実装ビジネスロジックはディスプレイの内容を表示し、ビューはテンプレートのいずれかを使用することができ、テンプレートは複数のビューのために使用することができます。

どのようにテンプレートの継承を実現するには？

1. 创建一个base.html页面(作为母版,其他页面来继承它使用 名字随便取)
2. 在母版中定义block块(可以定义多个,整个页面任意位置)
    {% block content %}  <!-- 预留的钩子,共其他需要继承它的html,自定义自己的内容content -->
    {% endblock %}
3 其他页面继承写法
    {% extends 'base.html' %}  必须放在页面开头
4 页面中写和母版中名字相同的block块,从而来显示自定义的内容
    {% block content %}  <!-- 预留的钩子,共其他需要继承它的html,自定义自己的内容 -->
        {{ block.super }}  #这是显示继承的母版中的content这个快中的内容
        这是xx1
    {% endblock %}
以下是具体运行代码

マスターテンプレートを作成するための最初のステップ

テンプレート内のフォルダを作成します。muban.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板</title>
    <style>
        {% block css %}
        #mub{
            width: 100%;
            height: 50px;
            background-color: cornflowerblue;
        }
        {% endblock %}{#预留的钩子,共其他需要继承它的html,自定义自己的内容#}
    </style>
</head>
<body>
<div id="mub">我是模板</div>

{% block content %}  <!-- 预留的钩子,共其他需要继承它的html,自定义自己的内容 -->
    <h1>我是模板h1</h1>
{% endblock %}
{% block cs2 %}  <!-- 预留的钩子,共其他需要继承它的html,自定义自己的内容 -->
    <h1>我是测试2</h1>
{% endblock %}
</body>
</html>

ステップ2他のページには、文言を継承します

muban.htmlから継承されたフォルダを作成するためのテンプレートでHome.html

{% extends 'muban.html' %}

{% block css %}
    #mub{
        width: 100%;
        height: 50px;
        background-color: red;
    }
    #s6{
        width: 50%;
        height: 50px;
        background-color: red;
        float: right;
    }
    {% endblock %}




{% block content %}  <!-- 预留的钩子,共其他需要继承它的html,自定义自己的内容 -->
<h1>我改变了模板的内容</h1>
<div id="s6">我来测试</div>
{% endblock %}


{% block cs2 %}  <!-- 预留的钩子,共其他需要继承它的html,自定义自己的内容 -->
    {{ block.super }}
    我在测试2下面
{% endblock %}

パッケージ

我々は別のファイルに保持ナビゲーションバー、フッタ、一般的な情報および他の成分を使用する場合、コンポーネントは、関数テンプレートを修正することができるカプセル化し、このような共通としてインポートするときコンポーネントは、Pythonモジュールと同様です

1 创建html页面,里面写上自己封装的组件内容,xx.html
2 新的html页面使用这个组件
    {% include 'xx.html' %}
以下是代码

コンポーネントの作成

テンプレートフォルダ内のコンポーネントtitle.htmlを作成します

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .nav{
            background-color: pink;
            height: 40px;

        }

    </style>
</head>
<body>

<div class="nav">
    <span>个人中心</span>
    <span>首页</span>
    <span>注册</span>
    <span>登录</span>

</div>


</body>

</html>

基準成分

Home.htmlテンプレート参照されるコンポーネントのフォルダを作成しtitle.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
{% include 'title.html' %}

<h1>这是新项目首页</h1>

</body>
</html>

カスタムフィルタ

なぜ我々は、カスタムタグやフィルタが必要なのですか？

現実のプログラミングで、内蔵することができるので、ラベルフィルター、我々は自分自身を作成するために必要なすべての我々のニーズを満たしていません

カスタムラベルやフィルタ処理を作成します。

1 在应用下创建一个叫做templatetags的文件夹(名称不能改),在里面创建一个py文件,例如xx.py

2 在xx.py文件中引用django提供的template类,写法
    from django import template
    register = template.Library() #register变量名称不能改
    
    # 自定义标签 没有参数个数限制
    from django import template
    register = template.Library() #register变量名称不能改

    @register.filter   #参数至多两个  也就是管道后最多只有一个
    def guolv(v1,v2):
        """
        :param v1: 变量的值 管道前面的
        :param v2: 传的参数 管道后面的,如果不需要传参,就不要添加这个参数
        :return: 
        """
        return v1+v2

        使用:
        {% load xx %} xx是py文件 先在HTML页面引入
        {{ name|guolv:'oo' }} 使用过滤器 guolv是自己定义的过滤器函数名
    
下面是执行的代码

4.7.2.1アプリケーションフォルダにフォルダを作成し、内部のtemplatetags xxを作成します。ファイル

from django import template
register = template.Library() #register变量名称不能改

@register.filter   #参数至多两个
def guolv(v1,v2):
    """
    :param v1: 变量的值 管道前面的
    :param v2: 传的参数 管道后面的,如果不需要传参,就不要添加这个参数
    :return: 
    """
    return v1+v2

4.7.2.2ビュービューのコード

from django.shortcuts import render,HttpResponse
name='测试+'
def home(request):
    return render(request,'home.html',{'name':name})

4.7.2.3カスタムフィルタ参照するHTMLページを作成するには

{% load xx %}{#xx是templatetags文件夹下的xx.py文件#}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
{{ name|guolv:'要传给n2的参数' }}

</body>
</html>

inclusion_tag

戻すためのマルチHTMLコードセグメント

原則的には、解像度にxx.py関数を呼び出すnue.html最初の実行します

RES機能単位nue.htmの元の形式にレンダリングテンプレートの@ register.inclusion_tagに対応した値にページ（「result.html」）を返します

nue.htm

{% load xx %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

{% res a %}#a是参数

</body>

</html>

result.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<ul>
    {% for i in li %}

        <li>{{ i }}</li>
    {% endfor %}
</ul>
</body>

</html>

xx.py

# inclusion_tag 返回html片段的标签
@register.inclusion_tag('result.html')
def res(n1): #n1 : ['aa','bb','cc']
    return {'li':n1 }

静的関連ファイル

静的な設定ファイル

JS、CSS、IMGなどの静的ファイルと呼ばれ、その後、ジャンゴ静的ファイルの構成は、我々は、この上のコンテンツを書くには、設定ファイルの設定を記述する必要があります。

ディレクトリ：エイリアスは他の人があなたの静的フォルダの名前を知ることができない、または他の誰かがこのフォルダのパスを通して攻撃することができるようになりますように、あなたが見ることができ試運転段階を経由して、ブラウザ上の安全機構は、エイリアス名です。

1 项目目录下创建一个文件夹,例如名为 static_file,将所有静态文件放到这个文件夹中
2 settings 配置文件中进行下面的配置
    # 静态文件相关配置
    STATIC_URL = '/static/'  #静态文件路径别名

    STATICFILES_DIRS = [
        os.path.join(BASE_DIR, 'static_file'),
    ]
    
    
3 引入<link rel="stylesheet" href="/abc/css/index.css">

最初のプロジェクトは、このフォルダの中に、たとえばという名前static_fileため、すべての静的ファイルをディレクトリフォルダを作成するには

1569493728264

2設定ファイルの設定は以下の構成を作る見つけます

STATIC_URL = '/abc/'  #静态文件路径别名 可以随便改
   #注意第2个参数一定对应创建的文件夹名 别名可以随便改
   STATICFILES_DIRS = [
        os.path.join(BASE_DIR, 'static_file'),
   ]

第三のプロファイルに導入されたhtmlページの内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/abc/css/index.css">
    <link rel="stylesheet" href="/abc/plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>

<input type="text" class="form-control">
<h1>红浪漫spa会所</h1>
<img src="/abc/img/timg.jpg" alt="">
<a href="{% url 'home' %}">首页</a>

技师:
<ul>
    <li>小白</li>
    <li>小黑</li>
</ul>

</body>
</html>

エイリアスと逆解析

私たちは、URLに関係なく、変更は、元のURLの死者を書かれているではないでしょう達成することができますどのようにURLを起動していない後に別名を与えます

rurl文件写法
    url(r'^index2/', views.index,name='cs'),
反向解析
    后端views:
         from django.urls import reverse 可以实现反向解析
         reverse('别名')  例如:reverse('cs') 反向解析为别名对应的地址 /index2/
         带参数的反向解析: reverse( index' ，args=(10,))--- /index2/10/
    html: {% url '别名' %} -- 例如:{% url 'cs' %} -- /index2/
下面是代码

rURLのファイルが書き込まれます

from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
    url(r'^cs/', views.home,name='cs'),
    url(r'^cs1/', views.cs1,name='cs1'),
]

バックエンドviews.py

用于重定向 redirect
我们利用别名 以后不管 别名cs1 对应的网址这么变  我们通过反解析 ，都可以找到他，写活了他 
from django.shortcuts import render,HttpResponse,redirect
from django.urls import reverse

def home(request):
    return redirect(reverse('cs1'))
def cs1(request):
    return HttpResponse('测试')

URL名前空間

ルート分布では混乱を避けるためであってもよく、

from django.conf.urls import url,include
from django.contrib import admin
urlpatterns = [
    # url(r'^admin/', admin.site.urls),
    url(r'^app01/', include('app01.urls',namespace='app01')),#app01/home/
    url(r'^app02/', include('app02.urls',namespace='app02')),
    
]


使用:
    后端:reverse('命名空间名称:别名') -- reverse('app01:home') 
    hmtl:{% url '命名空间名称:别名' %}  -- {% url 'app01:home' %}

おすすめ

転載: www.cnblogs.com/saoqiang/p/11628217.html
おすすめ
大規模な言語モデルに基づくオープンソースのナレッジベースの質問と回答システムである MaxKB GitHub Star の数が 5,000 を超えました。
ランキング
短线选股的一种方法
Javaクライアントでのユーバーのリズムワークフローで睡眠時間をキャンセルし、再スケジュール
CALIPSOデータバッチダウンロード方式
LeetCode アルゴリズム再帰クラス - ソードはオファー 26 を参照します。 ツリーの部分構造
HTMLのインポート外部CSS、JavaScriptの論文
PostgreSQL 13.1、12.5、11.10、10.15、9.6.20、および9.5.24がリリースされました
アップルは、エラーメッセージがポテトに接続されていた実行する方法ポテトポテトショーをダウンロードすることができません
あなたは空腹で突然電話を切っていますか？これはテクノロジーの裏側ですか、それともテスト用の銃ですか？
VIMエディタのヒント
動的計画法の最長共通部分列（LCS）
アーカイブ
もっと
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)

コードワールド

© 2018 codetd.com