baiduTemplate と djangoTemplate_html/css_WEB-ITnose の学習をまとめます-htmlチュートリアル-php.cn

はじめに

開発作業に必要な、今日紹介する 2 つのテンプレート以外にも多数のテンプレートがありますが、それらのエンドポイントは同じであり、すべて開発の便宜を図るためのものです。

テンプレートの役割

は、テンプレート構文のセットであり、開発者はテンプレート領域を作成し、それを受信データに基づいて毎回異なる HTML フラグメントにレンダリングできます。

BaiduTemplate

例: 栗: 栗

まず、BaiduTemplate.js をダウンロードする必要があります

次に、栗を導入します

<!doctype html><html><head><meta charset="utf-8"/><title>test</title><!-- 引入baiduTemplate --><script type="text/javascript" src="./baiduTemplate.js"></script></head><body><div id='result'></div><!-- 模板1开始，可以使用script（type设置为text/html）来存放模板片段，并且用id标示 --><script id="t:_1234-abcd-1" type="text/html"><div>    <!-- 我是注释，语法均为Javascript原生语法，默认分割符为 <% %> ，也可以自定义，参见API部分 -->    <!-- 输出变量语句，输出title -->    <h1>title:<%=title%></h1>    <!-- 判断语句if else-->    <%if(list.length>1) { %>        <h2>输出list，共有<%=list.length%>个元素</h2>        <ul>            <!-- 循环语句 for-->            <%for(var i=0;i<5;i++){%>                <li><%=list[i]%></li>            <%}%>        </ul>    <%}else{%>        <h2>没有list数据</h2>       <%}%></div>  </script><!-- 模板1结束 --><!-- 使用模板 --><script type="text/javascript">var data={    "title":'欢迎使用baiduTemplate',    "list":[        'test1:默认支持HTML转义，如输出<script>，也可以关掉，语法<:=value> 详见API',        'test2:',        'test3:',        'test4:list[5]未定义，模板系统会输出空'    ]};//使用baidu.template命名空间var bt=baidu.template;//可以设置分隔符//bt.LEFT_DELIMITER='<!';//bt.RIGHT_DELIMITER='!>';//可以设置输出变量是否自动HTML转义//bt.ESCAPE = false;//最简使用方法var html=bt('t:_1234-abcd-1',data);//渲染document.getElementById('result').innerHTML=html;</script></body></html>

ログイン後にコピー

テンプレートを使用する全体の構造は次のとおりですに分かれています: 次のいくつかのステップ

1. 結果を受け取るにはコンテナが必要です

2. テンプレートを作成します

- ID でマークします

-デフォルトの構文は <% %> ;

3. テンプレートを使用します

- で囲みます

- データは json に保存されます。

- baidu.template を受け取るために、使用する短い名前の変数に割り当てます

- テンプレートを使用し、テンプレートによってレンダリングされた HTML を結果コンテナーに入れます

基本構文

- デフォルト区切り文字 <% js 構文 %>

- 変数の出力 <%=data%>

- 判定文

