feat: twikoo 增加 option 配置

feat: aside widget 增加排序（只對page頁和sticky內的有效）
feat: aside 增加自定義 widget
improvement: readmode 優化
improvement: html結構優化

_config.yml

@@ -334,6 +334,8 @@ facebook_comments:
 # Twikoo
 # https://github.com/imaegoo/twikoo
 twikoo:
+  envId:
+  option:
 
 # Chat Services
 # --------------------------------------
@@ -627,24 +629,29 @@ aside:
     enable: true
     limit: 5 # if set 0 will show all
     sort: date # date or updated
+    sort_order: # Don't modify the setting unless you know how it works
   card_categories:
     enable: true
     limit: 8 # if set 0 will show all
     expand: none # none/true/false
+    sort_order: # Don't modify the setting unless you know how it works
   card_tags:
     enable: true
     limit: 40 # if set 0 will show all
     color: false
+    sort_order: # Don't modify the setting unless you know how it works
   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
+    sort_order: # Don't modify the setting unless you know how it works
   card_webinfo:
     enable: true
     post_count: true
     last_push_date: true
+    sort_order: # Don't modify the setting unless you know how it works
 
 # busuanzi count for PV / UV in site
 # 訪問人數
@@ -662,6 +669,7 @@ runtimeshow:
 # Aside widget - Newest Comments
 newest_comments:
   enable: false
+  sort_order: # Don't modify the setting unless you know how it works
   limit: 6
   avatar: true
   # You can only choose one, or neither

layout/includes/layout.pug

@@ -1,5 +1,6 @@
 - var htmlClassHideAside = theme.aside.enable && theme.aside.hide ? 'hide-aside' : ''
 - var hideAside = !theme.aside.enable || page.aside === false ? 'hide-aside' : ''
+- var pageType = is_post() ? 'post' : 'page'
 
 doctype html
 html(lang=config.language data-theme=theme.display_mode class=htmlClassHideAside)
