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

View file

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

17
env.js
View file

@ -10,3 +10,20 @@ window.env = {
window.site = { window.site = {
"i18n": {{ site.i18n | jsonify }} "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 }},
}