[{"data":1,"prerenderedAt":258},["ShallowReactive",2],{"DefaultLayouten":3,"language-blog-slug-presentation-oriented-templating-syntax-i18n-slugs":134,"language-blog-slug-en-presentation-oriented-templating-syntax":138},{"app":4,"menu":31,"footer":66},{"githubUrl":5,"youtubeUrl":6,"linkedinUrl":7,"phoneNumber":8,"emailAddress":9,"legal":10,"addresses":20},"https:\u002F\u002Fgithub.com\u002Fvoorhoede\u002F","https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUCzHuhQVYFRixtQN2-swcuGg","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fde-voorhoede","+31 20 2610 954","post@voorhoede.nl",[11,14,17],{"title":12,"value":13},"KvK","56017235",{"title":15,"value":16},"BTW","NL851944620B01",{"title":18,"value":19},"IBAN","NL14TRIO0320142078",[21,26],{"address":22,"city":23,"googleMapsLink":24,"postalCode":25},"Koivistokade 70","Amsterdam","https:\u002F\u002Fwww.google.com\u002Fmaps\u002Fplace\u002FDe+Voorhoede+%7C+Front-end+Development\u002F@52.396847,4.8700823,17z\u002Fdata=!3m1!4b1!4m5!3m4!1s0x47c5e21d502d2d59:0xbf570944a96ebf45!8m2!3d52.347647!4d4.8502154","1013 BB",{"address":27,"city":28,"googleMapsLink":29,"postalCode":30},"Koornmarkt 22","Delft","https:\u002F\u002Fwww.google.nl\u002Fmaps\u002Fplace\u002FKoornmarkt+22,+2611+EG+Delft\u002F@52.0093477,4.3573054,17z\u002F","2611 EG",{"title":32,"callToActions":33,"links":39},"Site Menu",[34],{"id":35,"title":36,"link":37},"163140902","Contact",{"__typename":38},"ContactRecord",[40,46,51,56,61],{"id":41,"title":42,"link":43},"163140904","Impact",{"__typename":44,"slug":45},"PageRecord","impact",{"id":47,"title":48,"link":49},"163140905","Services",{"__typename":50},"ServiceOverviewRecord",{"id":52,"title":53,"link":54},"163140906","Cases",{"__typename":55},"CaseOverviewRecord",{"id":57,"title":58,"link":59},"163140908","About us",{"__typename":44,"slug":60},"about-us",{"id":62,"title":63,"link":64},"d6WdFJq2SOuc3dWtpibbXQ","Work at",{"__typename":44,"slug":65},"work-at",{"links":67,"copyrightTitle":93,"copyrightLabel":94,"copyrightLink":95,"privacyTitle":96,"privacyLabel":97,"privacyLink":98,"certificatesGrid":99},[68,71,74,77,82,85,88],{"id":69,"title":42,"link":70},"144185264",{"__typename":44,"slug":45},{"id":72,"title":48,"link":73},"144185265",{"__typename":50},{"id":75,"title":53,"link":76},"144185266",{"__typename":55},{"id":78,"title":79,"link":80},"144185267","Blog",{"__typename":81},"BlogPostOverviewRecord",{"id":83,"title":58,"link":84},"144185268",{"__typename":44,"slug":60},{"id":86,"title":36,"link":87},"144185269",{"__typename":38},{"id":89,"title":90,"link":91},"144185270","FAQ",{"__typename":44,"slug":92},"faq","Creative Commons licence and disclaimer","CC BY 4.0","https:\u002F\u002Fcreativecommons.org\u002Flicenses\u002Fby\u002F4.0\u002F","De Voorhoede privacy statement (pdf)","Privacy statement","https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1763455455-vh-isms-006-privacy-statement-de-voorhoede-en.pdf",[100,112,123],{"id":101,"image":102,"link":107},"Xq4bBfg_TZ6Fkjax9mkbLQ",{"url":103,"alt":104,"width":105,"height":106},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353463-b-corp-logo-black-rgb.png","B Corp logo",404,680,{"__typename":108,"id":109,"title":110,"url":111},"ExternalLinkRecord","fGW1ak8XQYaYDLkBSyncog","B Corp","https:\u002F\u002Fwww.bcorporation.net\u002Fen-us\u002Ffind-a-b-corp\u002Fcompany\u002Fde-voorhoede\u002F",{"id":113,"image":114,"link":119},"c5mCXRTiSraRIB25fw1p7Q",{"url":115,"alt":116,"width":117,"height":118},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353461-dda-boxlogo-black.png","Dutch Digital Agencies logo",627,480,{"__typename":108,"id":120,"title":121,"url":122},"P6Jh7B0cTv2cKyNEeKVWVQ","Dutch Digital Agencies","https:\u002F\u002Fdutchdigitalagencies.com\u002Fleden\u002Fde-voorhoede\u002F",{"id":124,"image":125,"link":129},"MT5SCyNxSTSr_v5eeATMZw",{"url":126,"alt":127,"width":128,"height":128},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1775730283-dnv.png","DNV logo",518,{"id":130,"title":131,"link":132},"BRtNB5HnT5i-7HkA8IYzBw","DIV",{"__typename":44,"slug":133},"impact\u002Fdigitale-producten-privacy-by-design",[135],{"locale":136,"value":137},"en","presentation-oriented-templating-syntax",{"page":139},{"slug":137,"i18nSlugs":140,"social":142,"title":146,"subtitle":79,"isArchived":147,"headerIllustration":145,"date":148,"authors":149,"introTitle":158,"items":159,"pivots":255,"relatedBlogPosts":256,"tags":257,"onMountedScript":152,"onUnmountedScript":152},[141],{"locale":136,"value":137},{"title":143,"description":144,"image":145},"Presentation-oriented Templating Syntax | De Voorhoede","The benefits of using semantic templates containing only presentation logic.",null,"Presentation-oriented Templating Syntax",true,"2014-04-23T02:00:00.000+02:00",[150],{"name":151,"lastName":152,"slug":153,"image":154},"Joao","","joao",{"url":155,"alt":145,"width":156,"height":157},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534636-placeholder.jpg",1235,1646,"POTS is easy to read and write, both for developers and designers",[160,164,169,172,176,180,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,242,245,248,251],{"__typename":161,"id":162,"title":152,"body":163},"TextSectionRecord","500850","\u003Cp>As a web developer you have probably come across Presentation-Oriented Templating Syntax \u003Cabbr title=\"Presentation-Priented Templating Syntax\">POTS\u003C\u002Fabbr> like this:\u003C\u002Fp>",{"__typename":165,"id":166,"language":167,"body":168},"CodeBlockRecord","500851","html","{% block content %}\n  \u003Ch1>{{ section.title }}\u003C\u002Fh1>\n  {% for story in stories %}\n    \u003Ch2>\u003Ca href=\"{{ story.url }}\">{{ story.title }}\u003C\u002Fa>\u003C\u002Fh2>\n    \u003Cp>{{ story.teaser }}\u003C\u002Fp>\n  {% endfor %}\n{% end block %}",{"__typename":161,"id":170,"title":152,"body":171},"500852","\u003Cp>Without any prior experience of using templating engines, I’m pretty sure it was obvious how it worked. At least you knew what result to expect.\u003C\u002Fp>\n\u003Cp>This is by design: \u003Cem>the template system is meant to express presentation, not program logic\u003C\u002Fem>.\u003C\u002Fp>\n\u003Cp>Django, a Python framework, first introduced this templating syntax which was later adapted to work with other frameworks and rendering engines like Jinja (Python), Twig (PHP), H2o (PHP), Nunjucks (JavaScript) and Liquid (Ruby). While other different programming languages and frameworks, the templating syntax for each is almost identical. Each supports the same notation for variables, filters, conditionals, inheritance, includes and comments.\u003C\u002Fp>\n\u003Cp>This kind of templating engine provides tags which function similarly to some programming constructs – if tag for boolean tests, a for tag for looping, etc.; template inheritance and includes – for managing layouts and components;\u003C\u002Fp>\n\u003Cp>In the following moments you will be able to get the key points of this kind of templating and also some small differences between the different languages that use them.\u003C\u002Fp>",{"__typename":161,"id":173,"title":174,"body":175},"500853","Why POTS is great","\u003Cul>\n\u003Cli>it has the same semantic and expressive syntax (notation) to bind data to markup for all frameworks using it\u003C\u002Fli>\n\u003Cli>can be used interchangeably between different frameworks and rendering engines\u003C\u002Fli>\n\u003Cli>has advanced methods to extend and include other templates\u003C\u002Fli>\n\u003Cli>is easy to read and write, both for developers and designers\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>To the advantages pointed before, the best that we could add is that: if you know one, you really know how to work with all of them. Right? Well, while they are pretty much the same, each one has some particular functionality that is usually related to the framework\u002Flanguage they are build on. So what are those little details and why should we care about it?\u003C\u002Fp>\n\u003Cp>First of all, because the syntax is similar on different back-ends, we can be sure that we can use it no matter which backend language is used. Secondly, even though they all look pretty much the same, the project can benefit from a specific variation of the syntax. To understand the differences between the variations of templating frameworks using \u003Cabbr>POTS\u003C\u002Fabbr>, we will be focusing on variables, filters, tags\u002Fconditionals and template inheritance.\u003C\u002Fp>",{"__typename":161,"id":177,"title":178,"body":179},"700850","Syntax key points","\u003Cp>We will be comparing four variations of templating frameworks using \u003Cabbr>POTS\u003C\u002Fabbr>:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Django ( the ‘original’ Python flavour)\u003C\u002Fli>\n\u003Cli>Twig ( the PHP version)\u003C\u002Fli>\n\u003Cli>Nunjucks ( the JavaScript version)\u003C\u002Fli>\n\u003Cli>Liquid ( the ‘Shopify’ Ruby version)\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Since we can use the same data structure, we will use the following as an example:\u003C\u002Fp>",{"__typename":165,"id":181,"language":182,"body":183},"500854","json","{\n  \"title\": \"Fishing experiences\",\n  \"stories\": [\n    {\n      \"title\": \"In my own town\",\n      \"teaser\": \"My journey from noob to fishing expert\",\n      \"url\": \"\u002Fstory\u002F2\",\n    },\n    {\n      \"title\": \"Meristics\",\n      \"teaser\": \"Introduction to Meristics basics\",\n      \"url\": \"\u002Fstory\u002F3\",\n    }\n  ]\n}",{"__typename":165,"id":185,"language":167,"body":186},"500855","{% block content %}\n  \u003Ch1>{{ section.title }}\u003C\u002Fh1>\n  {% for story in stories %}\n    \u003Ch2>\u003Ca href=\"{{ story.url }}\">{{ story.title }}\u003C\u002Fa>\u003C\u002Fh2>\n    \u003Cp>{{ story.teaser }}\u003C\u002Fp>\n  {% endfor %}\n{% endblock %}",{"__typename":161,"id":188,"title":152,"body":189},"500856","\u003Cp>\u003Cspan>And the output would be:\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":165,"id":191,"language":167,"body":192},"500857","\u003Ch1>Fishing experiences\u003C\u002Fh1>\n\u003Ch2>\u003Ca href=\"\u002Fstory\u002F2\">In my own town\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>My journey from noob to fishing expert\u003C\u002Fp>\n\u003Ch2>\u003Ca href=\"\u002Fstory\u002F3\">Meristics\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>Introduction to Meristics basics\u003C\u002Fp>",{"__typename":161,"id":194,"title":152,"body":195},"500868","\u003Ch3>Variables\u003C\u002Fh3>",{"__typename":165,"id":197,"language":167,"body":198},"500869","{{ foo.bar }}",{"__typename":161,"id":200,"title":152,"body":201},"500870","\u003Cp>The application passes variables to the templates. Variables may have attributes or elements on them you can access as well. What a variable looks like heavily depends on the application providing it.\u003C\u002Fp>\n\u003Cp>This is the variable lookup order behind the scenes:\u003C\u002Fp>\n\u003Cp>\u003Ccode>foo.bar\u003C\u002Fcode>\u003C\u002Fp>\n\u003Col>\n\u003Cli>check if there is an attribute called 'bar' on foo.\u003C\u002Fli>\n\u003Cli>if there is not, check if there is an item 'bar' in foo.\u003C\u002Fli>\n\u003Cli>if there is not, return an undefined object.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>\u003Ccode>foo['bar']\u003C\u002Fcode>\u003C\u002Fp>\n\u003Col>\n\u003Cli>check if there is an item 'bar' in foo.\u003C\u002Fli>\n\u003Cli>if there is not, check if there is an attribute called 'bar' on foo.\u003C\u002Fli>\n\u003Cli>if there is not, return an undefined object.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>Twig does a slightly different approach:\u003C\u002Fp>\n\u003Col>\n\u003Cli>check if foo is an array and bar a valid element;\u003C\u002Fli>\n\u003Cli>if not, and if foo is an object, check that bar is a valid property;\u003C\u002Fli>\n\u003Cli>if not, and if foo is an object, check that bar is a valid method (even if bar is the constructor - use __construct() instead);\u003C\u002Fli>\n\u003Cli>if not, and if foo is an object, check that getBar is a valid method;\u003C\u002Fli>\n\u003Cli>if not, and if foo is an object, check that isBar is a valid method;\u003C\u002Fli>\n\u003Cli>if not, return a null value.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>\u003Ccode>foo['bar']\u003C\u002Fcode> on the other hand only works with PHP arrays:\u003C\u002Fp>\n\u003Col>\n\u003Cli>check if foo is an array and bar a valid element;\u003C\u002Fli>\n\u003Cli>if not, return a null value.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>It's important to know that the curly braces are not part of the variable, but of the print statement. If you access variables inside tags, don't put the braces around. If a value is undefined or null, nothing is displayed. The same behavior occurs when referencing undefined or null objects. You can also set variables inside the block scope. Twig flavored syntax adds extra functionalities like \u003Ca href=\"http:\u002F\u002Ftwig.sensiolabs.org\u002Fdoc\u002Ftemplates.html#global-variables\" target=\"_blank\" rel=\"noopener\">global variables\u003C\u002Fa> to help the developer.\u003C\u002Fp>\n\u003Ch3>Filters\u003C\u002Fh3>\n\u003Cp>You can modify variables for display by using filters.\u003C\u002Fp>\n\u003Cp>Filters look like this: \u003Ccode>{{ name | lower }}\u003C\u002Fcode> . This displays the value of the \u003Ccode>{{ name }}\u003C\u002Fcode> variable after being filtered through the lower filter, which converts text to lowercase. Use a pipe \u003Ccode>(|)\u003C\u002Fcode> to apply a filter.\u003C\u002Fp>\n\u003Cp>Filters can be “chained.” The output of one filter is applied to the next. \u003Ccode>{{ text | escape | linebreaks }}\u003C\u002Fcode> is a common idiom for escaping text contents, then converting line breaks to \u003Ccode><p>\u003C\u002Fcode> tags.\u003C\u002Fp>\n\u003Cp>Some filters take arguments. A filter argument looks like this: \u003Ccode>{{ bio | truncatewords:30 }}\u003C\u002Fcode>. This will display the first 30 words of the bio variable. Filter arguments that contain spaces must be quoted; for example, to join a list with commas and spaced you’d use \u003Ccode>{{ list | join:\", \" }}\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Cp>All of the flavored syntaxes have a set of base filters like: capitalize, escape (sometimes shortened to just e), join, last, lenght, lower, random, reverse, slice, sort and float.\u003C\u002Fp>\n\u003Cp>But some of them extend their base with:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Twig adds \u003Ca href=\"http:\u002F\u002Ftwig.sensiolabs.org\u002Fdoc\u002Ffilters\u002Fdate_modify.html\" target=\"_blank\" rel=\"noopener\">\u003Ccode>date_modify\u003C\u002Fcode>\u003C\u002Fa>, \u003Ca href=\"http:\u002F\u002Ftwig.sensiolabs.org\u002Fdoc\u002Ffilters\u002Fjson_encode.html\" target=\"_blank\" rel=\"noopener\">\u003Ccode>json_encode\u003C\u002Fcode>\u003C\u002Fa>, \u003Ca href=\"http:\u002F\u002Ftwig.sensiolabs.org\u002Fdoc\u002Ffilters\u002Fnl2br.html\" target=\"_blank\" rel=\"noopener\">\u003Ccode>nl2br\u003C\u002Fcode>\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>Liquid adds \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FShopify\u002Fliquid\u002Fwiki\u002FLiquid-for-Designers#standard-filters\" target=\"_blank\" rel=\"noopener\">\u003Ccode>truncatewords\u003C\u002Fcode>\u003C\u002Fa>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>You can always add your own custom filters.\u003C\u002Fp>\n\u003Ch3>Conditionals \u002F Tags\u003C\u002Fh3>\n\u003Cp>Tags look like this: \u003Ccode>{% tag %}\u003C\u002Fcode>. Tags are more complex than variables: Some create text in the output, some control flow by performing loops or logic, and some load external information into the template to be used by later variables.\u003C\u002Fp>\n\u003Cp>Some tags require beginning and ending tags (i.e. \u003Ccode>{% tag %} ... tag contents ... {% endtag %}\u003C\u002Fcode>). The most common include: \u003Ccode>if\u003C\u002Fcode>, \u003Ccode>for\u003C\u002Fcode>, \u003Ccode>extend\u003C\u002Fcode>, \u003Ccode>include\u003C\u002Fcode>, \u003Ccode>macros\u003C\u002Fcode> and \u003Ccode>comments\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Ch4>If\u003C\u002Fh4>\n\u003Cp>\u003Ccode>if\u003C\u002Fcode> tests a condition and lets you selectively display content. It behaves exactly as javascript's \u003Ccode>if\u003C\u002Fcode> behaves.\u003C\u002Fp>",{"__typename":165,"id":203,"language":167,"body":204},"500871","{% if fishes %}\n  We have some {{ fishes }}\n{% endif %}",{"__typename":161,"id":206,"title":152,"body":207},"500872","\u003Ch4>For\u003C\u002Fh4>\n\u003Cp>for iterates over arrays and dictionaries.\u003C\u002Fp>",{"__typename":165,"id":209,"language":167,"body":210},"500873","{% for item in items %}\n  {{ item.title }}\n{% endfor %}",{"__typename":161,"id":212,"title":152,"body":213},"500874","\u003Ch3>Macros\u003C\u002Fh3>\n\u003Cp>Macros are comparable with functions in regular programming languages. They are useful to reuse often used HTML fragments to not repeat yourself.\u003C\u002Fp>",{"__typename":165,"id":215,"language":167,"body":216},"500875","{% macro input(name, value, type) %}\n  \u003Cinput type=\"{{ type | default(\"text\") }}\" name=\"{{ name }}\" value=\"{{ value | escape }}\"\u002F>\n{% endmacro %}",{"__typename":161,"id":218,"title":152,"body":219},"500876","\u003Cp>And then they could be used like:\u003C\u002Fp>",{"__typename":165,"id":221,"language":167,"body":222},"500877","\u003Cdl>\n  \u003Cdt>Fish name\u003C\u002Fdt>\n  \u003Cdd>{{ input_field(fish_name) }}\u003C\u002Fdd>\n  \u003Cdt>Scientific name\u003C\u002Fdt>\n  \u003Cdd>{{ input_field(\"scientific_name\") }}\u003C\u002Fdd>\n\u003C\u002Fdl>",{"__typename":161,"id":224,"title":152,"body":225},"500878","\u003Cp>\u003Cspan>One special note about the \u003C\u002Fspan>\u003Ccode>{% raw %}\u003C\u002Fcode>\u003Cspan> tag. If you are using a server-side template, to not parse that part of the code as a template.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":165,"id":227,"language":167,"body":228},"500879","{% raw %}\n  {% if %} this will {{ not be processed }} {% endif %}\n{% endraw %}",{"__typename":161,"id":230,"title":152,"body":231},"500880","\u003Ch4>Comments\u003C\u002Fh4>\n\u003Cp>You can write comments using . Comments are completely stripped out when rendering. Comments are nothing more than a Tag.\u003C\u002Fp>",{"__typename":165,"id":233,"language":167,"body":234},"500881","{# disabled type of catched fished because of Marine Conservation Institute\n  {% for fish in fishes %}\n    ...\n  {% endfor %}\n#}",{"__typename":161,"id":236,"title":152,"body":237},"500882","\u003Ch3>Bonus from specific variations:\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>Nunjucks adds \u003Ca href=\"http:\u002F\u002Fjlongster.github.io\u002Fnunjucks\u002Ftemplating.html#asynceach\">asyncEach\u003C\u002Fa> and \u003Ca href=\"http:\u002F\u002Fjlongster.github.io\u002Fnunjucks\u002Ftemplating.html#asyncall\">asyncAll\u003C\u002Fa> for working with asynchronous javascript\u003C\u002Fli>\n\u003Cli>Liquid adds \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FShopify\u002Fliquid\u002Fwiki\u002FLiquid-for-Designers#if--else\">unless\u003C\u002Fa> for negation of if statements, and \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FShopify\u002Fliquid\u002Fwiki\u002FLiquid-forDesigners#cycle\">cycle\u003C\u002Fa> to alternate between different tasks\u003C\u002Fli>\n\u003C\u002Ful>",{"__typename":161,"id":239,"title":240,"body":241},"700864","Template inheritance","\u003Cp>Template inheritance is a way to make it easy to reuse templates. When writing a template, you can define \"blocks\" that child templates can override You start by defining a ‘base’ template:\u003C\u002Fp>",{"__typename":165,"id":243,"language":167,"body":244},"500883","\u003C!DOCTYPE html>\n\u003Chtml>\n  \u003Chead>\n    {% block head %}\n      \u003Clink rel=\"stylesheet\" href=\"style.css\" \u002F>\n      \u003Ctitle>{% block title %}{% endblock %}\u003C\u002Ftitle>\n    {% endblock %}\n  \u003C\u002Fhead>\n  \u003Cbody>\n    \u003Cdiv id=\"content\">{% block content %}{% endblock %}\u003C\u002Fdiv>\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>",{"__typename":161,"id":246,"title":152,"body":247},"500884","\u003Cp>\u003Cspan>And then you extend the base layout, by filling the blocks with content:\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":165,"id":249,"language":167,"body":250},"500885","{% extends \"base.html\" %}\n{% block title %}Index{% endblock %}\n{% block head %}\n{% endblock %}\n{% block content %}\n  \u003Ch1>Index\u003C\u002Fh1>\n  \u003Cp class=\"important\">Welcome to Fishing experiences.\u003C\u002Fp>\n{% endblock %}",{"__typename":161,"id":252,"title":253,"body":254},"500886","To wrap up","\u003Cp>With variables and tags you can simply cycle through any content. Filters let you customize the output given from the data source. Macros help you don’t repeat yourself and with templating inheritance you organize your templates in a structured way.\u003C\u002Fp>\n\u003Cp>If you want to know more you can check this references:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FWeb_template_system\" target=\"_blank\" rel=\"noopener\">https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FWeb_template_system\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"http:\u002F\u002Ftwig.sensiolabs.org\u002Fdoc\u002Ftemplates\" target=\"_blank\" rel=\"noopener\">http:\u002F\u002Ftwig.sensiolabs.org\u002Fdoc\u002Ftemplates\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"http:\u002F\u002Fjlongster.github.io\u002Fnunjucks\u002Ftemplating\" target=\"_blank\" rel=\"noopener\">http:\u002F\u002Fjlongster.github.io\u002Fnunjucks\u002Ftemplating\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fdocs.djangoproject.com\u002Fen\u002F1.6\u002Ftopics\u002Ftemplates\" target=\"_blank\" rel=\"noopener\">https:\u002F\u002Fdocs.djangoproject.com\u002Fen\u002F1.6\u002Ftopics\u002Ftemplates\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FShopify\u002Fliquid\u002Fwiki\u002FLiquid-for-Designers\" target=\"_blank\" rel=\"noopener\">https:\u002F\u002Fgithub.com\u002FShopify\u002Fliquid\u002Fwiki\u002FLiquid-for-Designers\u003C\u002Fa>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Some alternatives:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fspeedmax\u002Fh2o-php\" target=\"_blank\" rel=\"noopener\">H20\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"http:\u002F\u002Fjinja.pocoo.org\u002F\" target=\"_blank\" rel=\"noopener\">Jinja\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"http:\u002F\u002Fpaularmstrong.github.io\u002Fswig\" target=\"_blank\" rel=\"noopener\">Swig\u003C\u002Fa>\u003C\u002Fli>\n\u003C\u002Ful>",[],[],[],1776256168554]