improvements: 代碼名全大寫

improvements: 補全card-categories和card-archives的 '查看更多‘鏈接 close #337
fix: 修復comments沒設置時，報Unexpected token ')'的bugs close #344
improvements: 優化js和html
fix: 修復toc 滾動百分比不準的Bugs

source/css/_highlight/highlight.styl

@@ -123,7 +123,7 @@ blockquote
     .code-lang
       position: absolute
       left: .7rem
-      text-transform: capitalize
+      text-transform: uppercase
       font-weight: bold
       font-size: 1.15em
 

source/css/_highlight/highlight/diff.styl

@@ -1,4 +1,3 @@
-// For diff highlight
 figure.highlight
   table
     &::-webkit-scrollbar-thumb

source/css/_highlight/theme.styl

@@ -116,3 +116,4 @@ if $highlight_theme == false
     color: $highlight-foreground,
     bg-color: darken($highlight-background, 5)
   }
+  $highlight-scrollbar = darken($highlight-background, 8)

source/css/_layout/aside.styl

@@ -87,6 +87,10 @@
     span
       margin-left: .5rem
 
+    & + div,
+    & + ul
+      padding: .3rem 0 0
+
   .sticky_layout
     +minWidth900()
       position: sticky
@@ -102,8 +106,6 @@
         color: $text-hover !important
 
   .aside-list
-    margin: 10px 0 -15px
-
     & > span
       display: block
       margin-bottom: .5rem
@@ -121,7 +123,7 @@
         border-bottom: 1px dashed #f5f5f5
 
       &:last-child
-        margin-bottom: .3rem
+        padding-bottom: 0
 
       .thumbnail
         overflow: hidden
@@ -173,7 +175,6 @@
   .card-archives ul.card-archive-list,
   .card-categories ul.card-category-list
     margin: 0
-    padding: .2rem 0 0
     list-style: none
 
   .card-archives ul.card-archive-list > .card-archive-list-item,
@@ -241,12 +242,10 @@
 
   .card-webinfo
     .webinfo
-      padding: .2rem .5rem
-
       .webinfo-item
         display: flex
         align-items: center
-        padding: 4px 0 0
+        padding: .1rem .5rem 0
 
         div
           &:first-child

source/css/_layout/head.styl

@@ -188,13 +188,13 @@ _:future,
     padding: 0 16px
 
   &:not(.fixed)
-    .menus
+    #menus
       padding-right: 0 !important
 
   #blog_name
     flex: 1
 
-  .toggle-menu
+  #toggle-menu
     display: none
     padding: .1rem 0 0 .3rem
     vertical-align: top
@@ -218,7 +218,7 @@ _:future,
 
     a,
     #site-name,
-    .toggle-menu
+    #toggle-menu
       color: var(--font-color)
       text-shadow: none
 
@@ -302,7 +302,7 @@ _:future,
             text-shadow: none
 
   &.hide-menu
-    .toggle-menu
+    #toggle-menu
       display: inline-block !important
 
       .site-page

source/css/_layout/relatedposts.styl

@@ -1,53 +1,54 @@
 .relatedPosts
   margin-top: 1rem
 
-  .relatedPosts_headline
+  & > .headline
     margin-bottom: 5px
     font-weight: 700
     font-size: 1.43em
 
-  .relatedPosts_item
-    position: relative
-    display: inline-block
-    overflow: hidden
-    margin: 3px
-    width: calc(33.333% - 6px)
-    height: 200px
-    background: $dark-black
-    vertical-align: bottom
+  & > .relatedPosts-list
+    & > div
+      position: relative
+      display: inline-block
+      overflow: hidden
+      margin: 3px
+      width: calc(33.333% - 6px)
+      height: 200px
+      background: $dark-black
+      vertical-align: bottom
 
-    &:hover
-      .relatedPosts_cover
-        opacity: .8
-        transform: scale(1.1)
+      &:hover
+        .cover
+          opacity: .8
+          transform: scale(1.1)
 
-    +maxWidth768()
-      margin: 2px
-      width: calc(50% - 4px)
-      height: 150px
+      +maxWidth768()
+        margin: 2px
+        width: calc(50% - 4px)
+        height: 150px
 
-    +maxWidth600()
-      width: calc(100% - 4px)
+      +maxWidth600()
+        width: calc(100% - 4px)
 
-  .relatedPosts_cover
-    width: 100%
-    height: 100%
-    opacity: .4
-    transition: all .6s
-    object-fit: cover
+    .cover
+      width: 100%
+      height: 100%
+      opacity: .4
+      transition: all .6s
+      object-fit: cover
 
-  .relatedPosts_main
-    position: absolute
-    top: 50%
-    padding: 0 1rem
-    width: 100%
-    transform: translate(0, -50%)
+    .content
+      position: absolute
+      top: 50%
+      padding: 0 1rem
+      width: 100%
+      transform: translate(0, -50%)
 
-    .relatedPosts_date
-      color: var(--light-grey)
-      font-size: 90%
+      .date
+        color: var(--light-grey)
+        font-size: 90%
 
