Jinja - 간단한 소개 및 예제 응용 프로그램

안녕하십니까, 프로그래머 여러분,
본고는 Jinja를 간략하게 소개합니다. 이것은 현대 템플릿 언어입니다. Python 프로그래머는 Flask, Bottle 등 프레임워크에서 사용할 수도 있고 Django에서 사용할 수도 있습니다(1.8 버전부터).Jinja2와 빠른 달리기에 익숙해진 사람들에게 저는 아래에 링크를 제공하여 괜찮은 Jinja 템플릿을 가리키겠습니다. 이 템플릿들은 매우 간단한 플라스크 시동기로 제공됩니다(데이터베이스나 하드 의존 항목이 없습니다).

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 - 제품 페이지
  • ✨ 화병/금가 픽셀 인터페이스


    Pixel은 무료, 완전한 응답과 현대화된 Bootstrap 4 사용자 인터페이스 패키지로 창의적인 전문 사이트를 구축하는 데 도움을 줄 것입니다.우리의 구성 요소와 부분을 사용하여 Sass 변수를 전환하여 페이지를 구축하고 안배하여 사용자의 요구에 가장 적합하도록 합니다.Pixel Lite는 6개의 고급 예제 페이지를 포함하고 있으며, 이 페이지를 만든 것은 사용자가 만들 수 있는 멋진 사용자 인터페이스를 보여주기 위해서입니다.
  • Flask/Jinja Pixel UI - 제품 페이지
  • Flask/Jinja Pixel UI - 현장 프레젠테이션

  • ✨ 플라스크/진가라떼


    Datta-Able는 오류/bug가 없고 구조가 양호하며 주석이 좋은 코드를 제공하며 최신 업데이트된 모든 코드를 정기적으로 제공합니다.이렇게 하면 백엔드 응용 프로그램을 대량으로 개발하는 시간을 절약할 수 있을 뿐만 아니라 완전히 사용자 정의할 수 있다.CodedThemes로 제작된 이 현대 사용자 인터페이스 세트는 풍부한 사용자 인터페이스 세트와 미리 구축된 페이지: 계기판, 지도와 인증 페이지를 가지고 있다.
  • Flask/Jinja Datta Able - 제품 페이지
  • Flask/Jinja Datta Able - 현장 프레젠테이션

  • ✨ 화병/진자 안내 5볼트


    Volt Dashboard는 100여 개의 구성 요소, 11개의 예시 페이지, 3개의 Vanilla JS가 있는 플러그인을 갖춘 무료 부트스트랩 5 관리 대시보드입니다.버튼, 경보, 모드, 날짜 선택기 등 100여 개의 무료 Bootstrap 5 구성 요소가 있습니다.
  • Jinja Volt Dashboard - 제품 페이지
  • Jinja Volt Dashboard - 현장 프레젠테이션

  • ✨ 화병/금가 재료 Lite WPx


    Wrappixel의 MaterialPro Lite는 대시보드를 관리하고 관리 패널을 제어하는 데 가장 좋은 가이드 템플릿 중 하나입니다.그것은 보기 쉬운 색깔, 넓은 카드, 예쁜 조판과 도형을 결합시켰다.
  • Jinja Material Lite - 제품 페이지
  • Jinja Material Lite - 현장 프레젠테이션

  • 뭐 공부 해요?


    Jinja2는 HTTP 응답을 통해 사용자에게 반환되는 HTML이나 XML을 생성하는 데 사용되는 Python 템플릿 엔진입니다.
    이전에 템플릿 언어를 접촉한 적이 없는 사람들에게 이 언어들은 기본적으로 변수와 일부 프로그래밍 논리를 포함하고 있으며, 계산 (또는 HTML로 표현) 을 할 때 이 변수와 논리는 실제 값으로 대체된다.

    우리는 왜 금가가 필요합니까?


    샌드박스 실행 - 테스트 프로그램의 자동화를 위해 보호된 프레임워크를 제공합니다. 이 프로그램들의 행위는 알 수 없기 때문에 조사를 해야 합니다.
    HTML 정의 Jinja 2는 강력한 자동 HTML 정의 기능을 가지고 있어 크로스 사이트 스크립트(XSS 공격)를 방지하는 데 도움이 된다.템플릿에는 >, <, &, 등과 같은 특수한 문자가 있는데, 그것들은 특수한 의미를 가지고 있다.따라서 문서에서 일반 텍스트로 사용하려면 엔티티로 대체합니다.그렇지 않으면 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


    웹 개발에서, 우리는 페이지에 목록을 표시할 수 있다. 예를 들어 사용자를 등록하거나 간단한 옵션 목록을 표시할 수 있다.금가에서 우리는 다음과 같이 사용할 수 있다for structure.
    # Define data structure
    my_list=[0,1,2,3,4,5] # a simple list with integers
    
    Jinja에서 우리는 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 }
    
    Jinja가 불러올 때 child.html, {extends} 블록 알림 엔진은 base.html 템플릿과 child.html 제공된 내용을 통합합니다
  • { block title }변경MySample
  • { block content }변경Cool content here
  • 다음은 Jinja가 생성한 최종 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>
    
    이 강력한 기능은 우리가 복잡한 웹 응용 프로그램을 쉽게 구축하는 데 도움을 줄 수 있다. 예를 들어 흔히 볼 수 있는 페이지와 구성 요소를 사용하여 동적 페이지를 생성하는데 데이터베이스에서 불러오거나 사용자가 제공하는 진실한 정보를 포함한다.

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


    리소스 및 링크

  • Jinja/Flask Templates - AppSeed에서 제공하는 인덱스

  • Jinja2 - 공식 홈페이지
  • 좋은 웹페이지 즐겨찾기