refactor!: rename media-url file and related parameters (#1651)

- Changed variable `img_cdn` to `cdn` in site configuration file.
- Changed the variable defining the relative path of the image in the post from `img_url` to `media_subpath`

_config.yml

@@ -86,12 +86,12 @@ pageviews:
 #
 theme_mode: # [light | dark]
 
-# The CDN endpoint for images.
+# The CDN endpoint for media resources.
 # Notice that once it is assigned, the CDN url
-# will be added to all image (site avatar & posts' images) paths starting with '/'
+# will be added to all media resources (site avatar, posts' images, audio and video files) paths starting with '/'
 #
 # e.g. 'https://cdn.com'
-img_cdn: "https://chirpy-img.netlify.app"
+cdn: "https://chirpy-img.netlify.app"
 
 # the avatar on sidebar, support local or CORS resources
 avatar: "/commons/avatar.jpg"

_includes/embed/audio.html

@@ -4,7 +4,7 @@
 
 {% unless src contains '://' %}
   {%- capture src -%}
-    {% include img-url.html src=src %}
+    {% include media-url.html src=src %}
   {%- endcapture -%}
 {% endunless %}
 

_includes/embed/video.html

@@ -5,14 +5,14 @@
 
 {% unless video_url contains '://' %}
   {%- capture video_url -%}
-    {% include img-url.html src=video_url %}
+    {% include media-url.html src=video_url %}
   {%- endcapture -%}
 {% endunless %}
 
 {% if poster_url %}
   {% unless poster_url contains '://' %}
     {%- capture poster_url -%}
-      {% include img-url.html src=poster_url img_path=page.img_path %}
+      {% include media-url.html src=poster_url subpath=page.media_subpath %}
     {%- endcapture -%}
   {% endunless %}
   {% assign poster = 'poster="' | append: poster_url | append: '"' %}

_includes/head.html

@@ -20,7 +20,7 @@
 
     {% unless src contains '://' %}
       {%- capture img_url -%}
-        {% include img-url.html src=src img_path=page.img_path absolute=true %}
+        {% include media-url.html src=src subpath=page.media_subpath absolute=true %}
       {%- endcapture -%}
 
       {%- capture old_url -%}{{ src | absolute_url }}{%- endcapture -%}
@@ -31,7 +31,7 @@
 
   {% elsif site.social_preview_image %}
     {%- capture img_url -%}
-      {% include img-url.html src=site.social_preview_image absolute=true %}
+      {% include media-url.html src=site.social_preview_image absolute=true %}
     {%- endcapture -%}
 
     {%- capture og_image -%}

_includes/media-url.html

@@ -1,25 +1,25 @@
 {%- comment -%}
-  Generate image final URL based on `site.img_cdn`, `page.img_path`
+  Generate media resource final URL based on `site.cdn`, `page.media_subpath`
 
   Arguments:
-    src - required, basic image path
-    img_path - optional, relative path of image
+    src - required, basic media resources path
+    subpath - optional, relative path of media resources
     absolute - optional, boolean, if true, generate absolute URL
 
   Return:
-    image URL
+    media resources URL
 {%- endcomment -%}
 
 {% assign url = include.src %}
 
 {%- if url -%}
   {% unless url contains ':' %}
-    {%- comment -%} Add page image path prefix {%- endcomment -%}
-    {% assign url = include.img_path | default: '' | append: '/' | append: url %}
+    {%- comment -%} Add media resources subpath prefix {%- endcomment -%}
+    {% assign url = include.subpath | default: '' | append: '/' | append: url %}
 
     {%- comment -%} Prepend CND URL {%- endcomment -%}
-    {% if site.img_cdn %}
-      {% assign url = site.img_cdn | append: '/' | append: url %}
+    {% if site.cdn %}
+      {% assign url = site.cdn | append: '/' | append: url %}
     {% endif %}
 
     {% assign url = url | replace: '///', '/' | replace: '//', '/' | replace: ':/', '://' %}

_includes/refactor-content.html

@@ -97,7 +97,7 @@
     {% assign _lazyload = true %}
 
     {%- capture _img_url -%}
-      {% include img-url.html src=_src img_path=page.img_path %}
+      {% include media-url.html src=_src subpath=page.media_subpath %}
     {%- endcapture -%}
 
     {% assign _path_prefix = _img_url | remove: _src %}

_includes/sidebar.html

@@ -5,7 +5,7 @@
     <a href="{{ '/' | relative_url }}" id="avatar" class="rounded-circle">
       {%- if site.avatar != empty and site.avatar -%}
         {%- capture avatar_url -%}
-          {% include img-url.html src=site.avatar %}
+          {% include media-url.html src=site.avatar %}
         {%- endcapture -%}
         <img src="{{- avatar_url -}}" width="112" height="112" alt="avatar" onerror="this.style.display='none'">
       {%- endif -%}

_layouts/home.html

@@ -49,7 +49,7 @@ refactor: true
         {% if post.image %}
           {% assign src = post.image.path | default: post.image %}
           {% unless src contains '//' %}
-            {% assign src = post.img_path | append: '/' | append: src | replace: '//', '/' %}
+            {% assign src = post.media_subpath | append: '/' | append: src | replace: '//', '/' %}
           {% endunless %}
 
           {% assign alt = post.image.alt | xml_escape | default: 'Preview Image' %}

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

@@ -247,14 +247,14 @@ The screenshots of the program window can be considered to show the shadow effec
 
 ### CDN URL
 
-If you host the images on the CDN, you can save the time of repeatedly writing the CDN URL by assigning the variable `img_cdn` of `_config.yml`{: .filepath} file:
+If you host the media resources on the CDN, you can save the time of repeatedly writing the CDN URL by assigning the variable `cdn` of `_config.yml`{: .filepath} file:
 
 ```yaml
-img_cdn: https://cdn.com
+cdn: https://cdn.com
 ```
 {: file='_config.yml' .nolineno}
 
-Once `img_cdn` is assigned, the CDN URL will be added to the path of all images (images of site avatar and posts) starting with `/`.
+Once `cdn` is assigned, the CDN URL will be added to the path of all media resources (site avatar, posts' images, audio and video files) starting with `/`.
 
 For instance, when using images:
 
@@ -270,13 +270,13 @@ The parsing result will automatically add the CDN prefix `https://cdn.com` befor
 ```
 {: .nolineno }
 
-### Image Path
+### Media Subpath
 
-When a post contains many images, it will be a time-consuming task to repeatedly define the path of the images. To solve this, we can define this path in the YAML block of the post:
+When a post contains many images, it will be a time-consuming task to repeatedly define the path of the media resources. To solve this, we can define this path in the YAML block of the post:
 
 ```yml
 ---
-img_path: /img/path/
+media_subpath: /img/path/
 ---
 ```
 
@@ -308,7 +308,7 @@ image:
 ---
 ```
 
-Note that 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.
+Note that the [`media_subpath`](#media-subpath) can also be passed to the preview image, that is, when it has been set, the attribute `path` only needs the image file name.
 
 For simple use, you can also just use `image` to define the path.
 

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

@@ -8,7 +8,7 @@ date: 2019-08-09 20:55:00 +0800
 categories: [Blogging, Tutorial]
 tags: [getting started]
 pin: true
-img_path: '/posts/20180809'
+media_subpath: '/posts/20180809'
 ---
 
 ## Prerequisites

assets/js/data/swconf.js

@@ -24,8 +24,8 @@ const swconf = {
 
     {%- comment -%} The request url with below domain will be cached. {%- endcomment -%}
     allowHosts: [
-      {% if site.img_cdn and site.img_cdn contains '//' %}
-        '{{ site.img_cdn | split: '//' | last | split: '/' | first }}',
+      {% if site.cdn and site.cdn contains '//' %}
+        '{{ site.cdn | split: '//' | last | split: '/' | first }}',
       {% endif %}
 
       {%- unless site.assets.self_host.enabled -%}

tools/init

@@ -93,7 +93,7 @@ init_files() {
     mv ./${ACTIONS_WORKFLOW}.hook .github/workflows/${ACTIONS_WORKFLOW}
 
     ## Cleanup image settings in site config
-    _sedi "s/^img_cdn:.*/img_cdn:/;s/^avatar:.*/avatar:/" _config.yml
+    _sedi "s/^cdn:.*/cdn:/;s/^avatar:.*/avatar:/" _config.yml
   fi
 
   # remove the other files

tools/release

@@ -156,7 +156,7 @@ build_gem() {
   git checkout "$PROD_BRANCH"
 
   # Remove unnecessary theme settings
-  sed -i "s/^img_cdn:.*/img_cdn:/;s/^avatar:.*/avatar:/" _config.yml
+  sed -i "s/^cdn:.*/cdn:/;s/^avatar:.*/avatar:/" _config.yml
   rm -f ./*.gem
 
   npm run build