-    .relatedPosts_title
-      @extend .limit-more-line
-      color: var(--white)
-      -webkit-line-clamp: 2
+      .title
+        @extend .limit-more-line
+        color: var(--white)
+        -webkit-line-clamp: 2

source/css/_mode/darkmode.styl

@@ -123,7 +123,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
     .gist,
     .aplayer
       filter: brightness(.7)
-    
+
     #aside_content .aside-list > .aside-list-item:not(:last-child)
       border-bottom: 1px dashed alpha(#FFFFFF, .1)
 

source/js/third-party/fireworks.js

@@ -9,7 +9,7 @@ if (canvasEl) {
   var tap = 'mousedown'
   var colors = ['#FF1461', '#18FF92', '#5A87FF', '#FBF38C']
 
-  var setCanvasSize = debounce(function () {
+  var setCanvasSize = btf.debounce(function () {
     canvasEl.width = window.innerWidth
     canvasEl.height = window.innerHeight
     canvasEl.style.width = window.innerWidth + 'px'

source/js/tw_cn.js

@@ -50,14 +50,14 @@
       translateButtonObject.innerHTML = msgToTraditionalChinese
       saveToLocal.set(targetEncodingCookie, targetEncoding, 2)
       translateBody()
-      if (isSnackbar) snackbarShow(snackbarData.cht_to_chs)
+      if (isSnackbar) btf.snackbarShow(snackbarData.cht_to_chs)
     } else if (targetEncoding === 2) {
       currentEncoding = 2
       targetEncoding = 1
       translateButtonObject.innerHTML = msgToSimplifiedChinese
       saveToLocal.set(targetEncodingCookie, targetEncoding, 2)
       translateBody()
-      if (isSnackbar) snackbarShow(snackbarData.chs_to_cht)
+      if (isSnackbar) btf.snackbarShow(snackbarData.chs_to_cht)
     }
   }
   function JTPYStr () {

source/js/utils.js

@@ -1,134 +1,136 @@
 /* eslint-disable no-unused-vars */
 
-function debounce (func, wait, immediate) {
-  let timeout
-  return function () {
-    const context = this
-    const args = arguments
-    const later = function () {
-      timeout = null
-      if (!immediate) func.apply(context, args)
-    }
-    const callNow = immediate && !timeout
-    clearTimeout(timeout)
-    timeout = setTimeout(later, wait)
-    if (callNow) func.apply(context, args)
-  }
-}
-
-function throttle (func, wait, options) {
-  let timeout, context, args
-  let previous = 0
-  if (!options) options = {}
-
-  const later = function () {
-    previous = options.leading === false ? 0 : new Date().getTime()
-    timeout = null
-    func.apply(context, args)
-    if (!timeout) context = args = null
-  }
-
-  const throttled = function () {
-    const now = new Date().getTime()
-    if (!previous && options.leading === false) previous = now
-    const remaining = wait - (now - previous)
-    context = this
-    args = arguments
-    if (remaining <= 0 || remaining > wait) {
-      if (timeout) {
-        clearTimeout(timeout)
+var btf = {
+  debounce: function (func, wait, immediate) {
+    let timeout
+    return function () {
+      const context = this
+      const args = arguments
+      const later = function () {
         timeout = null
+        if (!immediate) func.apply(context, args)
       }
-      previous = now
+      const callNow = immediate && !timeout
+      clearTimeout(timeout)
+      timeout = setTimeout(later, wait)
+      if (callNow) func.apply(context, args)
+    }
+  },
+
+  throttle: function (func, wait, options) {
+    let timeout, context, args
+    let previous = 0
+    if (!options) options = {}
+
+    const later = function () {
+      previous = options.leading === false ? 0 : new Date().getTime()
+      timeout = null
       func.apply(context, args)
       if (!timeout) context = args = null
-    } else if (!timeout && options.trailing !== false) {
-      timeout = setTimeout(later, remaining)
     }
-  }
 
-  return throttled
-}
-
-function sidebarPaddingR () {
-  const innerWidth = window.innerWidth
-  const clientWidth = document.body.clientWidth
-  const paddingRight = innerWidth - clientWidth
-  if (innerWidth !== clientWidth) {
-    $('body').css('padding-right', paddingRight)
-  }
-}
-
-function scrollToDest (name) {
-  const scrollOffset = $(name).offset().top
-  let offset
-  if ($(window).scrollTop() > scrollOffset) {
-    offset = 65
-  } else {
-    offset = 0
-  }
-  $('body,html').animate({
-    scrollTop: scrollOffset - offset
-  })
-}
-
-function snackbarShow (text, showAction, duration) {
-  const sa = (typeof showAction !== 'undefined') ? showAction : false
-  const dur = (typeof duration !== 'undefined') ? duration : 2000
-  const position = GLOBAL_CONFIG.Snackbar.position
-  const bg = document.documentElement.getAttribute('data-theme') === 'light' ? GLOBAL_CONFIG.Snackbar.bgLight : GLOBAL_CONFIG.Snackbar.bgDark
-  Snackbar.show({
-    text: text,
-    backgroundColor: bg,
-    showAction: sa,
-    duration: dur,
-    pos: position
-  })
-}
-
-const initJustifiedGallery = function (selector) {
-  selector.each(function (i, o) {
-    if ($(this).is(':visible')) {
-      $(this).justifiedGallery({
-        rowHeight: 220,
-        margins: 4
-      })
-    }
-  })
-}
-
-const diffDate = (d, more = false) => {
-  const dateNow = new Date()
-  const datePost = new Date(d)
-  const dateDiff = dateNow.getTime() - datePost.getTime()
-  const dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000))
-  let result
-  if (more) {
-    if (dateDiff <= 3600000) { // < 1 hour
-      result = GLOBAL_CONFIG.date_suffix.one_hour
-    } else if (dateDiff < 3600000 * 24) { // 1 hour < x < 24 hours
-      result = Math.floor(dateDiff / 3600000) + ' ' + GLOBAL_CONFIG.date_suffix.hours
-    } else if (dayDiff >= 1 || dayDiff < 365) { // 1 day < x < 365 days
-      result = dayDiff + ' ' + GLOBAL_CONFIG.date_suffix.day
-    } else { // > 365 days
-      result = d.toLocaleDateString().replace(/\//g, '-')
-    }
-  } else {
-    result = dayDiff
-  }
-  return result
-}
-
-const loadComment = (dom, callback) => {
-  if ('IntersectionObserver' in window) {
-    const observerItem = new IntersectionObserver((entries) => {
-      if (entries[0].isIntersecting) {
-        callback()
-        observerItem.disconnect()
+    const throttled = function () {
+      const now = new Date().getTime()
+      if (!previous && options.leading === false) previous = now
+      const remaining = wait - (now - previous)
+      context = this
+      args = arguments
+      if (remaining <= 0 || remaining > wait) {
+        if (timeout) {
+          clearTimeout(timeout)
+          timeout = null
+        }
+        previous = now
+        func.apply(context, args)
+        if (!timeout) context = args = null
+      } else if (!timeout && options.trailing !== false) {
+        timeout = setTimeout(later, remaining)
       }
-    }, { threshold: [0] })
-    observerItem.observe(dom)
-  } else {
-    callback()
+    }
+
+    return throttled
+  },
+
+  sidebarPaddingR: () => {
+    const innerWidth = window.innerWidth
+    const clientWidth = document.body.clientWidth
+    const paddingRight = innerWidth - clientWidth
+    if (innerWidth !== clientWidth) {
+      $('body').css('padding-right', paddingRight)
+    }
+  },
+
+  scrollToDest: name => {
+    const scrollOffset = $(name).offset().top
+    let offset
+    if ($(window).scrollTop() > scrollOffset) {
+      offset = 65
+    } else {
+      offset = 0
+    }
+    $('body,html').animate({
+      scrollTop: scrollOffset - offset
+    })
+  },
+
+  snackbarShow: (text, showAction, duration) => {
+    const sa = (typeof showAction !== 'undefined') ? showAction : false
+    const dur = (typeof duration !== 'undefined') ? duration : 2000
+    const position = GLOBAL_CONFIG.Snackbar.position
+    const bg = document.documentElement.getAttribute('data-theme') === 'light' ? GLOBAL_CONFIG.Snackbar.bgLight : GLOBAL_CONFIG.Snackbar.bgDark
+    Snackbar.show({
+      text: text,
+      backgroundColor: bg,
+      showAction: sa,
+      duration: dur,
+      pos: position
+    })
+  },
+
+  initJustifiedGallery: function (selector) {
+    selector.each(function (i, o) {
+      if ($(this).is(':visible')) {
+        $(this).justifiedGallery({
+          rowHeight: 220,
+          margins: 4
+        })
+      }
+    })
+  },
+
+  diffDate: (d, more = false) => {
+    const dateNow = new Date()
+    const datePost = new Date(d)
+    const dateDiff = dateNow.getTime() - datePost.getTime()
+    const dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000))
+    let result
+    if (more) {
+      if (dateDiff <= 3600000) { // < 1 hour
+        result = GLOBAL_CONFIG.date_suffix.one_hour
+      } else if (dateDiff < 3600000 * 24) { // 1 hour < x < 24 hours
+        result = Math.floor(dateDiff / 3600000) + ' ' + GLOBAL_CONFIG.date_suffix.hours
+      } else if (dayDiff >= 1 || dayDiff < 365) { // 1 day < x < 365 days
+        result = dayDiff + ' ' + GLOBAL_CONFIG.date_suffix.day
+      } else { // > 365 days
+        result = d.toLocaleDateString().replace(/\//g, '-')
+      }
+    } else {
+      result = dayDiff
+    }
+    return result
+  },
+
+  loadComment: (dom, callback) => {
+    if ('IntersectionObserver' in window) {
+      const observerItem = new IntersectionObserver((entries) => {
+        if (entries[0].isIntersecting) {
+          callback()
+          observerItem.disconnect()
+        }
+      }, { threshold: [0] })
+      observerItem.observe(dom)
+    } else {
+      callback()
+    }
   }
 }