feat: add the favicon parameter and support favicon with webp format (#…

…846) Allow changing icon sizes by favicon.sizes Support favicon.webp and it will get higher priority if present
razonyang · Jan 20, 2023 · d3031ae · d3031ae
1 parent 8b930e4
commit d3031ae
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 10 deletions.
diff --git a/exampleSite/content/docs/look-and-feel/index.md b/exampleSite/content/docs/look-and-feel/index.md
@@ -40,7 +40,19 @@ However, the default scheme cannot satisfy everyone, but don't worry, you can ea
 
 ## Favicons
 
-HBS generates icons in multiple sizes base on the file `assets/favicon.png`.
+HBS generates icons in multiple sizes base on the file `assets/favicon.webp` (higher priority) or `assets/favicon.png`.
+
+Just save your own favicon image as the same path to override the defaults.
+
+> The static icons `static/images/icons/icon-{size}.png` have higher priority for backwards compatibility.
+
+### Custom Sizes
+
+You're able to change the sizes you want via `params` file.
+
+{{< code-toggle >}}
+  {{< code/look-and-feel-favicon-sizes >}}
+{{< /code-toggle >}}
 
 ## Background Image
 

diff --git a/exampleSite/content/docs/look-and-feel/index.zh-hans.md b/exampleSite/content/docs/look-and-feel/index.zh-hans.md
@@ -39,7 +39,19 @@ authors = ["RazonYang"]
 
 ## Favicons
 
-HBS 会根据 `assets/favicon.png` 自动生成不同尺寸的图标文件。
+HBS 会根据 `assets/favicon.webp`（更高的优先权）或 `assets/favicon.png` 自动生成不同尺寸的图标文件。
+
+只需将自己的收藏夹图像保存为相同路径即可覆盖默认的图片。
+
+> 静态图标 `static/images/icons/icon-{size}.png` 拥有更高的优先权，以向后兼容。
+
+### 自定义大小
+
+你也可以通过 `params` 文件修改图标大小。
+
+{{< code-toggle >}}
+  {{< code/look-and-feel-favicon-sizes >}}
+{{< /code-toggle >}}
 
 ## 背景图片
 

diff --git a/exampleSite/content/docs/look-and-feel/index.zh-hant.md b/exampleSite/content/docs/look-and-feel/index.zh-hant.md
@@ -39,7 +39,19 @@ authors = ["RazonYang"]
 
 ## Favicons
 
-HBS 會根據 `assets/favicon.png` 自動生成不同尺寸的圖標文件。
+HBS 會根據 `assets/favicon.webp`（更高的優先權）或 `assets/favicon.png` 自動生成不同尺寸的圖標文件。
+
+只需將自己的我的最愛影像保存為相同路徑即可覆蓋默認的圖片。
+
+> 靜態圖標 `static/images/icons/icon-{size}.png` 擁有更高的優先權，以向後兼容。
+
+### 自定義大小
+
+你也可以通過 `params` 文件修改圖標大小。
+
+{{< code-toggle >}}
+  {{< code/look-and-feel-favicon-sizes >}}
+{{< /code-toggle >}}
 
 ## 背景圖片
 

diff --git a/exampleSite/layouts/shortcodes/code/look-and-feel-favicon-sizes.html b/exampleSite/layouts/shortcodes/code/look-and-feel-favicon-sizes.html
@@ -0,0 +1,15 @@
+[[favicon.sizes]]
+size = "16x16"
+
+[[favicon.sizes]]
+size = "32x32"
+
+[[favicon.sizes]]
+size = "150x150"
+
+[[favicon.sizes]]
+size = "180x180"
+rel = "apple-touch-icon"
+
+[[favicon.sizes]]
+size = "192x192"
diff --git a/layouts/partials/functions/favicon.html b/layouts/partials/functions/favicon.html
@@ -0,0 +1,8 @@
+{{- $favicon := false }}
+{{- range slice "favicon.webp" "favicon.png" }}
+  {{- $favicon = resources.Get . }}
+  {{- if $favicon }}
+    {{- break }}
+  {{- end }}
+{{- end }}
+{{- return $favicon -}}
diff --git a/layouts/partials/head/favicons.html b/layouts/partials/head/favicons.html
@@ -1,14 +1,22 @@
-{{- $config := slice (dict "size" "16x16") (dict "size" "32x32") (dict "size" "180x180" "rel" "apple-touch-icon") }}
-{{- $config = $config | append (dict "size" "150x150") (dict "size" "192x192") }}
-{{- $favicon := resources.Get "favicon.png" }}
-{{- range $config }}
+{{- $sizes := slice 
+  (dict "size" "16x16")
+  (dict "size" "32x32")
+  (dict "size" "150x150")
+  (dict "size" "180x180" "rel" "apple-touch-icon")
+  (dict "size" "192x192")
+}}
+{{- with .Site.Params.favicon.sizes }}
+  {{- $sizes = . }}
+{{- end }}
+{{- $favicon := partialCached "functions/favicon" . }}
+{{- range $sizes }}
   {{- $filename := printf "icon-%s.png" .size }}
   {{- $rel := default "icon" .rel }}
   {{- $filepath := path.Join "static" "images" "icons" $filename }}
   {{- if fileExists $filepath }}
     {{- $file := readFile $filepath }}
     <link rel="{{ $rel }}" href="{{ printf "/images/icons/%s" $filename | absURL }}?version={{ $file | md5 }}" sizes="{{ .size }}">
-  {{- else }}
+  {{- else if $favicon }}
     {{- $img := $favicon.Resize .size }}
     <link rel="{{ $rel }}" href="{{ $img.Permalink }}" sizes="{{ .size }}" type="{{ $img.MediaType }}">
   {{- end }}

diff --git a/layouts/partials/pwa/manifest.json b/layouts/partials/pwa/manifest.json
@@ -1,12 +1,12 @@
 {{- $params := dict "lang" $.Language.Lang "name" $.Site.Title "description" $.Site.Params.description "start_url" "/" "scope" "/" "display" "standalone" -}}
-{{- $favicon := resources.Get "favicon.png" }}
+{{- $favicon := partialCached "functions/favicon" . }}
 {{- $icons := slice -}}
 {{- $iconSizes := slice "48x48" "72x72" "96x96" "144x144" "192x192" "256x256" "512x512" -}}
 {{- range $iconSizes -}}
     {{- $filename := printf "images/icons/icon-%s.png" . -}}
     {{- if fileExists (path.Join "static" $filename) -}}
       {{- $icons = $icons | append (dict "src" ($filename | absURL) "sizes" .) -}}
-    {{- else }}
+    {{- else if $favicon }}
       {{- $icons = $icons | append (dict "src" ($favicon.Resize .).Permalink "sizes" .) -}}
     {{- end -}}
 {{- end -}}