Merge branch 'fix/seo-tag'

_data/authors.yml

@@ -0,0 +1,17 @@
+## Template › https://github.com/jekyll/jekyll-seo-tag/blob/master/docs/advanced-usage.md#setting-author-url
+# -------------------------------------
+# {author_id}:
+#   name: {full name}
+#   twitter: {twitter_of_author}
+#   url: {homepage_of_author}
+# -------------------------------------
+
+cotes:
+  name: Cotes Chung
+  twitter: cotes2020
+  url: https://github.com/cotes2020/
+
+sille_bille:
+  name: Dinesh Prasanth Moluguwan Krishnamoorthy
+  twitter: dinesh_MKD
+  url: https://github.com/SilleBille/

_includes/head.html

@@ -23,7 +23,30 @@
 
   {% endif %}
 
+  {% capture seo_tags %}
     {% seo title=false %}
+  {% endcapture %}
+
+  {% if site.img_cdn and seo_tags contains 'og:image' %}
+    {% assign properties = 'og:image,twitter:image' | split: ',' %}
+
+    {% for prop in properties %}
+      {% if site.img_cdn contains '//' %}
+      <!-- `site.img_cdn` cross-origin URL -->
+        {% capture target %}<meta property="{{ prop }}" content="{{ site.url }}{% endcapture %}
+        {% capture replacement %}<meta property="{{ prop }}" content="{{ site.img_cdn }}{% endcapture %}
+      {% else %}
+        <!-- `site.img_cdn` is a local file path -->
+        {% capture target %}<meta property="{{ prop }}" content="{{ site.url }}{{ site.baseurl }}{% endcapture %}
+        {% assign replacement = target | append: site.img_cdn %}
+      {% endif %}
+
+      {% assign seo_tags = seo_tags | replace: target, replacement %}
+
+    {% endfor %}
+  {% endif %}
+
+  {{ seo_tags }}
 
   <title>
   {%- unless page.layout == "home" -%}

_includes/refactor-content.html

@@ -92,7 +92,11 @@
 
         <!-- Add CDN URL -->
         {% if site.img_cdn %}
+          {% if site.img_cdn contains '//' %}
             {% assign _src_prefix = site.img_cdn %}
+          {% else %}
+            {% assign _src_prefix = site.img_cdn | relative_url %}
+          {% endif %}
         {% else %}
           {% assign _src_prefix = site.baseurl %}
         {% endif %}

_layouts/post.html

@@ -11,11 +11,11 @@ tail_includes:
 
 {% include lang.html %}
 
-{% if page.image.src %}
+{% if page.image.path %}
   {% capture bg %}
     {% unless page.image.no_bg %}{{ 'bg' }}{% endunless %}
   {% endcapture %}
-  <img src="{{ page.image.src }}" class="preview-img {{ bg | strip }}"
+  <img src="{{ page.image.path }}" class="preview-img {{ bg | strip }}"
       alt="{{ page.image.alt | default: "Preview Image" }}"
 
       {% if page.image.width %}
@@ -37,11 +37,11 @@ tail_includes:
 
   <!-- author -->
   <div>
-    {% capture author_name %}{{ page.author.name | default: site.social.name }}{% endcapture %}
+    {% capture author_name %}{{ site.data.authors[page.author].name | default: site.social.name }}{% endcapture %}
     {% assign author_link = nil %}
 
-    {% if page.author.link %}
+    {% if page.author %}
-      {% assign author_link = page.author.link %}
+      {% assign author_link = site.data.authors[page.author].url %}
     {% elsif author_name == site.social.name %}
       {% assign author_link = site.social.links[0] %}
     {% endif %}

_posts/2019-08-08-text-and-typography.md

@@ -1,15 +1,13 @@
 ---
 title: Text and Typography
-author:
+author: cotes
-  name: Cotes Chung
-  link: https://github.com/cotes2020
 date: 2019-08-08 11:33:00 +0800
 categories: [Blogging, Demo]
 tags: [typography]
 math: true
 mermaid: true
 image:
-  src: /commons/devices-mockup.png
+  path: /commons/devices-mockup.png
   width: 800
   height: 500
 ---

