💄 Add 51la analytics widget plug-in in sidebar.

2022-09-12 16:43:24 +08:00 · 2022-09-12 16:43:24 +08:00 · f3fc99ac03
commit f3fc99ac03
parent 20aadcf9ac
10 changed files with 125 additions and 214 deletions
--- a/assets/css/gemini/style.css
+++ b/assets/css/gemini/style.css
@ -1,176 +0,0 @@
-/** User-defined style. **/
-{{ $P := .Site.Params -}}
-
-{{- with $P.sidebar -}}
-{{- $width := (int (math.Max .width 240)) -}}
-{{- $offset := (int (math.Max .offset 12)) -}}
-{{- $padding := (int (math.Max .padding 18)) -}}
-{{- $positPad := (add $width $offset) }}
-.main {
-{{ if eq .position "right" }}
-  flex-direction: row-reverse;
-{{- end }}
-}
-.header-inner {
-  width: {{ $width }}px;
-}
-.main-inner {
-  width: calc(100% - {{ $positPad }}px);
-}
-.sidebar {
-  width: {{ $width }}px;
-  visibility: inherit;
-}
-.sidebar-inner {
-  padding: {{ $padding }}px 10px;
-}
-.footer-inner {
-  padding-{{ .position }}: {{ $positPad }}px;
-}
-{{- end }}
-
-.site-author-image {
-{{- if $P.avatar.rounded }}
-  border-radius:50%;
-{{- end }}
-{{- if $P.avatar.rotated }}
-  transition: transform 1s ease-out;
-{{- end }}
-}
-
-.site-author-image:hover {
-  transform: rotateZ(360deg);
-}
-
-.site-state-item {
-  border-left: 1px solid #eee;
-}
-.site-state-item:first-child {
-  border-left: none;
-}
-
-.rss-link {
-  border-top: 1px dotted #ccc;
-  border-bottom: 1px dotted #ccc;
-  text-align: center;
-  margin: 10px 0 0 0;
-}
-
-.rss-link a {
-  display: block;
-  color: #fc6423;
-  border-bottom: none;
-}
-
-.rss-link a:hover {
-  animation-name: wobble-vertical;
-  animation-duration: 2s;
-  animation-timing-function: ease-in-out;
-  animation-iteration-count: 1;
-}
-
-.rss-link a:hover > i {
-  -webkit-transform: scaleY(-1);
-  transform: scaleY(-1);
-}
-
-.links-of-social a {
-  font-size: 0.8125em;
-}
-.links-of-social .fa,
-.links-of-social .fab,
-.links-of-social .far,
-.links-of-social .fas {
-  margin-right: 2px;
-}
-.links-of-social {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-}
-.links-of-social-item {
-  margin: 5px 0 0;
-{{- if and $P.socialIcons.enable (not $P.socialIcons.iconsOnly) }}
-  width: 50%;
-{{- end }}
-}
-.links-of-social-item a {
-  box-sizing: border-box;
-  display: inline-block;
-  max-width: 100%;
-  overflow: hidden;
-  padding: 0 5px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.links-of-social-item a {
-  border-bottom: 0;
-  border-radius: 4px;
-  display: block;
-}
-.links-of-social-item a:hover {
-  background: var(--body-bg-color);
-}
-
-.cc-license {
-{{ if eq $P.creativeCommons.size "big" }}
-  margin-top: 10px;
-{{ else }}
-  margin-top: 5px;
-{{- end }}
-}
-
-.back-to-top {
-  bottom: 30px;
-}
-
-.posts-expand .post-meta-container {
-  margin: 10px auto;
-}
-
-.post-meta-item-icon {
-  margin: 0 0 0 -5px;
-}
-
-:not(.post-meta-break) + .post-meta-item::before {
-    content: '|';
-    margin: 0 0.3em;
-}
-
-.post-meta-catg:not(:last-child)::after {
-  content: ';';
-  margin: 0px;
-}
-
-.posts-expand .post-header {
-  margin: 0;
-}
-
-.posts-expand .post-body {
-  margin: 28px 0;
-}
-
-.post-footer-btn {
-  text-align: center;
-}
-
-.beian img {
-  display: inline-block;
-  margin: 0 3px;
-  vertical-align: middle;
-}
-
-.with-love {
-{{- with $P.footer.icon.color }}
-  color: {{ $P.footer.icon.color  }};
-{{- end }}
-{{- if $P.footer.icon.animated }}
-  animation: icon-animate 1.33s ease-in-out infinite;
-{{- end }}
-}
-
-/* Font Awesome */
-.fa-spin {
-  -webkit-animation: fa-spin .8s infinite linear;
-  animation: fa-spin .8s infinite linear;
-} 
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@ -65,7 +65,7 @@ $back2top_sidebar           : {{ $P.backTop.sidebar }};
 $avatar_rotated             : {{ $P.avatar.rotated }};
 $avatar_rounded             : {{ $P.avatar.rounded }};
 $avatar_rounded             : {{ $P.avatar.rounded }};
-$site_state                 : {{ $P.siteState }};
+$site_state                 : {{ $P.siteState.basic }};
 $social_icons_only          : {{ $P.socialIcons.iconsOnly }};
 $social_icons_transition    : {{ $P.socialIcons.transition }};
 $links_settings_layout      : {{ $P.linksSets.layout }};
--- a/assets/js/utils.js
+++ b/assets/js/utils.js
@ -34,15 +34,7 @@ NexT.utils = {
    const wordsCount = document.getElementById('wordsCount');
    if (wordsCount) {
      const words = wordsCount.getAttribute('data-count');
-      let wordsLabel;
-      if (words > 10000) {
-        wordsLabel = (words / 10000.0).toFixed(2) + ' w';
-      } else if (words > 1000) {
-        wordsLabel = (words / 1000.0).toFixed(2) + ' k';
-      } else {
-        wordsLabel = words;
-      }
-      wordsCount.innerText = wordsLabel;
+      wordsCount.innerText = NexT.utils.numberFormat(words);
    }

    const readTimes = document.getElementById('readTimes');
@ -72,6 +64,32 @@ NexT.utils = {
      const pushDateVal = NexT.utils.diffDate(lastPushDate.getAttribute('data-lastPushDate'), 1);
      lastPushDate.innerText = pushDateVal;
    }
+
+    var statistic = document.querySelectorAll('#la-siteinfo-widget span');
+    if (statistic) {
+      const valIds = [0,2,4,6];
+      const domIds = ['today_site_pv', 'yesterday_site_pv', 'month_site_pv', 'total_site_pv']
+      for (var i in valIds) {
+        let pv = NexT.utils.numberFormat(statistic[valIds[i]].innerText);
+        document.getElementById(domIds[i]).innerText = pv;
+      }
+    }
+  },
+
+  numberFormat: function(number) {
+    let result;
+    if (number.indexOf(',') > 0) {
+      number = number.replaceAll(",", "");
+    }
+    
+    if (number > 10000) {
+      result = (number / 10000.0).toFixed(2) + ' w';
+    } else if (number > 1000) {
+      result = (number / 1000.0).toFixed(2) + ' k';
+    } else {
+      result = number;
+    }
+    return result;
  },

  diffDate: function(date, mode = 0) {
--- a/data/resources.yaml
+++ b/data/resources.yaml
@ -29,6 +29,7 @@ css:
 # Site analytics engine
 analytics:
  la: https://sdk.51.la/js-sdk-pro.min.js
+  laWidget: https://v6-widget.51.la/v6/JiZkaipzkPyiCL8x/quote.js?theme=0&col=true&f=12&display=0,0,0,1,0,1,1,1
  baidu: https://hm.baidu.com/hm.js?
  google: https://www.googletagmanager.com/gtag/js?id=
  busuanzi: https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js
--- a/exampleSite/config.yaml
+++ b/exampleSite/config.yaml
@ -39,15 +39,28 @@ markup:
    renderer:
      unsafe: true
  highlight:
+    # codeFences: true
+    # lineNos: true
+    # lineNumbersInTable: true
+    # noClasses: true
+    # # 高亮代码的样式名称，可选：monokai | emacs | api | dracula | friendly
+    # # 更多的样式：https://xyproto.github.io/splash/docs/all.html
+    # # Highlight style: monokai | emacs | api | dracula | friendly
+    # # More: https://xyproto.github.io/splash/docs/all.html 
+    # style: "monokai"
+    anchorLineNos: true
    codeFences: true
-    lineNos: true
-    lineNumbersInTable: true
+    guessSyntax: true
+    hl_Lines: ""
+    hl_inline: false
+    lineAnchors: ""
+    lineNoStart: 1
+    lineNos: false
+    lineNumbersInTable: false
    noClasses: true
-    # 高亮代码的样式名称，可选：monokai | emacs | api | dracula | friendly
-    # 更多的样式：https://xyproto.github.io/splash/docs/all.html
-    # Highlight style: monokai | emacs | api | dracula | friendly
-    # More: https://xyproto.github.io/splash/docs/all.html 
-    style: "monokai"
+    noHl: false
+    style: monokai
+    tabWidth: 2
  tableOfContents:
    # 开始/结束标题级别：1-6
    # Heading title level of start or end: 1-6
@ -91,6 +104,10 @@ outputs:
 # Enable robots with support crawler scan
 enableRobotsTXT: true

+# 强制输出时压缩文件
+# Compress all files when output
+minify:
+
 #--------------------------------------
 # 菜单配置说明
 # identifier ： 唯一标识不可重复
@ -279,10 +296,18 @@ params:
    # 开启头像随鼠标转动动画
    # If true, the avatar will be rotated with the cursor.
    rotated: true
-
+  siteState: 
    # 是否在侧边栏显示文章、分类、标签信息
    # Posts / Categories / Tags in sidebar.
-  siteState: true
+    basic: true
+    # 站点访问信息
+    # Site information
+    statistic: 
+      enable: true
+      # 组件类型，可选值为： 51la, busuanzi
+      # 使用51la时需要注册账号：https://invite.51.la/1NUfGTS1?target=V6
+      # Plguin value is: 51la, busuzazi
+      plugin: 51la

  # 社交链接地址
  # 用法： `Key: 名称 || 链接地址 || 图标`
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@ -135,11 +135,16 @@ PostCommentTitle:
  other: Comments

 SiteInfoItems:
+  title: "Web Status"
  runTimes: "Running:"
  words: "Words:"
  readTimes: "ReadTime:"
  visitors: "Visitors:"
  pageViews: "Views:"
+  todayViews: "Today Views:"
+  yesterdayViews: "Yesterday Views:"
+  monthViews: "Month Views:"
+  totalViews: "Total Views"
  lastUpdate: "Last Update:"

 FooterPowerby:
--- a/i18n/zh-cn.yaml
+++ b/i18n/zh-cn.yaml
@ -136,11 +136,16 @@ PostCommentTitle:
  other: 评论交流

 SiteInfoItems:
+  title: "网站资讯"
  runTimes: "已运行："
  words: "总字数："
  readTimes: "阅读约："
  visitors: "总访客数："
  pageViews: "页面浏览："
+  todayViews: "今日访问："
+  yesterdayViews: "昨日访问："
+  monthViews: "本月访问："
+  totalViews: "总访问量："
  lastUpdate: "最后更新于："

 FooterPowerby:
--- a/layouts/partials/sidebar.html
+++ b/layouts/partials/sidebar.html
@ -34,7 +34,9 @@
   
  </div>

-  {{ partial "sidebar/siteinfo.html" . }}
+  {{- if .Site.Params.siteState.statistic.enable }}
+    {{- partial "sidebar/siteinfo.html" . }}
+  {{- end }}

  {{- if and .Site.Params.backTop.enable .Site.Params.backTop.sidebar }}
  <div class="sidebar-card-widget back-to-top-card">
--- a/layouts/partials/sidebar/overview.html
+++ b/layouts/partials/sidebar/overview.html
@ -8,7 +8,7 @@
  <div class="site-description" itemprop="description">{{ .Site.Params.description }}</div>
 </div>

-{{- if .Site.Params.siteState }}
+{{- if .Site.Params.siteState.basic }}
 <div class="site-state-wrap site-overview-item animated">
  <nav class="site-state">
    <div class="site-state-item site-state-posts">
--- a/layouts/partials/sidebar/siteinfo.html
+++ b/layouts/partials/sidebar/siteinfo.html
@ -2,22 +2,15 @@
 <div class="sidebar-card-widget">
  <div class="item-headline">
    <i class="fas fa-chart-line"></i>
-    <span>网站资讯</span>
+    <span>{{ T "SiteInfoItems.title" }}</span>
  </div>
  <div class="siteinfo">
    <div class="siteinfo-item">
      <div class="item-name"><i class="fa-solid fa-calendar-check"></i>{{ T "SiteInfoItems.runTimes" }}</div>
      <div class="item-count" id="runTimes" data-publishdate="{{ $scratch.Get "last" }}"></div>
    </div>
-    <div class="siteinfo-item">
-      <div class="item-name"><i class="fa fa-font"></i>{{ T "SiteInfoItems.words" }}</div>
-      <div class="item-count" id="wordsCount" data-count="{{ $scratch.Get "totalWords" }}"></div>
-    </div>
-    <div class="siteinfo-item">
-      <div class="item-name"><i class="fa fa-mug-hot"></i>{{ T "SiteInfoItems.readTimes" }}</div>
-      <div class="item-count" id="readTimes" data-times="{{ $scratch.Get "totalTimes" }}"></div>
-    </div>
-    {{ with .Site.Params.analytics.busuanzi }}
+    {{- if eq .Site.Params.siteState.statistic.plugin "busuanzi" }}
+      {{- with .Site.Params.analytics.busuanzi }}
      <div class="siteinfo-item">
        <div class="item-name">
          <i class="fas {{ .visitorsIcon }}"></i>{{ T "SiteInfoItems.visitors" }}
@ -30,7 +23,45 @@
        </div>
        <div class="item-count" id="busuanzi_value_site_pv"></div>
      </div>
-    {{ end }}
+      {{- 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="{{ .Site.Data.resources.analytics.laWidget }}"></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>
+    <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>
+    <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>
+    <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>
+    {{- end }}
+    <div class="siteinfo-item">
+      <div class="item-name"><i class="fa fa-font"></i>{{ T "SiteInfoItems.words" }}</div>
+      <div class="item-count" id="wordsCount" data-count="{{ $scratch.Get "totalWords" }}"></div>
+    </div>
+    <div class="siteinfo-item">
+      <div class="item-name"><i class="fa fa-mug-hot"></i>{{ T "SiteInfoItems.readTimes" }}</div>
+      <div class="item-count" id="readTimes" data-times="{{ $scratch.Get "totalTimes" }}"></div>
+    </div>
    <div class="siteinfo-item">
      <div class="item-name"><i class="fa fa-clock-rotate-left"></i>{{ T "SiteInfoItems.lastUpdate" }}</div>
      <div class="item-count" id="last-push-date" data-lastpushdate="{{ $scratch.Get "first" }}"></div>