⚡ 🔥 Refactor struct & code for loading 3rd scripts.

assets/css/_common/components/third-party/search.scss

@@ -24,11 +24,13 @@
   .search-popup {
     background: var(--card-bg-color);
     border-radius: 5px;
-    height: 80%;
+    height: 60%;
     margin: auto;
     transform: scale(0);
     transition: transform .4s;
     width: 700px;
+    //display: flex;
+    //flex-wrap: wrap;
 
     .search-active & {
       transform: scale(1);
@@ -75,7 +77,10 @@
     }
 
     .search-result-container {
-      height: calc(100% - 55px);
+     /*  height: calc(100% - 65px);
+      @include mobile() {
+        height: calc(100% - 105px); 
+      } */
       overflow: auto;
       padding: 0px 25px;
     }
@@ -89,23 +94,28 @@
 
       .search-meta-info {
         height: 26px;
-        display: flex;
         padding: 5px 0;
         
         .search-hit-stats {
           font-size: $font-size-smaller;          
-          width: 65%;
           padding: 2px 8px;
+          float: left;
         }
 
         .search-vendor {
-          width: 34%;
           text-align: right;
           font-size: $font-size-small;
+          @include mobile() {
+            font-size: $font-size-smaller;
+          }
           font-weight: bold;
+          float: right;
           
           img {
             width: 68px;
+            @include mobile() {
+              width: 48px;
+            }
             margin: 5px;
             vertical-align: middle;
             display: inline;

assets/js/config.js

@@ -31,6 +31,15 @@ NexT.plugins.share.register = function() {
   };
 }
 
+// Defined other plugin & add register event
+NexT.plugins.others = {}
+NexT.plugins.others.register = function() {
+  for(var o in NexT.plugins.others) { 
+    if (o === 'register') continue;
+    eval('NexT.plugins.others.'+o)();
+  };
+}
+
 // Add event to register all third party plugins
 NexT.plugins.register = function() {
   for(var p in NexT.plugins) {

assets/js/third-party/others/lawidget.js

@@ -0,0 +1,16 @@
+/* 51La sidebar data widget */
+NexT.plugins.others.lawidget = function() {
+  const element = '#siteinfo-card-widget';
+  const lawt_js = NexT.CONFIG.lawidget.js.replace('laId', NexT.CONFIG.lawidget.id);
+  
+  NexT.utils.lazyLoadComponent(element, function () {    
+    NexT.utils.getScript(lawt_js,{
+      attributes: {
+        id: 'LA-DATA-WIDGET',
+        crossorigin: 'anonymous',
+        charset: 'UTF-8',
+        defer: true
+      }
+    });
+  });
+}

assets/js/third-party/others/math.js

@@ -0,0 +1,38 @@
+/* Math render plugin */
+NexT.plugins.others.math = function() {
+  const render = NexT.CONFIG.page.math.render;
+  
+  if (render === 'mathjax') {
+    const render_js = NexT.utils.getCDNResource(NexT.CONFIG.page.math.js);
+    NexT.utils.getScript(render_js, function(){
+      window.MathJax = {
+        tex: {
+          inlineMath: [["$", "$"]],
+        }
+      };
+    });
+  }
+
+  if (render === 'katex') {
+    const render_css = NexT.utils.getCDNResource(NexT.CONFIG.page.math.css);
+    NexT.utils.getStyle(render_css);
+    const render_js_list = NexT.CONFIG.page.math.js;    
+    render_js_list.forEach(js => {
+      const js_loader = NexT.utils.getScript(NexT.utils.getCDNResource(js));
+      if(js.name === 'auto-render') {
+        js_loader.then(function(){
+          renderMathInElement(document.body, {
+            delimiters: [
+                {left: '$$', right: '$$', display: true},
+                {left: '$', right: '$', display: false},
+                {left: '\\(', right: '\\)', display: false},
+                {left: '\\[', right: '\\]', display: true}
+            ],
+            
+            throwOnError : false
+          })
+        });
+      }
+    });
+  }
+}

assets/js/third-party/others/mermaid.js

@@ -0,0 +1,15 @@
+/* Mermaid plugin */
+NexT.plugins.others.mermaid = function() {
+  const mermaid_js = NexT.utils.getCDNResource(NexT.CONFIG.page.mermaid.js);
+
+  NexT.utils.getScript(mermaid_js, function(){
+    mermaid.initialize({
+      sequence: { 
+        showSequenceNumbers: true,
+        actorMargin: 50, 
+        diagramMarginX:10, 
+        diagramMarginY:10
+      }
+    });
+  });
+}

assets/js/third-party/others/translate.js

@@ -0,0 +1,9 @@
+/* Google translate plugin */
+NexT.plugins.others.translate = function() {
+  const element = '#gtranslate';
+  if (!NexT.utils.checkDOMExist(element)) return;
+  NexT.utils.lazyLoadComponent(element, function() { 
+    window.translateelement_styles='/css/google-translate.min.css'; 
+    NexT.utils.getScript('/js/third-party/google-translate.min.js');
+  });
+}

assets/js/utils.js

@@ -179,9 +179,10 @@ NexT.utils = {
 
   getCDNResource: function (res) {
     let { plugins, router } = NexT.CONFIG.vendor;
-    let { name, version, file, alias } = res;
+    let { name, version, file, alias, alias_name } = res;
 
     let npm_name = name;
+    if (alias_name) npm_name = alias_name;
     let res_src = '';
     switch (plugins) {
       case 'cdnjs':
@@ -522,7 +523,6 @@ NexT.utils = {
     link.setAttribute('href', src);
 
     const head = (parent || document.head);
-    console.log(head)
     if (position === 'before') {
       head.prepend(link);
     } else {

data/resources.yaml

@@ -87,7 +87,7 @@ plugins:
   # 数学公式渲染
   mathjax:
     js:
-      - name: mathjax
+      name: mathjax
       version: 3.2.0
       file: es5/tex-mml-chtml.js
   katex:
@@ -96,17 +96,17 @@ plugins:
         version: 0.16.0
         file: dist/katex.min.js
       - name: auto-render
-        alias2: katex
+        alias_name: katex
         version: 0.16.0
         file: dist/contrib/auto-render.min.js
     css:
-      - name: katex
+      name: katex
       version: 0.16.0
       file: dist/katex.min.css
   # 画图渲染
   mermaid:
     js:
-      - name: mermaid
+      name: mermaid
       version: 9.1.7
       file: dist/mermaid.min.js
 

layouts/partials/_funs/get_plugin.html

@@ -0,0 +1,11 @@
+{{/* Get third party js plugins resource */}}
+
+{{ $pluginPath :=  printf "%s/%s/%s" "js/third-party" .class .plugin }}
+{{ $targetPath := printf "js/%s" .plugin }}
+{{ $plugin := resources.Get $pluginPath | resources.ExecuteAsTemplate $targetPath .ctx }}
+
+{{ if hugo.IsProduction }}
+{{ $plugin = $plugin | minify | fingerprint }}
+{{ end }}
+
+<script type="text/javascript" src="{{ $plugin.RelPermalink }}" defer></script>

layouts/partials/_thirdparty/analytics/51la.html

@@ -1,5 +1,5 @@
 <script type="text/javascript">
-  document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('DOMContentLoaded', () => {
   var script = document.createElement('script');
     
   script.charset = "UTF-8";
@@ -13,5 +13,5 @@
   }
 
   document.head.appendChild(script);
-  });
+});
 </script>

layouts/partials/_thirdparty/analytics/baidu.html

@@ -1,5 +1,5 @@
 <script type="text/javascript">
-  document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('DOMContentLoaded', () => {
   var script = document.createElement('script');
     
   script.charset = "UTF-8";
@@ -7,5 +7,5 @@
   script.async   = "true"
 
   document.head.appendChild(script);
-  });
+});
 </script>

layouts/partials/_thirdparty/analytics/busuanzi.html

@@ -1,5 +1,5 @@
 <script type="text/javascript">
-  document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('DOMContentLoaded', () => {
   var script = document.createElement('script');
     
   script.charset = "UTF-8";
@@ -7,5 +7,5 @@
   script.async   = "true"
 
   document.head.appendChild(script);
-  });
+});
 </script>

layouts/partials/_thirdparty/analytics/google.html

@@ -1,5 +1,5 @@
 <script type="text/javascript">
-  document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('DOMContentLoaded', () => {
   var script = document.createElement('script');
     
   script.charset = "UTF-8";
@@ -14,5 +14,5 @@
   }
 
   document.head.appendChild(script);
-  });
+});
 </script>

