OCram85/beautifulSA-jekyll
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

add readtime for posts (#622)

Browse Source
This commit is contained in:
Matt Erickson 2020-04-24 09:25:30 -05:00 committed by GitHub
parent 3f4910fde1
commit a8332c40fd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 66 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

@ -4,6 +4,8 @@ This file lists all non-trivial changes to Beautiful Jekyll.
I often make small changes to documentation, to the demo site, or to the general look-and-feel. These changes will not be listed here. Any other minor changes will also not be listed here. I often make small changes to documentation, to the demo site, or to the general look-and-feel. These changes will not be listed here. Any other minor changes will also not be listed here.
**2020-04-24** Adding readtime support for the post header (#622) (thanks @MutMatt and @rubyreads)
**2020-04-22** Add support for configuring lang attribute on <html> tag (#608) (thanks @skalee) **2020-04-22** Add support for configuring lang attribute on <html> tag (#608) (thanks @skalee)
**2020-04-18** Add ability to disable round logo (thanks @gpotter2) **2020-04-18** Add ability to disable round logo (thanks @gpotter2)

1
_config.yml
View File

@ -189,6 +189,7 @@ defaults:
layout: "post" layout: "post"
comments: true # add comments to all blog posts comments: true # add comments to all blog posts
social-share: true # add social media sharing buttons to all blog posts social-share: true # add social media sharing buttons to all blog posts
readtime: false # add estimated reading time on all blog posts
- -
scope: scope:
path: "" # all files path: "" # all files

64
_includes/header.html
View File

@ -7,15 +7,15 @@
{% if page.bigimg %} {% if page.bigimg %}
<div id="header-big-imgs" data-num-img={% if page.bigimg.first %}{{ page.bigimg.size }}{% else %}1{% endif %} <div id="header-big-imgs" data-num-img={% if page.bigimg.first %}{{ page.bigimg.size }}{% else %}1{% endif %}
{% for bigimg in page.bigimg %} {% for bigimg in page.bigimg %}
{% assign imgnum = forloop.index %} {% assign imgnum = forloop.index %}
{% for imginfo in bigimg %} {% for imginfo in bigimg %}
{% if imginfo[0] %} {% if imginfo[0] %}
data-img-src-{{ imgnum }}="{{ imginfo[0] | relative_url }}" data-img-src-{{ imgnum }}="{{ imginfo[0] | relative_url }}"
data-img-desc-{{ imgnum }}="{{ imginfo[1] }}" data-img-desc-{{ imgnum }}="{{ imginfo[1] }}"
{% else %} {% else %}
data-img-src-{{ imgnum }}="{{ imginfo | relative_url }}" data-img-src-{{ imgnum }}="{{ imginfo | relative_url }}"
{% endif %} {% endif %}
{% endfor %} {% endfor %}
{% endfor %} {% endfor %}
></div> ></div>
{% endif %} {% endif %}
@ -28,18 +28,21 @@
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1"> <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="{{ include.type }}-heading"> <div class="{{ include.type }}-heading">
<h1>{% if page.title %}{{ page.title }}{% else %}<br/>{% endif %}</h1> <h1>{% if page.title %}{{ page.title }}{% else %}<br/>{% endif %}</h1>
{% if page.subtitle %} {% if page.subtitle %}
{% if include.type == "page" %} {% if include.type == "page" %}
<hr class="small"> <hr class="small">
<span class="{{ include.type }}-subheading">{{ page.subtitle }}</span> <span class="{{ include.type }}-subheading">{{ page.subtitle }}</span>
{% else %} {% else %}
<h2 class="{{ include.type }}-subheading">{{ page.subtitle }}</h2> <h2 class="{{ include.type }}-subheading">{{ page.subtitle }}</h2>
{% endif %} {% endif %}
{% endif %} {% endif %}
{% if include.type == "post" %} {% if include.type == "post" %}
<span class="post-meta">Posted on {{ page.date | date: date_format }}</span> <span class="post-meta">Posted on {{ page.date | date: date_format }}</span>
{% endif %} {% if page.readtime %}
{% include readtime.html %}
{% endif %}
{% endif %}
</div> </div>
</div> </div>
</div> </div>
@ -53,18 +56,21 @@
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1"> <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="{{ include.type }}-heading"> <div class="{{ include.type }}-heading">
<h1>{% if page.title %}{{ page.title }}{% else %}<br/>{% endif %}</h1> <h1>{% if page.title %}{{ page.title }}{% else %}<br/>{% endif %}</h1>
{% if page.subtitle %} {% if page.subtitle %}
{% if include.type == "page" %} {% if include.type == "page" %}
<hr class="small"> <hr class="small">
<span class="{{ include.type }}-subheading">{{ page.subtitle }}</span> <span class="{{ include.type }}-subheading">{{ page.subtitle }}</span>
{% else %} {% else %}
<h2 class="{{ include.type }}-subheading">{{ page.subtitle }}</h2> <h2 class="{{ include.type }}-subheading">{{ page.subtitle }}</h2>
{% endif %} {% endif %}
{% endif %} {% endif %}
{% if include.type == "post" %} {% if include.type == "post" %}
<span class="post-meta">Posted on {{ page.date | date: date_format }}</span> <span class="post-meta">Posted on {{ page.date | date: date_format }}</span>
{% endif %} {% if page.readtime %}
{% include readtime.html %}
{% endif %}
{% endif %}
</div> </div>
</div> </div>
</div> </div>

16
_includes/readtime.html Normal file
View File

@ -0,0 +1,16 @@
<!--- "ReadTime on GitHub Jekyll" (c) 2020 Ruby Griffith Ramirez, MIT License -->
{% assign ReadTime = page.content | strip_html | number_of_words %}
{% assign calcReadTime = ReadTime | float %}
{% assign finalReadTime = calcReadTime | divided_by:200 | round: 2 %}
{% assign number = finalReadTime | round %}
{% if number >= 1 %}
{% assign yesReadTime = number | append: " minute read" %}
<span class="reader-time post-meta"><span class="hidden-xs middot">&middot;</span> {{ yesReadTime }}</span>
{% elsif number < 1 %}
{% assign minReadTime = '&lt; 1 minute read' %}
<span class="reader-time post-meta"><span class="hidden-xs middot">&middot;</span> {{ minReadTime }}</span>
{% else %}
{% assign nilReadTime = number | replace:'0',' ' %}
{{ nilReadTime }}
{% endif %}

12
css/main.css
View File

@ -593,6 +593,18 @@ footer .theme-by {
} }
} }
.reader-time {
display: inline-block;
}
@media (max-width: 767px) {
.reader-time {
display: block;
}
}
.reader-time .middot {
margin: 0 10px;
}
/* --- Pager --- */ /* --- Pager --- */
.pager li a { .pager li a {