✨ Feat: add CustomJS option (#24)

CHANGELOG.md

@@ -6,6 +6,7 @@
 - :tada: Feat: add Watermark support ([#16](https://github.com/Lruihao/FixIt/issues/16))
 - :tada: Feat: add "不蒜子" count and site run time ([#18](https://github.com/Lruihao/FixIt/issues/18))
 - :sparkles: Feat: add public network security config (only in China) ([#15](https://github.com/Lruihao/FixIt/issues/15))
+- :sparkles: Feat: add CustomJS option ([#24](https://github.com/Lruihao/FixIt/issues/24))
 - :zap: Perf: optimize JS loading ([#25](https://github.com/Lruihao/FixIt/issues/25))
 - :bug: Fix: add scroll-margin to headerlink
 - :bug: Fix: Check if content is empty beforing passing

assets/js/_custom.js

@@ -0,0 +1,36 @@
+/**
+ * @author @Lruihao https://lruihao.cn
+ * @description Custom javascript for the hugo theme FixIt.
+ */
+const CustomJS = new (function () {
+  /**
+   * Hello World
+   * You can define your own functions below.
+   * @returns {CustomJS}
+   */
+  this.hello = () => {
+    console.log('hello CustomJS!');
+    return this;
+  }
+  /**
+   * Initialize.
+   * @returns {CustomJS}
+   */
+  this.init = () => {
+    // Custom infos.
+    this.hello();
+    return this;
+  };
+})();
+
+/**
+ * Immediate.
+ */
+(() => {
+  CustomJS.init();
+  // It will be executed when the DOM tree is built.
+  document.addEventListener('DOMContentLoaded', () => {
+    // Listen to any DOM change and automatically perform spacing via MutationObserver()
+    console.log('DOMContentLoaded!')
+  });
+})();

assets/js/_custom.min.js

@@ -0,0 +1 @@
+const CustomJS=new function(){this.hello=(()=>(console.log("hello CustomJS!"),this)),this.init=(()=>(this.hello(),this))};CustomJS.init(),document.addEventListener("DOMContentLoaded",()=>{console.log("DOMContentLoaded!")});

exampleSite/config.toml

@@ -1093,6 +1093,20 @@ enableEmoji = true
     # 是否使用 object-fit-images 来兼容旧式浏览器
     objectFit = false
 
+  # Custom JS at last. since v0.2.12
+  # "_custom.js" located in "themes/FixIt/assets/js/"
+  # you can store your custom JS file in the same path under your project:
+  # "assets/js/_custom.js"
+  # 页面最后添加自定义 JS
+  # "_custom.js" 位于 "themes/FixIt/assets/js" 目录
+  # 可以在你的项目下相同路径存放你自己的自定义 JS 文件:
+  # "assets/js/_custom.js"
+  [params.customJS]
+    enable = true
+    # Use "_custom.min.js" in the same path
+    # 使用同目录下的压缩文件 "_custom.min.js"
+    minify = true
+
 # Markup related configuration in Hugo
 # Hugo 解析文档的配置
 [markup]

layouts/partials/assets.html

@@ -183,7 +183,7 @@
 {{- end -}}
 
 {{- range $params.library.js -}}
-  {{- dict "Source" . "Fingerprint" $fingerprint "Async" true "Defer" true | dict "Scratch" $.Scratch "Data" | partial "scratch/script.html" -}}
+  {{- dict "Source" . "Fingerprint" $fingerprint "Defer" true | dict "Scratch" $.Scratch "Data" | partial "scratch/script.html" -}}
 {{- end -}}
 
 {{- with (.Scratch.Get "this").styleArr -}}
@@ -200,6 +200,15 @@
 {{- dict "Source" "js/theme.min.js" "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
 {{- $_ := (resources.Get "js/theme.min.js.map").RelPermalink -}}
 
+{{- /* Custom script */ -}}
+{{- if eq .Site.Params.customJS.enable true -}}
+  {{- $source = "js/_custom.js" -}}
+  {{- if eq .Site.Params.customJS.minify true -}}
+    {{- $source = "js/_custom.min.js" -}}
+  {{- end -}}
+  {{- dict "Source" $source "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
+{{- end -}}
+
 {{- with (.Scratch.Get "this").scriptArr -}}
   {{- delimit . "\n" | dict "Content" | dict "Scratch" $.Scratch "Data" | partial "scratch/script.html" -}}
 {{- end -}}