diff --git a/_config.yml b/_config.yml index b161c23..ce1cb74 100644 --- a/_config.yml +++ b/_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 diff --git a/layout/includes/layout.pug b/layout/includes/layout.pug index e3a5b8c..e9d68fe 100644 --- a/layout/includes/layout.pug +++ b/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) diff --git a/layout/includes/page/artitalk.pug b/layout/includes/page/artitalk.pug index 940b046..c2d1dde 100644 --- a/layout/includes/page/artitalk.pug +++ b/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 = () => { diff --git a/layout/includes/third-party/comments/index.pug b/layout/includes/third-party/comments/index.pug index d216be2..3bab3bb 100644 --- a/layout/includes/third-party/comments/index.pug +++ b/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 diff --git a/layout/includes/third-party/comments/twikoo.pug b/layout/includes/third-party/comments/twikoo.pug index 6dac48d..a3f249e 100644 --- a/layout/includes/third-party/comments/twikoo.pug +++ b/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) { diff --git a/layout/includes/third-party/comments/valine.pug b/layout/includes/third-party/comments/valine.pug index 5ca95bc..e67f92b 100644 --- a/layout/includes/third-party/comments/valine.pug +++ b/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 () { diff --git a/layout/includes/third-party/comments/waline.pug b/layout/includes/third-party/comments/waline.pug index 82d131d..1ac65c2 100644 --- a/layout/includes/third-party/comments/waline.pug +++ b/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 () { diff --git a/layout/includes/third-party/newest-comments/twikoo-comment.pug b/layout/includes/third-party/newest-comments/twikoo-comment.pug index f012760..3af9f93 100644 --- a/layout/includes/third-party/newest-comments/twikoo-comment.pug +++ b/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) { diff --git a/layout/includes/widget/card_announcement.pug b/layout/includes/widget/card_announcement.pug index 0dcda40..a38b7b9 100644 --- a/layout/includes/widget/card_announcement.pug +++ b/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 \ No newline at end of file + .item-headline + i.fas.fa-bullhorn.card-announcement-animation + span= _p('aside.card_announcement') + .announcement_content!= theme.aside.card_announcement.content \ No newline at end of file diff --git a/layout/includes/widget/card_archives.pug b/layout/includes/widget/card_archives.pug index b1ce93d..1080e28 100644 --- a/layout/includes/widget/card_archives.pug +++ b/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') - - - 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 }) + .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 }) diff --git a/layout/includes/widget/card_author.pug b/layout/includes/widget/card_author.pug index 00ed643..0c81d0a 100644 --- a/layout/includes/widget/card_author.pug +++ b/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 - - if(theme.social) - .card-info-social-icons.is-center - !=fragment_cache('social', function(){return partial('includes/header/social')}) + 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')}) diff --git a/layout/includes/widget/card_categories.pug b/layout/includes/widget/card_categories.pug index eab8ba8..4f69e2f 100644 --- a/layout/includes/widget/card_categories.pug +++ b/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 }) diff --git a/layout/includes/widget/card_newest_comment.pug b/layout/includes/widget/card_newest_comment.pug index bf88d05..d9b972f 100644 --- a/layout/includes/widget/card_newest_comment.pug +++ b/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') diff --git a/layout/includes/widget/card_post_toc.pug b/layout/includes/widget/card_post_toc.pug index 065a457..3874dc7 100644 --- a/layout/includes/widget/card_post_toc.pug +++ b/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}) \ No newline at end of file diff --git a/layout/includes/widget/card_recent_post.pug b/layout/includes/widget/card_recent_post.pug index fe90d70..b207475 100644 --- a/layout/includes/widget/card_recent_post.pug +++ b/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)] - - }) \ No newline at end of file + 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)] + - }) \ No newline at end of file diff --git a/layout/includes/widget/card_self.pug b/layout/includes/widget/card_self.pug new file mode 100644 index 0000000..a02763f --- /dev/null +++ b/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 + diff --git a/layout/includes/widget/card_tags.pug b/layout/includes/widget/card_tags.pug index 1595ff7..2293d82 100644 --- a/layout/includes/widget/card_tags.pug +++ b/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'}) diff --git a/layout/includes/widget/card_webinfo.pug b/layout/includes/widget/card_webinfo.pug index 7b07218..3bff545 100644 --- a/layout/includes/widget/card_webinfo.pug +++ b/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())) diff --git a/layout/includes/widget/index.pug b/layout/includes/widget/index.pug index 94c496f..10dd161 100644 --- a/layout/includes/widget/index.pug +++ b/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 @@ -23,4 +23,5 @@ !=partial('includes/widget/card_categories', {}, {cache:theme.fragment_cache}) !=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}) \ No newline at end of file + !=partial('includes/widget/card_webinfo', {}, {cache:theme.fragment_cache}) + !=partial('includes/widget/card_self', {}, {cache:theme.fragment_cache}) \ No newline at end of file diff --git a/package.json b/package.json index 5f69624..e580fc9 100644 --- a/package.json +++ b/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": { diff --git a/source/css/_global/index.styl b/source/css/_global/index.styl index 66a51bf..d06931e 100644 --- a/source/css/_global/index.styl +++ b/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 diff --git a/source/css/_layout/aside.styl b/source/css/_layout/aside.styl index 469909d..d768ebf 100644 --- a/source/css/_layout/aside.styl +++ b/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% \ No newline at end of file + 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') diff --git a/source/css/_mode/darkmode.styl b/source/css/_mode/darkmode.styl index 5ce560b..ee5a28b 100644 --- a/source/css/_mode/darkmode.styl +++ b/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) // 第三方 diff --git a/source/css/_mode/readmode.styl b/source/css/_mode/readmode.styl index b10849a..b1ee497 100644 --- a/source/css/_mode/readmode.styl +++ b/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 diff --git a/source/js/main.js b/source/js/main.js index e541bdd..e5436b4 100644 --- a/source/js/main.js +++ b/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'