nextトピックのテンプレートエンジンswig構文の紹介

nextで採用されているテンプレートエンジンはswigであり、swigはnode端の優れた簡潔なテンプレートエンジンであり、PythonテンプレートエンジンJinjaに類似しており、現在はnode端で一般的であるだけでなく、jade、ejsに比べて優れており、ブラウザ端でもよく動作している.
だから、nextに対してもっと多くの理解があって、もっと個性的なカスタマイズを行うには、まずswigの文法の知識を理解して勉強して、彼のよく使う使い方を理解しなければなりません.
宣言
このブログではnextフレームワークが使用されているため、swigもこのページの真ん中のコードをレンダリングし、エラーを起こします.何度も試した後(ピットに登って)、元の{と{の間に{と%の間に1つのスペースを追加してレンダリングを回避します.
とくせい

は、ほとんどの主流ブラウザをサポートします.

式は互換性が良い.

オブジェクト向けテンプレート継承.

は、フィルタおよび変換をテンプレートの出力に適用する.

は、道路の強さに応じてページをレンダリングします.

は、ページ多重化をサポートします.

はダイナミックページをサポートします.

拡張可能、カスタマイズ可能.

インストール

$ npm install swig --save

基本的な使い方
swigにはテンプレートのコンパイルとレンダリングに多くの実装方法があります

var swig = require('swig');

// Compile a file and store it, rendering it later
var tpl = swig.compileFile('/path/to/template.html');
console.log(tpl({ article: { title: 'Swig is fun!' }}));

//          
console.log(swig.render('{% if foo %}Hooray!{% endif %}', { locals: { foo: true }}));

変数＃ヘンスウ＃
テンプレート内の変数は、二重括弧{}}を使用して宣言されます.たとえば

{{a}}

ツールバーの
変数のプロパティは、.または[ ]を使用してアクセスできます.次の2つは等価です.

{{ foo.bar }}

// is equivalent to
{{ foo['bar'] }}

彼はjavascriptと同じ原則に従い、キーワードに-がある場合は、[]を使用して属性にアクセスしなければならず、.は使用できません.
Bad!

{{ foo.chicken-tacos }}

Good!

{{ foo['chicken-tacos'] }}

未定義およびNULL
変数が定義されていない場合やNULL値の場合、レンダリング時には、例外を報告することなく、対応する場所にNULL文字列が出力されます.
フィルタ
変数は特殊なチェーン構造で修正フィルタリングできます.

{{ name|title }} was born on {{ birthday|date('F jS, Y') }}

// => Jane was born on July 6th, 1985

メソッド
変数はJavaScript functionsでもよい.注意すべきは、autoescapeの設定がどのようになっても、方法はauto-escapedにはなりません.

var locals = { mystuff: function mystuff() { return '
Things!
'; }};
swig.render('{{ mystuff() }}', { locals: locals });
// => 
Things!

If you want to enforce escaping output on functions, just pipe them to the escape filter.

{{ mystuff()|escape }}
// => 
Things

論理ラベル
Swigには、ラベルと呼ばれる基本的なオプションのコードブロックが含まれています.ラベルを使用すると、テンプレートのレンダリング出力をよりよく制御できます.ラベルの例は次のとおりです.

{% if foo %}bar{% endif %}

// Create a list of people, only if there are items in the people array
{% for person in people %}
  {% if loop.first %}
{% endif %}
  
{{ person.name }}
  {% if loop.last %}
{% endif %}
{% endfor %}

ここで、{% endif %}および{% endfor %}は、コードブロックの終了を示す終了ラベルである.

{% block tacos %}
  //...
{% endblock tacos %}
{% block burritos %}
  {% if foo %}
    // ...
  {% endif %} //the above will render if foo == true
{% endblock burritos %}

詳細については、公式ドキュメントを参照してください.ここでは、よく見られるいくつかのポイントを選んでください.
ブロックラベル
コードブロックを宣言するために使用され、継承されたサブテンプレートの間に親テンプレートの同名のコードブロックを書き換えたり拡張したりすることができます.継承を表示することもできます
たとえば

{% block body %}...{% endblock %}

if-else-endifおよびif-elseif-endifラベル
これはjavaのif機能と似ていて、条件判断をするときに使います.条件を満たす内容が出力されます.

{% if x|lower === 'tacos' %}
  You can use filters on any operand in the statement.
{% endif %}

{% if x in y %}
  If x is a value that is present in y, this will return true.
{% endif %}

{% if false %}
  Tacos
{% elseif true %}
  Burritos
{% else %}
  Churros
{% endif %}
// => Burritos

extendsラベル
現在のテンプレートに親テンプレートを継承します.このラベルはテンプレートの一番前にある必要があります.その他の表示#継承

{% extends "./layout.html" %}

forラベル
オブジェクトと配列を巡回するときに使用します.
パラメータ
Name
Type
オプション
Default
説明
key literal
✔ undefined
A shortcut to the index of the array or current key accessor.
variable literal undefined
The current value will be assigned to this variable name temporarily. The variable will be reset upon ending the for tag.
in literal undefined
Literally, "in". This token is required.
object object undefined
An enumerable object that will be iterated over.
Returns loop.index : The current iteration of the loop (1-indexed) loop.index0 : The current iteration of the loop (0-indexed) loop.revindex : The number of iterations from the end of the loop (1-indexed) loop.revindex0 : The number of iterations from the end of the loop (0-indexed) loop.key : If the iterator is an object, this will be the key of the current item, otherwise it will be the same as the loop.index. loop.first : True if the current object is the first in the object or array. loop.last : True if the current object is the last in the object or array.
例

// obj = { one: 'hi', two: 'bye' };
{% for x in obj %}
  {% if loop.first %}
{% endif %}
  
{{ loop.index }} - {{ loop.key }}: {{ x }}
  {% if loop.last %}
{% endif %}
{% endfor %}
// => 

//    
1 - one: hi
//    
2 - two: bye
//    

// arr = [1, 2, 3]
// Reverse the array, shortcut the key/index to `key`
{% for key, val in arr|reverse %}
{{ key }} -- {{ val }}
{% endfor %}
// => 0 -- 3
//    1 -- 2
//    2 -- 1

import
Source: lib/tags/import.js
別のファイルに定義されたマクロを現在のテンプレートファイルに導入できます.
The import tag is specifically designed for importing macros into your template with a specific context scope. This is very useful for keeping your macros from overriding template context that is being injected by your server-side page generation.
パラメータ
Name
Type
Optional
Default
Description
file string orvar undefined
Relative path from the current template file to the file to import macros from.
as literal undefined
Literally, "as".
varname literal undefined
Local-accessible object name to assign the macros to.
例

{% import './formmacros.html' as form %}
{{ form.input("text", "name") }}
// => 
{% import "../shared/tags.html" as tags %}
{{ tags.stylesheet('global') }}
// => 

コメント
Commentsコメントはレンダリング時に無視され、レンダリング前に削除されるので、ソースコードを表示しない限り、コメントを見る人はいません.

{ #
This is a comment.
It will be fully stripped and ignored during parsing.
# }

スペースコントロール
テンプレート内の任意のスペースは、最終的に生成されたページに出力されます.ただし、スペースコントロールを使用してスペースを削除できます.
tagの前面または背面に-を追加して、前面または背面のスペースを除去します.

// seq = [1, 2, 3, 4, 5]
{% for item in seq -%}{{ item }}
{%- endfor %}
// => 12345

スペース出力なし
継承
swigはextendsキーワードを使用してテンプレートを継承する
layout.html

  
  
  {% block head %}
  
  {% endblock %}


  {% block content %}{% endblock %}

index.html

{% extends 'layout.html' %}
{% block title %}My Page{% endblock %}
{% block head %}
  {% parent %}
  
{% endblock %}
{% block content %}
This is just an awesome page.
{% endblock %}d

テンプレートindex.htmlはlayoutから継承されます.htmlは、その内容を書き換えたり実現したりします.
参考資料

swig公式ドキュメント

blog

詳細は、私のブログにアクセスしてくださいhttp://jinfang.life