Single page back button to page in list

support
1

Hello,

I have been building a new blog using Hugo, and I have been enjoying it so far. I had a question about something I am not sure is currently possible.

Following Hugo’s regular hierarchy, I have a list template and a single item template. My list template is paginated, with each page showing the summary of 5 articles.

Currently I have a ‘Back to Articles’ button, when it is clicked it goes to page 1 of the articles list. Is it possible to have a back button that would go back to the page the article is listed on instead?

As an example if the article was on page 5 of the paginated article list, when the ‘Back to Articles’ button was clicked while reading the singular article, it would go back to page 5 of the list.

2

From what I know Hugo isn’t aware which position a single page has on a particular paginated list. For Hugo this is complex material because one page can appear in multiple paginated lists, like the time-ordered list on the index, the tag page, section page, and category page.

Perhaps you can use a bit of JavaScript to determine whether the previous page was a paginator page or not? (See document.referrer as an example.)

3

agree with @Jura, I think it will be better if handle with javascript. other than that people tend to use the back button in their browser. this could be another example of back button

1 Like
4

I was playing a bit with solving this with JS before asking the question. My issue was coming up with a way to display the link if the user hadn’t visited a previous page or came from another domain. Reading around about document.referrer though I think I came up with an idea to try. Thanks Jura and Yudy for the help.

5

I wrote some really janky code, and although it is working, I don’t think I could recommend it:

const forge_back = document.querySelector('.forge-article-navigation-back');
if ((forge_back) 
  && (document.referrer.includes(window.location.host))
  && (document.referrer !="") 
  && ((document.referrer.includes('page')) 
     || (document.referrer.includes('summary')) 
     || (document.referrer.includes('tags'))
    )) {
    forge_back.href = document.referrer;
    if (document.referrer.includes('page')) {
      forge_back.innerText = "BACK TO ARTICLES";
    } else if (document.referrer.includes('summary')) {
      forge_back.innerText = "BACK TO SUMMARY";
    } else if (document.referrer.includes('tags')) {
      forge_back.innerText = "BACK TO TAGS";
    }   
};