Recently, I started revamping my personal website and used an opensource template from Github - startbootstrap-freelancer. When I started, I saw an
index.pug file inside the project that is driving the whole HTML. It was new and interesting. I was able to fairly understand and make changes. Let's discuss one of the problems that I faced with it and how I solved it.
In my blog, there is a footer where I am showing the current year. Here it is.
However, it was static and I wanted to make it dynamic. Meaning, going forward, no need to modify the HTML again and again. The first thing came to my mind is.
Now, the thing is, we just need to take this code and place it at the correct place inside the HTML file templated by the
When I checked the code inside the
index.pug, I saw this.
// Copyright Section div.copyright.py-4.text-center.text-white .container small Copyright © a(href='http://taditdash.com') | Tadit Dash | 2021
Basically, this pug code will generate a division with mentioned classes and then another container division inside it. At last, the two children would be a small Copyright text and an anchor.
Here is the rendered HTML screenshot from the Chrome developer tool.
script. var currentYear = new Date().getFullYear();
Notice the dot (.) after
script. This is important. If not present, then it will think of
script as an HTML element.
Alright. We get the current dynamic year. Now, we need to display it inside the footer where it is intended. Unfortunately, I could not able to find any straightforward way to directly use this
currentYear variable with any HTML element.
script. document.getElementById('year').textContent = new Date().getFullYear();
Okay, so just need to declare an element with id
year. I have added a
span. Let's add that.
// Copyright Section div.copyright.py-4.text-center.text-white .container small Copyright © a(href='http://taditdash.com') | Tadit Dash | span#year
So, the static year is replaced with a
span with id
year. A small thing though. The span is declared on the next line after the bar (|). Otherwise, it will just be regarded as plain text and not an HTML element.
This magically worked. In case you want to check out my version of the repo, visit - taditdash/startbootstrap-freelancer
Your feedback is very important to me. Don't hesitate to comment.
Thanks for reading. Have a nice day! 😍🙌💾