Added sorting buttons by Publish or Update date on the home page

Published 2025-03-29 Updated 2025-03-30 1043 words 5 minutes views

Contents

Introduction

Sometimes, when browsing a website, you just want to see the most recently updated articles. However, since this site uses Hugo, which is a static site generator, the article information on the homepage is fixed at the moment the site is generated, making dynamic switching impossible. In this case, we can generate a page similar to the homepage and use buttons to switch between different views, achieving a dynamic effect to implement article sorting functionality.

Adding a Toggle Button

We can add a toggle button anywhere on the homepage. Here, we use a switch similar to the one below, adding animations, and placing the button at the top of the article section.

👈Something like this

The site currently uses the LoveIt theme. We can find the homepage HTML file index.html in the /layouts/ directory of the site’s root folder. Then, add the following code above the {{- /* Posts */ -}} section at the beginning of the articles.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
{{- /* Sorting Toggle Switch */ -}}
<div class="sort-toggle">
    <span>{{ i18n "publishDate_updateDate" }}</span>
    <label class="switch">
        <input type="checkbox" id="sort-toggle">
        <span class="slider round"></span>
    </label>
</div>

<style>
    /* Switch Styles */
    .switch {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 24px;
        margin: 0 10px;
    }

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: .4s;
        border-radius: 24px;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 4px;
        bottom: 3px;
        background-color: white;
        transition: .4s;
        border-radius: 50%;
    }

    input:checked + .slider {
        background-color: #2196F3;
    }

    /* Smooth Sliding Animation */
    input:checked + .slider:before {
        transform: translateX(26px);
    }

    input:not(:checked) + .slider:before {
        transform: translateX(0);
    }
</style>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        var lang = (document.documentElement.lang || 'en').toLowerCase();
        var siteLang = '{{ (index .Site.Languages 0).Lang }}'.toLowerCase();

        var lastmodUrl = lang === siteLang ? "/lastmod" : `/${lang}/lastmod`;
        var homeUrl = lang === siteLang ? "/" : `/${lang}/`;

        var toggleSwitch = document.getElementById("sort-toggle");

        // Set switch state based on the current URL
        if (window.location.pathname.includes("/lastmod")) {
            toggleSwitch.checked = true;
        }

        // Listen for switch changes and toggle the page
        toggleSwitch.addEventListener("change", function () {
            window.location.href = this.checked ? lastmodUrl : homeUrl;
        });
    });
</script>

Now, you can see the toggle button on the homepage! If you want to use a different type of button, you can replace it here as well.

Modifying the Internationalization Language File

If you open the homepage, you’ll notice that the text before the button seems incorrect. This is because the translation key has not yet been added to the language file. We can follow the steps below to add the translation key.

Navigate to the /i18n/ directory in the website’s root folder, find the corresponding language file, and add the publishDate_updateDate key-value pair. Below is an example using Traditional Chinese (zh-TW) and English (en).

zh-TW.toml

1
2
[publishDate_updateDate]
other = "發佈日期 / 更新日期"

en.toml

1
2
[publishDate_updateDate]
other = "Publish Date / Update Date"

This will make the text before the button appear correctly.

Adding the `index.lastmod.html` Template

After clicking the button, you may notice that nothing happens. This is because we haven’t added the pages for the different sorting options. To fix this, we can copy the /layouts/index.html homepage file and paste it in the /layouts/posts/ directory in the website’s root folder, then rename it to index.lastmod.html. Then, in the {{- /* Posts */ -}} section, add {{- $pages = $pages.ByLastmod.Reverse -}} to sort the posts by the update time. The specific changes are as follows.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
{{- /* Posts */ -}}
{{- if ne $posts.enable false | and .Site.RegularPages -}}
    {{- /* Paginate */ -}}
    {{- $pages := where .Site.RegularPages "Type" "posts" -}}

    {{- $pages = $pages.ByLastmod.Reverse -}} {{- /* Add this line */ -}}

    {{- if .Site.Params.page.hiddenFromHomePage -}}
        {{- $pages = where $pages "Params.hiddenfromhomepage" false -}}
    {{- else -}}
        {{- $pages = where $pages "Params.hiddenfromhomepage" "!=" true -}}
    {{- end -}}
    {{- with $posts.paginate | default .Site.Params.paginate -}}
        {{- $pages = $.Paginate $pages . -}}
    {{- else -}}
        {{- $pages = .Paginate $pages -}}
    {{- end -}}
    {{- range $pages.Pages -}}
        {{- .Render "summary" -}}
    {{- end -}}
    {{- partial "paginator.html" . -}}
{{- end -}}

Add Article and Modify to Homepage

Finally, to complete the setup, we simply need to create an article and specify the newly created template.

In the website’s root directory, navigate to the /content/ folder, create a homepage.lastmod folder, and add the _index.language code.md file. Then, insert the following content.

1
2
3
4
5
6
7
8
---
title: "homepage.lastmod"
url: "lastmod"
date: 2025-03-28T21:00:11+08:00  # This is the date at the time, you can change it to your own.
draft: false
type: "posts"
layout: "index.lastmod"
---

If it’s a multilingual website, make sure to add the corresponding _index.language code.md file for each language. The content to fill in will be the same. For example, the files added to this site are as follows.

1
2
3
4
5
/content/
│── homepage.lastmod/
│   ├── _index.zh-tw.md
│   └── _index.en.md
│

With this, we now have the functionality to display articles in different orders based on the publish date or update date.

Conclusion

I have wanted to implement this feature for a long time, but after much research, I couldn’t figure out how to bypass the static site generation structure. One day, I thought of generating a webpage with a different sorting order and using hyperlinks to navigate back and forth. After searching online, I found a feasible solution and finally completed the modification.