What is the best way to iterate through a subdirectory using Jekyll?

Currently utilizing Jekyll, I've organized my project with a folder named "articles" at the root. Inside this folder, there are two subfolders: "fr" and "eng".

My objective is to loop through the "fr" folder on one page and the "eng" folder on another.

I attempted to use 

{% for this in site.articles.fr %}
, but it was unsuccessful.

I also experimented with 

{% assign folder1 = site.articles | where_exp: "this" , "this.path contains 'folder1'"%}
{% for this in folder1 %}
, but it didn't work either.

Is there an alternative method to achieve this?

htmlcssjekyll

Answer №1

In order to align with Jekyll conventions, I suggest changing the name of 'articles' to '_posts'.

To filter the folders within the '_posts' directory, you can use the following code snippet:

{% for post in site.posts %}
  {% if post.path contains '/en/' %}
    ..your code here
  {% endif %}
{% endfor %}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Displaying various values from a cascading dropdown in Django

Currently working with Python 3.8 & Django 3.0, I am in need of passing multiple values (volume & volume size) to a dependent dropdown. While I have managed to fill the dependent dropdown with a single value (volume), I have come across some resour ...

htmlpython-3.xdjangoajax

After submitting the form, I must only deactivate the checkbox that has been selected

Here is the HTML code I am working with: I have multiple checkboxes designed as buttons to select a room, but it's quite annoying when they all get selected at once. $("form").submit(function() { $('.seat input:checkbox').prop("disable ...

javascripthtmljquerynode.jsexpress

I am trying to display an element upon hovering using Jquery, but unfortunately, despite recognizing the event, it refuses to function as expected

I've been searching for a solution to show a submenu on hover by removing the hidden class that is hiding it. Despite trying various approaches, including using CSS and JavaScript, I haven't been able to make it work. Here is the code snippet I h ...

javascripthtmljquerycss

applying different styles to various elements

As a newcomer to the world of jQuery, I am attempting to achieve the following goal: I have several instances of a div, and for each instance, I randomly assign a class from a predefined list in order to modify certain attributes. While this process is su ...

jqueryhtmlcssrandom

The CSS background-image and background-color do not load on IE8

I have a specific style applied to a link: #block-menu-menu-top-menu a.contact-us-link { background-image: url("../images/top-menu-contact.png") no-repeat; background-color: none; height: 28px; text-indent: -9999px; width: 34px; } However, when ...

cssinternet-explorerinternet-explorer-8

Click a button to adjust the height of an element

My webpage features a dashboard with tabs on the left and corresponding content on the right. To ensure proper alignment, I have utilized Bootstrap to create two columns - one for the tabs and one for the content. However, I am facing an issue where the bo ...

javascriptjqueryhtmlcsstwitter-bootstrap

Display specific data within the <td> tag

I am attempting to display a specific value that is located within a <td> element. The values are retrieved from a webpage and they are structured as follows: <b>General Information</b> <table width="400"> <tr> ...

htmlpython-3.xparsing

Center-align the text in mui's textfield

What I'm looking for is this: https://i.stack.imgur.com/ny3cy.png Here's what I ended up with: https://i.stack.imgur.com/vh7Lw.png I attempted to apply the style to my input props, but unfortunately, it didn't work. Any suggestions? Than ...

javascriptcssmaterial-ui

Creating a scrollable HTML5 div container with fixed divs positioned within it

I am attempting to develop an app container that mimics the functionality of Microsoft Excel. The container should scroll both horizontally and vertically, with fixed headers on the left and top that move along with the content. Here is a rough representat ...

csshtmloverflowcss-position

Solving the style upload issue with NextJS and Module Federation in ReactJS

My current project utilizes React 18 and webpack 5 with the module federation plugin. I am exploring the possibility of integrating Next JS with module federation, but I am encountering an issue where the host project is not able to fetch styles from the r ...

cssreactjsnext.jswebpack-5webpack-module-federation

Removing extra spaces from a hyperlink using CSS

Can CSS be used to remove extra whitespaces? Within the code snippet provided, there is an additional whitespace in the <a> tag. This link is generated by a WordPress plugin and I prefer not to make changes directly to the source files of the plugin. ...

css

The function .val() is not a recognized method

hello everyone here is the section of my HTML code: <div class="radio"> <input type="radio" name="certain" id="oui" value="oui"/> <label for="oui"> oui </label> <br /> <input type="radio" name="certain" id=" ...

javascriptjqueryhtml

Tap on the image placeholder to replace it with your own image

Just starting out, I have the following HTML code within a <form>: <div class="image-upload"> <img id="send_photo_img1" src="assets/images/index2.png"/> <input id="send_photo_input1" type="file"/> <img id="send_photo_img2" sr ...

jquerycss

Which file directory should I specify when using ng-include?

My project structure in Angular looks like this web server.py ##flask server program app static app.js controllers.js etc... templates index.html home.html In my index.ht ...

htmlangularjsfilepathpartialsangularjs-ng-include

CSS behaving strangely with the height property

I've run into a specific issue with a div element that contains multiple buttons. I am trying to adjust the height and position of one button so that it takes up space above the other buttons, but every time I make changes to its height and position, ...

jqueryhtmlcss

The issue in AngularJS 1.4 where the select element value is not binding due to a type mismatch

My ng-model has a value assigned to it, but it is not binding with the selected element. <select data-ng-model="myval"> <option value="? number:2 ?"></option> <option value="2" class="ng-binding">Value 1</option> <op ...

javascripthtmlangularjs

Navigate the div with arrow keys

Looking for an answer similar to this SO post on moving a div with arrow keys, could a simple and clear 'no' be sufficient: Is it possible to turn an overflowing div into a "default scroll target" that responds to arrow-up/down/page-down/space k ...

javascripthtmlcss

"Even when hidden, an HTML Div element still occupies space on the

I encountered an issue with my tabbedPage setup. Even though I have hidden content, it still occupies space on the page. Here is the code snippet that I am using: let tabHeader = document.getElementsByClassName("tabbedpage-header")[0]; let tabIndicator = d ...

javascripthtmlcss

What is the best way to implement word-wrap on ANTD Select's title and dropdown options in order to adjust the element's height?

I need my ANTD title/selected item to be on a separate row and adjust the height of the Select component. Here is the example I have been working on: https://codesandbox.io/s/basic-usage-antd-4-24-7-forked-8jzp29?file=/demo.js These are the specific styl ...

cssreactjsantdcss-modules

Allow images to extend beyond the boundaries of the grid in Bootstrap 4

I'm trying to figure out how to display an image that starts inside a grid but scales to the left or right of the screen. The current issue is that the container limits the width, and I need it to allow the image to extend beyond the grid. If you hav ...

htmlcssbootstrap-4