feat(compatibility): add config for compatibility (Polyfill.io and object-fit-images)

assets/data/polyfill.yml

@@ -1,3 +1,9 @@
+theme:
+  - html5shiv
+  - Object.values
+  - Promise
+  - fetch
+  - Element.prototype.after
 smooth-scroll:
   - Element.prototype.closest
   - requestAnimationFrame
@@ -14,8 +20,3 @@ TypeIt:
   - Math.sign
   - Object.assign
   - Promise
-theme:
-  - Object.values
-  - Promise
-  - fetch
-  - Element.prototype.after

exampleSite/config.toml

@@ -1025,6 +1025,16 @@ enableEmoji = true
     # "assets/data/cdn/"
     data = "jsdelivr.yml"
 
+  # Compatibility config
+  # 兼容性设置
+  [params.compatibility]
+    # whether to use Polyfill.io to be compatible with older browsers
+    # 是否使用 Polyfill.io 来兼容旧式浏览器
+    polyfill = false
+    # whether to use object-fit-images to be compatible with older browsers
+    # 是否使用 object-fit-images 来兼容旧式浏览器
+    objectFit = false
+
 # Markup related configuration in Hugo
 # Hugo 解析文档的配置
 [markup]

exampleSite/content/posts/theme-documentation-basics/index.en.md

