las plantillas de liquid.js se incorporan en env.js

This commit is contained in:
f 2021-10-27 15:18:05 -03:00
parent 921d1075b0
commit 8bcb4f066f
3 changed files with 43 additions and 22 deletions

View file

@ -1,7 +1,9 @@
<div class="alert alert-{{ type }} alert-dismissible" role="alert">
{{ content }}
{%- raw -%}
<div class="alert alert-{{ type }} alert-dismissible" role="alert">
{{ content }}
<button data-action="notification#hide" type="button" class="close" aria-label="{{ site.i18n.close }}">
<span aria-hidden="true">&times;</span>
</button>
</div>
<button data-action="notification#hide" type="button" class="close" aria-label="{{ site.i18n.close }}">
<span aria-hidden="true">&times;</span>
</button>
</div>
{%- endraw -%}

View file

@ -1,17 +1,19 @@
<section class="row no-gutters justify-content-center">
<div class="col-10">
{% for item in results %}
<article id="{{ item.slug }}">
<header>
<h2>
<a href="{{ item.url }}">
{{ item.title }}
</a>
</h2>
</header>
{%- raw -%}
<section class="row no-gutters justify-content-center">
<div class="col-10">
{% for item in results %}
<article id="{{ item.slug }}">
<header>
<h2>
<a href="{{ item.url }}">
{{ item.title }}
</a>
</h2>
</header>
<p class="lead">{{ item.description }}</p>
</article>
{% endfor %}
</div>
</section>
<p class="lead">{{ item.description }}</p>
</article>
{% endfor %}
</div>
</section>
{%- endraw -%}

17
env.js
View file

@ -10,3 +10,20 @@ window.env = {
window.site = {
"i18n": {{ site.i18n | jsonify }}
}
{%- comment -%}
Para agregar plantillas que se procesan con JS, las agregamos en
Liquid dentro de assets/templates/ y luego las importamos acá, de forma
que estén disponibles para JS sin tener que descargarlas.
Es importante que la plantilla esté envuelta por el tag `{% raw %}`,
para que no sea procesado en el momento de generar env.js, sino en el
navegador.
{%- endcomment -%}
{%- capture alert %}{% include_relative assets/templates/alert.html %}{% endcapture -%}
{%- capture results %}{% include_relative assets/templates/results.html %}{% endcapture -%}
window.templates = {
"alert": {{ alert | markdownify }},
"results": {{ results | markdownify }},
}