Last year's posts wrongly identified as this year's post ?Capture nyear?

Help
1

I am using the following theme Documentation – Documentation + help systems theme – Jekyll Themes and have a post in_posts with the following permalink. No other date indication, so I assume the date is taken from the permalink:

---
permalink: 2020-12-04-something-something.html
---

There is a page called news/news_archive.html as such:

<div class="home">

    <div class="post-list">

    <section id="archive">
        <h3>This year's posts</h3>
        {%for post in site.posts %}
        {% unless post.next %}
        <ul class="this">
            {% else %}
            {% capture year %}{{ post.date | date: '%Y' }}{% endcapture %}
            {% capture nyear %}{{ post.next.date | date: '%Y' }}{% endcapture %}
            {% if year != nyear %}
        </ul>
        <h3>{{ post.date | date: '%Y' }}</h3>
        <ul class="past">
            {% endif %}
            {% endunless %}
            <li><time>{{ post.date | date:"%d %b" }}</time><a href="{{ post.url | remove: "/"}}">{{ post.title }}</a></li>
            {% endfor %}
        </ul>
    </section>
    <hr/>
    </div>
</div>

However, it is 2021 now, the site was last generated/built in 2021 but still in the built website the post is shown under This year’s posts. Why please?

Should it not be visible under another section, namely last year’s posts?

What could be wrong or how can I troubleshoot this? In the original theme’s demo, there is a differentiation between the years:

https://idratherbewriting.com/documentation-theme-jekyll/news_archive.html

2

The code above lumps everything together as This year.

It does not even check what the current year is and whether to show post. But that is okay.

If that snippet is in the theme then you should copy the file to your own repo but edit it.

Take out the first H3 about “this year’s posts”. That heading is inaccurate and not useful (especially if you most recent post was last year)

See if the rest of the code works for you as is - to group posts by year. No filtering needed.

The indentation makes it hard to reason about but I am figuring out the intention.
The code checks the current post in the loop against the next post (which will be older). If they are not in the same year, then it shows the year only as a kind of heading. See %Y

which gives you a sense of when the year starts and all post under it are the same.

And it always shows the month and day for a post.

3

Hi @MichaelCurrin. Thanks a lot for your help. I am really lucky to receive your lending of experience and knowledge.

Indeed, as per your comments I now understand better what is going on! :slight_smile: Since I had no “this year’s post” last year’s post was stilll showing under “this year’s post”, exactly like you predicted.

Let me try and see if I can fiidle with it according to your suggestions.

1 Like
4

@MichaelCurrin I feel the following works fine:

<div class="home">
  <div class="post-list">
    <section id="archive">
      {% for post in site.posts %}
      <h3>{{ post.date | date: '%Y' }}</h3>
      <ul class="past">
        <li><time>{{ post.date | date:"%d %b" }}</time><a href="{{ post.url | remove: "/"}}">{{ post.title }}</a></li>
      </ul>
      {% endfor %}
    </section>
    <hr/>
  </div>
</div>

With regards to the formatting/indentation, please let me know if you know of a good (on-line or offline) tool?

I just ran this last snippet through a HTML beautifier … is that the preferred way when dealing with mixed HTML / Liquid Jekyll code?

Kind regards!

5

Okay good.

What are you removing the / for?

Perhaps your site is on github pages on a sub path so you want to make the URL relative and not start with /

I suggest

{{ post.url | relative_url }}

Which will add repo as a prefix.

/repo-name/2021/01/01/postname.html

If you want to remove trailing slash then look into Permalink.

6

Regarding formatting

I use a Jekyll extension on VS Code and set .md and .html files (in a project) to format as “jekyll”. That gives me syntax highlighting.
It does not format for me.

So if I want to format ie prettify, I change to HTML format and then run the formatter (or save).

That generally helps with long lines and getting HTML overall to indent well. Especially if you have a really long and nested snippet that you want spread over multiple lines.

The downside is that items nested in an if statement and or loop are not indented. That might be okay for you. My personal preference is based on Python etc so I indent manually. And switch back to “jekyll” as a format so that it doesn’t auto format HTML.

Using HTML

<div>
    {% for x in y %}
    <p>{{ x }}</p>
    {% endfor %}
</div>

My custom indent added to that.

<div>
    {% for x in y %}
        <p>{{ x }}</p>
    {% endfor %}
</div>

I tried a Liquid extension and setting Liquid as the format. I didn’t like it though

7

Hi @MichaelCurrin

With regards to the removal of / (remove: "/"), I notice that the author of the theme does this continuously. See e.g. the links from the default sidebar file:

Or the article/keyword search file:

Or the links creation file (I have not well understood this yet):

On the other hand, there is a portion permalink: … in the pages and posts YAML frontmatter.

Is the code wrong then?

Should I change all instances of | remove: "/" into | relative_url? Thanks for any help making me understand.

8

Yes the code by author is wrong and you should fix it. Removing a forward slash on most URLs anywhere in the URL (ie beginning and middle and end) is very weird and not something that Jekyll sites do.

It might work fine if all your pages are at the same level, but as it will break otherwise.

For example

Given you are on page

/a/b/c.html

And you want to link to

/a/d.html

If your URL is this without any forwardslash it will break.

ad.html

Firstly, it will be a relative URL as ./ad.html
Which means from c.html it will link to

/a/b/c.html/ad.html

Secondly, the / between a and d is important.

Doing this works from anywhere on the site because it is absolute and not relative.

href="/a/d.html"

And if you use relative_url then that will prepend /repo-name, which is needed on GH Pages.

The absolute URL is especially important for assets. As you need to access /css/styles.css an absolute URL from anywhere. If it was css/styles.css in the HTML then the browser would see it as /a/b/c.html/css/styles.css for example.