I'd like to make a three level submenu using jekyll pages.
First, i created folder that way:
Menu item 1
• menu item 1.1
• menu item 1.1.1
• menu item 1.2
• menu item 1.2.1
Menu item 2
• menu item 2.1
• menu item 2.1.1
• menu item 2.1.2
• menu item 2.1.
• menu item 2.2
and so on.
For now, my files are in folder to use this kind of link:
menuLevel1/menuLevel2/file.md
I thought i could use YAML variables to do so, but it looks like i can't render an array of all variables in my YAML. I can make a menu using:
{{ if page.menuLevel1 == "foo" and page.menulevel2 == "bar" }}
but i'm stuck with sorting item, and since i have 5 level1 option and 10 level2 options, i think it'll take a long time to make it work.
Is there any way of doing this without hassle?
I don't where to go from here.
Tahnks a lot guys.
Ju
Maybe, working with data-files is an option for you. Simply define a file menu.yml in _data-folder which contains your menu structure:
- title: "Menu item 1"
href: "/menuLevel1/file.md"
sub:
- title: "menu item 1.1"
href: "/menuLevel1/menuLevel2/file.md"
...
- title: "Menu item 3"
href: "/menuLevel1/file2.md"
in your layout or include you walk through that file with for-loops:
<!-- 1st level -->
{% for nav in site.data.menu %}
{% if nav.sub != null %}
<li>
<ul>
<!-- 2nd level -->
{% for sub in nav.sub %}
<li>
<a href="{{ site.baseurl }}{{ sub.href }}">
{{ sub.title }}
</a>
</li>
{% endfor %}
</ul>
</li>
{% else %}
<li>
{{ nav.title }}
</li>
{% endif %}
{% endfor %}
Working with several sub-menus you would have to add another level (i.e. 3rd for loop). Alternativly you can avoid redundancy in code by using an include with a parameter ({% include param="level" %} and level=site.data.menu, nav.sub,...) which calls itself with different parameter, whenever a sub-menu is found.
I use something similar than that for generation of a navigation menu. Simply works, i can sort the menu whenever i want and i have all my configuration files together with other files in my _data-dir (you could even store everything in _config.yml - i like to work with _data).
Hope i could help...
Related
Using wagtail-footnotes I have a problem of passing the footnote's reference number to the templates of my Richtextblock.
I followed the Readme instructions. After inserting the data, the footnotes are rendered correctly in the page's 'footer'/footnotes section. The footnote's reference number in the Richtextblock (the 'page.body') displays the numbers that are attributed by the plugin on the Admin. ex: 3ec45 rather in ascending order.
To isolate the problem, I used a simple page model which has StreamField or CustomStreamFieldBlock in it.
It seems that my problem is more related to customize the Richtextblock.
Based on the lines of code that render the footnotes in section (see below), I tried to loop and render the [{{ forloop.counter }}], in a customRichTextBlock... however, I rendered it as a separate block and not inside the RichTextBlock itself.
<ol>{% for footnote in page.footnotes.all %}
<li id="footnote-{{ forloop.counter }}">
[{{ forloop.counter }}] {{ footnote.text|richtext }}
↩ </li>
{% endfor %}</ol>
I found nearly no references or repo to compare with. Any advise or reference as to how I can advance will be highly appreciated.
Essentially I want to go ahead and while the for loop is going to get the images and information of all products to be displayed. insert a conditional if statement in order to see if the products tags contain the tag 'lewd' then it's blurred (right now it's set to just not display the image though)
I'm having issues finding the best place to implement it, I know it should be done on the product templates page (I think) because it seems to be pulling the images and information in the loop, but no matter where I insert the code to try to pull the info and apply the effect it doesn't work. I've gone through many many different ways to do it and this is only the latest example.
<div class="grid product-single{% if section.settings.enable_payment_button %} product-single--{{
section.settings.image_size }}-image{% endif %}">
<div class="grid__item product-single__photos {{ product_image_width }}{% if
section.settings.image_size == 'full' %} product-single__photos--full{% endif %}">
{%- assign featured_image = product.selected_or_first_available_variant.featured_image | default:
product.featured_image -%}
{% for image in product.images %}
{% capture img_id %}FeaturedImage-{{ section.id }}-{{ image.id }}{% endcapture %}
{% capture img_class %}product-featured-img{% endcapture %}
{% capture zoom_img_id %}FeaturedImageZoom-{{ section.id }}-{{ image.id }}{% endcapture %}
{% capture img_wrapper_id %}{{ zoom_img_id }}-wrapper{% endcapture %}
{%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% include 'image-style' with small_style: true, width: height, height: height, wrapper_id:
img_wrapper_id, img_id: img_id %}
<div id="{{ img_wrapper_id }}" class="product-single__photo-wrapper js">
Before the loop closes I want to go ahead and search for those tags so my code was
{% if product.tags contains "Lewd" or product.tags contains "lewd" %} blur {% endif %}
I'm not sure if Shopify already passes this info along though? in that case I suppose i would need to run another forloop? Such as
{% for tag in product.tags %}
{% if tag contains "lewd" %}
but not sure where i would even do that. I'm a novice at working with shopify. thanks for any help
The contains keyword behaves slightly differently depending on what you're using it on:
If the left-hand-side variable is a text string, contains will return true if the right-hand-side value is found as a substring of the left-hand-side value.
If the left-hand-side variable is an array, contains will return true if one of the array values exactly matches the value supplied on the right-hand-side. Type matters, too - a number won't match a string, a string won't match an object, etc.
product.tags gives you an array of strings, so as long as the product has a tag that is exactly lewd then your intuition is correct: {% if product.tags contains 'lewd' %} will be true. However, if your product is tagged with something like lewd-because-reason instead (and doesn't have a plain 'lewd' tag), lewd-because-reason is not an exact match to lewd, so the check above would be false.
Looking at the code you've supplied, a good place to put this check could be inside the {% capture img_class %} line, as then you should be able to add another class to the image being rendered.
Hope this helps!
I am trying to access values of a content type nested deep into array. This is the actual scenario:
I want to customise the default search result page layout of Drupal 8 with additional field information. To know what fields are available for me to access I used {{ kint(item.value) }}, which shows me this:
Fields I want to access are nested under #result>node>fields like body, field_category etc.
Is there any way I can access them directly inside my twig template? I was guessing something like {{ item.value['node']['fields']['field_name']} }? but this gave me nothing!
There is every possibility that the way I am thinking is not a suitable method or may be even not a method at all! I am still very new to Drupal.
All I want is to access desired fields nested deep below inside an array structure. Is there a kind of thumb rule or syntax to follow? This would be a great help if somebody please explain the process to access a specific element from inside a nested Drupal array.
Note: In order to customise layout I copied item-list.html.twig file from /core/themes/stable/templaes/dataset to my theme's templates folder.
Drupal version: 8.2.3
EDIT: Template file for search result (item-list.html.twig)
<p class="righteous">Makes sure the page is being hit!</p>
{% if context.list_style %}
{%- set attributes = attributes.addClass('item-list__' ~ context.list_style) %}
{% endif %}
{% if items or empty %}
{%- if title is not empty -%}
<h3>{{ title }}</h3>
{%- endif -%}
{%- if items -%}
<{{ list_type }}{{ attributes }}>
{%- for item in items -%}
<li{{ item.attributes }}>{{ content.body }}</li>
{%- endfor -%}
</{{ list_type }}>
{%- else -%}
{{- empty -}}
{%- endif -%}
{%- endif %}
If you want to render specific fields from a template you have to use for example:
{{ content.field_feature }}
you can see in your array or in the UI of d8 the machine names of your fields.
{{ content.field_<machine-name> }}
with this you can access your array and theme your content type yourself.
I'm building a jekyll site. I have a loop setup -
{% for article in site.posts limit:5 %}
{% if article.tag == "infographic" %}
<a class="infographic tag" href="/tags/infographics.html">{{ article.tag }}</a>
{% endif %}
{% endfor %}
This loop spits out the latest 5 posts in my infographic tag. I would like the loop to produce only the third latest post. Any ideas on making this happen?
The solution is really difficult for tags. If you use infographic as a category, it could be really simple:
for article in site.categories.infographic | offset: 2 | limit: 1
I am currently writing a website via Clojure code that runs on a Luminus based framework.
I have a database that stores users and uploaded files (and routes which allow me to do both).
The routes call SQL functions that I have written, altering the database.
I currently am printing out the list of files like such (in HTML):
<ul class="users">
{% for item in users %}
<li>
<p>{{item.file_name}}</p>
</br> </br>
</li>
{% endfor %}
</ul>
I want to edit it to have a link to each file as well.
For example, under the <p>{{item.file_name}</p> line I could write something like:
Home
This generates me a link to "/home" for every file_name in the database.
Instead, I would like to create a link to each file_name in the database.
For example, if the first listed item was "test.txt" I would want a link to "/test.txt" and so on, through the whole list.
Is this possible to do? Thank you in advance.
You just need to change your template to create the link HTML that is specific to an item. Something like this:
<ul class="users">
{% for item in users %}
<li>
<p>{{item.file_name}}</p>
</br> </br>
</li>
{% endfor %}
</ul>
It's hard to be any more specific than that without more information. You just have to determine how to create a URL for an item. In the code above I used "/{{item.file_name}}" based on your examples, but if the URL is more complicated than that, you could add it as a separate key to the item and do something like "{{item.url}}".