✨ Feat: add mobile devtools feature (#163)

CHANGELOG.md

@@ -11,18 +11,21 @@ All notable changes to this project will be documented in this file.
 - :tada: Feat: add `fixit-encryptor` shortcode ([#123](https://github.com/Lruihao/FixIt/issues/123))
 - :sparkles: Feat: add total word count feature in section and remove from footer ([#124](https://github.com/Lruihao/FixIt/issues/124))
 - :sparkles: Feat: enhance auto toc feature ([#104](https://github.com/Lruihao/FixIt/issues/104) [#136](https://github.com/Lruihao/FixIt/issues/136))
-- :sparkles: Feat(SEO): add options to make output baidu_urls.txt file ([#138](https://github.com/Lruihao/FixIt/issues/138))
 - :sparkles: Feat: add repost feature ([#156](https://github.com/Lruihao/FixIt/issues/156))
 - :sparkles: Feat: add developer options
+  - Check for updates option
+  - Mobile Devtools config ([#163](https://github.com/Lruihao/FixIt/pull/163))
 - :bug: Fix: unable to show search bar of header at mobile mode ([#143](https://github.com/Lruihao/FixIt/issues/143))
 - :bug: Fix: Giscus comment invalid config `inputPosition`
 - :bug: Fix: Waline comment invalid config `imageUploader = false` & `highlighter = false` (@yureiita[#161](https://github.com/Lruihao/FixIt/pull/161))
 - :bug: Fix: busuanzi logic error
 - :bug: Fix: close comment system logic error when the article was expired
 - :bug: Style: fix typos for rel attribute value noreferrer (@yureiita[#157](https://github.com/Lruihao/FixIt/pull/157))
+- :mag: Feat(SEO): add options to make output `baidu_urls.txt` file ([#138](https://github.com/Lruihao/FixIt/issues/138))
 - :truck: Perf: subdivide FixIt initialization
 - :art: Style: add theme colors variables and add common color styles
 - :art: Style: add scroll bar for auto toc ([#136](https://github.com/Lruihao/FixIt/issues/136))
+- :memo: Docs: revise theme documentations
 - :wrench: Feat(cdn): add unpkg cdn support
 - :wrench: Chore: change the theme minimum supported Hugo versions above **0.84.0**
 - :arrow_up: Chore(libs): update some third-party libraries
@@ -61,7 +64,7 @@ All notable changes to this project will be documented in this file.
 - :lipstick: Style: add some common CSS styles Class ([#101](https://github.com/Lruihao/FixIt/issues/101))
 - :lipstick: Style: add the gap between and icon and text at blending typesetting (@ctj12461, @Lruihao[#118](https://github.com/Lruihao/FixIt/pull/118))
 - :lipstick: Style: modify blockquote CSS
-- :memo: Docs: revised theme documentations
+- :memo: Docs: revise theme documentations
 - :zap: Perf: remove third-party library clipboard.js ([#84](https://github.com/Lruihao/FixIt/issues/84))
 - :pencil2: Docs: fix highlight url typo in `theme-documentation-built-in-shortcodes` (@d-baer[#85](https://github.com/Lruihao/FixIt/pull/85))
 - :wrench: Chore(i18n): improve translations for supported languages ([#119](https://github.com/Lruihao/FixIt/issues/119))

README.md

@@ -225,6 +225,8 @@ Make sure that you follow [CODE_OF_CONDUCT.md](/CODE_OF_CONDUCT.md) while contri
 * [github-corners](https://github.com/tholman/github-corners)
 * [giscus](https://giscus.app/)
 * [crypto-js](https://github.com/brix/crypto-js)
+* [vConsole](https://github.com/Tencent/vConsole)
+* [eruda](https://github.com/liriliri/eruda)
 </details>
 
 ## License

README.zh-cn.md

@@ -224,6 +224,8 @@ FixIt 支持下列语言：
 * [github-corners](https://github.com/tholman/github-corners)
 * [giscus](https://giscus.app/zh-CN)
 * [crypto-js](https://github.com/brix/crypto-js)
+* [vConsole](https://github.com/Tencent/vConsole)
+* [eruda](https://github.com/liriliri/eruda)
 </details>
 
 ## 许可协议

exampleSite/config.toml

@@ -1173,6 +1173,8 @@ enableEmoji = true
     # For using the GitHub API, please do not expose to public!
     # 用于使用 GitHub API，请勿公开展示！
     githubToken = ""
+    # Mobile Devtools config
+    # 移动端开发者工具配置
     [params.dev.mDevtools]
       enable = false
       # "vConsole", "eruda" supported

exampleSite/content/about/index.en.md

@@ -130,6 +130,8 @@ math:
 * [github-corners](https://github.com/tholman/github-corners)
 * [giscus](https://giscus.app/)
 * [crypto-js](https://github.com/brix/crypto-js)
+* [vConsole](https://github.com/Tencent/vConsole)
+* [eruda](https://github.com/liriliri/eruda)
 </details>
 
 ### License

exampleSite/content/about/index.zh-cn.md

@@ -131,6 +131,8 @@ math:
 * [github-corners](https://github.com/tholman/github-corners)
 * [giscus](https://giscus.app/zh-CN)
 * [crypto-js](https://github.com/brix/crypto-js)
+* [vConsole](https://github.com/Tencent/vConsole)
+* [eruda](https://github.com/liriliri/eruda)
 </details>
 
 ### 许可协议

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

@@ -846,6 +846,11 @@ Please open the code block below to view the complete sample configuration :(fa-
     c4u = false
     # Please do not expose to public!
     githubToken = ""
+    # Mobile Devtools confi
+    [params.dev.mDevtools]
+      enable = false
+      # "vConsole", "eruda" supported
+      type = "vConsole"
 
 # Markup related configuration in Hugo
 [markup]

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

@@ -847,6 +847,11 @@ hugo
     c4u = false
     # 请勿公开展示！
     githubToken = ""
+    # 移动端开发者工具配置
+    [params.dev.mDevtools]
+      enable = false
+      # 支持 "vConsole", "eruda"
+      type = "vConsole"
 
 # Hugo 解析文档的配置
 [markup]

layouts/partials/assets.html

@@ -199,6 +199,17 @@
   {{- $config = dict "all" (isset $params "password") "shortcode" ($encryptPartial | default false) | dict "encryption" | merge $config -}}
 {{- end -}}
 
+{{- /* Mobile Devtools */ -}}
+{{- $mDevtools := (.Scratch.Get "devOpts").mDevtools -}}
+{{- if $mDevtools.enable -}}
+  {{- $devtoolsJS := $cdn.vconsoleJS | default "lib/vconsole/vconsole.min.js" -}}
+  {{- if eq $mDevtools.type "eruda" -}}
+    {{- $devtoolsJS = $cdn.erudaJS | default "lib/eruda/eruda.js" -}}
+  {{- end -}}
+  {{- dict "Source" $devtoolsJS "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
+  {{- $config = dict "mDevtools" ($mDevtools.type | default "vConsole") | merge $config -}}
+{{- end -}}
+
 {{- /* 不蒜子 */ -}}
 {{- if eq .Site.Params.ibruce.enable true -}}
   {{- $source := "//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" -}}

src/js/theme.js

@@ -936,6 +936,32 @@ class FixIt {
     this.config.encryption?.all && this.decryptor.init();
   }
 
+  initMDevtools() {
+    const type = this.config?.mDevtools
+    if (typeof window.orientation === 'undefined') {
+      return;
+    }
+    if(type === 'vConsole') {
+      const vConsole = new VConsole({
+        target: '.widgets',
+        theme: this.isDark ? 'dark' : 'light'
+      });
+      this._vConsoleOnSwitchTheme = this._vConsoleOnSwitchTheme || (() => {
+        vConsole.setOption('theme', this.isDark ? 'dark' : 'light');
+      });
+      this.switchThemeEventSet.add(this._vConsoleOnSwitchTheme);
+    }
+    if(type === 'eruda') {
+      eruda.init({
+        defaults: { theme: this.isDark ? 'Dark' : 'Light' }
+      });
+      this._erudaOnSwitchTheme = this._erudaOnSwitchTheme || (() => {
+        eruda.util.evalCss.setTheme(this.isDark ? 'Dark' : 'Light');
+      });
+      this.switchThemeEventSet.add(this._erudaOnSwitchTheme);
+    }
+  }
+
   onScroll() {
     const $headers = [];
     if (document.body.getAttribute('header-desktop') === 'auto') {
@@ -1057,6 +1083,7 @@ class FixIt {
       this.initSiteTime();
       this.initServiceWorker();
       this.initWatermark();
+      this.initMDevtools();
 
       window.setTimeout(() => {
         this.initComment();