✨ feat: aside widget 增加部分參數可配置

✨ feat: aside widget的Categories，Tags，post,Archives可配置limit
✨ feat: 整合公告欄配置到aside去
🐛 fix: 修復當flink.yml內容為空時，報錯的bug
💄 fix: 修復darkmode下 aside 查看更多文字顏色太淺的bug

_config.yml

@@ -67,7 +67,7 @@ algolia_search:
   labels:
     input_placeholder: Search for Posts
     hits_empty: "We didn't find any results for the search: ${query}" # if there are no result
-    hits_stats: "${hits} results found in ${time} ms"
+    hits_stats: '${hits} results found in ${time} ms'
 
 # Local search
 # Please see doc for more details: https://docs.jerryc.me/config.html#本地搜索
@@ -155,7 +155,7 @@ lodding_bg:
 # A simple 404 page
 error_404:
   enable: false
-  subtitle: "Page Not Found"
+  subtitle: 'Page Not Found'
   background:
 
 post_meta:
@@ -425,7 +425,7 @@ canvas_ribbon_piao:
 # https://github.com/hustcc/canvas-nest.js
 canvas_nest:
   enable: false
-  color: "0,0,255" #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
+  color: '0,0,255' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
   opacity: 0.7 # the opacity of line (0~1), default: 0.5.
   zIndex: -1 # z-index property of the background, default: -1.
   count: 99 # the number of lines, default: 99.
@@ -464,7 +464,7 @@ display_mode: light
 beautify:
   enable: false
   title-prefix-icon: '\f0c1'
-  title-prefix-icon-color: "#F47466"
+  title-prefix-icon-color: '#F47466'
 
 # 全局字體
 font:
@@ -518,17 +518,26 @@ aside:
   mobile: true # 手機頁面（ 顯示寬度 < 768px ）是否顯示aside內容
   position: right # left or right
   card_author: true
-  card_announcement: true
-  card_recent_post: true
-  card_categories: true
-  card_tags: true
-  card_archives: true
+  card_announcement:
+    enable: true
+    content: This is my Blog
+  card_recent_post:
+    enable: true
+    limit: 5 # if set 0 will show all
+  card_categories:
+    enable: true
+    limit: 8 # if set 0 will show all
+  card_tags:
+    enable: true
+    limit: 40 # if set 0 will show all
+  card_archives:
+    enable: true
+    type: monthly # yearly or monthly
+    format: MMMM YYYY # eg: YYYY年MM月
+    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
+    limit: 8 # if set 0 will show all
   card_webinfo: true
 
-# 網站公告
-announcement:
-  content: 感謝訪問本站，若喜歡請收藏 ^_^
-
 # busuanzi count for PV / UV in site
 # 訪問人數
 busuanzi:
@@ -555,11 +564,11 @@ translate:
   #延遲時間,若不在前, 要設定延遲翻譯時間, 如100表示100ms,默認為0
   translateDelay: 0
   #博客網址
-  cookieDomain: "https://xxx/"
+  cookieDomain: 'https://xxx/'
   #當文字是簡體時，按鈕顯示的文字
-  msgToTraditionalChinese: "繁"
+  msgToTraditionalChinese: '繁'
   #當文字是繁體時，按鈕顯示的文字
-  msgToSimplifiedChinese: "簡"
+  msgToSimplifiedChinese: '簡'
 
 #閲讀模式
 readmode:
@@ -598,8 +607,8 @@ fancybox:
 snackbar:
   enable: false
   position: bottom-left
-  bg_light: "#49b1f5" #light mode時彈窗背景
-  bg_dark: "#2d3035" #dark mode時彈窗背景
+  bg_light: '#49b1f5' #light mode時彈窗背景
+  bg_dark: '#2d3035' #dark mode時彈窗背景
 
 #百度推送
 baidu_push:

languages/default.yml

@@ -69,6 +69,7 @@ aside:
     site_wordcount: Total Count
     site_uv_name: UV
     site_pv_name: PV
+  more_button: More
 
 donate: Donate
 share: Share

languages/en.yml

@@ -69,6 +69,7 @@ aside:
     site_wordcount: Total Count
     site_uv_name: UV
     site_pv_name: PV
+  more_button: More
 
 donate: Donate
 share: Share

languages/zh-CN.yml

@@ -71,6 +71,7 @@ aside:
     site_wordcount: 本站总字数
     site_uv_name: 本站访客数
     site_pv_name: 本站总访问量
+  more_button: 查看更多
 
 donate: 打赏
 share: 分享

languages/zh-TW.yml

@@ -71,6 +71,7 @@ aside:
     site_wordcount: 本站總字數
     site_uv_name: 本站訪客數
     site_pv_name: 本站總訪問量
