feat: avoid regenerate color scheme when image URL is changed

Use MD5 as key to identify images, and .Slug as id

layouts/partials/article-list/default.html

@@ -20,10 +20,10 @@
         <header class="article-category">
             {{ range $categories }}
                 {{ if $i }}
-                    {{- $image := partial "helper/image" $context -}}
+                    {{- $image := partial "helper/image" $context | resources.Fingerprint "md5"  -}}
                     {{- $20x := $image.Fill "20x20 smart"  -}}
                     <a href="/categories/{{ . | urlize }}" class="color-tag"
-                        data-image="{{ $20x.RelPermalink }}">{{ . | humanize }}</a>
+                        data-image="{{ $20x.RelPermalink }}" data-id="{{ $context.Slug }}" data-key="{{ $image.Data.Integrity }}">{{ . | humanize }}</a>
                 {{ else }}
                     <a href="/categories/{{ . | urlize }}">{{ . | humanize }}</a>
                 {{ end }}

layouts/partials/article-list/tile.html

@@ -1,10 +1,11 @@
 <article class="{{ if .context.Params.image }}has-image{{ end }}">
     <a href="{{ .context.Permalink }}">
         {{ if .context.Params.image }}
-        {{- $thumbnail := (partial "helper/image" (.context) ).Fill .size -}}
+        {{- $image := partial "helper/image" .context | resources.Fingerprint "md5"  -}}
+        {{- $thumbnail :=  $image.Fill .size -}}
         <div class="article-image">
             <img src="{{ $thumbnail.RelPermalink }}" width="{{ $thumbnail.Width }}" height="{{ $thumbnail.Height }}"
-                loading="lazy">
+                loading="lazy" data-id="{{ .context.Slug }}" data-key="{{ $image.Data.Integrity }}">
         </div>
         {{ end }}