layouts/partials/_thirdparty/others/math.html

@@ -1,28 +0,0 @@
-<!-- Load math render scripts -->
-{{ $math := .Params.math | default .Site.Params.math }}
-{{- partial "scripts/plugins.html" (dict "vendor" (.Scratch.Get "vendor") "router" (.Scratch.Get "router") "res" .Site.Data.resources.plugins "index" $math) }}
-{{ if eq $math "katex" }}
-  <script type="text/javascript">
-      document.addEventListener("DOMContentLoaded", function() {
-          renderMathInElement(document.body, {
-            delimiters: [
-                {left: '$$', right: '$$', display: true},
-                {left: '$', right: '$', display: false},
-                {left: '\\(', right: '\\)', display: false},
-                {left: '\\[', right: '\\]', display: true}
-            ],
-            
-            throwOnError : false
-          });
-      });
-  </script>
-{{ end }}
-{{ if eq $math "mathjax" }}
-  <script type="text/javascript">
-    window.MathJax = {
-      tex: {
-        inlineMath: [["$", "$"]],
-      }
-    };
-  </script>
-{{ end }}

layouts/partials/_thirdparty/others/mermaid.html

@@ -1,15 +0,0 @@
-{{- partial "scripts/plugins.html" (dict "vendor" (.Scratch.Get "vendor") "router" (.Scratch.Get "router") "res" .Site.Data.resources.plugins "index" "mermaid") }}
-
-<script type="text/javascript">
-  document.addEventListener('DOMContentLoaded', () => {
-    mermaid.initialize({
-      sequence: { 
-        showSequenceNumbers: true,
-        actorMargin: 50, 
-        diagramMarginX:10, 
-        diagramMarginY:10
-      }
-    });
-  });
-</script>
-

