My data is creating a number of paginated posts. My front matter is as follows:
---
pagination:
data: cms
size: 1
alias: article
addAllPagesToCollections: true
layout: "_base.njk"
tags: articles
permalink: "/articles/{{ article.title | slug }}/"
eleventyComputed:
title: "{{ article.title }}"
eleventyNavigation:
key: "{{ article.title}}"
parent: "{{articles}}" //<-- how do I set the parent?
---
I would like my nav HTML structure to read
<ul>
<li>articles</li>
<ul>
<li>post-1</li>
<li>post-2</li>
</ul>
</ul>
Thanks in advance.
You can create hierarchy by using macro's.
But there's an another way: flatten that hierarchy and assign to each node a variable that describes the nesting level.
Then a similar code (as below) can be used to render that hierarchy:
{% set level = 0 %}
{% for category in collections.categoryCollection %}
{% set ulCount = (category.level - level) | abs %}
{% for i in range(0, ulCount) %}
{% if category.level > level %}
<ul>
{% else %}
</ul>
{% endif %}
{% endfor %}
<li>
<a href="{{ category.categoryUri | url | normalize | firstPage(globals.categories.category.postPageSize) }}">
{{ category.categoryName }} ( {{category.items.length}} / {{ category.allItems.length }} )
</a>
</li>
{% set level = category.level %}
{% endfor %}
{% for i in range(0, level) %}
</ul>
{% endfor %}
Hope this helps, I know it works, used them to get something like this:
Related
I'm creating a pagination in my website with Liquid template engine. But the link does not work as it should.
I want this link: https://support.beefinity.com/support/tickets/filter?page=2&requested_by=0&wf_filter=all
But I get this link: https://support.beefinity.com/support/tickets/filter/page/2?requested_by=0&url_locale=&wf_filter=all
This is the code that I use for the pagination:
{% paginate tickets by 10 %} {% for ticket in tickets %} {% if ticket.group.name == "Beefinity Support"%}
<div class="c-row c-ticket-row" id="ticket-view">
<span class="status-source sources-detailed-{{ticket.source_name | downcase}}" title=" {{ticket.source_name | downcase}} "></span> <span class="label-status-pending label label-small">{{ticket.status}}</span>
<div class="ticket-brief">
<div class="ellipsis">
<a class="c-link" href="{{ticket.portal_url}}" title="{{ticket.subject}}">{{ticket.subject}}</a>
</div>
<div class="help-text">
Made by: <span class="emphasize">{{ticket.requester.name}} Made on:{{ ticket.created_on | date: "%d-%m-%Y %H:%M" }}</span><br>
Agent: <span class="emphasize">{{ticket.agent.name}}</span>
</div>
</div>
</div>
{% endif %} {% endfor %} {% if paginate.pages != 0 %}
<div class="pagination pagination-centered">
<ul>
{% if paginate.previous %}
<li class="previous">
<a rel="prev start" href="{{ paginate.previous.url }}">
{{ paginate.previous.title }} Previous
</a>
</li>
{% else %}
<li class="disabled">
<span>« Previous </span>
</li>
{% endif %}
{% for part in paginate.parts %}
{% if part.is_link %}
<li>
<a rel="prev start" href="{{ part.url }}">
{{ part.title }}
</a>
</li>
{% else %}
{% if part.title == paginate.current_page %}
<li class="active">
{{ part.title }}
</li>
{% else %}
<li>
<a rel"start"> {{ part.title }}</a>
</li>
{% endif %}
{% endif %}
{% endfor %}
{% if paginate.next %}
<li class="next_page">
<a rel="next" href="{{ paginate.next.url }}">
Next {{ paginate.next.title }}
</a>
</li>
{% else %}
<li class="next_page disabled">
<span> Next » </span>
</li>
{% endif %}
</ul>
</div>
{% endif %}
{% endpaginate %}
in the documentation that I viewed it just goes well:
I want to show products from the collections selected from theme setting.
Here is my code:
{% assign col1 = collections[settings.collection1] %}
{% assign col2 = collections[settings.collection2] %}
{% assign col = [col1, col2] %}
{% for product in col .products %}
{{ product }}
{% endfor %}
Your code should be like this
{% for i in (1..2) %}
{% capture col %}collection{i}{% endcapture %}
{% for product in collecitons.settings[col] %}
{{product}}
{% endfor %}
{% endfor %}
hello is there anyone shopify experts out there .
my only goal is to filter or display all articles according to their tag .
so this is what i have so far from this forum
{% assign counter = 0 %}
{% for article in blogs['lookbook'].articles %}
{% if article.tags contains 'Fox Racing' and counter < 2 %}
{% assign counter = counter | plus: 1 %}
<div class="njohn_search_otherpage">
<a href="{{ article.url }}" title="{{ article.title | escape }}">
<div>{{ article.image.src | img_url: 'medium' | img_tag: article.title }}</div>
<div>{{ article.title }}</div>
</a>
</div>
{% endif %}
{% endfor %}
the code are working but it's only four article will showed up. but in that sample tag i have already 10 articles.
The above code has a counter that limits the articles displayed, removing that counter works as expected, filtering all the articles by a tag.
{% for article in blogs['lookbook'].articles %}
{% if article.tags contains 'Fox Racing' %}
<div class="njohn_search_otherpage"> <div>{{ article.image.src | img_url: 'medium' | img_tag: article.title }}</div> <div>{{ article.title }}</div> </div>
{% endif %}
{% endfor %}
I'm struggling with showing some content on Apsotrophe CMS.
I am using apostrophe-pieces to create a description field:
{
name: 'description',
label: 'Description',
type: 'singleton',
widgetType: 'apostrophe-rich-text',
options: {
toolbar: [ 'Bold', 'Italic', 'Link', 'Unlink' ]
}
}
I would like it to show up in the index.html view of a custom page.
However, using {{ apos.singleton(data.piece, 'description', 'apostrophe-rich-text') }} brings up an error and it's unable to render the page. It only works in show.html
In /lib/modules/basics-pages/views/index.html, my code is:
{% extends "apostrophe-pages:outerLayoutBase.html" %}
{% block content %}
<div class="basics-grid">
{% for piece in data.pieces %}
<article>
<h4>{{ piece.title }}</h4>
{% set image = apos.images.first(piece.icon) %}
{% if image %}
<img src="{{ apos.attachments.url(image, { size: 'one-sixth' }) }}" />
{% endif %}
<div class="desc">
{{ apos.singleton(data.piece, 'description', 'apostrophe-rich-text') }}
</div>
</article>
{% endfor %}
</div>
{% endblock %}
Could someone help me with the correct code to use to show the contents of the singleton widget?
As you may know I'm the lead developer of Apostrophe at P'unk Avenue.
This code:
{% for piece in data.pieces %}
Indicates you have a loop variable called piece. That's what you want.
This code:
{{ apos.singleton(data.piece, 'description', 'apostrophe-rich-text') }}
Looks for piece as a property of data and ignores your loop variable.
Remove the data. and you should be good to go.
You'll want to add:
{{ apos.singleton(piece, 'description', 'apostrophe-rich-text', { edit: false }) }}
To avoid inline editing on the index page which would be more confusing than useful.
Hello i am trying to stop my loop when it reaches to half of the total length.
just like using break it is not happening.
{% if page.member && page.member.length > 0 %}
{% for member in page.member %}
{{ member }}
{% if loop.index0 == ((page.member.length/2)-1) %}
{% set count = loop.index %}
{% break %}
{% endif %}
{% endfor %}
{% endif %}
please look into it.
Thanking you.
There is no {% break %} tag in Swig templates.
You don't need the break tag:
{% if page.member && page.member.length > 0 %}
{% set count = false %}
{% for member in page.member %}
{% if not count %}
{{ member }}
{% if loop.index0 == ((page.member.length/2)-1) %}
{% set count = loop.index %}
{% endif %}
{% endif %}
{% endfor %}
{% endif %}