@@ -634,6 +634,13 @@ Please open the code block below to view the complete sample configuration :(far
     # "assets/data/cdn/"
     data = ""
 
+  # {{< version 0.2.8 >}} Compatibility config
+  [params.compatibility]
+    # whether to use Polyfill.io to be compatible with older browsers
+    polyfill = false
+    # whether to use object-fit-images to be compatible with older browsers
+    objectFit = false
+
 # Markup related config in Hugo
 [markup]
   # {{< link "https://gohugo.io/content-management/syntax-highlighting" "Syntax Highlighting" >}}

exampleSite/content/posts/theme-documentation-basics/index.fr.md

@@ -639,6 +639,13 @@ Please open the code block below to view the complete sample configuration :(far
     # "assets/data/cdn/"
     data = ""
 
+  # {{< version 0.2.8 >}} Compatibility config
+  [params.compatibility]
+    # whether to use Polyfill.io to be compatible with older browsers
+    polyfill = false
+    # whether to use object-fit-images to be compatible with older browsers
+    objectFit = false
+
 # Markup related config in Hugo
 [markup]
   # {{< link "https://gohugo.io/content-management/syntax-highlighting" "Syntax Highlighting" >}}

exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md

@@ -637,6 +637,13 @@ hugo
     # "assets/data/cdn/"
     data = ""
 
+  # {{< version 0.2.8 >}} 兼容性设置
+  [params.compatibility]
+    # 是否使用 Polyfill.io 来兼容旧式浏览器
+    polyfill = false
+    # 是否使用 object-fit-images 来兼容旧式浏览器
+    objectFit = false
+
 # Hugo 解析文档的配置
 [markup]
   # {{< link "https://gohugo.io/content-management/syntax-highlighting" "语法高亮设置" >}}

layouts/_default/baseof.html

@@ -1,42 +1,4 @@
-{{- .Scratch.Set "version" "0.2.7" -}}
+{{- partial "init.html" . -}}
-{{- $version := "0.2.X" -}}
-
-{{- /* LoveIt theme version detection */ -}}
-{{- if eq .Site .Sites.First -}}
-    {{- if not .Site.Params.version -}}
-        {{- errorf "Configuration Error 配置文件错误\n\nYou haven't configured the LoveIt version param correctly yet. See https://hugoloveit.com/theme-documentation-basics/#basic-configuration\n你还没有正确配置 LoveIt 的版本参数. 参考 https://hugoloveit.com/zh-cn/theme-documentation-basics/#basic-configuration\n" -}}
-    {{- else if ne .Site.Params.version $version -}}
-        {{- errorf (printf "Compatibility Error 兼容性错误\n\n%s -> %s:\nYou have an incompatible update. See https://github.com/dillonzq/LoveIt/releases\n你进行了一次不兼容的更新. 参考 https://github.com/dillonzq/LoveIt/releases\n" .Site.Params.version $version) -}}
-    {{- end -}}
-{{- end -}}
-
-{{- $params := .Params | merge .Site.Params.page -}}
-
-{{- if eq hugo.Environment "production" -}}
-    {{- $cdn := .Site.Params.cdn -}}
-    {{- with $cdn.data -}}
-        {{- $cdnData := printf "data/cdn/%s" . | resources.Get | transform.Unmarshal -}}
-        {{- $cdn = dict "simpleIconsPrefix" $cdnData.prefix.simpleIcons -}}
-        {{- $prefix := $cdnData.prefix.libFiles | default "" -}}
-        {{- range $key, $value := $cdnData.libFiles -}}
-            {{- $cdn = printf "%s%s" $prefix $value | dict $key | merge $cdn -}}
-        {{- end -}}
-    {{- end -}}
-    {{- .Scratch.Set "cdn" $cdn -}}
-    {{- .Scratch.Set "fingerprint" .Site.Params.fingerprint -}}
-    {{- .Scratch.Set "analytics" .Site.Params.analytics -}}
-    {{- .Scratch.Set "comment" $params.comment -}}
-    {{- if eq .Params.comment true -}}
-        {{- .Scratch.Set "comment" .Site.Params.comment -}}
-    {{- else if eq .Params.comment false -}}
-        {{- .Scratch.Set "comment" dict -}}
-    {{- end -}}
-{{- else if eq .Site .Sites.First -}}
-    {{- warnf "\n\nCurrent environment is \"development\". The \"comment system\", \"CDN\" and \"fingerprint\" will be disabled.\n当前运行环境是 \"development\". \"评论系统\", \"CDN\" 和 \"fingerprint\" 不会启用.\n" -}}
-{{- end -}}
-
-{{- .Scratch.Set "params" $params -}}
-{{- .Scratch.Set "this" dict -}}
 
 <!DOCTYPE html>
 <html lang="{{ .Site.LanguageCode }}">
@@ -48,7 +10,6 @@
         <title>
             {{- block "title" . }}{{ .Site.Title }}{{ end -}}
         </title>
-        <meta name="Description" content="{{ $params.description | default .Site.Params.description }}">
 
         {{- partial "head/meta.html" . -}}
         {{- partial "head/link.html" . -}}

layouts/partials/assets.html

@@ -38,10 +38,6 @@
 {{- $source := $cdn.lazysizesJS | default "lib/lazysizes/lazysizes.min.js" -}}
 {{- dict "source" $source "fingerprint" $fingerprint | dict "scratch" .Scratch "data" | partial "scratch/script.html" -}}
 
-{{- /* object-fit-images */ -}}
-{{- $source := $cdn.objectFitImagesJS | default "lib/object-fit-images/ofi.min.js" -}}
-{{- dict "source" $source "fingerprint" $fingerprint | dict "scratch" .Scratch "data" | partial "scratch/script.html" -}}
-
 {{- /* twemoji */ -}}
 {{- if $params.twemoji -}}
     {{- $source := $cdn.twemojiJS | default "lib/twemoji/twemoji.min.js" -}}
@@ -200,9 +196,6 @@
     window.config = {{ $config | jsonify | safeJS }};
 </script>
 
-{{- /* Polyfill.io */ -}}
-{{- dict "source" "https://polyfill.io/v3/polyfill.min.js?features=html5shiv%2CElement.prototype.closest%2CrequestAnimationFrame%2CCustomEvent%2CPromise%2CObject.entries%2CObject.assign%2CObject.values%2Cfetch%2CElement.prototype.after%2CArray.prototype.fill%2CIntersectionObserver%2CArray.from%2CArray.prototype.find%2CMath.sign" | partial "plugin/script.html" -}}
-
 {{- range (.Scratch.Get "this").script -}}
     {{- partial "plugin/script.html" . -}}
 {{- end -}}

layouts/partials/head/meta.html

@@ -1,3 +1,7 @@
+{{- $params := .Scratch.Get "params" -}}
+
+<meta name="Description" content="{{ $params.description | default .Site.Params.description }}">
+
 {{- template "_internal/opengraph.html" . -}}
 {{- template "_internal/twitter_cards.html" . -}}
 

layouts/partials/init.html

@@ -0,0 +1,41 @@
+{{- .Scratch.Set "version" "0.2.8" -}}
+
+{{- /* LoveIt theme version detection */ -}}
+{{- $VERSION := "0.2.X" -}}
+{{- if eq .Site .Sites.First -}}
+    {{- if not .Site.Params.version -}}
+        {{- errorf "Configuration Error 配置文件错误\n\nYou haven't configured the LoveIt version param correctly yet. See https://hugoloveit.com/theme-documentation-basics/#basic-configuration\n你还没有正确配置 LoveIt 的版本参数. 参考 https://hugoloveit.com/zh-cn/theme-documentation-basics/#basic-configuration\n" -}}
+    {{- else if ne .Site.Params.version $VERSION -}}
+        {{- errorf (printf "Compatibility Error 兼容性错误\n\n%s -> %s:\nYou have an incompatible update. See https://github.com/dillonzq/LoveIt/releases\n你进行了一次不兼容的更新. 参考 https://github.com/dillonzq/LoveIt/releases\n" .Site.Params.version $VERSION) -}}
+    {{- end -}}
+{{- end -}}
+
+{{- $params := .Params | merge .Site.Params.page -}}
+
+{{- if eq hugo.Environment "production" -}}
+    {{- $cdn := .Site.Params.cdn -}}
+    {{- with $cdn.data -}}
+        {{- $cdnData := printf "data/cdn/%s" . | resources.Get | transform.Unmarshal -}}
+        {{- $cdn = dict "simpleIconsPrefix" $cdnData.prefix.simpleIcons -}}
+        {{- $prefix := $cdnData.prefix.libFiles | default "" -}}
+        {{- range $key, $value := $cdnData.libFiles -}}
+            {{- $cdn = printf "%s%s" $prefix $value | dict $key | merge $cdn -}}
+        {{- end -}}
+    {{- end -}}
+    {{- .Scratch.Set "cdn" $cdn -}}
+    {{- .Scratch.Set "fingerprint" .Site.Params.fingerprint -}}
+    {{- .Scratch.Set "analytics" .Site.Params.analytics -}}
+    {{- .Scratch.Set "comment" $params.comment -}}
+    {{- if eq .Params.comment true -}}
+        {{- .Scratch.Set "comment" .Site.Params.comment -}}
+    {{- else if eq .Params.comment false -}}
+        {{- .Scratch.Set "comment" dict -}}
+    {{- end -}}
+{{- else if eq .Site .Sites.First -}}
+    {{- warnf "\n\nCurrent environment is \"development\". The \"comment system\", \"CDN\" and \"fingerprint\" will be disabled.\n当前运行环境是 \"development\". \"评论系统\", \"CDN\" 和 \"fingerprint\" 不会启用.\n" -}}
+{{- end -}}
+
+{{- .Scratch.Set "params" $params -}}
+{{- .Scratch.Set "this" dict -}}
+
+{{- partial "plugin/compatibility.html" . -}}

layouts/partials/plugin/compatibility.html

@@ -0,0 +1,22 @@
+{{- $compatibility := .Site.Params.compatibility | default dict -}}
+{{- $cdn := .Scratch.Get "cdn" | default dict -}}
+{{- $fingerprint := .Scratch.Get "fingerprint" -}}
+
+{{- /* Polyfill.io */ -}}
+{{- if $compatibility.polyfill -}}
+    {{- $features := slice -}}
+    {{- range resources.Get "data/polyfill.yml" | transform.Unmarshal -}}
+        {{- range . -}}
+            {{- $features = $features | append . -}}
+        {{- end -}}
+    {{- end -}}
+    {{- with $features | uniq -}}
+        {{- delimit . "%2C" | printf "https://polyfill.io/v3/polyfill.min.js?features=%s" | dict "source" | dict "scratch" $.Scratch "data" | partial "scratch/script.html" -}}
+    {{- end -}}
+{{- end -}}
+
+{{- /* object-fit-images */ -}}
+{{- if $compatibility.objectFit -}}
+    {{- $source := $cdn.objectFitImagesJS | default "lib/object-fit-images/ofi.min.js" -}}
+    {{- dict "source" $source "fingerprint" $fingerprint | dict "scratch" .Scratch "data" | partial "scratch/script.html" -}}
+{{- end -}}

src/js/theme.js

@@ -40,7 +40,7 @@ class Theme {
         this.resizeEventSet = new Set();
         this.switchThemeEventSet = new Set();
         this.clickMaskEventSet = new Set();
-        if (objectFitImages) objectFitImages();
+        if (window.objectFitImages) objectFitImages();
     }
 
     initSVGIcon() {