When I create a post, in the front matter I have to insert layout, title, date etc. My concern is regarding date front matter. It is very inconvenient to insert date time and time offset in date field manually.
I'm not able to figure out how to do this automatically. I want the front matter date to update automatically with system time.
The date variable in front matter is an optional variable that you can set to be able to override the date that you set when you title your post according what Jekyll is looking for (i.e. 2019-12-14-post-title.md). It should only refer to the date the post was originally made, and not the current system date. Except for certain edge cases, you really shouldn't have to define date in the front matter.
You can use Liquid templating to post the current time to a page by passing the "now" keyword to date in your liquid template as follows:
This page was last updated at {{ "now" | date: "%Y-%m-%d %H:%M" }}.
to get the the output:
This page was last updated at 2019-12-14 17:48.
However this method has a big drawback for Jekyll usage, because it will refer to the current date when the page was last generated from the template and not when the page is being visited by the user.
The best way to access the current system time is likely to use javascript instead. This is fairly easy depending on your familiarity with the language, but essentially you can make a Date object and then output the info you are looking to display. Here is a quick snippet I made that shows a couple methods that act on the Date object to output different values such as the date, time, and year:
<!DOCTYPE html>
<html>
<body>
<h3>The toDateString() method converts a date to a date string:</h3>
<p id="demo1"></p>
<h3>The toLocaleTimeString() method outputs formatted time:</h3>
<p id="demo2"></p>
<h3>The getFullYear() method outputs the year:</h3>
<p id="demo3"></p>
<script>
// create date object
var d = new Date();
// use toDateString() to output formatted date
document.getElementById("demo1").innerHTML = d.toDateString();
// use toLocaleTimeString() to output formatted time
document.getElementById("demo2").innerHTML = d.toLocaleTimeString();
// use getFullYear() to output year
document.getElementById("demo3").innerHTML = d.getFullYear();
</script>
</body>
</html>
W3schools has a good rundown of the Date object and how to format output if you need more examples and reference on usage.
If you need to know how to use Javascript with Jekyll there is a helpful post on Jekyll Talk that will help.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With