Pagination doesn't work with extendable layouts in 11ty ( eleventy ) - javascript

Describe the bug
When I extend nunjuck layout, pagination doesn't work
To Reproduce
{% extends "layouts/default.njk" %}
---
pagination:
data: categories
size: 1
alias: category
eleventyComputed:
title: "{{ category.name }}"
---
{% block content %}
{%- for category in categories %}
<h1>{{ category.name }}</h1>
{% endfor -%}
{% endblock %}
Expected behavior
It should generate the categories pages
Screenshots
the result file is empty
Environment:
OS and Version: Windows 10
Eleventy Version 0.12.1
Additional context
Add any other context about the problem here.

Front matter needs to be, well, front. It has to be on top. Try moving the extends above the block. (But still below the front matter.)

Related

Webpack Encore not loading JavaScript in base template

I am using a Webpack Encore in my Symfony 4 project, and when including the Twig helper for JavaScript in my base.html.twig:
{% block javascripts %}
{{ encore_entry_script_tags('app') }}
{% endblock %}
The JavaScript doesn't load, however, when including the exact same Twig helper in one of my templates (index.html.twig), the JavaScript loads in.
So my question is, why does the above Twig helper work in one of my templates, but not in my base template?
What preciel said is true, using a block inside a template that extends another template will overwrite the default code inside that said block.
However there is another solution than just moving the code outside the block in the base template and that's calling the parent() function
main.twig
{% extends 'base.twig' %}
{% block foo %}
{{ parent() }}
Bar
{% endblock %}
base.twig
{% block foo %}
Foo
{% endblock %}
output
Foo
Bar
demo
It's failing because it's inside your javascript block.
Your template extends base.html.twig, so whatever you place within your javascript block in any template will be inside the javascript block.
But if you do the same within base.html.twig it will just be ignored.
Just move {{ encore_entry_script_tags('app') }} out of your javascript block.
base.html.twig
{{ encore_entry_script_tags('app') }}
{% block javascripts %}
{# nothing here, your templates will overwrite it when you extends base.html.twig #}
{% endblock %}
Remember this: If it's inside your layout, which is base.html.twig, then don't place anything inside the {% block %} tags. It will just be ignored.

How to trigger the rendering of a bokeh plot programatically?

I have a lot of plots on my page and I don't want them to fire all on page load, but trigger them as the user scrolls down, or after a while.
I use the components module, so I'm unsure where to put a setTimeout or something like that.
in Django view I have:
from bokeh.resources import CDN
from bokeh.embed import components
script, div = components(plot.make_box_plot(), CDN)
and then in tag:
{% if div %}
{{ div | safe }}
{% endif %}
{% if script %}
{{ script | safe }}
{% endif %}
Does bokeh have some api for this?
This doesn't work as I get a js syntax error:
<script>
window.plot_script = {{ script }}; // and then use it in a js file inside setTimeout
</script>

How to cut twig correctly

I apologize if the question was raised somewhere, and I did not notice the decision.
I have the following files:
base.html.twig - which includes css и js.
blocks.html.twig - which includes blocks.
en.html.twig
sp.html.twig
ru.html.twig
blocks.html.twig
<h1>hello</h1>
<h2>holla</h2>
<h3>привет</h3>
Please tell me how to initialize the object (for example blocksLang and each h* block to place in this object), for including in different places. For example:
in en.html.twig
{% extends "base.html.twig" %}
{% include "blocks.html.twig" blocksLang.en %} //and it should render <h1>hello</h1>
in sp.html.twig
{% extends "base.html.twig" %}
{% include "blocks.html.twig" blocksLang.sp %} //and it should render <h2>holla</h2>
in ru.html.twig
{% extends "base.html.twig" %}
{% include "blocks.html.twig" blocksLang.ru %} //and it should render <h3>привет</h3>
Thank you for attention

What does the vertical bar mean in Flask Templates?

I am working on a flask tutorial, and in the sample code, it contains the following:
| {% for pr in providers %}
{{ pr.name }} |
{% endfor %}
In this context, what do the vertical bars mean?
| {% for pr in providers %}
{{ pr.name }} |
{% endfor %}
this bars will be displayed in the html output, it is there to enhance readability. For example, if the providers list contains say 3 links in total they will be displayed one after another separated by | due to for loop.
possible output:
|link1|
link2|
link3|

Shopify - Load 'collections/all' page on my front page

How to load http://example.myshopify.com/collections/all content
to my shopify frontpage http://example.myshopify.com/
I figured out a way that I hardcode <script>window.location.href='collections/all'</script> on index.liquid, but I'm pretty sure thats' not a clean way.
and I try to copy whole collection.liquid's code to index.liquid, but it prompt me Liquid error: Array 'collection.all.products' is not paginateable. error and no product showing the index.liquid page.
Any idea how to load collections/all on shopify's front page?
I'm using Timber Framework as people recommend to start to build a theme
inside
In the Timber framework, you could change this line in index.liquid:
{% for product in collections.frontpage.products limit:4 %}
to:
{% for product in collections.all.products %}
Depending on how many products you have, you probably still want to limit how many are displayed, or paginate the output.
E.g.
{% paginate collections.all.products by 12 %}
{% for product in collections.all.products %}
...
{% endfor %}
{{ paginate | default_pagination }}
{% endpaginate %}
You include this:
{% for product in collections.all.products %}
// here you have access to each product
{% endfor %}
This will loop all of your products.
You can review http://cheat.markdunkley.com/ what product variables you have access to in that loop.

Categories

Resources