ホームページ > 記事 > ウェブフロントエンド > baiduTemplate と djangoTemplate_html/css_WEB-ITnose の学習をまとめます
baiduTemplate と djangoTemplate_html/css_WEB-ITnose の学習をまとめます
- WBOYオリジナル
- 2016-06-24 11:29:581236ブラウズ
はじめに
開発作業に必要な、今日紹介する 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 でマークします
-デフォルトの構文は e8ba8f6750c1c404c68aa6859fbd1ad92cacc6d41bbb37262a98f745aa00fbf0 で囲みます
- データは json に保存されます。
- baidu.template を受け取るために、使用する短い名前の変数に割り当てます
- テンプレートを使用し、テンプレートによってレンダリングされた HTML を結果コンテナーに入れます
基本構文
- - デフォルト区切り文字 6b21f5f5df9dae517ca9ae9093397238
- 判定文
858b360d8a2e91de2538b28feb7811451){%>
; 230c79e338f0a1dc2cb6b12565d221bb b9841707d5880fdf075ecb0d99cb7a5c
else{%>
c1a436a314ed609750bd7c7d319db4da情報なし2e9b454fa8428549ca2e64dfac4625cd6d3473d4d9e522f45994ec4ab0d9fc94
- ループステートメント98935eb1831b5ec475042d7da90196a3
25edfb22a4f469ecb59f1190150159c60985cbac61b44cb1f8d27f2af636ea5725edfb22a4f469ecb59f1190150159c6 ;%>
- コメント
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::
- {{person_name}} : ダブル中括弧は変数を表します
{% if requested_warranty %} : 中括弧 + % はテンプレート タグを表します
{% for item_list %} : for + % は各項目のループを表します
{{ ship_date | date:” f j、y”}}：ダブルブレース + '|'フィルタリングフィルターを表します。 %if today_is_weekend%> こんにちは 94976283d3dca1810c201b050700db28 仕事に行ってください 3a5e3b50bb65b31892148e2162f9c2a2
そうでない場合 a6a2495f8f974ede2dbdb3e234c77d3d 仕事に行ってください 3a5e3b50bb65b31892148e2162f9c2a2- if または < ;% if リンゴまたは豚 %> リンゴまたは豚 3a5e3b50bb65b31892148e2162f9c2a2
- if および <%if リンゴと豚3a5e3b50bb65b31892148e2162f9c2a2
- の場合in Athletic-list reversed%>> 結果
- 基本的な使用法 a531dab4302cc793678b3bc3854316f94a249f0d628e2318394fd9b75b4636b1welcome473f0a7621bec819994bb5020d29372acbd17ee71186abf00bdb9617f5cfaef2
- 適用可能なタイプ テンプレート変数、文字列、整数小数
- {% ifequal 変数 1 %}
{% 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"|改行 }} パッケージをマークするには、e388a4556c0f65e1904146cc1a846bee、df250b2156c434f3390392d09b1c9563 で改行を使用します
{{ "ABCD" |linebreaksbr }} c76a1367b221c5587c8fa473533fe7a6 パッケージで改行を使用します
{{ 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 の文字列形式構文を使用した文字列形式
{{ "E72d4ced2cc960a6bc2541984146fdaaaA63505a6f727f70c8bd4066f3066dcb9dBb3ec89445a79fd94aeae4ff228faad27 C5f6acab10c476fc264ba16ac4aa7415cD"|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" }} インターセプト指定単語数
{{ "3499910bf9dac5ae3c52d5ede738348513499910bf9dac5ae3c52d5ede738348513499910bf9dac5ae3c52d5ede738348515db79b134e9f6b82c0b36e0489ee08ed5db79b134e9f6b82c0b36e0489ee08ed5db79b134e9f6b82c0b36e0489ee08ed223499910bf9dac5ae3c52d5ede738348515db79b134e9f6b82c0b36e0489ee08ed"|truncatewords_html: "2 " }} 指定された数の HTML タグをインターセプトして完成させます
ff6d136ddc5fdfeffaf53ff6ee95f185{{ list|unowned_list }}929d1f5ca49e04fdcb27f9465b944689 複数のネストされたリストは HTML の順序なしリストとして表示されます
{{ string |upper }}すべて大文字
ff9a4bd48156165b1dba95e46c74040alinkage5db79b134e9f6b82c0b36e0489ee08ed 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/