A simple customization so that we can easily choose a CC license for our posts by configuring the front matter.

About CC License

Here you can pick license features and generate HTML code to insert into your webpage:

https://creativecommons.org/choose/

Step 1

Add license.html to your _includes folder.

page.license in the Liquid code below refers to the value of license in the front matter of the post. (See the example below.)

_include/license.html

1
2
3
4
5
6
7
8
9
10
11
12
13

{% if page.license == 'CC BY-SA' %}
<a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a>&nbsp;Licensed under <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a>
{% elsif page.license == 'CC BY-NC-SA' %}
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" /></a>&nbsp;Licensed under <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>
{% elsif page.license == 'CC BY-ND' %}
<a rel="license" href="http://creativecommons.org/licenses/by-nd/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nd/4.0/88x31.png" /></a>&nbsp;Licensed under <a rel="license" href="http://creativecommons.org/licenses/by-nd/4.0/">CC BY-ND 4.0</a>
{% elsif page.license == 'CC BY-NC-ND' %}
<a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-nd/4.0/88x31.png" /></a>&nbsp;Licensed under <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/4.0/">CC BY-NC-ND 4.0</a>
{% elsif page.license == 'CC BY' %}
<a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a>&nbsp;Licensed under <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>
{% elsif page.license == 'CC BY-NC' %}
<a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc/4.0/88x31.png" /></a>&nbsp;Licensed under <a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/">CC BY-NC 4.0</a>
{% endif %}

Step 2

Include license.html into your post template in _layouts folder.

_layouts/single.html (your filename may be different)

1
2
3
4
5
6
7
8
9
10
11
12

<!-- ...... -->
  <section class="page__content e-content" itemprop="text">
    <!-- ...... -->
    {{ content }}
    <!-- ⬇️⬇️ add here ⬇️⬇️ -->
    {% if page.license %}
      <br>{% include license.html %}
    {% endif %}
    <!-- ⬆️⬆️ add here ⬆️⬆️ -->
    <!-- ...... -->
  </section>
<!-- ...... -->

Example

Let’s use this article as an example.

At the beginning of this post, we have the front matter:

1
2
3
4
5

---
title: "Add CC License to the Posts on your Jekyll Static Website"
license: "CC BY-SA"
# ...
---

The effect is shown below. (At the end of this article.)


Creative Commons License Licensed under CC BY-SA 4.0

Comments