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

README.md

@@ -33,7 +33,7 @@ There is also a [list of websites that use this theme](https://github.com/razony
 - Search.
 - Breadcrumb.
 - Archive.
-- Image Viewer.
+- [Image Viewer](#image-viewer).
 - Resizing images by adding URL query, such as `width=300px` and `height=200px`.
 - Aligning images by adding URL fragments, such as `#center`, `#floatleft` and `#floatright` represents align center, float left and float right respectively.
 - [Syntax Highlighting](#syntax-highlighting)
@@ -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
+| **Image 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 it off 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

@@ -33,7 +33,7 @@
 - 搜索
 - 面包屑导航
 - 归档
-- 图片查看器
+- [图片浏览器](#图片浏览器)
 - 可以通过 URL 参数调整图片大小，比如 `width=300px` 和 `height=200px`
 - 可以通过添加 URL 段实现图片对齐，比如 `#center`, `#floatleft` 和 `#floatright` 分别表示居中、左浮动和右浮动。
 - 资源延迟加载：支持 `image` 和 `iframe` 等。
@@ -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
+| **Image 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

@@ -33,7 +33,7 @@
 - 搜尋
 - 麵包屑導航
 - 歸檔
-- 圖片查看器
+- [圖片瀏覽器](#圖片瀏覽器)
 - 可以通過 URL 參數調整圖片大小，比如 `width=300px` 和 `height=200px`
 - 可以通過添加 URL 段實現圖片對齊，比如 `#center`，`#floatleft` 和 `#floatright` 分別表示居中、左浮動和右浮動。
 - 資源延遲載入：支援 `image` 和 `iframe` 等。
@@ -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
+| **Image 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" . -}}