layouts/partials/head/config.html

@@ -1,5 +1,4 @@
-<script class="next-config" data-name="page" type="application/json">
+{{- $pageCfg := dict
-{{- dict
   "isHome"    .IsHome
   "isPage"    .IsPage
   "comments"  (.Params.comments | default .Site.Params.comments.enable)
@@ -7,4 +6,27 @@
   "path"      (.Page.Permalink | path.Base)
   "title"     .Page.Title
 -}}
-</script>
+
+{{/* Append mermaid plugin */}}
+{{ if .Params.mermaid }}
+{{ $mermaid := dict
+  "js"  .Site.Data.resources.plugins.mermaid.js
+}}
+{{ $pageCfg = merge $pageCfg (dict "mermaid" $mermaid) }}
+{{ end }}
+
+{{/* Append math render plugin */}}
+{{ with or .Params.math .Site.Params.math }}
+{{ $math := dict
+  "render" .
+  "js"  (index $.Site.Data.resources.plugins .).js
+}}
+
+{{ if eq . "katex" }}
+  {{ $math = merge $math ( dict "css" $.Site.Data.resources.plugins.katex.css ) }}
+{{ end }}
+
+{{ $pageCfg = merge $pageCfg (dict "math" $math) }}
+{{ end }}
+
+<script class="next-config" data-name="page" type="application/json">{{- $pageCfg -}}</script>

layouts/partials/init.html

@@ -114,6 +114,14 @@
 {{ $config = merge $config (dict "addthis" $addthis) }}
 {{ end }}
 
+{{ with .Site.Params.analytics.laId }}
+{{ $lawidget := dict
+  "js" $.Site.Data.resources.analytics.laWidget
+  "id" .
+}}
+{{ $config = merge $config (dict "lawidget" $lawidget) }}
+{{ end }}
+
 {{ $globalVars.Set "config" $config }}
 
 {{ with .Site.Params.customFilePath }}

layouts/partials/scripts.html

@@ -1,22 +1,2 @@
-{{ partialCached "scripts/global.html" . }}
+{{- partialCached "scripts/global.html" . -}}
-
+{{- partial "scripts/plugins.html" . -}}
-{{ if or .Params.math .Site.Params.math }}
-  {{ partialCached "_thirdparty/others/math.html" . }}
-{{ end }}
-
-{{ if .Params.mermaid }}
-  {{ partialCached "_thirdparty/others/mermaid.html" . }}
-{{ end }}
-
-{{ if .Site.Params.footer.translate }}
-<script type="text/javascript">
-  document.addEventListener('DOMContentLoaded', () => {
-    const element = '#gtranslate';
-    if (!NexT.utils.checkDOMExist(element)) return;
-    NexT.utils.lazyLoadComponent(element).then(() => { 
-      window.translateelement_styles='/css/google-translate.min.css'; 
-      NexT.utils.getScript('/js/third-party/google-translate.min.js');
-    });
-  });
-</script>
-{{ end }}

layouts/partials/scripts/global.html

@@ -1,69 +1,97 @@
-{{- $jsRes := .Site.Data.resources.js }}
+{{/* Loading all page need scripts */}}
-{{- $vendor := .Site.Params.vendors.plugins }}
+{{ $jsRes := .Site.Data.resources.js }}
-{{- $router := .Scratch.Get "router" }}
+{{ $vendor := .Site.Params.vendors.plugins }}
-{{- range $jsRes }} 
+{{ $router := .Scratch.Get "router" }}
+{{ range $jsRes }} 
   {{ $pluginJS := partial "_funs/get_res.html" (dict "res" . "vendor" $vendor "router" $router) }}
   <script type="text/javascript" src="{{ $pluginJS }}" defer></script>
-{{- end }}
+{{ end }}
 
-<script class="next-config" data-name="main" type="application/json">{{- .Scratch.Get "config" -}}</script>
+<script class="next-config" data-name="main" type="application/json">{{ .Scratch.Get "config" -}}</script>
 
-{{- $config := resources.Get "js/config.js" }}
+{{/* Core scripts */}}
-{{- $utils := resources.Get "js/utils.js" }}
+{{ $config := resources.Get "js/config.js" }}
-{{- $boot := resources.Get "js/next-boot.js" }}
+{{ $utils := resources.Get "js/utils.js" }}
-{{- $nextjs := (slice $config $utils $boot ) }}
+{{ $boot := resources.Get "js/next-boot.js" }}
-{{- if .Site.Params.motion.enable }}
+{{ $nextjs := slice $config $utils $boot }}
+
+{{/* Animation scripts */}}
+{{ if .Site.Params.motion.enable }}
 {{ $motionjs := resources.Get "js/motion.js" }}
 {{ $nextjs = $nextjs | append $motionjs }}
-{{- end }}
+{{ end }}
-{{- if or (eq .Site.Params.shceme "Muse") (eq .Site.Params.shceme "Mist") }}
+
+{{/* Special scheme scripts */}}
+{{ if or (eq .Site.Params.shceme "Muse") (eq .Site.Params.shceme "Mist") }}
 {{ $musejs := resources.Get "js/schemes/muse.js" }}
 {{ $nextjs = $nextjs | append $musejs }}
-{{- end }}
-{{- if .Site.Params.bookmark.enable }}
-{{- $bookmarkjs := resources.Get "js/bookmark.js" }}
-{{- $nextjs = $nextjs | append $bookmarkjs }}
-{{- end }}
-{{- if .Site.Params.pjax }}
-{{- $pjaxjs := resources.Get "js/pjax.js" }}
-{{- $nextjs = $nextjs | append $pjaxjs }}
-{{- end }}
-{{- if isset .Site.Params "addthisid" }}
-{{- $addthisjs := resources.Get "js/third-party/share/addthis.js" }}
-{{- $nextjs = $nextjs | append $addthisjs }}
-{{- end }}
-{{- if isset .Site.Params "waline" }}
-{{- $walinejs := resources.Get "js/third-party/comments/waline.js" }}
-{{- $nextjs = $nextjs | append $walinejs }}
-{{- end }}
-{{- if isset .Site.Params "giscus" }}
-{{- $giscusjs := resources.Get "js/third-party/comments/giscus.js" }}
-{{- $nextjs = $nextjs | append $giscusjs }}
-{{- end}}
-{{- if isset .Site.Params "livere" }}
-{{- $liverejs := resources.Get "js/third-party/comments/livere.js" }}
-{{- $nextjs = $nextjs | append $liverejs }}
-{{- end }}
-{{- if isset .Site.Params "artalk" }}
-{{- $artalkjs := resources.Get "js/third-party/comments/artalk.js" }}
-{{- $nextjs = $nextjs | append $artalkjs }}
-{{- end }}
-{{- if isset .Site.Params "utterances" }}
-{{- $utterancesjs := resources.Get "js/third-party/comments/utterances.js" }}
-{{- $nextjs = $nextjs | append $utterancesjs }}
-{{- end }}
-{{- if .Site.Params.localSearch.enable }}
-{{- $search := resources.Get "js/third-party/search/local.js" }}
-{{- $nextjs = $nextjs | append $search }}
-{{ end }}
-{{- if .Site.Params.algoliaSearch.enable }}
-{{- $search := resources.Get "js/third-party/search/algolia.js" }}
-{{- $nextjs = $nextjs | append $search }}
 {{ end }}
 
-{{- $nextjs = $nextjs | resources.Concat "js/main.js"}}
+{{/* Bookmark scripts */}}
+{{ if .Site.Params.bookmark.enable }}
+{{ $bookmarkjs := resources.Get "js/bookmark.js" }}
+{{ $nextjs = $nextjs | append $bookmarkjs }}
+{{ end }}
+
+{{/* Pjax scripts */}}
+{{ if .Site.Params.pjax }}
+{{ $pjaxjs := resources.Get "js/pjax.js" }}
+{{ $nextjs = $nextjs | append $pjaxjs }}
+{{ end }}
+
+{{/* Share scripts */}}
+{{ if isset .Site.Params "addthisid" }}
+{{ $addthisjs := resources.Get "js/third-party/share/addthis.js" }}
+{{ $nextjs = $nextjs | append $addthisjs }}
+{{ end }}
+
+{{/* Comments scripts */}}
+{{ if isset .Site.Params "waline" }}
+{{ $walinejs := resources.Get "js/third-party/comments/waline.js" }}
+{{ $nextjs = $nextjs | append $walinejs }}
+{{ end }}
+{{ if isset .Site.Params "giscus" }}
+{{ $giscusjs := resources.Get "js/third-party/comments/giscus.js" }}
+{{ $nextjs = $nextjs | append $giscusjs }}
+{{ end}}
+{{ if isset .Site.Params "livere" }}
+{{ $liverejs := resources.Get "js/third-party/comments/livere.js" }}
+{{ $nextjs = $nextjs | append $liverejs }}
+{{ end }}
+{{ if isset .Site.Params "artalk" }}
+{{ $artalkjs := resources.Get "js/third-party/comments/artalk.js" }}
+{{ $nextjs = $nextjs | append $artalkjs }}
+{{ end }}
+{{ if isset .Site.Params "utterances" }}
+{{ $utterancesjs := resources.Get "js/third-party/comments/utterances.js" }}
+{{ $nextjs = $nextjs | append $utterancesjs }}
+{{ end }}
+
+{{/* Search engin scripts */}}
+{{ if .Site.Params.localSearch.enable }}
+{{ $search := resources.Get "js/third-party/search/local.js" }}
+{{ $nextjs = $nextjs | append $search }}
+{{ end }}
+{{ if .Site.Params.algoliaSearch.enable }}
+{{ $search := resources.Get "js/third-party/search/algolia.js" }}
+{{ $nextjs = $nextjs | append $search }}
+{{ end }}
+
+{{/* Other not useful scripts, eg: 51la widget, translate */}}
+{{ with .Site.Params.siteState.statistic }}
+  {{ if and .enable (eq .plugin "51la") }}
+    {{ $lawt := resources.Get "js/third-party/others/lawidget.js" }}
+    {{ $nextjs = $nextjs | append $lawt }}
+  {{ end }}
+{{ end }}
+{{ if .Site.Params.footer.translate }}
+{{ $translate := resources.Get "js/third-party/others/translate.js" }}
+{{ $nextjs = $nextjs | append $translate }}
+{{ end }}
+
+
+{{ $nextjs = $nextjs | resources.Concat "js/main.js"}}
 {{ if hugo.IsProduction }}
-{{- $nextjs = $nextjs | minify | fingerprint }}
+{{ $nextjs = $nextjs | minify | fingerprint }}
 {{ end }}
-
 <script type="text/javascript" src="{{ $nextjs.RelPermalink }}" defer></script>

layouts/partials/scripts/plugins.html

@@ -1,17 +1,9 @@
+{{/* Defind loading plugin scripts which only need in pages */}}
 
-{{- $vendor := .vendor }}
+{{ if or .Params.math .Site.Params.math }}
-{{- $router := .router }}
+  {{ partial "_funs/get_plugin.html" (dict "ctx" . "class" "others" "plugin" "math.js") }}
-{{- $res := (index .res .index)  }}
-{{- $cssRes := $res.css }}
-{{ if $cssRes }}
-  {{ range $cssRes }}
-    {{ $css := partial "_funs/get_res.html" (dict "res" . "vendor" $vendor "router" $router) }}
-    <link type="text/css" rel="stylesheet" href="{{ $css }}"/>
-  {{ end }}
-{{ end }}
-{{- $jsRes := $res.js }}
-{{ range $jsRes }}
-  {{ $js := partial "_funs/get_res.html" (dict "res" . "vendor" $vendor "router" $router) }}
-  <script type="text/javascript" src="{{ $js }}"></script>
 {{ end }}
 
+{{ if .Params.mermaid }}
+  {{ partial "_funs/get_plugin.html" (dict "ctx" . "class" "others" "plugin" "mermaid.js") }}
+{{ end }}

layouts/partials/sidebar/siteinfo.html

@@ -1,5 +1,5 @@
 {{ $scratch := partialCached "_funs/cal_siteinfo.html" . }}
-<div class="sidebar-card-widget">
+<div id="siteinfo-card-widget" class="sidebar-card-widget">
   <div class="item-headline">
     <i class="fas fa-chart-line"></i>
     <span>{{ T "SiteInfoItems.title" }}</span>
@@ -15,43 +15,40 @@
         <div class="item-name">
           <i class="fas {{ .visitorsIcon }}"></i>{{ T "SiteInfoItems.visitors" }}
         </div>
-        <div class="item-count" id="busuanzi_value_site_uv"></div>
+        <div class="item-count" id="busuanzi_value_site_uv"><i class="fa fa-sync fa-spin"></i></div>
       </div>
       <div class="siteinfo-item">
         <div class="item-name">
           <i class="fas {{ .viewsIcon }}"></i>{{ T "SiteInfoItems.pageViews" }}
         </div>
-        <div class="item-count" id="busuanzi_value_site_pv"></div>
+        <div class="item-count" id="busuanzi_value_site_pv"><i class="fa fa-sync fa-spin"></i></div>
       </div>
       {{- end }}  
     {{- end }}    
     {{- if eq .Site.Params.siteState.statistic.plugin "51la" }}
-    <div id="la-siteinfo-widget" style="display: none;">
-      <script id="LA-DATA-WIDGET" crossorigin="anonymous" charset="UTF-8" src="{{ replace .Site.Data.resources.analytics.laWidget "laId" .Site.Params.analytics.laId }}"></script>
-    </div>
     <div class="siteinfo-item">
       <div class="item-name">
         <i class="fa fa-user-plus"></i>{{ T "SiteInfoItems.todayViews" }}
       </div>
-      <div class="item-count" id="today_site_pv"></div>
+      <div class="item-count" id="today_site_pv"><i class="fa fa-sync fa-spin"></i></div>
     </div>
     <div class="siteinfo-item">
       <div class="item-name">
         <i class="fa fa-user-clock"></i>{{ T "SiteInfoItems.yesterdayViews" }}
       </div>
-      <div class="item-count" id="yesterday_site_pv"></div>
+      <div class="item-count" id="yesterday_site_pv"><i class="fa fa-sync fa-spin"></i></div>
     </div>
     <div class="siteinfo-item">
       <div class="item-name">
         <i class="fa fa-arrows-down-to-people"></i>{{ T "SiteInfoItems.monthViews" }}
       </div>
-      <div class="item-count" id="month_site_pv"></div>
+      <div class="item-count" id="month_site_pv"><i class="fa fa-sync fa-spin"></i></div>
     </div>
     <div class="siteinfo-item">
       <div class="item-name">
         <i class="fa fa-users"></i>{{ T "SiteInfoItems.totalViews" }}
       </div>
-      <div class="item-count" id="total_site_pv"></div>
+      <div class="item-count" id="total_site_pv"><i class="fa fa-sync fa-spin"></i></div>
     </div>
     {{- end }}
     <div class="siteinfo-item">