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({
-        envId: '!{theme.twikoo}',
+      let initData = {
+        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,7 +1,6 @@
 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')
-      .announcement_content!= theme.aside.card_announcement.content
+    .item-headline
+      i.fas.fa-bullhorn.card-announcement-animation
+      span= _p('aside.card_announcement')
+    .announcement_content!= theme.aside.card_announcement.content

layout/includes/widget/card_archives.pug

@@ -1,12 +1,11 @@
 if theme.aside.card_archives.enable
   .card-widget.card-archives
-    .card-content
-      .item-headline
-        i.fas.fa-archive
-        span= _p('aside.card_archives')
+    .item-headline
+      i.fas.fa-archive
+      span= _p('aside.card_archives')
     
-      - 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 })
+    - 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_author.pug

@@ -1,37 +1,36 @@
 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")
-        else
-          img.avatar-img(src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar")      
-        .author-info__name= config.author
-        .author-info__description!= theme.aside.card_author.description || config.description
+    .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")
+      else
+        img.avatar-img(src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar")      
+      .author-info__name= config.author
+      .author-info__description!= theme.aside.card_author.description || config.description
 
-      .card-info-data
-        if site.posts.length
-          .card-info-data-item.is-center
-            a(href=url_for(config.archive_dir) + '/')
-              .headline= _p('aside.articles') 
-              .length-num= site.posts.length
+    .card-info-data
+      if site.posts.length
+        .card-info-data-item.is-center
+          a(href=url_for(config.archive_dir) + '/')
+            .headline= _p('aside.articles') 
+            .length-num= site.posts.length
 
-        if site.tags.length
-          .card-info-data-item.is-center
-            a(href=url_for(config.tag_dir) + '/')
-              .headline= _p('aside.tags')
-              .length-num= site.tags.length
+      if site.tags.length
+        .card-info-data-item.is-center
+          a(href=url_for(config.tag_dir) + '/')
+            .headline= _p('aside.tags')
+            .length-num= site.tags.length
 
-        if site.categories.length
-          .card-info-data-item.is-center
-            a(href=url_for(config.category_dir) + '/')
-              .headline= _p('aside.categories') 
-              .length-num= site.categories.length
+      if site.categories.length
+        .card-info-data-item.is-center
+          a(href=url_for(config.category_dir) + '/')
+            .headline= _p('aside.categories') 
+            .length-num= site.categories.length
 
-      a#card-info-btn.button--animated(href=theme.aside.card_author.button.link)
-        i(class=theme.aside.card_author.button.icon)
-        span=theme.aside.card_author.button.text
+    a#card-info-btn.button--animated(href=theme.aside.card_author.button.link)
+      i(class=theme.aside.card_author.button.icon)
+      span=theme.aside.card_author.button.text
   
-      if(theme.social)
-          .card-info-social-icons.is-center
-            !=fragment_cache('social', function(){return partial('includes/header/social')}) 
+    if(theme.social)
+        .card-info-social-icons.is-center
+          !=fragment_cache('social', function(){return partial('includes/header/social')}) 

layout/includes/widget/card_categories.pug

@@ -1,8 +1,7 @@
 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')
-          !=aside_categories({ limit: theme.aside.card_categories.limit === 0 ? 0 : theme.aside.card_categories.limit || 8 , expand: theme.aside.card_categories.expand })
+      .item-headline
+        i.fas.fa-folder-open
+        span= _p('aside.card_categories')
+      !=aside_categories({ limit: theme.aside.card_categories.limit === 0 ? 0 : theme.aside.card_categories.limit || 8 , expand: theme.aside.card_categories.expand })

layout/includes/widget/card_newest_comment.pug

@@ -1,8 +1,7 @@
 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')
-      .aside-list
-        span= _p('aside.card_newest_comments.loading_text')
+    .item-headline
+      i.fas.fa-bolt
+      span= _p('aside.card_newest_comments.headline')
+    .aside-list
+      span= _p('aside.card_newest_comments.loading_text')

layout/includes/widget/card_post_toc.pug

@@ -1,13 +1,12 @@
 - 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')
+  .item-headline
+    i.fas.fa-stream
+    span= _p('aside.card_toc')
 
-    if (page.encrypt == true)
-      .toc-content.toc-div-class(style="display:none")!=toc(page.origin, {list_number: tocNumber})
-    else 
-      .toc-content!=toc(page.content, {list_number: tocNumber})
+  if (page.encrypt == true)
+    .toc-content.toc-div-class(style="display:none")!=toc(page.origin, {list_number: tocNumber})
+  else 
+    .toc-content!=toc(page.content, {list_number: tocNumber})
       

layout/includes/widget/card_recent_post.pug

@@ -1,28 +1,27 @@
 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')
-      .aside-list
-        - let postLimit = theme.aside.card_recent_post.limit === 0 ? site.posts.length : theme.aside.card_recent_post.limit || 5
-        - let sort = theme.aside.card_recent_post.sort === 'updated' ? 'updated' : 'date'
-        - site.posts.sort(sort, -1).limit(postLimit).each(function(article){
-          - let link = article.link || article.path
-          - let title = article.title || _p('no_title')
-          - let no_cover = article.cover === false || !theme.cover.aside_enable ? 'no-cover' : ''
-          - let post_cover = article.cover
-          .aside-list-item(class=no_cover)
-            if post_cover && theme.cover.aside_enable
-              a.thumbnail(href=url_for(link) title=title)
-                if theme.lazyload.enable
-                  img(data-lazy-src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title)
-                else
-                  img(src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title)
-            .content
-              a.title(href=url_for(link) title=title)= title
-              if theme.aside.card_recent_post.sort === 'updated'
-                time(datetime=date_xml(article.updated) title=_p('post.updated') + ' ' + full_date(article.updated)) #[=date(article.updated, config.date_format)]
+    .item-headline
+      i.fas.fa-history
+      span= _p('aside.card_recent_post')
+    .aside-list
+      - let postLimit = theme.aside.card_recent_post.limit === 0 ? site.posts.length : theme.aside.card_recent_post.limit || 5
+      - let sort = theme.aside.card_recent_post.sort === 'updated' ? 'updated' : 'date'
+      - site.posts.sort(sort, -1).limit(postLimit).each(function(article){
+        - let link = article.link || article.path
+        - let title = article.title || _p('no_title')
+        - let no_cover = article.cover === false || !theme.cover.aside_enable ? 'no-cover' : ''
+        - let post_cover = article.cover
+        .aside-list-item(class=no_cover)
+          if post_cover && theme.cover.aside_enable
+            a.thumbnail(href=url_for(link) title=title)
+              if theme.lazyload.enable
+                img(data-lazy-src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title)
               else
-                time(datetime=date_xml(article.date) title=_p('post.created') + ' ' + full_date(article.date)) #[=date(article.date, config.date_format)]
-        - })
+                img(src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title)
+          .content
+            a.title(href=url_for(link) title=title)= title
+            if theme.aside.card_recent_post.sort === 'updated'
+              time(datetime=date_xml(article.updated) title=_p('post.updated') + ' ' + full_date(article.updated)) #[=date(article.updated, config.date_format)]
+            else
+              time(datetime=date_xml(article.date) title=_p('post.created') + ' ' + full_date(article.date)) #[=date(article.date, config.date_format)]
+      - })

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,13 +1,12 @@
 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')
+      .item-headline
+        i.fas.fa-tags
+        span= _p('aside.card_tags')
 
-        - let tagLimit = theme.aside.card_tags.limit === 0 ? 0 : theme.aside.card_tags.limit || 40
-        if theme.aside.card_tags.color
-          .card-tag-cloud!= cloudTags({source: site.tags, minfontsize: 1.1, maxfontsize: 1.5, limit: tagLimit, unit: 'em'})
-        else
-          .card-tag-cloud!= tagcloud({min_font: 1.1, max_font: 1.5, amount: tagLimit , color: true, start_color: '#999', end_color: '#99a9bf', unit: 'em'})
+      - let tagLimit = theme.aside.card_tags.limit === 0 ? 0 : theme.aside.card_tags.limit || 40
+      if theme.aside.card_tags.color
+        .card-tag-cloud!= cloudTags({source: site.tags, minfontsize: 1.1, maxfontsize: 1.5, limit: tagLimit, unit: 'em'})
+      else
+        .card-tag-cloud!= tagcloud({min_font: 1.1, max_font: 1.5, amount: tagLimit , color: true, start_color: '#999', end_color: '#99a9bf', unit: 'em'})

layout/includes/widget/card_webinfo.pug

@@ -1,32 +1,31 @@
 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')
-      .webinfo
-        if theme.aside.card_webinfo.post_count
-          .webinfo-item
-            .item-name= _p('aside.card_webinfo.article_name') + " :"
-            .item-count= site.posts.length
-        if theme.runtimeshow.enable
-          .webinfo-item
-            .item-name= _p('aside.card_webinfo.runtime.name') + " :"
-            .item-count#runtimeshow(data-publishDate=date_xml(theme.runtimeshow.publish_date))
-        if theme.wordcount.enable && theme.wordcount.total_wordcount
-          .webinfo-item
-            .item-name=_p('aside.card_webinfo.site_wordcount') + " :"
-            .item-count=totalcount(site)
-        if theme.busuanzi.site_uv 
-          .webinfo-item
-            .item-name= _p('aside.card_webinfo.site_uv_name') + " :"
-            .item-count#busuanzi_value_site_uv
-        if theme.busuanzi.site_pv
-          .webinfo-item
-            .item-name= _p('aside.card_webinfo.site_pv_name') + " :"
-            .item-count#busuanzi_value_site_pv
-        if theme.aside.card_webinfo.last_push_date
-          .webinfo-item
-            .item-name= _p('aside.card_webinfo.last_push_date.name') + " :"
-            .item-count#last-push-date(data-lastPushDate=date_xml(Date.now()))
+    .item-headline
+      i.fas.fa-chart-line
+      span= _p('aside.card_webinfo.headline')
+    .webinfo
+      if theme.aside.card_webinfo.post_count
+        .webinfo-item
+          .item-name= _p('aside.card_webinfo.article_name') + " :"
+          .item-count= site.posts.length
+      if theme.runtimeshow.enable
+        .webinfo-item
+          .item-name= _p('aside.card_webinfo.runtime.name') + " :"
+          .item-count#runtimeshow(data-publishDate=date_xml(theme.runtimeshow.publish_date))
+      if theme.wordcount.enable && theme.wordcount.total_wordcount
+        .webinfo-item
+          .item-name=_p('aside.card_webinfo.site_wordcount') + " :"
+          .item-count=totalcount(site)
+      if theme.busuanzi.site_uv 
+        .webinfo-item
+          .item-name= _p('aside.card_webinfo.site_uv_name') + " :"
+          .item-count#busuanzi_value_site_uv
+      if theme.busuanzi.site_pv
+        .webinfo-item
+          .item-name= _p('aside.card_webinfo.site_pv_name') + " :"
+          .item-count#busuanzi_value_site_pv
+      if theme.aside.card_webinfo.last_push_date
+        .webinfo-item
+          .item-name= _p('aside.card_webinfo.last_push_date.name') + " :"
+          .item-count#last-push-date(data-lastPushDate=date_xml(Date.now()))
 

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__description
+  #aside-content .author-info__name,
+  #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,22 +77,13 @@ 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,
+    #rightside,
+    .no-top-img
       display: none !important
 
-    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
       a
         color: #99a9bf

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'