<%if(list.length>1){%>

; <%=list.length%>
<%>else{%>

情報なし

<%}%>

- ループステートメント

<%for(i=0; i

<%=list[i]%>

;%>

- コメント

DjangoTemplate

例:chestnut:chestnut

<html><head><title>Ordering notice</title></head><body><p>Dear {{ person_name }},</p><p>Thanks for placing an order from {{ company }}. It's scheduled toship on {{ ship_date|date:"F j, Y" }}.</p><p>Here are the items you've ordered:</p><ul>{% for item in item_list %}<li>{{ item }}</li>{% endfor %}</ul>{% if ordered_warranty %}<p>Your warranty information will be included in the packaging.</p>{% endif %}<p>Sincerely,<br />{{ company }}</p></body></html>

ログイン後にコピー

上記の分析:ches tnut::

{% if requested_warranty %} : 中括弧 + % はテンプレートタグを表します

{% for item_list %} : for + % は各項目のループを表します

{{ ship_date | date:” f j、y”}}：ダブルブレース + '|'フィルタリングフィルターを表します。 %if today_is_weekend%> こんにちは <%else%> 仕事に行ってください <%endif%>

そうでない場合 <%今日_週末%> 仕事に行ってください <%endif%>

の場合in Athletic-list reversed%>> 結果
基本的な使用法 <%ifequal user currentuser%>
welcome
<%endifequal%>
適用可能なタイプテンプレート変数、文字列、整数小数

{% ifequal 変数 1.23 %}

{% ifequal 変数 'foo' %}

{% ifequal 変数 "foo" %}

- { xxx｜yyy } フィルター

よく使用されるフィルター

date: 指定された書式文字列パラメーターに従って日付または日時オブジェクトを書式設定します

{{ 123|add: "5" }} value に数値を追加します

{{ "AB'CD"| addslashes }} JavaScript への出力には、通常、一重引用符とエスケープマークが使用されます

{{ "abcd"|capfirst }} 最初の文字は大文字です

{{ "abcd"|center:"50" }} 指定した長さの文字列を出力し、値を中央に配置します

{{ "123spam456spam789"|cut: "spam" }} 指定した文字列を検索して削除します

{{ value |date:"F j, Y" }} 形式 date

{{ value|default:"(N/A)" }} 値が存在しないため、指定された値を使用します

{{ value|default_if_none:"( N /A)" }} 値は None です。指定された値を使用します

{{ リスト変数 |dictsort: "Number" }} 小さい順に並べ替えます

{{ リスト変数 | dictsortreversed: "Number" }} 並べ替え大きいものから小さいものへ

{% if 92|divisibleby:"2" %} 指定された数値が割り切れるかどうかを判断します

{{ string|escape }} HTML エンティティに変換します

{{ 21984124|filesizeformat }} 1024 を次のように使用します最大値を計算するための基数、読みやすくするために小数点以下 1 桁を保持します

{{ list|first }} リストの最初の要素を返します

{{ "ik23hr&jqwh"|fix_ampersands }} &convert to&

{{ 13.414121241 |floatformat }} 小数点以下 1 桁は予約されており、負の数を指定できます。いくつかの形式があります

{{ 13.414121241|floatformat: "2" }} 小数点以下 2 桁を維持します

{{ 23456 |get_digit: "1" }} 指定された値をインターセプトします1桁から始まる位置 1 数値

{{ list|join:", " }} 指定された区切り文字でリストを結合

{{ list|length }} リストの数を返す

{% if list|length_is : "3" %} リスト番号が指定されているかどうか

{{ "ABCD"|改行 }} パッケージをマークするには、

、
で改行を使用します

{{ "ABCD" |linebreaksbr }} < br /> パッケージで改行を使用します

{{ variable|linenumbers }} 変数の各行に行番号を追加します

{{ "abcd"|ljust:"50" }}指定された幅の左側の文字列、その他の用途スペース充填

{{ "ABCD"| lower }} 小文字

{% for i in "1abc1"|make_list %}ABCDE,{% endfor %} 数値を取得文字列または数値の文字をリストとして変換します

{ { "abcdefghijklmnopqrstuvwxyz"|phone2numeric }} 文字を対応する数値に変換しますか? ?

{{ リストまたは数値 | 複数化 }} リスト内の文字列の数が 1 より大きい場合は s を返し、それ以外の場合は空の文字列を返します

{{ リストまたは数値 | 複数化: " es" }} es

を指定します

{{ list ornumber|pluralize:"y,ies" }} ies を y

に置き換えることを指定します

{{ object|pprint }} オブジェクトの値を表示します

{{ list |random }} リスト内のランダムな項目を返します

{{ string|removetags:"br p div" }} 文字列内の指定された HTML タグを削除します

{{ string|rjust:"50" }} 文字列を整列させます指定された幅で右に配置し、残りをスペースで埋めます

{{ list|slice:":2" }} スライス

{{ string|slugify }} マイナス記号とアンダースコアは文字列内に残ります。記号は削除され、スペースはマイナス記号に置き換えられます

{{ 3|stringformat: "02i" }} Python の文字列形式構文を使用した文字列形式

{{ "EAB CD"|striptags }} ストリップ [X] HTML 構文タグ

{{ time 変数|time:"P" }} 日付の時刻部分の形式

{{ datetime|timesince }} いくら指定された日付からの経過時間

{{ datetime|timesince:"other_datetime " }} 2 日間の経過時間

{{ datetime|timeuntil }} 指定された日付からの経過時間。上記は2つの日付の前後の位置です。

{{ datetime|timeuntil:"other_datetime" }} 2 日間の経過時間

{{ "abdsadf"|title }} 大文字

{{ "A B C D E F" truncatewords: "3" }} インターセプト指定単語数

{{ "1 1 1221"|truncatewords_html: "2 " }} 指定された数の HTML タグをインターセプトして完成させます

{{ list|unowned_list }} 複数のネストされたリストは HTML の順序なしリストとして表示されます

{{ string |upper }}すべて大文字

linkage URL エンコード

{{ string|urlize }} URL をプレーンテキストからクリック可能なリンクに変換します。 (実験は成功しませんでした)

{{ string|urlizetrunc: "30" }} 上記と同じ、複数のインターセプト文字番号。 (実験も失敗しました)

{{ "B C D E F" | wordcount }} 単語数

{{ "ab c d e f g h i j k" }} 指定した文字数ごとに改行文字を挿入します

{{ boolean | yesno:"Yes,No,Perhaps" }} 空でない、空、None に対応する 3 つの値の戻り文字列

-include を使用すると、他のテンプレートコンテンツをテンプレートに含めることができます

{%include ' nav.html '%}

- コメント

{# 私はコメントです #}

概要

多くのテンプレートや dot.js などの一般的に使用されるフロントエンドテンプレートがありますが、テンプレートが同じ目的を持つ限り、それは開発を促進するためです。

参考文献:

http://tangram.baidu.com/BaiduTemplate

http://djangobook.py3k.cn/chapter04/

baiduTemplate と djangoTemplate_html/css_WEB-ITnose の学習をまとめます

はじめに

テンプレートの役割

BaiduTemplate

; <%=list.length%> <%>else{%>

情報なし

welcome

概要

; <%=list.length%>
<%>else{%>