I compared blade and jinja2

Which is the template writing method when going back and forth between Laravel and Flask? As a memorandum.

Someone who should read this

I was doing Laravel but I want to try Flask I was doing Flask but I want to try Laravel Either is for those who have touched it.

Basic guy

Comparison	blade	jinja2
output	{{variable}}	{{variable}}
Output not to escape	{!!variable!!}	{%variable%}
comment	{{--comment--}}	{#comment#}
if	@if (Conditional expression)	{% if Conditional expression %}
elseif	@elseif	{%elif conditional expression 2%}
else	@else	{% else %}
endif	@endif	{% endif %}
for	@for (Conditional expression)	{% for Conditional expression %}
endfor	@endfor	{% endfor %}
Index of current loop(Initial value 0)	$loop->index	loop.index0
Index of current loop(Initial value 1)	$loop->iteration	loop.index
Total number of items	$loop->count	loop.length
Is it the first loop?	$loop->first	loop.first
Is it the last loop?	$loop->last	loop.last

$ loop-> index of blade starts from 0, but loop.index of jinja2 starts from 1. I did not know.

Other comparisons

How to set variables

`blade`


@php 
$test = 'test';
@endphp

`jinja2`


{% set test = 'test' %}

Ternary operator

`blade`


@php 
$test = 'test';
@endphp

`jinja2`


{% set test = 'test' %}

template

blade

`html:views/layouts/parent.blade.php`


<!DOCTYPE html>
<html lang="en">
<head>
    @yield('head')
    <title>@yield('title') - My Webpage</title>
</head>
<body>
    <main>
        @yield('content')
    </main>
</body>
</html>

`html:views/child.blade.php`


@extends('layouts.parent')
@section('head')
    <style type="text/css">
        .text{ color: #336699; }
    </style>
@endsection
@section('title')
Index
@endsection
@section('content')
    <h1>Index</h1>
    <p class="text">
This is the Index page.
    </p>
@endsection

When displayed ... スクリーンショット 2020-06-11 11.59.04.png The title and text are also displayed well!

jinja2

`parent.html`


<!DOCTYPE html>
<html lang="en">
<head>
    {% block head %}
    <title>{% block title %}{% endblock %} - My Webpage</title>
    {% endblock %}
</head>
<body>
    <main>{% block content %}{% endblock %}</main>
</body>
</html>

`child.html`


{% extends "base.html" %}
{% block head %}
    {{ super() }}
    <style type="text/css">
        .text { color: #336699; }
    </style>
{% endblock %}
{% block title %}
Index
{% endblock %}
{% block content %}
    <h1>Index</h1>
    <p class="text">
This is the Index page.
    </p>
{% endblock %}

When displayed ... スクリーンショット 2020-06-11 10.55.41.png

It became the same display as blade.

The parent template can be written more clearly with blade.

that's all!