💄 Add page load animate style.

VERSION

@@ -0,0 +1 @@
+4.0.0

assets/js/config.js

@@ -1,66 +1,53 @@
 if (!window.NexT) window.NexT = {};
 
 (function() {
-  const className = 'next-config';
 
-  const staticConfig = {};
+  const siteConfig = {
-  let variableConfig = {};
+    "hostname"   : "{{ .Site.BaseURL }}",
-
+    "root"       : "/",
-  const parse = text => JSON.parse(text || '{}');
+    "images"     : "{{ .Site.Params.images }}",
-
+    "scheme"     : "{{ .Site.Params.scheme }}",
-  const update = name => {
+    "darkmode"   : {{ .Site.Params.darkmode }},
-    const targetEle = document.querySelector(`.${className}[data-name="${name}"]`);
+    "version"    : "{{ .Site.Data.config.version }}",
-    if (!targetEle) return;
+    "exturl"     : {{ .Site.Params.exturl }},
-    const parsedConfig = parse(targetEle.text);
+    "sidebar"    : {{ .Site.Params.sidebar | jsonify }},
-    if (name === 'main') {
+    "copycode"   : {{ .Site.Params.codeblock.copyBtn | jsonify }},
-      Object.assign(staticConfig, parsedConfig);
+    "bookmark"   : {{ .Site.Params.bookmark | jsonify }},
-    } else {
+    "comments"   : {{ .Site.Params.comments | jsonify }},
-      variableConfig[name] = parsedConfig;
+    "mediumzoom" : {{ .Site.Params.mediumzoom }},
+    "lazyload"   : {{ .Site.Params.lazyload }},
+    "pangu"      : {{ .Site.Params.pangu }},
+    "stickytabs" : {{ .Site.Params.tabs.sticky }},
+    "motion"     : {{ .Site.Params.motion | jsonify }},
+    // TODO Find prismjs 
+    //"prism"    : "",
+    "i18n"       : {
+      "placeholder"  : "",
+      "empty"        : "${query}",
+      "hits_time"    : "'${hits}', '${time}'",
+      "hits"         : "${hits}"
+    },
+    {{- if .Site.Params.algoliaSearch.enable }}
+    // TODO
+    "algolia"    : {
+      "appID"        : "",
+      "apiKey"       : "",
+      "indexName"    : "",
+      "hits"         : ""
     }
+    {{- end }}
+    {{- if .Site.Params.localSearch.enable }}
+    // TODO
+    "path"       : "/search.json",
+    "localsearch": {{ .Site.Params.localSearch | jsonify }},
+    {{- end }}
+    "lang"       : "{{ .Site.LanguageCode }}",
+    "permalink"  : "{{ .Page.Permalink | absURL }}",
+    "title"      : "{{ .Page.Title }}",
+    "isHome"     : {{ .IsHome }},
+    "isPage"     : {{ .IsPage }}
   };
   
-  update('main');
+  window.CONFIG = new Proxy(siteConfig, {});
 
-  window.CONFIG = new Proxy({}, {
-    get(overrideConfig, name) {
-      let existing;
-      if (name in staticConfig) {
-        existing = staticConfig[name];
-      } else {
-        if (!(name in variableConfig)) update(name);
-        existing = variableConfig[name];
-      }
-
-      // For unset override and mixable existing
-      if (!(name in overrideConfig) && typeof existing === 'object') {
-        // Get ready to mix.
-        overrideConfig[name] = {};
-      }
-
-      if (name in overrideConfig) {
-        const override = overrideConfig[name];
-
-        // When mixable
-        if (typeof override === 'object' && typeof existing === 'object') {
-          // Mix, proxy changes to the override.
-          return new Proxy({ ...existing, ...override }, {
-            set(target, prop, value) {
-              target[prop] = value;
-              override[prop] = value;
-              return true;
-            }
-          });
-        }
-
-        return override;
-      }
-
-      // Only when not mixable and override hasn't been set.
-      return existing;
-    }
-  });
-
-  document.addEventListener('pjax:success', () => {
-    variableConfig = {};
-  });
 })();

assets/js/motion.js

@@ -82,7 +82,7 @@ NexT.motion.middleWares = {
 
   postList: function() {
     const sequence = [];
-    const { post_block, post_header, post_body, coll_header } = CONFIG.motion.transition;
+    const { postblock, postheader, postbody, collheader } = CONFIG.motion.transition;
 
     function animate(animation, selector) {
       if (!animation) return;
@@ -95,10 +95,10 @@ NexT.motion.middleWares = {
       });
     }
 
-    animate(post_block, '.post-block, .pagination, .comments');
+    animate(postblock, '.post-block, .pagination, .post-comments');
-    animate(coll_header, '.collection-header');
+    animate(collheader, '.collection-header');
-    animate(post_header, '.post-header');
+    animate(postheader, '.post-header');
-    animate(post_body, '.post-body');
+    animate(postbody, '.post-body');
 
     return sequence;
   },

assets/js/utils.js

@@ -287,7 +287,7 @@ NexT.utils = {
     if (window.innerWidth < 992 || CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') return;
     // Expand sidebar on post detail page by default, when post has a toc.
     const hasTOC = document.querySelector('.post-toc');
-    let display = CONFIG.page.sidebar;
+    let display = CONFIG.sidebar;
     if (typeof display !== 'boolean') {
       // There's no definition sidebar in the page front-matter.
       display = CONFIG.sidebar.display === 'always' || (CONFIG.sidebar.display === 'post' && hasTOC);

data/config.yaml

@@ -0,0 +1,4 @@
+# Hugo NexT theme's custom config
+# 
+
+version: 4.0.0

exampleSite/config.yaml

@@ -996,8 +996,8 @@ params:
   # Use Animate.css to animate everything.
   # For more information: https://animate.style
   motion:
-    enable: false
+    enable: true
-    async: false
+    async: true
     transition:
       # All available transition variants: https://theme-next.js.org/animate/
       postBlock: fadeIn
@@ -1010,7 +1010,7 @@ params:
   # Progress bar in the top during page loading.
   # For more information: https://github.com/CodeByZach/pace
   pace:
-    enable: false
+    enable: true
     # All available colors:
     # black | blue | green | orange | pink | purple | red | silver | white | yellow
     color: blue

layouts/partials/scripts.html

@@ -15,83 +15,29 @@
   {{- $pluginJS = replace $pluginJS "${name}" $npm }}
   {{- $pluginJS = replace $pluginJS "${version}" $js.version }}
   {{- $pluginJS = replace $pluginJS "${file}" $file }}
-  <script type="text/javascript" src="{{ $pluginJS }}"></script>
+  <script type="text/javascript" src="{{ $pluginJS }}" defer></script>
 {{- end }}
 
-<script class="next-config" data-name="main" type="application/json">
+{{- $config := resources.Get "js/config.js" | resources.ExecuteAsTemplate "config.js" . }}
-{
+{{- $motion := resources.Get "js/motion.js" }}
-  "hostname": "theme-next.js.org",
+{{- $boot := resources.Get "js/next-boot.js" }}
-  "root": "/",
+{{- $utils := resources.Get "js/utils.js" }}
-  "images": "/images",
+{{- $nextjs := (slice $config $utils $boot ) }}
-  "scheme": "Gemini",
+{{- if .Site.Params.motion.enable }}
-  "darkmode": true,
+{{ $motionjs := resources.Get "js/motion.js" }}
-  "version": "8.12.1",
+{{ $nextjs = $nextjs | append $motionjs }}
-  "exturl": true,
+{{- end }}
-  "sidebar":
+{{- if or (eq .Site.Params.shceme "Muse") (eq .Site.Params.shceme "Mist") }}
-  {
+{{ $musejs := resources.Get "js/schemes/muse.js" }}
-    "position": "left",
+{{ $nextjs = $nextjs | append $musejs }}
-    "display": "post",
+{{- end }}
-    "padding": 18,
+{{- if .Site.Params.bookmark.enable }}
-    "offset": 12
+{{- $bookmarkjs := resources.Get "js/bookmark.js" }}
-  },
+{{- $nextjs = $nextjs | append $bookmarkjs }}
-  "copycode":
+{{- end }}
-  {
+{{- if .Site.Params.pjax }}
-    "enable": true,
+{{- $pjaxjs := resources.Get "js/pjax.js" }}
-    "style": "default"
+{{- $nextjs = $nextjs | append $pjaxjs }}
-  },
+{{- end }}
-  "bookmark":
+{{- $nextjs = $nextjs | resources.Concat "js/hugo-next.js"}}
-  {
+<script type="text/javascript" src="{{ $nextjs.RelPermalink }}" defer></script> 
-    "enable": false,
-    "color": "#222",
-    "save": "auto"
-  },
-  "mediumzoom": true,
-  "lazyload": false,
-  "pangu": false,
-  "comments":
-  {
-    "style": "tabs",
-    "active": null,
-    "storage": true,
-    "lazyload": true,
-    "nav": null
-  },
-  "stickytabs": false,
-  "motion":
-  {
-    "enable": false,
-    "async": false,
-    "transition":
-    {
-      "post_block": "fadeIn",
-      "post_header": "fadeInDown",
-      "post_body": "fadeInDown",
-      "coll_header": "fadeInLeft",
-      "sidebar": "fadeInUp"
-    }
-  },
-  "prism": false,
-  "i18n":
-  {
-    "placeholder": "Searching...",
-    "empty": "We didn't find any results for the search: ${query}",
-    "hits_time": "${hits} results found in ${time} ms",
-    "hits": "${hits} results found"
-  },
-  "path": "/search.json",
-  "localsearch":
-  {
-    "enable": true,
-    "trigger": "auto",
-    "top_n_per_article": 1,
-    "unescape": false,
-    "preload": false
-  }
-}
-</script>
-
-{{ $config := resources.Get "js/config.js" }}
-{{ $boot := resources.Get "js/next-boot.js" }}
-{{ $utils := resources.Get "js/utils.js" }}
-{{ $alljs := (slice $config $boot $utils) | resources.Concat "js/all.js"}}
-<script defer src="{{ $alljs.RelPermalink }}"></script>