add last-updated YAML parameter

skulshreshtha · Sep 12, 2020 · d57097a · d57097a
1 parent 9827abc
commit d57097a
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 43 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -16,7 +16,8 @@ One of the major changes in this version is that a lot of time was spent on reth
 - Added `full-width` YAML parameter to allow having full-width pages
 - Added `feed_show_excerpt` config setting to show/hide the post excerpts on the feed page
 - Added `feed_show_tags` config setting to show/hide the list of tags on post previews on the feed page
-- Added `share-title` YAML parameter to give control over the search engine/social media title 
+- Added `share-title` YAML parameter to give control over the search engine/social media title
+- Added `last-updated` YAML parameter to show a "Last Updated on" date for blog posts
 - Added `before-content` and `after-content` YAML parameters that allow you to add some common HTML before the main content of a page (below the title) or after the main content (above the footer). Works in a similar way to `footer-extra`.
 - Added `head-extra` YAML parameter which is similar to `footer-extra` but is used to include custom HTML code in a page's `<head>` tag
 - Added `site-js` config setting to provide JavaScript files that are used on all pages in the site
@@ -27,7 +28,7 @@ One of the major changes in this version is that a lot of time was spent on reth
 - Added automatic navbar color detection (#702)
 - When `nav-short` is turned on, the avatar will also be shorter
 - Changed navbar and footer background colour to be slightly darker, for better contrast with the default white page background for accessibility reasons
-- Changed the behaviour of `site-css` to include site-wide CSS file **before** instead of after page-specific files 
+- Changed the behaviour of `site-css` to include site-wide CSS file **before** instead of after page-specific files
 - Renamed internal css/js files from "main" to "beautifuljekyll" to make it easier for users to troubleshoot
 - Added alt text to all images for better accessibility
 

diff --git a/README.md b/README.md
@@ -163,6 +163,7 @@ social-share | By default, every blog post has buttons to share the page on soci
 nav-short   | By default, the navigation bar gets shorter after scrolling down the page. If you want the navigation bar to always be short on a certain page, use `nav-short: true`
 gh-repo   | If you want to show GitHub buttons at the top of a post, this sets the GitHub repo name (eg. `daattali/beautiful-jekyll`). You must also use the `gh-badge` parameter to specify what buttons to show.
 gh-badge  | Select which GitHub buttons to display. Available options are: [star, watch, fork, follow]. You must also use the `gh-repo` parameter to specify the GitHub repo.
+last-updated | If you want to show that a blog post was updated after it was originally released, you can specify an "Updated on" date.
 layout      | What type of page this is (default is `post` for blog posts and `page` for other pages). See _Page types_ section below for more information.
 
 ## Advanced parameters
@@ -255,7 +256,8 @@ Beautiful Jekyll is used by 50,000+ people with wildly varying degrees of web sk
 
 - ### How do I make small modifications to how my website looks?
 
-  If you want to make any visual changes that are not in `_config.yml`, you'll need to add your own CSS rules to the file `assets/css/custom-styles.css` and enable the `site-css` setting in the config file. This will allow you to overwrite the default Beautiful Jekyll styles. If you don't know how to use CSS, I highly recommend spending 30 minutes to [learn the basics](https://www.w3schools.com/css/).
+  If you want to make any visual changes that are not in `_config.yml`, you'll need to add your own CSS rules to the file `assets/css/custom-styles.css` and enable the `
+  s` setting in the config file. This will allow you to overwrite the default Beautiful Jekyll styles. If you don't know how to use CSS, I highly recommend spending 30 minutes to [learn the basics](https://www.w3schools.com/css/).
 
 - ### How do I use a custom domain for my site?
 

diff --git a/_includes/header.html b/_includes/header.html
@@ -28,21 +28,27 @@
       <div class="col-xl-8 offset-xl-2 col-lg-10 offset-lg-1">
         <div class="{{ include.type }}-heading">
           <h1>{% if page.title %}{{ page.title }}{% else %}<br/>{% endif %}</h1>
-      {% if page.subtitle %}
-        {% if include.type == "page" %}
-            <hr class="small">
-            <span class="{{ include.type }}-subheading">{{ page.subtitle }}</span>
-      {% else %}
-      <h2 class="{{ include.type }}-subheading">{{ page.subtitle }}</h2>
-      {% endif %}
-      {% endif %}
+          {% if page.subtitle %}
+            {% if include.type == "page" %}
+              <hr class="small">
+              <span class="{{ include.type }}-subheading">{{ page.subtitle }}</span>
+            {% else %}
+              <h2 class="{{ include.type }}-subheading">{{ page.subtitle }}</h2>
+            {% endif %}
+          {% endif %}
 
-      {% if include.type == "post" %}
-          <span class="post-meta">Posted on {{ page.date | date: date_format }}</span>
-          {% if page.readtime %}
-            {% include readtime.html %}
+          {% if include.type == "post" %}
+            <span class="post-meta">Posted on {{ page.date | date: date_format }}</span>
+            {% if page.last-updated %}
+              <span class="post-meta">
+                <span class="d-none d-md-inline middot">&middot;</span>
+                Last updated {{ page.last-updated | date: date_format }}
+              </span>
+            {% endif %}
+            {% if page.readtime %}
+              {% include readtime.html %}
+            {% endif %}
           {% endif %}
-      {% endif %}
         </div>
       </div>
     </div>
@@ -56,21 +62,27 @@ <h2 class="{{ include.type }}-subheading">{{ page.subtitle }}</h2>
       <div class="col-xl-8 offset-xl-2 col-lg-10 offset-lg-1">
         <div class="{{ include.type }}-heading">
           <h1>{% if page.title %}{{ page.title }}{% else %}<br/>{% endif %}</h1>
-      {% if page.subtitle %}
-        {% if include.type == "page" %}
-            <hr class="small">
-            <span class="{{ include.type }}-subheading">{{ page.subtitle }}</span>
-      {% else %}
-      <h2 class="{{ include.type }}-subheading">{{ page.subtitle }}</h2>
-      {% endif %}
-      {% endif %}
+          {% if page.subtitle %}
+            {% if include.type == "page" %}
+              <hr class="small">
+              <span class="{{ include.type }}-subheading">{{ page.subtitle }}</span>
+            {% else %}
+              <h2 class="{{ include.type }}-subheading">{{ page.subtitle }}</h2>
+            {% endif %}
+          {% endif %}
 
-      {% if include.type == "post" %}
-          <span class="post-meta">Posted on {{ page.date | date: date_format }}</span>
-          {% if page.readtime %}
-            {% include readtime.html %}
+          {% if include.type == "post" %}
+            <span class="post-meta">Posted on {{ page.date | date: date_format }}</span>
+            {% if page.last-updated %}
+              <span class="post-meta">
+                <span class="d-none d-md-inline middot">&middot;</span>
+                Last updated {{ page.last-updated | date: date_format }}
+              </span>
+            {% endif %}
+            {% if page.readtime %}
+              {% include readtime.html %}
+            {% endif %}
           {% endif %}
-      {% endif %}
         </div>
       </div>
     </div>

diff --git a/_includes/readtime.html b/_includes/readtime.html
@@ -6,10 +6,10 @@
 {% assign number = finalReadTime | round %}
 {% if number >= 1 %}
   {% assign yesReadTime = number | append: " minute read" %}
-  <span class="reader-time post-meta"><span class="d-none d-md-inline middot">&middot;</span> {{ yesReadTime }}</span>
+  <span class="post-meta"><span class="d-none d-md-inline middot">&middot;</span> {{ yesReadTime }}</span>
 {% elsif number < 1 %}
   {% assign minReadTime = '&lt; 1 minute read' %}
-  <span class="reader-time post-meta"><span class="d-none d-md-inline middot">&middot;</span> {{ minReadTime }}</span>
+  <span class="post-meta"><span class="d-none d-md-inline middot">&middot;</span> {{ minReadTime }}</span>
 {% else %}
   {% assign nilReadTime = number | replace:'0',' ' %}
   {{ nilReadTime }}

diff --git a/assets/css/beautifuljekyll.css b/assets/css/beautifuljekyll.css
@@ -475,6 +475,18 @@ footer .footer-custom-content {
   margin: 0 0 0.625rem;
   font-family: 'Lora', 'Times New Roman', serif;
 }
+.post-heading .post-meta {
+  display: inline-block;
+}
+@media (max-width: 767px) {
+  .post-heading .post-meta {
+    display: block;
+    margin-bottom: 0;
+  }
+}
+.post-heading .post-meta .middot {
+  margin: 0 0.625rem;
+}
 .post-preview .post-entry {
   width: 100%;
 }
@@ -751,18 +763,6 @@ nav.top-nav-short-permanent ~ header > .intro-header.big-img {
   }
 }
 
-.reader-time {
-  display: inline-block;
-}
-@media (max-width: 767px) {
-  .reader-time {
-    display: block;
-  }
-}
-.reader-time .middot {
-  margin: 0 0.625rem;
-}
-
 /* --- Pagination --- */
 
 .pagination {