I want to display a specific post in the middle of the page among other regular posts(check screenshot)
I know I could use front matter with something like featured: true but is there any other way to do this?
Simple. Just do this:
{% for post in site.posts %}
{% if forloop.index == 1 or forloop.index == 4 %}
output wide post
{% else %}
output normal post
{% endif %}
{% endfor %}
Better answer: create similar divs around each post, and target them with CSS like this:
div {width: 50℅;}
div:nth-child(1), div:nth-child(4) {width: 100%;}
Layout should be in CSS, if possible.
Related
The official Jekyll tutorial has an entire section on using a YAML file to define a custom sequence of pages: https://jekyllrb.com/tutorials/navigation/
But it doesn't mention anywhere how one might create previous/next navigation buttons on the pages within that sequence, which is particularly ironic considering that the tutorial itself has them.
I've come up with some Liquid to determine the index of the current page:
{% for item in site.data.encore.docs %}
{% if item.url != page.url %}
{{ item.title }}: {{ forloop.index }}
{% else %}
<strong> This page index: {{ forloop.index }}</strong>
{% assign this_page_index = forloop.index %}
{% break %}
{% endif %}
{% endfor %}
but getting the index of the previous page via {% decrement this_page_index %} always returns -1 for some reason, and something like {% assign previous = this_page_index - 1 %} isn't valid Liquid. Same goes for trying to get the next page with similar methods.
What's the ideal way to accomplish this? I've searched every way I can think of and not found anything.
You can find the code for Jekyll's own navigation on their tutorials page by sifting through their GitHub repo until you get to their section_nav_tutorials.html, but it appears the way to do it is very close to what you have.
Liquid doesn't respect you doing math directly, you have to use a filter. For you, you'd use {% assign previous = this_page_index | minus: 1 %}.
I am wondering how to go about creating a dynamic menu in Jekyll that automatically populates the navigation with nav items whenever a new page is created. I read an article that touched a bit on the subject, but it was geared toward just sub-nav items. Has anyone had any experience in doing something like this?
Thanks!
It is a bad idea to do this automatically. However, it is very easy to achieve. Here is the code:
<ul>
{% for item in site.pages %}
<li {% if page.url contains item.url %}class="active"{% endif %}>
{{ item.title }}
</li>
{% endfor %}
</ul>
Source: https://jekyllcodex.org/without-plugin/simple-menu/
To define the order of appearence, you might want to add a front matter variable called 'order' to the pages and add a different pagenumber to this variable on each page. The code should sort the pages before looping over them. That looks like this:
{% assign sitepages = site.pages | sort: order %}
{% for item in site.pages %}
...
{% endfor %}
Happy coding!
I have several rST pages that follow the same skeleton, but with different values and paragraphs in some places.
Ideally, I would imagine something like this (simplified example):
page-model.rst
Feature {% block title %}Index{% endblock %}
============================================
{% block description %}
Not available.
{% endblock %}
And then:
page-1.rst
{% extends "page-model.rst" %}
{% block title %}Load{% endblock %}
{% block description %}
Load data from hard disk.
{% endblock %}
Is that possible out of the box?
Should I hack something myself to run Jinja before generating docs? Or define my own directives?
Is that a bad idea? :)
Thanks for your insights!
As you may know Jekyll uses Liquid tags, and the Liquid templating engine has support for If / Else / Unless statements. Does anyone know how to show a specific content only on the 'homepage` (& NOT paged)?
Got it!
UPDATE: This doesn't work, if you don't yet have enough posts for pagination. That is, it only works if you have at least page1 and page2.
As you may already know, Jekyll supports pagination. So, to target just the Index/Home page (and specifically only the first page, i.e. page1 and NOT page2, page3 ...), you can use this:
{% if paginator.next_page == 2 %}
<div id="welcome">Hello, welcome to my blog!</div>
{% endif %}
{% if paginator.next_page == 2 %} tells Jekyll to check if the next page of the pagination is page2 (i.e. the current page is page1) and show the specified content.
This works best of all:
{% if paginator.previous_page %}
{% else %}
<div id="welcome">Hello, welcome to my blog!</div>
{% endif %}
Untested, but {% if paginator.previous_page == 0 %} might work as well.
The best way to to is :
{% if paginator.page==1 %}
// Do something here
{% endif %}
I've just recently started using Github to host my blog (using Jekyll and Liquid). However, I'm having an issue which I can't currently fix. The issue could be hacked/solved if I was able to detect which "page" or "url" the user was visiting.
Something like:
{% if user_is_currently_at_this_url %}
{{ display something }}
{% else %}
{{ display something else }}
{% endif %}
Is this possible? Is there any other way around this issue?
page.url is the URL of the current page, without the host (e.g. /index.html), as documented in Page Variables. So, in this case:
{% if page.url == "/index.html" %}
something
{% else %}
other thing
{% endif %}
(However, I don't think you need this any more, your other problem is probably solved. :) )
You could use {{ canonical_url }}