@@ -14,7 +15,7 @@ html(lang=config.language data-theme=theme.display_mode class=htmlClassHideAside
       
     !=partial('includes/sidebar', {}, {cache:theme.fragment_cache})
 
-    #body-wrap
+    #body-wrap(class=pageType)
       include ./header/index.pug
 
       main#content-inner.layout(class=hideAside)

layout/includes/page/artitalk.pug

@@ -13,7 +13,7 @@ script.
 
     if (!{Boolean(option)}) {
       const otherSetting = !{option}
-      setting = Object.assign({}, setting, otherSetting)
+      setting = Object.assign(setting, otherSetting)
     }
 
     const init = () => {

layout/includes/third-party/comments/index.pug

@@ -32,7 +32,7 @@ hr
           when 'Twikoo'
             #twikoo-wrap
           when 'Waline'
-            #waline
+            #waline-wrap
           when 'Facebook Comments'
             .fb-comments(data-colorscheme = theme.display_mode === 'dark' ? 'dark' : 'light'
                         data-numposts= theme.facebook_comments.pageSize || 10

layout/includes/third-party/comments/twikoo.pug

@@ -1,16 +1,25 @@
+- let option = theme.twikoo.option ? JSON.stringify(theme.twikoo.option) : false
+
 script.
   (()=>{
     const $countDom = document.getElementById('twikoo-count')
     const init = () => {
-      twikoo.init({
+      let initData = {
-        envId: '!{theme.twikoo}',
+        envId: '!{theme.twikoo.envId}',
         el: '#twikoo-wrap'
-      })
+      }
+
+      if (!{Boolean(option)}) {
+        const otherData = !{option}
+        initData = Object.assign(initData, otherData)
+      }
+      
+      twikoo.init(initData)
     }
 
     const getCount = () => {
       twikoo.getCommentsCount({
-        envId: '!{theme.twikoo}',
+        envId: '!{theme.twikoo.envId}',
         urls: [window.location.pathname],
         includeReply: false
       }).then(function (res) {

layout/includes/third-party/comments/valine.pug

@@ -29,7 +29,7 @@ script.
       
       if (!{Boolean(option)}) {
         const otherData = !{option}
-        initData = Object.assign({}, initData, otherData)
+        initData = Object.assign(initData, otherData)
       }
       
       const valine = new Valine(initData)
@@ -40,7 +40,7 @@ script.
   }
 
   if ('!{theme.comments.use[0]}' === 'Valine' || !!{theme.comments.lazyload}) {
-    if (!{theme.comments.lazyload}) btf.loadComment(document.querySelector('#vcomment'),loadValine)
+    if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('vcomment'),loadValine)
     else setTimeout(loadValine, 0)
   } else {
     function loadOtherComment () {

layout/includes/third-party/comments/waline.pug

@@ -4,7 +4,7 @@ script.
   function loadWaline () {
     function initWaline () {
       let initData = {
-        el: '#waline',
+        el: '#waline-wrap',
         serverURL: '!{theme.waline.serverURL}',
         avatar: '#{theme.waline.avatar}',
         path: location.pathname,
@@ -12,7 +12,7 @@ script.
       
       if (!{Boolean(option)}) {
         const otherData = !{option}
-        initData = Object.assign({}, initData, otherData)
+        initData = Object.assign(initData, otherData)
       }
       
       const waline = new Waline(initData)
@@ -23,7 +23,7 @@ script.
   }
 
   if ('!{theme.comments.use[0]}' === 'Waline' || !!{theme.comments.lazyload}) {
-    if (!{theme.comments.lazyload}) btf.loadComment(document.querySelector('#waline'),loadWaline)
+    if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('waline-wrap'),loadWaline)
     else setTimeout(loadWaline, 0)
   } else {
     function loadOtherComment () {

layout/includes/third-party/newest-comments/twikoo-comment.pug

@@ -16,7 +16,7 @@ script.
     const getComment = () => {
       const runTwikoo = () => {
         twikoo.getRecentComments({
-          envId: '!{theme.twikoo}',
+          envId: '!{theme.twikoo.envId}',
           pageSize: !{theme.newest_comments.limit},
           includeReply: true
         }).then(function (res) {

layout/includes/widget/card_announcement.pug

@@ -1,6 +1,5 @@
 if theme.aside.card_announcement.enable
   .card-widget.card-announcement
-    .card-content
     .item-headline
       i.fas.fa-bullhorn.card-announcement-animation
       span= _p('aside.card_announcement')

layout/includes/widget/card_archives.pug

@@ -1,6 +1,5 @@
 if theme.aside.card_archives.enable
   .card-widget.card-archives
-    .card-content
     .item-headline
       i.fas.fa-archive
       span= _p('aside.card_archives')

layout/includes/widget/card_author.pug

@@ -1,6 +1,5 @@
 if theme.aside.card_author.enable
   .card-widget.card-info
-    .card-content
     .card-info-avatar.is-center
       if theme.lazyload.enable
         img.avatar-img(data-lazy-src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar")

layout/includes/widget/card_categories.pug

@@ -1,7 +1,6 @@
 if theme.aside.card_categories.enable
   if site.categories.length
     .card-widget.card-categories
-        .card-content
       .item-headline
         i.fas.fa-folder-open
         span= _p('aside.card_categories')

layout/includes/widget/card_newest_comment.pug

@@ -1,6 +1,5 @@
 if theme.newest_comments.enable
   .card-widget#card-newest-comments
-    .card-content
     .item-headline
       i.fas.fa-bolt
       span= _p('aside.card_newest_comments.headline')

layout/includes/widget/card_post_toc.pug

@@ -1,7 +1,6 @@
 - let tocNumber = page.toc_number !== undefined ? page.toc_number : theme.toc.number
 
 #card-toc.card-widget
-  .card-content
   .item-headline
     i.fas.fa-stream
     span= _p('aside.card_toc')

layout/includes/widget/card_recent_post.pug

@@ -1,6 +1,5 @@
 if theme.aside.card_recent_post.enable
   .card-widget.card-recent-post
-    .card-content
     .item-headline
       i.fas.fa-history
       span= _p('aside.card_recent_post')

layout/includes/widget/card_self.pug

@@ -0,0 +1,9 @@
+if site.data.widget
+  each item in site.data.widget
+    .card-widget(class=item.class_name id=item.id_name style=item.order ? `order: ${item.order}` : '')
+      .item-headline
+        i(class=item.icon)
+        span=item.name
+      .item-content
+        !=item.html
+

layout/includes/widget/card_tags.pug

@@ -1,7 +1,6 @@
 if theme.aside.card_tags.enable
   if site.tags.length
     .card-widget.card-tags
-      .card-content
       .item-headline
         i.fas.fa-tags
         span= _p('aside.card_tags')

layout/includes/widget/card_webinfo.pug

@@ -1,6 +1,5 @@
 if theme.aside.card_webinfo.enable
   .card-widget.card-webinfo
-    .card-content
     .item-headline
       i.fas.fa-chart-line
       span= _p('aside.card_webinfo.headline')

layout/includes/widget/index.pug

@@ -1,4 +1,4 @@
-#aside_content.aside_content
+#aside-content.aside-content
   //- post
   if is_post()
     if showToc && theme.toc.style_simple
@@ -24,3 +24,4 @@
       !=partial('includes/widget/card_tags', {}, {cache:theme.fragment_cache})
       !=partial('includes/widget/card_archives', {}, {cache:theme.fragment_cache})
       !=partial('includes/widget/card_webinfo', {}, {cache:theme.fragment_cache})
+      !=partial('includes/widget/card_self', {}, {cache:theme.fragment_cache})

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-butterfly",
-  "version": "3.5.0-b1",
+  "version": "3.5.0-b2",
   "description": "A Simple and Card UI Design theme for Hexo",
   "main": "package.json",
   "scripts": {

source/css/_global/index.styl

@@ -157,8 +157,8 @@ if $site-name-font
   #site-title,
   #site-subtitle,
   #site-name,
-  #aside_content .author-info__name,
+  #aside-content .author-info__name,
-  #aside_content .author-info__description
+  #aside-content .author-info__description
     font-family: $site-name-font
 
 .is-center

source/css/_layout/aside.styl

@@ -1,4 +1,4 @@
-#aside_content
+#aside-content
   width: 25%
 
   +minWidth900()
@@ -20,6 +20,7 @@
     position: relative
     overflow: hidden
     margin-top: 1rem
+    padding: 1rem 1.2rem
     border-radius: 8px
     background: var(--card-bg)
     box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
@@ -96,9 +97,6 @@
       span
         padding-left: .5rem
 
-  .card-content
-    padding: 1rem 1.2rem
-
   .item-headline
     padding-bottom: .3rem
     font-size: 1.2em
@@ -353,8 +351,37 @@
     .layout
       justify-content: center
 
-      > .aside_content
+      > .aside-content
         display: none
 
       > div:first-child
         width: 80%
+
+.page
+  .sticky_layout
+    display: flex
+    flex-direction: column
+
+  if hexo-config('aside.card_recent_post.sort_order')
+    .card-recent-post
+      order: hexo-config('aside.card_recent_post.sort_order')
+
+  if hexo-config('newest_comments.sort_order')
+    #card-newest-comments
+      order: hexo-config('newest_comments.sort_order')
+
+  if hexo-config('aside.card_categories.sort_order')
+    .card-categories
+      order: hexo-config('aside.card_categories.sort_order')
+
+  if hexo-config('aside.card_tags.sort_order')
+    .card-tags
+      order: hexo-config('aside.card_tags.sort_order')
+
+  if hexo-config('aside.card_archives.sort_order')
+    .card-archives
+      order: hexo-config('aside.card-archives.sort_order')
+
+  if hexo-config('aside.card_webinfo.sort_order')
+    .card-webinfo
+      order: hexo-config('aside.card_webinfo.sort_order')

source/css/_mode/darkmode.styl

@@ -110,7 +110,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
     .ads-wrap
       filter: brightness(.8)
 
-    #aside_content .aside-list > .aside-list-item:not(:last-child)
+    #aside-content .aside-list > .aside-list-item:not(:last-child)
       border-bottom: 1px dashed alpha(#FFFFFF, .1)
 
     // 第三方

source/css/_mode/readmode.styl

@@ -7,7 +7,10 @@ if hexo-config('readmode')
     --gray: #d6dbdf
     --hr-border: #d6dbdf
     --hr-before-color: darken(#d6dbdf, 10)
-    -highlight-bg: #f7f7f7
+    --highlight-bg: #f7f7f7
+    --exit-btn-bg: #C0C0C0
+    --exit-btn-color: #fff
+    --exit-btn-hover: darken(#C0C0C0, 20)
 
   [data-theme='dark']
     .read-mode
@@ -18,12 +21,32 @@ if hexo-config('readmode')
       --gray: rgba(255, 255, 255, .7)
       --hr-border: rgba(255, 255, 255, .5)
       --hr-before-color: rgba(255, 255, 255, .7)
-      -highlight-bg: #171717
+      --highlight-bg: #171717
+      --exit-btn-bg: #1f1f1f
+      --exit-btn-color: rgba(255, 255, 255, .9)
+      --exit-btn-hover: lighten(#1f1f1f, 20)
 
   .read-mode
     background: var(--readmode-light-color)
 
-    #aside_content
+    .exit-readmode
+      position: fixed
+      top: 30px
+      right: 30px
+      width: 40px
+      height: 40px
+      border-radius: 8px
+      background: var(--exit-btn-bg)
+      color: var(--exit-btn-color)
+      text-align: center
+      font-size: 16px
+      cursor: pointer
+      transition: background .3s
+
+      &:hover
+        background: var(--exit-btn-hover)
+
+    #aside-content
       display: none
 
     #body-wrap
@@ -54,20 +77,11 @@ if hexo-config('readmode')
     .highlight-tools,
     #footer,
     #post > *:not(#post-info):not(.post-content),
-    #to_comment,
-    #mobile-toc-button,
     #nav,
     .post-outdate-notice,
-    #web_bg
+    #web_bg,
-      display: none !important
+    #rightside,
-
+    .no-top-img
-    if !hexo-config('chat_btn')
-      #chatra,
-      #tidio-chat-code,
-      #tidio-chat,
-      #daodream-container,
-      .gitter-chat-embed,
-      .gitter-open-chat-button
       display: none !important
 
     #article-container

source/js/main.js

@@ -490,7 +490,20 @@ document.addEventListener('DOMContentLoaded', function () {
  */
   const rightSideFn = {
     switchReadMode: () => { // read-mode
-      document.body.classList.toggle('read-mode')
+      const $body = document.body
+      $body.classList.add('read-mode')
+      const newEle = document.createElement('button')
+      newEle.type = 'button'
+      newEle.className = 'fas fa-sign-out-alt exit-readmode'
+      $body.appendChild(newEle)
+
+      function clickFn () {
+        $body.classList.remove('read-mode')
+        newEle.remove()
+        newEle.removeEventListener('click', clickFn)
+      }
+
+      newEle.addEventListener('click', clickFn)
     },
     switchDarkMode: () => { // Switch Between Light And Dark Mode
       const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'