Create an ‘On This Day’ page
Is there a way to create an On This Day feature on the Archives page or a separate page of a Blot blog?
I would like to see the posts made today in the past years. Jonathan Lacour has coded something similar for Micro.Blog blogs
It's not yet possible feature using Blot's template engine. However, you could accomplish this inelegantly using some involved JavaScript.
The strategy to create an On This Day would probably be something like this:
First, generate today's date in the format month-day
:
var now = new Date();
var today = (now.getMonth() + 1) + '-' + now.getDate();
Then generate a list of every post on your blog:
{{#allEntries}}
<li class="on-this day-{{#formatDate}}M-D{{/formatDate}}">
<b>{{#formatDate}}YYYY{{/formatDate}}</b>
<a href="{{{url}}}">{{title}}</a>
</li>
{{/allEntries}}
Finally, only show the posts on this day in previous years:
<style>.on-this {display: none}</style>
<script type="text/javascript">
document.querySelector('.day-' + today).style.display = 'block';
</script>
The complete working example looks like this:
<h1>On this day</h1>
<ul>
{{#allEntries}}
<li class="on-this day-{{#formatDate}}M-D{{/formatDate}}">
<b>{{#formatDate}}YYYY{{/formatDate}}</b>
<a href="{{{url}}}">{{title}}</a>
</li>
{{/allEntries}}
</ul>
<style>.on-this {display: none}</style>
<script type="text/javascript">
var now = new Date();
var today = (now.getMonth() + 1) + '-' + now.getDate();
document.querySelectorAll('.day-' + today).style.display = 'block';
</script>
Please let me know if you have any questions about implementing this!
Answered 4 years ago · Edit answerI would have to spend some time understanding and then implementing this on my blog. But it's a good start. I appreciate it so thanks for sharing this.
Answered 4 years ago · Edit answer