⚡ Improve the site information display things.

assets/js/utils.js

@@ -23,53 +23,102 @@ HTMLElement.prototype.wrap = function(wrapper) {
 
 NexT.utils = {
 
-  calSiteInfo:() => {
+  calSiteInfo: function() {
-    const $runtimeCount = document.getElementById('runTimes');
+    const runtimeCount = document.getElementById('runTimes');
-    if ($runtimeCount) {
+    if (runtimeCount) {
-      const publishDate = $runtimeCount.getAttribute('data-publishDate');
+      const publishDate = runtimeCount.getAttribute('data-publishDate');
-      $runtimeCount.innerText = NexT.utils.diffDate(publishDate) + NexT.CONFIG.i18n.ds_days;
+      const runTimes = NexT.utils.diffDate(publishDate, 2);
+      runtimeCount.innerText = runTimes;
     }
+
+    const wordsCount = document.getElementById('wordsCount');
+    if (wordsCount) {
+      const words = wordsCount.getAttribute('data-count');
+      let wordsLabel;
+      if (words > 10000) {
+        wordsLabel = Math.floor(words / 10000) + ' w';
+      } else if (words > 1000) {
+        wordsLabel = Math.floor(words / 1000) + ' k';
+      } else {
+        wordsLabel = Math.floor(words / 1000);
+      }
+      wordsCount.innerText = wordsLabel;
+    }
+
+    const readTimes = document.getElementById('readTimes');
+    if (readTimes) {
+      const times = readTimes.getAttribute('data-times');
+      
+      const hour = 60;
+      const day = hour * 24;
+
+      const daysCount = times / day;
+      const hoursCount = times / hour;
+
+      let timesLabel;
+      if (daysCount >= 1) {
+        timesLabel = parseInt(daysCount) + NexT.CONFIG.i18n.ds_days + Math.floor(hoursCount) + NexT.CONFIG.i18n.ds_hours;
+      } else if (hoursCount >= 1) {
+        const hours = parseInt(hoursCount);
+        timesLabel = hours + NexT.CONFIG.i18n.ds_hours + (times - hours * hour) + NexT.CONFIG.i18n.ds_mins;
+      } else {
+        timesLabel = times + NexT.CONFIG.i18n.ds_mins;
+      }
+
+      readTimes.innerText = timesLabel;
+    }
+
     const lastPushDate = document.getElementById('last-push-date');
     if (lastPushDate) {
-      const pushStr = NexT.utils.diffDate(lastPushDate.getAttribute('data-lastPushDate'), true);
+      const pushDateVal = NexT.utils.diffDate(lastPushDate.getAttribute('data-lastPushDate'), 1);
-      lastPushDate.innerHTML = pushStr;
+      lastPushDate.innerText = pushDateVal;
     }
   },
 
-  diffDate: (d, more = false) => {
+  diffDate: function(date, mode = 0) {
-    const dateNow = new Date()
+    const dateNow = new Date();
-    const datePost = new Date(d)
+    const datePost = new Date(date);
-    const dateDiff = dateNow.getTime() - datePost.getTime()
+    const dateDiff = dateNow.getTime() - datePost.getTime();
-    const minute = 1000 * 60
+    const minute = 1000 * 60;
-    const hour = minute * 60
+    const hour = minute * 60;
-    const day = hour * 24
+    const day = hour * 24;
-    const month = day * 30
+    const month = day * 30;
+    const year = month * 12;
 
-    let result
+    let result;
-    if (more) {
+    if (mode == 1) {
-      const monthCount = dateDiff / month
+      const monthCount = dateDiff / month;
-      const dayCount = dateDiff / day
+      const dayCount = dateDiff / day;
-      const hourCount = dateDiff / hour
+      const hourCount = dateDiff / hour;
-      const minuteCount = dateDiff / minute
+      const minuteCount = dateDiff / minute;
 
       if (monthCount > 12) {
-        result = datePost.toLocaleDateString().replace(/\//g, '-')
+        result = datePost.toLocaleDateString().replace(/\//g, '-');
       } else if (monthCount >= 1) {
-        result = parseInt(monthCount) + NexT.CONFIG.i18n.ds_month
+        result = parseInt(monthCount) + NexT.CONFIG.i18n.ds_month;
       } else if (dayCount >= 1) {
-        result = parseInt(dayCount) + NexT.CONFIG.i18n.ds_day
+        result = parseInt(dayCount) + NexT.CONFIG.i18n.ds_day;
       } else if (hourCount >= 1) {
-        result = parseInt(hourCount) + NexT.CONFIG.i18n.ds_hour
+        result = parseInt(hourCount) + NexT.CONFIG.i18n.ds_hour;
       } else if (minuteCount >= 1) {
-        result = parseInt(minuteCount) + NexT.CONFIG.i18n.ds_min
+        result = parseInt(minuteCount) + NexT.CONFIG.i18n.ds_min;
       } else {
-        result = NexT.CONFIG.i18n.ds_just
+        result = NexT.CONFIG.i18n.ds_just;
+      }
+    } else if (mode == 2) {      
+      const yearCount = parseInt(dateDiff / year);
+      if (yearCount >= 1) {
+        const dayCount = parseInt(dateDiff - (yearCount * year))/day;
+        result = yearCount + NexT.CONFIG.i18n.ds_years + dayCount + NexT.CONFIG.i18n.ds_days;
+      } else {
+        const dayCount = parseInt(dateDiff/day);
+        result = dayCount + NexT.CONFIG.i18n.ds_days;
       }      
     } else {
-      result = parseInt(dateDiff / day)
+      result = parseInt(dateDiff / day);
     }
 
-    return result
+    return result;
   },
 
   checkDOMExist: function(selector) {

i18n/en.yaml

@@ -134,14 +134,13 @@ RewardBitcoin:
 PostCommentTitle:
   other: Comments
 
-VisitorsLabel:
+SiteInfoItems:
-  other: "Visitors: "
+  runTimes: "Running:"
-PageViewsLabel:
+  words: "Words:"
-  other: "Page Views: "
+  readTimes: "ReadTime:"
-WordsLabel:
+  visitors: "Visitors:"
-  other: "Words: "
+  pageViews: "Views:"
-ReadTimesLabel:
+  lastUpdate: "Last Update:"
-  other: "ReadTimes: "
 
 FooterPowerby:
   other: "Power by %s"
@@ -154,3 +153,14 @@ SearchHits:
   hits: "${hits} results found"
 SearchHitsTime:
   other: "${hits} results found in ${time} ms"
+
+DateSuffix:
+  years: " Year "
+  days: " Day "
+  hours: " Hour "
+  mins: " Min"
+  month: " Month Ago"
+  day: " Day Ago"
+  hour: " Hour Ago"
+  min: " Min Ago"
+  just: "Just"

i18n/zh-cn.yaml

@@ -156,7 +156,10 @@ SearchHitsTime:
   other: "找到 ${hits} 个搜索结果（用时 ${time} 毫秒）"
 
 DateSuffix:
-  days: " 天"
+  years: " 年 "
+  days: " 天 "
+  hours: " 小时 "
+  mins: " 分钟"
   month: " 个月前"
   day: " 天前"
   hour: " 小时前"

layouts/partials/init.html

@@ -40,7 +40,10 @@
     "empty"       (T "SearchEmpty")
     "hits_time"   (T "SearchHitsTime")
     "hits"        (T "SearchHits")
+    "ds_years"    (T "DateSuffix.years")
     "ds_days"     (T "DateSuffix.days")
+    "ds_hours"    (T "DateSuffix.hours")
+    "ds_mins"     (T "DateSuffix.mins")
     "ds_month"    (T "DateSuffix.month")
     "ds_day"      (T "DateSuffix.day")
     "ds_hour"     (T "DateSuffix.hour")

layouts/partials/sidebar/siteinfo.html

@@ -11,20 +11,11 @@
     </div>
     <div class="siteinfo-item">
       <div class="item-name"><i class="fa fa-font"></i>{{ T "SiteInfoItems.words" }}</div>
-      <div class="item-count">
+      <div class="item-count" id="wordsCount" data-count="{{ $scratch.Get "totalWords" }}"></div>
-        {{ $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 class="item-count" id="readTimes" data-times="{{ $scratch.Get "totalTimes" }}"></div>
     </div>
     {{ with .Site.Params.analytics.busuanzi }}
     <div class="siteinfo-item">