feat: use Viewer.js instead of built-in image viewer

README.md

@@ -246,6 +246,8 @@ As the example site shown, the configuration are separated into multiple files,
 | `post.excerptMaxLength` | Integer | `320` | 
 | **Katex**
 | `katex` | Object | - | Katex options, see also https://katex.org/docs/autorender.html and https://katex.org/docs/options.html
+| **viewer**
+| `viewer` | Boolean | true | Turn on/off image viewer.
 
 > Except the Google webmaster tool, the other webmaster tools cannot work with `hugo --minify`, because they cannot recognize the minified meta tag.
 
@@ -369,6 +371,22 @@ For example:
 $ echo "SIDEBAR BEGIN" > layouts/partials/hooks/sidebar-begin.html
 ```
 
+## Image Viewer
+
+Image Viewer was turned on by default, you can turn off it by setting the parameter `viewer` as `false`.
+
+### Options
+
+```js
+// assets/js/viewer.config.js
+window.viewerOptions = {
+    className: "image-viewer",
+    // ...
+};
+```
+
+Avialable options are listed on [Viewer.js Options](https://github.com/fengyuanchen/viewerjs#options).
+
 ## Shortcodes
 
 | Shortcode | Description | Usage

README.zh-CN.md

@@ -245,6 +245,8 @@ $ hugo new -c content/zh-cn posts/newpost.md
 | `post.excerptMaxLength` | Integer | `320` | 
 | **Katex**
 | `katex` | Object | - | Katex 参数，请参阅 https://katex.org/docs/autorender.html 和 https://katex.org/docs/options.html
+| **viewer**
+| `viewer` | Boolean | true | 是否启用图片浏览器
 
 > 除了 Google 站长工具外，其他搜索引擎站长工具无法与 `hugo --minify` 同时使用，这是因为它们无法识别优化后的元标签。
 
@@ -368,6 +370,22 @@ $ echo "MY COMMENTS WIDGET" > layouts/partials/post/comments/custom.html
 $ echo "SIDEBAR BEGIN" > layouts/partials/hooks/sidebar-begin.html
 ```
 
+## 图片浏览器
+
+图片浏览器默认启用，你可以通过设置 `viewer` 参数为 `false` 以关闭该功能。
+
+### 选项
+
+```js
+// assets/js/viewer.config.js
+window.viewerOptions = {
+    className: "image-viewer",
+    // ...
+};
+```
+
+[Viewer.js Options](https://github.com/fengyuanchen/viewerjs#options) 列出了可用的选项。
+
 ## 短代码
 
 | 短代码 | 说明 | 使用

README.zh-TW.md

@@ -245,6 +245,8 @@ $ hugo new -c content/zh-cn posts/newpost.md
 | `post.excerptMaxLength` | Integer | `320` | 
 | **Katex**
 | `katex` | Object | - | Katex 參數，請參閱 https://katex.org/docs/autorender.html 和 https://katex.org/docs/options.html
+| **viewer**
+| `viewer` | Boolean | true | 是否開啟圖片瀏覽器
 
 > 除了 Google 站長工具外，其他搜索引擎站長工具無法與 `hugo --minify` 同時使用，這是因為它們無法識別優化後的元標簽。
 
@@ -368,6 +370,22 @@ $ echo "MY COMMENTS WIDGET" > layouts/partials/post/comments/custom.html
 $ echo "SIDEBAR BEGIN" > layouts/partials/hooks/sidebar-begin.html
 ```
 
+## 圖片瀏覽器
+
+圖片瀏覽器默認啟用，你可以通過設定 `viewer` 參數為 `false` 以關閉該功能。
+
+### 選項
+
+```js
+// assets/js/viewer.config.js
+window.viewerOptions = {
+    className: "image-viewer",
+    // ...
+};
+```
+
+[Viewer.js Options](https://github.com/fengyuanchen/viewerjs#options) 列出了可用的選項。
+
 ## 短程式碼
 
 | 短程式碼 | 說明 | 使用

assets/js/config.template.js

@@ -8,5 +8,5 @@ window.params = {
         theme: {{ default "" $params.utterances.theme | printf "%q" }},
     },
     katex: {{ if $params.katex }}{{ $params.katex | jsonify }}{{ else }}{{ printf "{}" }}{{ end }},
-    mermaid: {{ if $params.mermaid }}{{ $params.mermaid | jsonify }}{{ else }}{{ printf "{}" }}{{ end }}
+    mermaid: {{ if $params.mermaid }}{{ $params.mermaid | jsonify }}{{ else }}{{ printf "{}" }}{{ end }},
 }

assets/js/viewer.config.js

@@ -0,0 +1 @@
+window.viewerOptions = {};

assets/js/viewer.js.LICENSE.txt

@@ -0,0 +1,9 @@
+/*!
+ * Viewer.js v1.10.2
+ * https://fengyuanchen.github.io/viewerjs
+ *
+ * Copyright 2015-present Chen Fengyuan
+ * Released under the MIT license
+ *
+ * Date: 2021-10-22T13:59:51.046Z
+ */

exampleSite/assets/js/viewer.config.js

@@ -0,0 +1,2 @@
+window.viewerOptions = {
+};

exampleSite/config/_default/params.toml

@@ -53,6 +53,8 @@ customJS = [
 
 titleCase = true # Capitalized title.
 
+viewer = true # Image Viewer
+
 [codeBlock]
   # maxLines = 8
   lineNos = false # true/false represents that show/hide the line numbers by default.
@@ -158,4 +160,4 @@ titleCase = true # Capitalized title.
     display = true
 
 [mermaid] # See https://mermaid-js.github.io/mermaid/#/Setup?id=configuration
-  theme = "dark"
+  theme = "dark"

layouts/partials/assets/viewer.html

@@ -0,0 +1,6 @@
+{{- if (default true .Site.Params.viewer) -}}
+{{- $mainScript := resources.Get "js/viewer.js" }}
+{{- $configScript := resources.Get "js/viewer.config.js" | resources.ExecuteAsTemplate "viewer.config.js" . -}}
+{{- $script := slice $configScript $mainScript | resources.Concat "js/viewer.js" | resources.Minify | resources.Fingerprint -}}
+<script defer src="{{ $script.Permalink }}" integrity="{{ $script.Data.Integrity }}" crossorigin="anonymous"></script>
+{{- end -}}

layouts/partials/body-end.html

@@ -1,5 +1,6 @@
 {{- partial "plugins/addthis" . -}}
 {{- partial "hooks/body-end" . -}}
+{{- partial "assets/viewer" . -}}
 {{- partial "assets/math" . -}}
 {{- partial "assets/mermaid" . -}}
 {{- partial "assets/google-analytics" . -}}