+  more_button: 查看更多
 
 donate: 打賞
 share: 分享

layout/flink.pug

@@ -1,18 +1,19 @@
 #page
   .flink#article-container
-    each i in site.data.link
-      h2= i.class_name
-      .post-cards
-        .md-links
-          each item in i.link_list
-            .md-links-item
-              a(href=item.link  title=item.name target="_blank")
-                if theme.lazyload.enable
-                  img.lazyload(data-src=item.avatar onerror=`this.onerror=null;this.src='` + url_for(theme.lodding_bg.flink) + `'` alt=item.name )
-                else
-                  img(src=item.avatar onerror=`this.onerror=null;this.src='` + url_for(theme.lodding_bg.flink) + `'` alt=item.name )
-                .md-links-title= item.name 
-                .md-links-des= item.descr
+    if site.data.link
+      each i in site.data.link
+        h2= i.class_name
+        .post-cards
+          .md-links
+            each item in i.link_list
+              .md-links-item
+                a(href=item.link  title=item.name target="_blank")
+                  if theme.lazyload.enable
+                    img.lazyload(data-src=item.avatar onerror=`this.onerror=null;this.src='` + url_for(theme.lodding_bg.flink) + `'` alt=item.name )
+                  else
+                    img(src=item.avatar onerror=`this.onerror=null;this.src='` + url_for(theme.lodding_bg.flink) + `'` alt=item.name )
+                  .md-links-title= item.name 
+                  .md-links-des= item.descr
     != page.content
   if page.comments !== false
     include includes/comments/index.pug

layout/includes/widget/card_announcement.pug

@@ -3,4 +3,4 @@
     .item-headline
       i.fa.fa-bullhorn.card-announcement-animation(aria-hidden="true")
       span= _p('aside.card_announcement')
-    .announcement_content!= theme.announcement.content
+    .announcement_content!= theme.aside.card_announcement.content

layout/includes/widget/card_archives.pug

@@ -3,4 +3,9 @@
     .item-headline
       i.fa.fa-archive(aria-hidden="true")
       span= _p('aside.card_archives')
-    != list_archives({type:'monthly',format: 'YYYY年MM月'})
+    
+    - let type = theme.aside.card_archives.type || 'monthly'
+    - let format = theme.aside.card_archives.format || 'MMMM YYYY'
+    - let order = theme.aside.card_archives.order || -1
+    - let limit = theme.aside.card_archives.limit === 0 ? 0 : theme.aside.card_archives.limit || 8
+    != aside_archives({ type:type, format: format, order: order, limit: limit })

layout/includes/widget/card_categories.pug

@@ -4,20 +4,6 @@ if site.categories.length
         .item-headline
           i.fa.fa-folder-open(aria-hidden="true")
           span= _p('aside.card_categories')
-        ul.aside-category-item        
-          mixin displayCategories(parent = undefined) 
-            - site.categories.find({ parent }).sort("name").each(function(category) {
-                - var childCount = site.categories.find({ parent: category._id }).count();              
-                li.aside-category-list
-                  a.aside-category-list_link(href=url_for(category.path))
-                    span.aside-category-list_name= category.name
-                    span.aside-category-list_length= category.length
-                  
-                if childCount > 0
-                  ul.aside-category-item.child
-                    +displayCategories(category._id)
-            - })
-
-          +displayCategories()
+        !=aside_categories({ limit: theme.aside.card_categories.limit === 0 ? 0 : theme.aside.card_categories.limit || 8 })
 
   

layout/includes/widget/card_recent_post.pug

@@ -4,7 +4,8 @@
       i.fa.fa-history(aria-hidden="true")
       span= _p('aside.card_recent_post')
     .aside-recent-item