_posts/2019-08-08-write-a-new-post.md

@@ -1,8 +1,6 @@
 ---
 title: Writing a New Post
-author:
+author: cotes
-  name: Cotes Chung
-  link: https://github.com/cotes2020
 date: 2019-08-08 14:10:00 +0800
 categories: [Blogging, Tutorial]
 tags: [writing]
@@ -50,14 +48,27 @@ tags: [bee]
 
 The author information of the post usually does not need to be filled in the _Front Matter_ , they will be obtained from variables `social.name` and the first entry of `social.links` of the configuration file by default. But you can also override it as follows:
 
+Add author information in `_data/authors.yml` (If your website doesn't have this file, don't hesitate to create one.)
+
+```yaml
+<author_id>:
+  name: <full name>
+  twitter: <twitter_of_author>
+  url: <homepage_of_author>
+```
+{: file="_data/authors.yml" }
+
+And then set up the custom author in the post's YAML block:
+
 ```yaml
 ---
-author:
+author: <author_id>
-  name: Full Name
-  link: https://example.com
 ---
 ```
 
+> Another benefit of reading the author information from the file `_data/authors.yml`{: .filepath } is that the page will have the meta tag `twitter:creator`, which enriches the [Twitter Cards](https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started#card-and-content-attribution) and is good for SEO.
+{: .prompt-info }
+
 ## Table of Contents
 
 By default, the **T**able **o**f **C**ontents (TOC) is displayed on the right panel of the post. If you want to turn it off globally, go to `_config.yml`{: .filepath} and set the value of variable `toc` to `false`. If you want to turn off TOC for a specific post, add the following to the post's [Front Matter](https://jekyllrb.com/docs/front-matter/):
@@ -221,12 +232,12 @@ The output will be:
 
 ### Preview Image
 
-If you want to add an image to the top of the post contents, specify the attribute `src`, `width`, `height`, and `alt` for the image:
+If you want to add an image to the top of the post contents, specify the attribute `path`, `width`, `height`, and `alt` for the image:
 
 ```yaml
 ---
 image:
-  src: /path/to/image/file
+  path: /path/to/image/file
   width: 1000   # in pixels
   height: 400   # in pixels
   alt: image alternative text
@@ -235,7 +246,7 @@ image:
 
 Except for `alt`, all other options are necessary, especially the `width` and `height`, which are related to user experience and web page loading performance. The above section "[Size](#size)" also mentions this.
 
-Starting from _Chirpy v5.0.0_, the attributes `height` and `width` can be abbreviated: `height` → `h`, `width` → `w`. In addition, the [`img_path`](#image-path) can also be passed to the preview image, that is, when it has been set, the  attribute `src` only needs the image file name.
+Starting from _Chirpy v5.0.0_, the attributes `height` and `width` can be abbreviated: `height` → `h`, `width` → `w`. In addition, the [`img_path`](#image-path) can also be passed to the preview image, that is, when it has been set, the  attribute `path` only needs the image file name.
 
 ## Pinned Posts
 

_posts/2019-08-09-getting-started.md

@@ -1,8 +1,6 @@
 ---
 title: Getting Started
-author:
+author: cotes
-  name: Cotes Chung
-  link: https://github.com/cotes2020
 date: 2019-08-09 20:55:00 +0800
 categories: [Blogging, Tutorial]
 tags: [getting started]

_posts/2019-08-11-customize-the-favicon.md

@@ -1,8 +1,6 @@
 ---
 title: Customize the Favicon
-author:
+author: cotes
-  name: Cotes Chung
-  link: https://github.com/cotes2020
 date: 2019-08-11 00:34:00 +0800
 categories: [Blogging, Tutorial]
 tags: [favicon]

_posts/2021-01-03-enable-google-pv.md

@@ -1,8 +1,6 @@
 ---
 title: Enable Google Page Views
-author:
+author: sille_bille
-  name: Dinesh Prasanth Moluguwan Krishnamoorthy
-  link: https://github.com/SilleBille
 date: 2021-01-03 18:32:00 -0500
 categories: [Blogging, Tutorial]
 tags: [google analytics, pageviews]