💄 Support site information widget. close #30, #34

assets/css/_common/outline/sidebar/sidebar-card-widget.scss

@@ -16,11 +16,11 @@
     }
   }
 
-  .webinfo {
+  .siteinfo {
     font-size: $font-size-small;
     text-align: left;
 
-    .webinfo-item {
+    .siteinfo-item {
       display: flex;
       -webkit-box-align: center;
       align-items: center;

assets/js/next-boot.js

@@ -36,6 +36,8 @@ NexT.boot.refresh = function() {
   if (!NexT.CONFIG.page.isPage) return;
  
   NexT.utils.registerSidebarTOC();
+  NexT.utils.calSiteInfo();
+  
   NexT.utils.replacePostCRLink();
   NexT.utils.registerCopyCode();
   NexT.utils.registerPostReward();

assets/js/utils.js

@@ -23,6 +23,55 @@ HTMLElement.prototype.wrap = function(wrapper) {
 
 NexT.utils = {
 
+  calSiteInfo:() => {
+    const $runtimeCount = document.getElementById('runTimes');
+    if ($runtimeCount) {
+      const publishDate = $runtimeCount.getAttribute('data-publishDate');
+      $runtimeCount.innerText = NexT.utils.diffDate(publishDate) + NexT.CONFIG.i18n.ds_days;
+    }
+    const lastPushDate = document.getElementById('last-push-date');
+    if (lastPushDate) {
+      const pushStr = NexT.utils.diffDate(lastPushDate.getAttribute('data-lastPushDate'), true);
+      lastPushDate.innerHTML = pushStr;
+    }
+  },
+
+  diffDate: (d, more = false) => {
+    const dateNow = new Date()
+    const datePost = new Date(d)
+    const dateDiff = dateNow.getTime() - datePost.getTime()
+    const minute = 1000 * 60
+    const hour = minute * 60
+    const day = hour * 24
+    const month = day * 30
+
+    let result
+    if (more) {
+      const monthCount = dateDiff / month
+      const dayCount = dateDiff / day
+      const hourCount = dateDiff / hour
+      const minuteCount = dateDiff / minute
+
+      if (monthCount > 12) {
+        result = datePost.toLocaleDateString().replace(/\//g, '-')
+      } else if (monthCount >= 1) {
+        result = parseInt(monthCount) + NexT.CONFIG.i18n.ds_month
+      } else if (dayCount >= 1) {
+        result = parseInt(dayCount) + NexT.CONFIG.i18n.ds_day
+      } else if (hourCount >= 1) {
+        result = parseInt(hourCount) + NexT.CONFIG.i18n.ds_hour
+      } else if (minuteCount >= 1) {
+        result = parseInt(minuteCount) + NexT.CONFIG.i18n.ds_min
+      } else {
+        result = NexT.CONFIG.i18n.ds_just
+      }
+    } else {
+      result = parseInt(dateDiff / day)
+    }
+
+    return result
+  },
+
   checkDOMExist: function(selector) {
     return document.querySelector(selector) != null;
   },

i18n/en.yaml

@@ -135,9 +135,13 @@ PostCommentTitle:
   other: Comments
 
 VisitorsLabel:
-  other: Total Visitors
+  other: "Visitors: "
 PageViewsLabel:
-  other: Total Page Views
+  other: "Page Views: "
+WordsLabel:
+  other: "Words: "
+ReadTimesLabel:
+  other: "ReadTimes: "
 
 FooterPowerby:
   other: "Power by %s"

i18n/zh-cn.yaml

@@ -135,10 +135,13 @@ RewardBitcoin:
 PostCommentTitle:
   other: 评论交流
 
-VisitorsLabel:
+SiteInfoItems:
-  other: 总访客数：
+  runTimes: "已运行："
-PageViewsLabel:
+  words: "总字数："
-  other: 页面浏览：
+  readTimes: "耗时约："
+  visitors: "总访客数："
+  pageViews: "页面浏览："
+  lastUpdate: "最后更新于："
 
 FooterPowerby:
   other: 由 %s 强力驱动
@@ -150,4 +153,12 @@ SearchEmpty:
 SearchHits:
   hits: "找到 ${hits} 个搜索结果"
 SearchHitsTime:
-  other: "找到 ${hits} 个搜索结果（用时 ${time} 毫秒）"
+  other: "找到 ${hits} 个搜索结果（用时 ${time} 毫秒）"
+
+DateSuffix:
+  days: " 天"
+  month: " 个月前"
+  day: " 天前"
+  hour: " 小时前"
+  min: " 分钟前"
+  just: "刚刚"

layouts/partials/_funs/cal_siteinfo.html

@@ -0,0 +1,16 @@
+{{ $scratch := newScratch }}
+{{ $pages := (where .Page.Site.RegularPages "Section" "in" .Site.Params.mainSections).ByLastmod.Reverse }}
+
+{{ range $pages }}
+  {{ $scratch.Add "totalWords" .WordCount }}
+  {{ $scratch.Add "totalTimes" .ReadingTime }}
+{{ end }}
+
+{{ range first 1 $pages }}
+  {{ $scratch.Set "first" (time.Format .Site.Params.timeFormat .Date) }}
+{{ end }}
+{{ range last 1 $pages }}
+  {{ $scratch.Set "last" (time.Format .Site.Params.timeFormat .Date) }}
+{{ end }}
+
+{{ return $scratch }}

layouts/partials/init.html

@@ -40,6 +40,12 @@
     "empty"       (T "SearchEmpty")
     "hits_time"   (T "SearchHitsTime")
     "hits"        (T "SearchHits")
+    "ds_days"    (T "DateSuffix.days")
+    "ds_month"    (T "DateSuffix.month")
+    "ds_day"      (T "DateSuffix.day")
+    "ds_hour"     (T "DateSuffix.hour")
+    "ds_min"      (T "DateSuffix.min")
+    "ds_just"     (T "DateSuffix.just")
   )
 }}
 

layouts/partials/sidebar.html

@@ -34,7 +34,7 @@
    
   </div>
 
-  {{ partial "sidebar/webinfo.html" . }}
+  {{ partial "sidebar/siteinfo.html" . }}
 
   {{- if and .Site.Params.backTop.enable .Site.Params.backTop.sidebar }}
   <div class="sidebar-card-widget back-to-top-card">

layouts/partials/sidebar/siteinfo.html

@@ -0,0 +1,48 @@
+{{ $scratch := partialCached "_funs/cal_siteinfo.html" . }}
+<div class="sidebar-card-widget">
+  <div class="item-headline">
+    <i class="fas fa-chart-line"></i>
+    <span>网站资讯</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">
+        {{ $words := $scratch.Get "totalWords" }}
+        {{ if gt $words 10000 }}
+          {{ div $words 10000.0 | lang.FormatNumber 2 }}w
+        {{ else if gt $words 1000 }}
+          {{ div $words 1000.0 | lang.FormatNumber 2 }}k
+        {{ else }}
+          {{ $words }}
+        {{ end }}
+      </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">{{ $scratch.Get "totalTimes" }}min</div>
+    </div>
+    {{ with .Site.Params.analytics.busuanzi }}
+    <div class="siteinfo-item">
+      <div class="item-name">
+        <i class="fas {{ .visitorsIcon }}"></i>{{ T "SiteInfoItems.visitors" }}
+      </div>
+      <div class="item-count" id="busuanzi_value_site_uv"></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>
+    {{ end }}
+    <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>
+    </div>
+  </div>
+</div>

layouts/partials/sidebar/webinfo.html

@@ -1,34 +0,0 @@
-<div class="sidebar-card-widget">
-  <div class="item-headline">
-    <i class="fas fa-chart-line"></i>
-    <span>网站资讯</span>
-  </div>
-  <div class="webinfo">
-    <!-- <div class="webinfo-item">
-      <div class="item-name">已运行时间 :</div>
-      <div class="item-count" id="runtimeshow" data-publishdate="2021-07-28T14:00:00.000Z">409 天</div>
-    </div>
-    <div class="webinfo-item">
-      <div class="item-name">本站总字数 :</div>
-      <div class="item-count">21.4k</div>
-    </div> -->
-    {{ with .Site.Params.analytics.busuanzi }}
-    <div class="webinfo-item">
-      <div class="item-name">
-        <i class="fas {{ .visitorsIcon }}"></i>{{ T "VisitorsLabel" }}
-      </div>
-      <div class="item-count" id="busuanzi_value_site_uv"></div>
-    </div>
-    <div class="webinfo-item">
-      <div class="item-name">
-        <i class="fas {{ .viewsIcon }}"></i>{{ T "PageViewsLabel" }}
-      </div>
-      <div class="item-count" id="busuanzi_value_site_pv"></div>
-    </div>
-    {{ end }}
-    <!-- <div class="webinfo-item">
-      <div class="item-name">最后更新时间 :</div>
-      <div class="item-count" id="last-push-date" data-lastpushdate="2022-05-13T03:49:57.728Z">4 个月前</div>
-    </div> -->
-  </div>
-</div>