-      - site.posts.sort('date', -1).limit(5).each(function(article){
+      - var postLimit = theme.aside.card_recent_post.limit === 0 ? site.posts.length : theme.aside.card_recent_post.limit || 5
+      - site.posts.sort('date', -1).limit(postLimit).each(function(article){
         .aside-recent-post
           - var link = article.link || article.path
           - var title = article.title || _p('no_title')

layout/includes/widget/card_tags.pug

@@ -4,4 +4,6 @@ if site.tags.length
       .item-headline
         i.fa.fa-tags(aria-hidden="true")
         span= _p('aside.card_tags')
-      .card-tag-cloud!= tagcloud({min_font: 16, max_font: 24, amount: 200, color: true, start_color: '#999', end_color: '#99a9bf'})
+      
+      - let tagLimit = theme.aside.card_tags.limit === 0 ? 0 : theme.aside.card_tags.limit || 40
+      .card-tag-cloud!= tagcloud({min_font: 16, max_font: 24, amount: tagLimit , color: true, start_color: '#999', end_color: '#99a9bf'})

layout/includes/widget/index.pug

@@ -3,17 +3,17 @@ if theme.aside.enable
     #aside_content.aside_content
       if theme.aside.card_author
         !=partial('includes/widget/card_author', {}, {cache:theme.fragment_cache})
-      if theme.aside.card_announcement
+      if theme.aside.card_announcement.enable
         !=partial('includes/widget/card_announcement', {}, {cache:theme.fragment_cache})
-      if theme.aside.card_recent_post
+      if theme.aside.card_recent_post.enable
         !=partial('includes/widget/card_recent_post', {}, {cache:theme.fragment_cache})
       if theme.ad && theme.ad.aside
         !=partial('includes/widget/card_ad', {}, {cache:theme.fragment_cache})
-      if theme.aside.card_categories
+      if theme.aside.card_categories.enable
         !=partial('includes/widget/card_categories', {}, {cache:theme.fragment_cache})
-      if theme.aside.card_tags
+      if theme.aside.card_tags.enable
         !=partial('includes/widget/card_tags', {}, {cache:theme.fragment_cache})
-      if theme.aside.card_archives
+      if theme.aside.card_archives.enable
         !=partial('includes/widget/card_archives', {}, {cache:theme.fragment_cache})
       if theme.aside.card_webinfo
         !=partial('includes/widget/card_webinfo', {}, {cache:theme.fragment_cache})  

scripts/helpers/aside_archives.js

@@ -5,30 +5,23 @@
 
 'use strict'
 
-hexo.extend.helper.register('list_archives', function (options = {}) {
+hexo.extend.helper.register('aside_archives', function (options = {}) {
   const { config } = this
   const archiveDir = config.archive_dir
   const { timezone } = config
-  const lang = this.page.lang || this.page.language || config.language
+  const lang = toMomentLocale(this.page.lang || this.page.language || config.language)
   let { format } = options
   const type = options.type || 'monthly'
   const { transform } = options
-  const showCount = Object.prototype.hasOwnProperty.call(options, 'show_count')
-    ? options.show_count
-    : true
+  const showCount = Object.prototype.hasOwnProperty.call(options, 'show_count') ? options.show_count : true
   const order = options.order || -1
-  const limit = 8
+  const compareFunc = type === 'monthly'
+    ? (yearA, monthA, yearB, monthB) => yearA === yearB && monthA === monthB
+    : (yearA, monthA, yearB, monthB) => yearA === yearB
+  const limit = options.limit
+  const moreButton = this._p('aside.more_button')
   let result = ''
 
-  var moreButton
-  if (lang === 'zh-CN') {
-    moreButton = '查看更多'
-  } else if (lang === 'zh-TW') {
-    moreButton = '查看更多'
-  } else {
-    moreButton = 'More'
-  }
-
   if (!format) {
     format = type === 'monthly' ? 'MMMM YYYY' : 'YYYY'
   }
@@ -44,14 +37,14 @@ hexo.extend.helper.register('list_archives', function (options = {}) {
     let date = post.date.clone()
 
     if (timezone) date = date.tz(timezone)
-    if (lang) date = date.locale(lang)
 
     const year = date.year()
     const month = date.month() + 1
-    const name = date.format(format)
     const lastData = data[length - 1]
 
-    if (!lastData || lastData.name !== name) {
+    if (!lastData || !compareFunc(lastData.year, lastData.month, year, month)) {
+      if (lang) date = date.locale(lang)
+      const name = date.format(format)
       length = data.push({
         name,
         year,
@@ -76,7 +69,10 @@ hexo.extend.helper.register('list_archives', function (options = {}) {
 
   result += '<ul class="archive-list">'
 
-  for (let i = 0, len = data.length; i < Math.min(len, limit); i++) {
+  const len = data.length
+  const Judge = limit === 0 ? len : Math.min(len, limit)
+
+  for (let i = 0; i < Judge; i++) {
     const item = data[i]
 
     result += '<li class="archive-list-item">'
@@ -93,14 +89,23 @@ hexo.extend.helper.register('list_archives', function (options = {}) {
     result += '</li>'
   }
 
-  if (data.length > limit) {
+  if (len > Judge) {
     result += '<li class="archive-list-item is-center">'
-    result +=
-      '<a class="archive-list-link-more" href="' + '/' + `${archiveDir}" >`
-    result += moreButton
-    result += '</a>'
-    result += '</li>'
+    result += `<a class="archive-list-link-more" href="${this.url_for(archiveDir)}">${moreButton}</a></li>`
   }
   result += '</ul>'
   return result
 })
+
+var toMomentLocale = function (lang) {
+  if (lang === undefined) {
+    return undefined
+  }
+
+  // moment.locale('') equals moment.locale('en')
+  // moment.locale(null) equals moment.locale('en')
+  if (!lang || lang === 'en' || lang === 'default') {
+    return 'en'
+  }
+  return lang.toLowerCase().replace('_', '-')
+}

scripts/helpers/aside_categories.js

@@ -0,0 +1,87 @@
+/**
+ * Butterfly
+ * for aside categories
+ */
+
+'use strict'
+
+hexo.extend.helper.register('aside_categories', function (categories, options) {
+  if (!options && (!categories || !Object.prototype.hasOwnProperty.call(categories, 'length'))) {
+    options = categories
+    categories = this.site.categories
+  }
+
+  if (!categories || !categories.length) return ''
+  options = options || {}
+  const { config } = this
+  const showCount = Object.prototype.hasOwnProperty.call(options, 'show_count') ? options.show_count : true
+  const depth = options.depth ? parseInt(options.depth, 10) : 0
+  const orderby = options.orderby || 'name'
+  const order = options.order || 1
+  const tagDir = this.url_for(config.tag_dir)
+  const limit = options.limit === 0 ? categories.length : options.limit
+  const buttonLabel = this._p('aside.more_button')
+  const prepareQuery = parent => {
+    const query = {}
+    if (parent) {
+      query.parent = parent
+    } else {
+      query.parent = {
+        $exists: false
+      }
+    }
+    return categories.find(query).sort(orderby, order).filter(cat => cat.length)
+  }
+
+  const hierarchicalList = (t, level, parent) => {
+    let result = ''
+    if (t > 0) {
+      prepareQuery(parent).forEach((cat, i) => {
+        if (t > 0) {
+          t = t - 1
+          let child
+          if (!depth || level + 1 < depth) {
+            var childList = hierarchicalList(t, level + 1, cat._id)
+            child = childList[0]
+            t = childList[1]
+          }
+
+          result += '<li class="aside-category-list-item">'
+
+          result += `<a class="aside-category-list-link" href="${this.url_for(cat.path)}">`
+          result += `<span class="aside-category-list-name">${cat.name}</span>`
+
+          if (showCount) {
+            result += `<span class="aside-category-list-count">${cat.length}</span>`
+          }
+
+          result += '</a>'
+          result += '</li>'
+
+          if (child) {
+            result += `<ul class="aside-category-list child">${child}</ul>`
+          }
+        }
+      })
+    }
+
+    return [result, t]
+  }
+
+  const list = hierarchicalList(limit, 0)
+
+  var moreButton = function () {
+    var moreHtml = ''
+    if (categories.length <= limit) return ''
+    moreHtml += '<li class="aside-category-list-item is-center">'
+    moreHtml += `<a class="aside-category-list-item-more" href="${tagDir}" >`
+    moreHtml += buttonLabel
+    moreHtml += '</a></li>'
+    return moreHtml
+  }
+
+  return `<ul class="aside-category-list">
+            ${list[0]}
+            ${moreButton()}           
+            </ul>`
+})

source/css/_layout/aside.styl

@@ -148,13 +148,13 @@
                 height: auto
 
   .card-archives ul.archive-list,
-  .card-categories ul.aside-category-item
+  .card-categories ul.aside-category-list
     margin: 0
     padding: .2rem 0 0
     list-style: none
 
   .card-archives ul.archive-list > .archive-list-item,
-  .card-categories ul.aside-category-item > .aside-category-list
+  .card-categories ul.aside-category-list > .aside-category-list-item
     padding: .2rem 1rem
     cursor: pointer
     transition: all .3s
@@ -181,7 +181,7 @@
           text-align: right
 
   .card-categories
-    .aside-category-item
+    .aside-category-list
       &.child
         padding: 0 0 0 1.2rem
 

source/css/_mode/darkmode.styl

@@ -138,7 +138,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
           border-top: 13px solid lighten(#121212, 10) !important
 
     .md-links-item:before,
-    .aside-category-list:hover,
+    .aside-category-list-item:hover,
     .archive-list-item:hover,
     #bookmark-it
       background-color: lighten(#121212, 10) !important
@@ -156,9 +156,11 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
       .headline,
       .length_num,
       .aside-post_title,
-      .aside-category-list_link,
+      .aside-category-list-link,
       .archive-list-link,
-      .social-icon
+      .social-icon,
+      .aside-category-list-item-more,
+      .archive-list-link-more
         color: alpha(#FFFFFF, .6) !important
 
     .button--animated:before