From 1fe0b2958b97e3e630c1dfdf2a834f3fd7411af8 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Tue, 14 Dec 2021 23:28:15 +0800
Subject: [PATCH 1/2] Add new variable `img_path` for posts

---
 _includes/refactor-content.html | 101 +++++++++++++++++++++-----------
 1 file changed, 68 insertions(+), 33 deletions(-)

diff --git a/_includes/refactor-content.html b/_includes/refactor-content.html
index d958cda..f7f6dde 100644
--- a/_includes/refactor-content.html
+++ b/_includes/refactor-content.html
@@ -38,65 +38,100 @@
   %}
 {% endif %}
 
-
 <!-- images -->
 
-{% if _content contains '<img src="' %}
-
-  <!-- add CDN prefix if it exists -->
-
-  {% if site.img_cdn != '' %}
-    {% assign img_path_replacement = '<img src="' | append: site.img_cdn | append: '/' %}
-  {% else %}
-    {% assign img_path_replacement = '<img src="' | append: site.baseurl | append: '/' %}
-  {% endif %}
-
-  {% assign _content = _content | replace: '<img src="/', img_path_replacement %}
-
-  <!-- lazy-load images <https://github.com/ApoorvSaxena/lozad.js#usage> -->
-
-  {% assign _content = _content | replace: '<img src="', '<img data-proofer-ignore data-src="' %}
-
-  <!-- add image placehoder to prevent layout reflow -->
+{% assign IMG_TAG = '<img ' %}
 
+{% if _content contains IMG_TAG %}
   {% assign _img_content = nil %}
+  {% assign _img_snippets = _content | split: IMG_TAG %}
 
-  {% assign _images = _content | split: '<img ' %}
-
-  {% for _img in _images %}
+  {% for _img_snippet in _img_snippets %}
     {% if forloop.first %}
-      {% assign _img_content = _img %}
+      {% assign _img_content = _img_snippet %}
       {% continue %}
     {% endif %}
 
     {% assign _width = nil %}
     {% assign _height = nil %}
+    {% assign _src = nil %}
 
-    {% assign _img_converted = _img | replace: ' w=', ' width=' | replace: ' h=', ' height=' %}
-    {% assign _attrs = _img_converted | split: '>' | first | split: ' ' %}
+    {% assign _left = _img_snippet | split: '/>' | first %}
+    {% assign _right = _img_snippet | replace: _left, '' %}
+
+    {% assign _left = _left | replace: ' w=', ' width=' | replace: ' h=', ' height=' %}
+    {% assign _attrs = _left | split: ' ' %}
 
     {% for _attr in _attrs %}
-      {% capture _key %}{{ _attr | split: '=' | first }}{% endcapture %}
-      {% capture _value %}{{ _attr | split: '=' | last | replace: '"', '' }}{% endcapture %}
+      {% assign _pair = _attr | split: '=' %}
+      {% if _pair.size < 2 %}
+        {% continue %}
+      {% endif %}
+
+      {% capture _key %}{{ _pair | first }}{% endcapture %}
+      {% capture _value %}{{ _pair | last | replace: '"', '' }}{% endcapture %}
 
       {% case _key %}
         {% when 'width' %}
           {% assign _width = _value %}
         {% when 'height' %}
           {% assign _height = _value %}
+        {% when 'src' %}
+          {% assign _src = _value %}
       {% endcase %}
 
-      {% if _width and _height %}
-        {% capture _svg %}data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 {{_width}} {{_height}}'%3E%3C/svg%3E{% endcapture %}
-        {% assign _img_content = _img_content | append: '<img src="' | append: _svg | append: '" ' | append: _img_converted %}
+      {% if _width and _height and _src %}
         {% break %}
       {% endif %}
-
     {% endfor %}
 
-    {% unless _width and _height %}
-      {% assign _img_content = _img_content | append: '<img ' | append: _img %}
-    {% endunless %}
+    {% if _src %}
+      {% unless _src contains '://' %}
+
+        <!-- Add CDN URL -->
+        {% if site.img_cdn %}
+          {% assign _src_prefix = site.img_cdn %}
+        {% else %}
+          {% assign _src_prefix = site.baseurl %}
+        {% endif %}
+
+        <!-- Add image path -->
+        {% if page.img_path %}
+          {% assign _path = page.img_path %}
+          {% assign last_char = _path | slice: -1 %}
+
+          {% unless last_char == '/' %}
+            {% assign _path = _path | append: '/' %}
+          {% endunless %}
+
+          {% assign _src_prefix = _src_prefix | append: _path %}
+        {% endif %}
+
+        {% assign _final_src = _src_prefix | append: _src %}
+        {% assign _left = _left | replace: _src, _final_src %}
+
+      {% endunless %}
+
+      <!-- lazy-load images <https://github.com/ApoorvSaxena/lozad.js#usage> -->
+
+      {% assign _left = _left | replace: 'src=', 'data-src=' %}
+
+    {% endif %}
+
+    <!-- Add SVG placehoder to prevent layout reflow -->
+
+    {% if _width and _height %}
+      {%- capture _svg -%}
+        src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 {{ _width }} {{ _height }}'%3E%3C/svg%3E"
+      {%- endcapture -%}
+
+      {% assign _left =  _svg | append: ' ' | append: _left %}
+    {% endif %}
+
+    <!-- Bypass the HTML-proofer test -->
+    {% assign _left = _left | append: ' data-proofer-ignore' %}
+
+    {% assign _img_content = _img_content | append: IMG_TAG | append: _left | append: _right %}
 
   {% endfor %}
 

From ef2aa525d589e2d71ed137e366a7ae537c79f323 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Tue, 14 Dec 2021 23:29:07 +0800
Subject: [PATCH 2/2] Add intro for `img_path`

---
 _posts/2019-08-08-write-a-new-post.md | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/_posts/2019-08-08-write-a-new-post.md b/_posts/2019-08-08-write-a-new-post.md
index 68f0358..0914298 100644
--- a/_posts/2019-08-08-write-a-new-post.md
+++ b/_posts/2019-08-08-write-a-new-post.md
@@ -206,6 +206,31 @@ The parsing result will automatically add the CDN prefix `https://cdn.com` befor
 ```
 {: .nolineno}
 
+### Image path
+
+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:
+
+```yml
+---
+img_path: /img/path/
+---
+```
+{: .nolineno }
+
+And then, the image source of Markdown can write the file name directly:
+
+```md
+![The flower](flower.png)
+```
+{: .nolineno }
+
+The output will be:
+
+```html
+<img src="/img/path/flower.png" alt="The flower">
+```
+{: .nolineno }
+
 ## Pinned Posts
 
 You can pin one or more posts to the top of the home page, and the fixed posts are sorted in reverse order according to their release date. Enable by: