Random 5 posts on every visit on webpage - JavaScript

support
1

Hello.
I’m migrating from Wordpress to static site generator, as my blog about stenography become a vector of attack on my webhost. But during several years of publishing blog-posts I had produced several hundreds of posts, which I would like to reveal to new readers - which would be impossible as they are covered with stacks of newer ones. So I have thought of generating of eg. 5 random posts that would be shown from the whole bunch for the whole publication period.

I have already groked, how to {{ range shuffle .Paginator.Pages | first 5 }}, but this makes random list only on every hugo reload, which would happen once per several weeks at best. Therefore I would like to make similar action, but on every visit on the webpage. I think, JavaScript is the only solution.

But as I’m not a programmer, I cannot write such a code by myself. Do you know of any piece of JS code, that might be useful and would fit to adjust to such task?

I use the strange-case theme which step-by-step is transformed to my needs.

Below is the piece of HTML that shows 5 random posts generated by {{ shuffle }} hugo function:

<div class="sidebar-recent hidden-xs">
                  <p>Random blog posts:</p>
                  <ul>
                    
					    <li>&#187; <a href="//localhost:1313/blog/aaa/">aaa</a></li>
                    
					    <li>&#187; <a href="//localhost:1313/blog/bbb/">bbb</a></li>
                    
					    <li>&#187; <a href="//localhost:1313/blog/ccc/">ccc</a></li>
                    
					    <li>&#187; <a href="//localhost:1313/blog/ddd/">ddd</a></li>

                    			    <li>&#187; <a href="//localhost:1313/blog/eee/">eee</a></li>
                    
                  </ul>
                </div>

	</div>

It looks like, I need to generate the whole list without pagination of such items:

<li>&#187; <a href="//localhost:1313/blog/ccc/">ccc</a></li>

and then transform it by JS to list of 5 random items that would be shown at this place.

How to do it?

Thanks in advance for any help.

2

There is no random in a static website. Only “random on build” (and thus static until you build your site the next time). And I guess you don’t want that.

What you could do is a json-file with ALL your posts/pages that you want to show randomly. Include only the URL and a title. Then load via JavaScript on pageload and select 5 random items.

Other than that: static websites != dynamic websites :wink:

3

static websites != dynamic websites :wink:

I think, I understand this perfectly. As I have said, I trained random-on-build, it’s great, but with refreshing once per month it’s not what I need. I need quasi-refresh that happens on every visit.
You’re right, I need a list of all of my posts perhaps in json-file. I suppose, the simplest way to get them there is to generate the whole bunch by Hugo and then import them to JavaScript on client side. But I’m not a programmer, it’s just a guess.

4

The beginning of this post explains how you can build an index.json with all your posts. Leave everything out except url and title in line 5 of the JSON part. Ignore the search part after that :wink: Then you will have to search for some Javascript that loads this file and gets 5 random pieces. That is nothing I have available right now :slight_smile:

1 Like
5

Oh my dear! :wink:
I immediately applied the code you suggested. And it works flawlessly! I think that in a short time I will be able to squeeze something out of it so that it would work according to my needs.

But what it does on its own is also beautiful!

Thanks! :slight_smile:

1 Like
6

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.