神社-短い導入とサンプルアプリ

9288 ワード
appseed jinja webdev python テキストリンク
こんにちは、コーダ.
この記事は、Famaskのようなフレームワークのパイソンプログラマーによって使用される近代的なテンプレート言語、ボトル、オプションのJjango(1.8のバージョンから始まる)に短い紹介です.JINJA 2と高速ランナーに慣れている人にとっては、以下のリンクをいくつかの素敵な神社テンプレートにドロップします.

Thanks for reading! - Content provided by App Generator.

  • ✨ Flask/Jinja Pixel UI - 製品ページ
  • ✨ Flask/Jinja Datta Able - 製品ページ
  • ✨ Flask/Jinja Bootstrap 5 Volt - 製品ページ
  • ✨ Flask/Jinja Material Lite Wpx - 製品ページ

    • ✨ フラスコ/神社ピクセルUI


    ピクセルは、あなたが創造的でプロのウェブサイトを造るのを援助する自由な、完全に反応して現代のブートストラップ4つのUIキットです.我々のコンポーネントとセクションを使用して、いくつかのSASS変数を構築し、あなたのニーズに最適なページを配置するスイッチを切り替えます.ピクセルLiteは、我々が作成することができます美しいユーザーインターフェイスを表示するために作成した6プレミアムのサンプルページが付属しています.
  • ✨ Flask/Jinja Pixel UI - 製品ページ
  • ✨ Flask/Jinja Pixel UI - ライブデモ

    • ✨ フラスコ/神社


    Datataはエラー/バグフリー、よく構造化された、よくコメントコードとすべての最新の更新コードを定期的に付属しています.それはバックエンドアプリケーションの開発の時間を大量に保存し、それは完全にカスタマイズ可能です.ダッシュボード、地図と認証ページ:CodedThemeによって作られたこの現代のUIキットは、豊富なUIキットと事前に構築されたページを備えています.
  • ✨ Flask/Jinja Datta Able - 製品ページ
  • ✨ Flask/Jinja Datta Able - ライブデモ

    • ✨ フラスコ/神社ブートストラップ5ボルト


    ボルトダッシュボードは、無料でオープンソースのブートストラップ5管理ダッシュボード100のコンポーネント、11の例のページとバニラJSと3つのプラグインを備えています.100以上の無料のブートストラップの5つのコンポーネントが含まれていくつかのボタン、警告、モダール、datepickersなどです.
  • ✨ Jinja Volt Dashboard - 製品ページ
  • ✨ Jinja Volt Dashboard - ライブデモ

    • ✨ フラスコ/神社材料ライト


    WrapPixelのMaterialPro Liteは、管理ダッシュボードとコントロール管理パネルのための最高のブートストラップテンプレートの一つです.それは目、広々としたカード、美しいタイポグラフィ、グラフィックに簡単に色を組み合わせたものです.
  • ✨ Jinja Material Lite - 製品ページ
  • ✨ Jinja Material Lite - ライブデモ

    • 神社とは


    Jinja 2は、HTTPレスポンスを通してユーザーに返されるHTMLまたはXMLを生成するのに用いられるPythonテンプレートエンジンです.
    以前にテンプレート言語にさらされていなかった人々にとって、そのような言語は本質的に変数を含んでいて、いくつかのプログラミングロジックが含まれています.

    なぜ我々は神社が必要ですか？


    サンドボックス実行-それは、動作が未知で、調査されなければならないテストプログラムの自動化のために保護されたフレームワークを提供します.
    HTMLエスケープ神社2は、クロスサイトスクリプティング(XSS攻撃)を防ぐのに役立つ強力な自動HTMLエスケープがあります.テンプレートに特殊な意味を持つ＞、<、&、などの特殊文字があります.それで、あなたがあなたの文書の規則的なテキストとして彼らを使用したいならば、実体で彼らを取り替えてください.そうしないことはXSS攻撃につながるかもしれません.
    テンプレート継承-この機能は、私たちが共通の構造を継承する基本テンプレートから始まる新しいページを生成するのに役立ちます.

    How to get Jinja2


    再生を開始するには、端末とタイプを開きます.
    $ pip install jinja2

    インアクション


    Simple runtime replace


    >>> from jinja2 import Template
>>> t = Template("Hello {{ token }}!")
>>> t.render(token="Jinja2")
u'Hello Jinja2!'
    エンジンは内側に代わるtoken 値付きでJinja2 . これは、このブロックを使用するときに便利ですtoken 値.

    Lists iteration


    Web開発では、リストをページに表示する必要があります:例えば、登録ユーザー、またはオプションの簡単なリストを持つことができます.神社ではfor structure として
    # Define data structure
my_list=[0,1,2,3,4,5] # a simple list with integers
    神社では、私たちは容易に反復することができますfor ブロック
    ...
      <ul>
        {% for n in my_list %}
        <li>{{n}}</li>
        {% endfor %}
      </ul>
...

    Template Inheritance


    テンプレートは通常継承を利用します.そして、それはすべての以降の子供テンプレートの基本構造を定義する一つの基本テンプレートを含みます.継承を実装するためにタグ{ extends }と{ block }を使います.
    実際のサンプルを見てみましょう.

    Parent HTML - saved as base.html


    <html>
  <head>
    <title>My Jinja {% block title %}{% endblock %} </title>
  </head>
  <body>
    <div class="container">
      <h2>This is from the base template</h2>
      <br>
      { block content }{ endblock }
      <br>
    </div>
  </body>
</html>

    The Child template - saved as child.html


    { extends "base.html" }

{ block title } MySample { endblock }

{ block content }
  Cool content here
{ endblock }
    神社負荷時child.html , ブロックをマージしてエンジンに通知するbase.html テンプレートによって提供される内容child.html
  • { block title } なるMySample
  • { block content } なるCool content here
    • 以下は神社が生成する最終HTMLです.
    <html>
  <head>
    <title>My Jinja MySample</title>
  </head>
  <body>
    <div class="container">
      <h2>This is from the base template</h2>
      <br>
      Cool content here
      <br>
    </div>
  </body>
</html>
    この強力な機能を使用すると、一般的なページやコンポーネントを使用して簡単に生成された動的なページを使用して構築することができます強力なWebアプリケーションを構築するのに役立ちます実際の情報は、データベースからロードまたはユーザーによって提供される.

    Thanks for reading! Let me know your thoughts in the comments.


    資源・リンク

  • その他Jinja/Flask Templates - によって提供されるインデックス

  • Jinja2 - オフィシャルウェブサイト
    • [React] LifeCycle API
    反応本機&Expo+Node.js,NPMバー