When using a {% for ... %} loop inside an included nunjucks template (e.g. {% include ... %}) in eleventy, the generated contents of the loop are rendered inside <pre><code>...</code></pre> blocks.
Here is the contents of the include:
src/includes/recipe-ingredients.html
<aside id="ingredients" aria-label="ingredients">
<h3>Ingredients</h3>
<ul>
{% for ingredientData in recipe.ingredients %}
<li><span class="measure">{{ ingredientData.displayQty }}</span>
<span class="ingredient">{{ ingredientData.ingredient }}</span></li>
{% endfor %}
</ul>
</aside>
... and this is what gets generated:
<!-- Rest of generated HTML -->
<aside id="ingredients" aria-label="ingredients">
<h3>Ingredients</h3>
<ul>
<pre><code><li><span class="measure">2</span>
<span class="ingredient">cinnamon</span></li>
<li><span class="measure">3/4</span>
<span class="ingredient">sugar</span></li>
</code></pre>
</ul>
</aside>
<!-- Rest of generated HTML -->
Why is this happening and how do I prevent it?
Related
becuase i want to manuplate/add some html tags after html render and save into nunjucks (like before rendering);
nunjucks before render
<div class="ps-4">
<h1>{{heading}}</h1>
{% if isShowLi %}
<div class="px-4">
{% for item in items %}
<div>{{item.name}}</div>
{% endfor %}
</div>
{% endif %}
</div>
nunjucks after render and html modification
<div class="ps-4">
<h1>hello world</h1>
<img src="abc.png" />
<div class="px-4">
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div>item 4</div>
<div>item 5</div>
</div>
</div>
and i want it like that
<div class="ps-4">
<h1>{{heading}}</h1>
<img src="abc.png" />
{% if isShowLi %}
<div class="px-4">
{% for item in items %}
<div>{{item.name}}</div>
{% endfor %}
</div>
{% endif %}
</div>
please solve and suggest any way to do this thing pleassssss
If you want the output to look like the original nunjucks logic you typed in, then you can try the following technique. On your HTML template within your nunjucks project...
<pre>
<code>
<div class="ps-4">
<h1>{{heading}}</h1>
<img src="abc.png" />
{% if isShowLi %}
<div class="px-4">
{% for item in items %}
<div>{{item.name}}</div>
{% endfor %}
</div>
{% endif %}
</div>
</code>
</pre>
{% asyncEach example in component.examples %}
{% include "./example.njk" %}
{% endeach %}
// example.njk
<article class="spectrum-CSSExample">
<h3 id="{{example.slug}}" class="spectrum-CSSExample-heading spectrum-Heading spectrum-Heading--sizeS">
{{example.name}}
<div class="{{ spectrum-StatusLight spectrum-StatusLight--sizeM spectrum-CSSExample-status spectrum-StatusLight--{{ util.getStatusLightVariant(example.status) }}">
{{example.status}}
</div>
</h3>
{# {% include "./exampleContent.njk" %} #}
</article>
In example.njk example is undefined. How can I pass example inside a include like this?
example is always undefined inside example.njk
First time posting, so thanks in advance for your time c:
I'm using Jekyll to serve a portfolio. I'm using a portfolio plugin as well as a JS library called Lightbox. I have the portfolio plugin working. The ideal action is that every time the user clicks a portfolio item, it executes the lightbox (that's working). In order to for more images to be stored in the lightbox, I must give them the same data-title name.
My understanding is that I need to nest a for-loop within my current loop, to check for all items within the array to return any additional lightbox items.
My .yml file reads like so:
title: Portfolio Title
description: A crazy portfolio item
bg-image: Test-01.png
lb-images:
- Test-01.png
- Test-02.png
- Test-03.png`
My .md file reads like so:
<div class="flex-container">
<!-- portfolio-item -->
{% assign projects = site.data.projects | get_projects_from_files | sort:'date' %}
{% for project in projects reversed %}
<div class="flex-item" style="background-image: url(/img/projects/{{ project.bg-image }}); background-repeat: no-repeat">
<a href="../images/projects/{{ project.lb-images[0] }}" data-lightbox="{{ project.title }}" data-title="{{ project.bg-image }}">
<div id="overlay">
<span id="reveal-text">
<h3>{{ project.title }}</h3>
<p>{{ project.description }}</p>
<p>{{ project.category }}</p>
</span>
</div>
</a>
</div>
{% for project in projects %}
{% endfor %}
{% endfor %}
</div>
I assumed that the forloop.index would begin at [1] and then continue through that array until there are no more lb-images. But something's up. My guess is syntax or how I'm calling the data from the .yml file, or both.
Again thanks for your time.
Daniel
(edit: took out space in nested endfor loop, runs now but returns: href="../images/projects/] }}" and data-title and data-lightbox returns are for each data.project file instead of for each item in data.project.lb-images)
Correct loop to expose images for a project is:
{% assign projects = site.data.projects | get_projects_from_files | sort:'date' %}
<div class="flex-container">
{% for project in projects reversed %}
<!-- portfolio-item -->
<div class="flex-item" style="background-image: url(/img/projects/{{ project.bg-image }}); background-repeat: no-repeat">
<a href="../images/projects/{{ project.lb-images[0] }}" data-lightbox="{{ project.title }}" data-title="{{ project.bg-image }}">
<div id="overlay">
<span id="reveal-text">
<h3>{{ project.title }}</h3>
<p>{{ project.description }}</p>
<p>{{ project.category }}</p>
</span>
</div>
</a>
</div>
{% for img in project.lb-images %}
{% if forloop.first != true %}
{% endif %}
{% endfor %}
{% endfor %}
</div>
Liquid forloop documentation
Im using Jekyll and liquid syntax and would like to add a custom background colour and thumbnail image for each of my projects on my homepage. How can I achieve this using YAML frontmatter?
liquid syntax outputting projects
{% for post in site.categories['project'] %}
<div class="project">
<h3 class="project__title">{{ post.title }}</h3>
<p class="project__description">{{ post.description }}</p>
<a class="project__link" href="{{ post.url}}">view project</a>
</div>
{% endfor %}
In your project posts add background and thumbnail variables
myprojectpage.html
---
front matter variables ...
background: #ffffff
thumbnail: images/myproject.jpg
---
You can then use them in your loop :
{% for post in site.categories['project'] %}
<div class="project" style="background:{{post.background}};">
<h3 class="project__title">{{ post.title }}</h3>
<img src="{{ site.baseurl }}/{{ post.thumbnail }}" alt="post.title">
<p class="project__description">{{ post.description }}</p>
<a class="project__link" href="{{ post.url}}">view project</a>
</div>
{% endfor %}
Another option can be to simply add a class to your post and manage style in your css/scss/less file.
I have a Markdown page index2.md as follow:
---
layout: plain
title: Index2
---
test Index2
<ul class="posts">
{% for post in site.posts %}
<li><span>{{ post.date | date_to_string }}</span> » {{ post.title }}</li>
{% endfor %}
</ul>
However this can't show my blog posts
<body>
<div class="wrapper">
<header>
<h1>Nodeclipse.github.io</h1>
<p>Resource for Nodeclipse developers</p>
<p class="view">View My GitHub Profile</p>
</header>
<section>
<div>
<p>test Index2</p>
<p> <ul class="posts"></p>
<p> </ul></p>
</div>
</section>
<footer>
<p><small>Hosted on GitHub Pages — Theme by orderedlist</small></p>
</footer>
</div>
<script src="javascripts/scale.fix.js"></script>
</body>
That is blog list is empty.
Markdown is interpreting your indented HTML as content, and helpfully wrapping it in a <p> tag for you.
Markdown will pass HTML through raw, which is what you want, but only if the starting and ending tags are not indented at all. So, un-indent the opening and closing <ul> and </ul> tags, and Markdown will let the entire chunk of HTML go unmolested. So it should look like this:
test Index2
<ul class="posts">
{% for post in site.posts %}
<li>
<span>{{ post.date | date_to_string }}</span>
»
{{ post.title }}
</li>
{% endfor %}
</ul>