From 83b72328414f46bc662b58ac72be62667e2e2fbc Mon Sep 17 00:00:00 2001 From: Jerry Date: Sun, 11 Oct 2020 18:25:58 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8F=AA=E6=94=AF=E6=8C=81=20hexo=205.?= =?UTF-8?q?0.0=20=E5=8F=8A=E4=BB=A5=E4=B8=8A=E7=89=88=E6=9C=AC=20feat:=20t?= =?UTF-8?q?oc=E6=94=B9=E7=82=BAaside=E9=A1=AF=E7=A4=BA,=E5=8E=BB=E6=8E=89s?= =?UTF-8?q?idebar=20feat:=20=E6=89=8B=E6=A9=9Ftoc=20ui=20=E4=BF=AE?= =?UTF-8?q?=E6=94=B9=20feat:=20=E5=8E=BB=E6=8E=89=20toc=20auto=5Fopen=20?= =?UTF-8?q?=E9=85=8D=E7=BD=AE=20feat:=20=E6=96=87=E7=AB=A0=E6=A8=99?= =?UTF-8?q?=E9=A1=8C=E6=94=B9=E7=82=BA=E5=B1=85=E4=B8=AD=20improvement:=20?= =?UTF-8?q?=E5=AE=8C=E5=96=84note=E6=A8=99=E7=B1=A4=E5=9C=A8readmode?= =?UTF-8?q?=E4=B8=8A=E7=9A=84=E9=A1=AF=E7=A4=BA=20improvement:=20=E7=B2=BE?= =?UTF-8?q?=E7=B0=A1css=20=E5=92=8C=20js=20improvement=EF=BC=9A=20pjax=20?= =?UTF-8?q?=E5=84=AA=E5=8C=96=20fix:=20=E4=BF=AE=E5=BE=A9=E7=95=B6?= =?UTF-8?q?=E6=96=87=E7=AB=A0=E9=A0=81top=5Fimg=E8=A8=AD=E7=82=BAfalse?= =?UTF-8?q?=E6=99=82=EF=BC=8C=E9=96=B2=E8=AE=80=E6=A8=A1=E5=BC=8F=E4=B8=8B?= =?UTF-8?q?=E6=96=87=E7=AB=A0=E5=85=A7=E5=AE=B9=E4=B8=8D=E9=A1=AF=E7=A4=BA?= =?UTF-8?q?=E7=9A=84bugs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _config.yml | 1 - languages/default.yml | 5 +- languages/en.yml | 5 +- languages/zh-CN.yml | 5 +- languages/zh-TW.yml | 5 +- layout/includes/head/config.pug | 1 - layout/includes/head/config_site.pug | 4 +- layout/includes/layout.pug | 30 ++-- layout/includes/rightside.pug | 2 +- layout/includes/sidebar.pug | 21 --- layout/includes/widget/card_post_toc.pug | 13 ++ layout/includes/widget/index.pug | 42 +++-- layout/post.pug | 4 +- package.json | 2 +- scripts/events/check_hexo.js | 6 +- scripts/helpers/page.js | 4 - source/css/_global/function.styl | 34 ---- source/css/_global/index.styl | 15 ++ source/css/_layout/aside.styl | 105 +++++++++--- source/css/_layout/head.styl | 10 +- source/css/_layout/pagination.styl | 10 +- source/css/_layout/post.styl | 96 +++-------- source/css/_layout/sidebar.styl | 88 ---------- source/css/_layout/third-party.styl | 7 + source/css/_mode/darkmode.styl | 1 + source/css/_mode/readmode.styl | 34 ++-- source/css/_page/common.styl | 40 ++--- source/css/var.styl | 2 + source/js/main.js | 201 ++++++----------------- source/js/search/algolia.js | 2 +- source/js/search/local-search.js | 2 +- 31 files changed, 291 insertions(+), 506 deletions(-) delete mode 100644 layout/includes/sidebar.pug create mode 100644 layout/includes/widget/card_post_toc.pug delete mode 100644 source/css/_layout/sidebar.styl diff --git a/_config.yml b/_config.yml index 5cd10a1..4bb3fd3 100644 --- a/_config.yml +++ b/_config.yml @@ -188,7 +188,6 @@ index_post_content: toc: enable: true number: true - auto_open: true # auto open the sidebar post_copyright: enable: true diff --git a/languages/default.yml b/languages/default.yml index b8ba13a..aeb6406 100644 --- a/languages/default.yml +++ b/languages/default.yml @@ -1,7 +1,3 @@ -sidebar: - catalog: Catalog - have_read: You've read - footer: framework: Framework theme: Theme @@ -78,6 +74,7 @@ aside: heading: Newest Comments loading_text: loading... error: Unable to get the data, please make sure the settings are correct. + card_toc: Catalog date_suffix: just: Just diff --git a/languages/en.yml b/languages/en.yml index b8ba13a..aeb6406 100644 --- a/languages/en.yml +++ b/languages/en.yml @@ -1,7 +1,3 @@ -sidebar: - catalog: Catalog - have_read: You've read - footer: framework: Framework theme: Theme @@ -78,6 +74,7 @@ aside: heading: Newest Comments loading_text: loading... error: Unable to get the data, please make sure the settings are correct. + card_toc: Catalog date_suffix: just: Just diff --git a/languages/zh-CN.yml b/languages/zh-CN.yml index 9ea8cd1..f17a563 100644 --- a/languages/zh-CN.yml +++ b/languages/zh-CN.yml @@ -1,7 +1,3 @@ -sidebar: - catalog: 目录 - have_read: 你已经读了 - footer: framework: 框架 theme: 主题 @@ -80,6 +76,7 @@ aside: heading: 最新评论 loading_text: 正在加载中... error: 无法获取资料，请确认相关配置是否正确 + card_toc: 目录 date_suffix: just: 刚刚 diff --git a/languages/zh-TW.yml b/languages/zh-TW.yml index b7b0124..cb254c9 100644 --- a/languages/zh-TW.yml +++ b/languages/zh-TW.yml @@ -1,7 +1,3 @@ -sidebar: - catalog: 目錄 - have_read: 你已經讀了 - footer: framework: 框架 theme: 主題 @@ -80,6 +76,7 @@ aside: heading: 最新評論 loading_text: 正在加載中... error: 無法獲取資料，請確認相關配置是否正確 + card_toc: 目錄 date_suffix: just: 剛剛 diff --git a/layout/includes/head/config.pug b/layout/includes/head/config.pug index cfb04ba..99e3001 100644 --- a/layout/includes/head/config.pug +++ b/layout/includes/head/config.pug @@ -93,7 +93,6 @@ script. var GLOBAL_CONFIG = { root: '!{config.root}', - hexoversion: '!{get_hexo_version()}', algolia: !{algolia}, localSearch: !{localSearch}, translate: !{translate}, diff --git a/layout/includes/head/config_site.pug b/layout/includes/head/config_site.pug index c896b48..19eb732 100644 --- a/layout/includes/head/config_site.pug +++ b/layout/includes/head/config_site.pug @@ -5,7 +5,7 @@ else isHighlightShrink = theme.highlight_shrink const pageToc = page.toc === true || page.toc === false ? page.toc : theme.toc.enable - const showToc = is_post() && pageToc && (toc(page.content) !== '' || page.encrypt == true ) + const showToc = is_post() && theme.aside.enable && pageToc && (toc(page.content) !== '' || page.encrypt == true ) - script#config_change @@ -14,6 +14,6 @@ script#config_change isPost: !{is_post()}, isHome: !{is_home()}, isHighlightShrink: !{isHighlightShrink}, - isSidebar: !{showToc}, + isToc: !{showToc}, postUpdate: '!{full_date(page.updated)}' } diff --git a/layout/includes/layout.pug b/layout/includes/layout.pug index 5787521..e40fa05 100644 --- a/layout/includes/layout.pug +++ b/layout/includes/layout.pug @@ -8,30 +8,22 @@ html(lang=config.language data-theme=theme.display_mode) if theme.preloader !=partial('includes/loading/loading', {}, {cache:theme.fragment_cache}) + if theme.background + #web_bg + !=partial('includes/mobile-sidebar/index', {}, {cache:theme.fragment_cache}) #body-wrap - if theme.background - #web_bg - - include ./sidebar.pug include ./header/index.pug - if (!is_post()) - main#content-inner.layout_page(class=hideAside) - if body - div!= body - else - block content - if theme.aside.enable && page.aside !== false - !=partial('includes/widget/index', {}, {cache:theme.fragment_cache}) - else - main#content-inner.layout_post - if body - div!= body - else - block content - + main#content-inner.layout(class=hideAside) + if body + div!= body + else + block content + if theme.aside.enable && page.aside !== false + include widget/index.pug + - var footerBg = theme.footer_bg if (footerBg) if (footerBg === true) diff --git a/layout/includes/rightside.pug b/layout/includes/rightside.pug index f37a815..323a22a 100644 --- a/layout/includes/rightside.pug +++ b/layout/includes/rightside.pug @@ -16,7 +16,7 @@ section#rightside if commentsJsLoad a#to_comment(href="#post-comment" title=_p("rightside.scroll_to_comment")) i.fas.fa-comments - if showToc + if showToc && theme.aside.mobile button#mobile-toc-button.close(type="button" title=_p("rightside.toc")) i.fas.fa-list-ul else if theme.translate.enable || (theme.darkmode.enable && theme.darkmode.button) diff --git a/layout/includes/sidebar.pug b/layout/includes/sidebar.pug deleted file mode 100644 index ed56729..0000000 --- a/layout/includes/sidebar.pug +++ /dev/null @@ -1,21 +0,0 @@ -- - let tocNumber = page.toc_number !== undefined ? page.toc_number : theme.toc.number - let autoOpenPostSet = page.auto_open == undefined ? theme.toc.auto_open : page.auto_open - let autoOpenSidebar = autoOpenPostSet ? 'on' : '' -- - -if(showToc) - #sidebar - i.fas.fa-arrow-right#toggle-sidebar(class=autoOpenSidebar) - .sidebar-toc - div.sidebar-toc__title= _p('sidebar.catalog') - div.sidebar-toc__progress - span.progress-notice= _p('sidebar.have_read') - span.progress-num 0 - span.progress-percentage % - div.sidebar-toc__progress-bar - if (page.encrypt == true) - div.sidebar-toc__content.toc-div-class(style="display:none")!=toc(page.origin, {list_number: tocNumber}) - else - div.sidebar-toc__content!=toc(page.content, {list_number: tocNumber}) - \ No newline at end of file diff --git a/layout/includes/widget/card_post_toc.pug b/layout/includes/widget/card_post_toc.pug new file mode 100644 index 0000000..065a457 --- /dev/null +++ b/layout/includes/widget/card_post_toc.pug @@ -0,0 +1,13 @@ +- 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') + + 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/index.pug b/layout/includes/widget/index.pug index ccf3dc5..ec2a80e 100644 --- a/layout/includes/widget/index.pug +++ b/layout/includes/widget/index.pug @@ -1,20 +1,28 @@ #aside_content.aside_content if theme.aside.card_author.enable - include ./card_author.pug + !=partial('includes/widget/card_author', {}, {cache:theme.fragment_cache}) + if theme.aside.card_announcement.enable + !=partial('includes/widget/card_announcement', {}, {cache:theme.fragment_cache}) .sticky_layout - if theme.aside.card_announcement.enable - include ./card_announcement.pug - if theme.aside.card_recent_post.enable - include ./card_recent_post.pug - if theme.newest_comments.enable - include ./card_newest_comment.pug - if theme.ad && theme.ad.aside - include ./card_ad.pug - if theme.aside.card_categories.enable - include ./card_categories.pug - if theme.aside.card_tags.enable - include ./card_tags.pug - if theme.aside.card_archives.enable - include ./card_archives.pug - if theme.aside.card_webinfo.enable - include ./card_webinfo.pug \ No newline at end of file + if is_post() + if showToc + include ./card_post_toc.pug + 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}) + else + 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.newest_comments.enable + !=partial('includes/widget/card_newest_comment', {}, {cache:theme.fragment_cache}) + if theme.aside.card_categories.enable + !=partial('includes/widget/card_categories', {}, {cache:theme.fragment_cache}) + if theme.aside.card_tags.enable + !=partial('includes/widget/card_tags', {}, {cache:theme.fragment_cache}) + if theme.aside.card_archives.enable + !=partial('includes/widget/card_archives', {}, {cache:theme.fragment_cache}) + if theme.aside.card_webinfo.enable + !=partial('includes/widget/card_webinfo', {}, {cache:theme.fragment_cache}) \ No newline at end of file diff --git a/layout/post.pug b/layout/post.pug index 230f5ed..c57d99e 100644 --- a/layout/post.pug +++ b/layout/post.pug @@ -1,11 +1,11 @@ extends includes/layout.pug block content - article#post(class="") + #post if top_img === false include includes/header/post-info.pug - #article-container.post-content!=page.content + article#article-container.post-content!=page.content include includes/post/post-copyright.pug .tag_share if (theme.post_meta.post.tags) diff --git a/package.json b/package.json index 2dfee5e..30531b4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hexo-theme-butterfly", - "version": "3.3.0-b1", + "version": "3.3.0-b2", "description": "A Simple and Card UI Design theme for Hexo", "main": "package.json", "scripts": { diff --git a/scripts/events/check_hexo.js b/scripts/events/check_hexo.js index 612bddc..fb341f1 100644 --- a/scripts/events/check_hexo.js +++ b/scripts/events/check_hexo.js @@ -4,9 +4,9 @@ hexo.extend.filter.register('before_generate', () => { // Get first two digits of the Hexo version number var hexoVer = hexo.version.replace(/(^.*\..*)\..*/, '$1') - if (hexoVer < 4.2) { - logger.error('Please update Hexo to V4.2.0 or higher!') - logger.error('請把 Hexo 升級到 V4.2.0 或更高的版本！') + if (hexoVer < 5) { + logger.error('Please update Hexo to V5.0.0 or higher!') + logger.error('請把 Hexo 升級到 V5.0.0 或更高的版本！') process.exit(-1) } }) diff --git a/scripts/helpers/page.js b/scripts/helpers/page.js index f83f08e..52642ee 100644 --- a/scripts/helpers/page.js +++ b/scripts/helpers/page.js @@ -76,7 +76,3 @@ hexo.extend.helper.register('urlNoIndex', function () { hexo.extend.helper.register('md5', function (path) { return crypto.createHash('md5').update(decodeURI(this.url_for(path))).digest('hex') }) - -hexo.extend.helper.register('get_hexo_version', function () { - return hexo.version -}) diff --git a/source/css/_global/function.styl b/source/css/_global/function.styl index d404aa7..5c9bdde 100644 --- a/source/css/_global/function.styl +++ b/source/css/_global/function.styl @@ -68,26 +68,6 @@ if hexo-config('enter_transitions') #ribbon-canvas animation: ribbon_to_show 4s - .tocOpenPc - .sidebar-toc__title - animation: tocsidebarLtoR .5s - - .sidebar-toc__progress - animation: tocsidebarLtoR .7s - - .sidebar-toc__content - animation: tocsidebarLtoR .9s - - .tocOpenMobile - .sidebar-toc__title - animation: tocsidebarRtoL .4s - - .sidebar-toc__progress - animation: tocsidebarRtoL .6s - - .sidebar-toc__content - animation: tocsidebarRtoL .7s - #mobile-sidebar-menus &.open for i in 1 2 3 4 @@ -215,19 +195,5 @@ if hexo-config('avatar.effect') == true 0% transform: translateX(200px) - 100% - transform: translateX(0) - -@keyframes tocsidebarRtoL - 0% - transform: translateX(200px) - - 100% - transform: translateX(0) - -@keyframes tocsidebarLtoR - 0% - transform: translateX(-200px) - 100% transform: translateX(0) \ No newline at end of file diff --git a/source/css/_global/index.styl b/source/css/_global/index.styl index 0e24ddd..a6903f2 100644 --- a/source/css/_global/index.styl +++ b/source/css/_global/index.styl @@ -26,6 +26,7 @@ --blockquote-bg: $blockquote-background-color --reward-pop: $reward-pop-up-bg --sidebar-icon-color: $sidebar-icon-color + --toc-link-color: $toc-link-color html height: 100% @@ -140,6 +141,16 @@ button background: none cursor: pointer +a + color: $a-link-color + text-decoration: none + word-wrap: break-word + transition: all .2s + overflow-wrap: break-word + + &:hover + color: $light-blue + // font #site-title, #site-subtitle, @@ -183,6 +194,10 @@ button transition-timing-function: cubic-bezier(.45, 1.64, .47, .66) transform: scaleX(1) +img + max-width: 100% + transition: all .2s + img[src=''], img:not([src]) opacity: 0 diff --git a/source/css/_layout/aside.styl b/source/css/_layout/aside.styl index eb007be..ea93b5e 100644 --- a/source/css/_layout/aside.styl +++ b/source/css/_layout/aside.styl @@ -1,10 +1,27 @@ #aside_content width: 25% + +minWidth900() + if hexo-config('aside.position') == 'right' + padding-left: 15px + else + padding-right: 15px + + +maxWidth900() + width: 100% + + if hexo-config('aside.mobile') == false + +maxWidth768() + display: none + > .card-widget:first-child margin-top: 0 + +maxWidth900() + margin-top: 1rem + .card-widget + position: relative overflow: hidden margin-top: 1rem border-radius: 8px @@ -82,15 +99,12 @@ padding: 1rem 1.2rem .item-headline + padding-bottom: .3rem font-size: 1.2em span margin-left: .5rem - & + div, - & + ul - padding: .3rem 0 0 - .sticky_layout +minWidth900() position: sticky @@ -171,6 +185,7 @@ .card-archives ul.card-archive-list, .card-categories ul.card-category-list margin: 0 + padding: 0 list-style: none .card-archives ul.card-archive-list > .card-archive-list-item, @@ -248,23 +263,71 @@ flex: 1 padding-right: 1rem -+maxWidth900() - #aside_content - width: 100% !important + // toc + #card-toc + +maxWidth900() + position: fixed + right: 45px + bottom: 30px + z-index: 9999 + display: none + width: 300px + transform-origin: right bottom + animation: toc-close .3s - #aside_content - .card-widget:first-child - margin-top: 1rem + &.open + display: block + animation: toc-open .3s -+minWidth900() - #aside_content - .card-widget - if hexo-config('aside.position') == 'right' - margin-left: 15px - else - margin-right: 15px + .toc-child + display: block !important -if hexo-config('aside.mobile') == false - +maxWidth768() - #aside_content - display: none \ No newline at end of file + .toc-content + overflow-y: auto + max-height: calc(100vh - 120px) + + ol, + li + list-style: none + + > ol + padding: 0 !important + + ol + margin: 0 + padding-left: .4rem + + .toc-link + display: block + padding-left: .3rem + border-left: 3px solid transparent + color: var(--toc-link-color) + transition: all .2s ease-in-out + + &.active + border-left-color: darken($theme-toc-color, 20%) + background: $theme-toc-color + color: $sidebar-active-color + + &:before + position: absolute + top: .6rem + right: 1.2rem + color: #a9a9a9 + content: attr(progress-percentage) + font-style: italic + font-size: 1.2rem + +@keyframes toc-open + 0% + transform: scale(.7) + + 100% + transform: scale(1) + +@keyframes toc-close + 0% + transform: scale(.7) + + 100% + transform: scale(1) diff --git a/source/css/_layout/head.styl b/source/css/_layout/head.styl index 5d58619..4f93edd 100644 --- a/source/css/_layout/head.styl +++ b/source/css/_layout/head.styl @@ -116,10 +116,14 @@ #post-info position: absolute - bottom: 1.5rem + bottom: 5rem padding: 0 8% width: 100% - text-align: left + text-align: center + + +maxWidth900() + bottom: 1.5rem + text-align: left +maxWidth768() bottom: 1.1rem @@ -128,7 +132,7 @@ #post-info #post-title margin-bottom: .4rem - font-size: 2.15em + font-size: 2.5em +maxWidth768() font-size: 1.72em diff --git a/source/css/_layout/pagination.styl b/source/css/_layout/pagination.styl index 5aae195..b792a06 100644 --- a/source/css/_layout/pagination.styl +++ b/source/css/_layout/pagination.styl @@ -59,6 +59,9 @@ .next-post width: 50% + +maxWidth768() + width: 100% + a position: relative display: block @@ -73,9 +76,4 @@ &.pagination-post margin: 2rem 0 !important - background: $dark-black - -+maxWidth768() - .prev-post, - .next-post - width: 100% !important + background: $dark-black \ No newline at end of file diff --git a/source/css/_layout/post.styl b/source/css/_layout/post.styl index 51173a0..665fb5a 100644 --- a/source/css/_layout/post.styl +++ b/source/css/_layout/post.styl @@ -142,6 +142,24 @@ no-beautify() padding-left: .3rem #article-container + word-wrap: break-word + overflow-wrap: break-word + + a + color: $theme-link-color + + &:hover + text-decoration: underline + + img + margin: 0 auto .8rem + + p + margin: 0 0 .8rem + + iframe + margin: 0 0 1rem + if hexo-config('beautify.enable') && hexo-config('beautify.field') == 'site' beautify() else if hexo-config('beautify.enable') && hexo-config('beautify.field') == 'post' @@ -152,42 +170,7 @@ no-beautify() else no-beautify() -a - color: $a-link-color - text-decoration: none - word-wrap: break-word - transition: all .2s - overflow-wrap: break-word - - &:hover - color: $light-blue - -a.fancybox - outline: none - - &:focus - outline: none - - display: inline-block - width: 100% - text-align: center - -img - max-width: 100% - transition: all .2s - -.katex-wrap - overflow: auto - - if hexo-config('katex') && hexo-config('katex.hide_scrollbar') - &::-webkit-scrollbar - display: none - -.layout_post - margin: 0 auto - padding: 2rem 15px - max-width: 1000px - +#post img display: block @@ -272,25 +255,6 @@ img &:hover text-decoration: none -#article-container - word-wrap: break-word - overflow-wrap: break-word - - a - color: $theme-link-color - - &:hover - text-decoration: underline - - img - margin: 0 auto .8rem - - p - margin: 0 0 .8rem - - iframe - margin: 0 0 1rem - .post-outdate-notice position: relative margin: 0 0 1rem @@ -311,25 +275,3 @@ img color: $noticeOutdate-border content: '\f071' transform: translateY(-50%) - -+maxWidth1024() - .layout_post - width: auto - -+maxWidth768() - .layout_post - padding: 1rem 5px - - & > #post - padding: 1.8rem .7rem - -// adjust the layout width in big screen -+minWidth2000() - .layout_post - max-width: 1300px - - .layout_page - max-width: 1500px - - &.hide-aside - max-width: 1300px \ No newline at end of file diff --git a/source/css/_layout/sidebar.styl b/source/css/_layout/sidebar.styl deleted file mode 100644 index 2ddafd0..0000000 --- a/source/css/_layout/sidebar.styl +++ /dev/null @@ -1,88 +0,0 @@ -#toggle-sidebar - position: fixed - bottom: $sidebar-icon-top - left: $sidebar-icon-left - z-index: 100 - color: var(--sidebar-icon-color) - font-size: $sidebar-icon-size - cursor: pointer - transition: all .2s - - +maxWidth1024() - display: none - -#sidebar - position: fixed - top: 0 - left: -($sidebar-width) - z-index: 10 - padding: 1rem 0 2rem .5rem - width: $sidebar-width - height: 100% - background: var(--sidebar-bg) - opacity: .9 - - &.tocOpenPc - & > #toggle-sidebar - color: #99a9bf - transform: rotateZ(180deg) - - +maxWidth1024() - right: -($mobile-sidebar-width) - left: auto - z-index: 103 - width: $mobile-sidebar-width - box-shadow: none - opacity: 1 - transition: all .4s - - .toc-child - display: block !important - - .sidebar-toc - ol, - li - list-style: none - - ol - margin-top: .2rem - padding-left: .4rem - - &__title - padding-right: .5rem - text-align: center - font-size: 1.3em - - &__content - overflow-y: scroll - padding-bottom: 5rem - height: 90vh - - .toc-link - display: block - padding-left: .2rem - border-right: 3px solid transparent - transition: all .2s ease-in-out - - &.active - border-right-color: darken($theme-toc-color, 20%) - background: $theme-toc-color - color: $sidebar-active-color - - &__progress - position: relative - margin-bottom: .3rem - padding-left: .6rem - color: $theme-toc-color - - .progress-notice - margin-right: .4rem - - .progress-num - display: inline-block - min-width: .9rem - - &-bar - width: 0 - height: 1px - background: $theme-toc-color \ No newline at end of file diff --git a/source/css/_layout/third-party.styl b/source/css/_layout/third-party.styl index f4fa222..7d39528 100644 --- a/source/css/_layout/third-party.styl +++ b/source/css/_layout/third-party.styl @@ -61,6 +61,13 @@ margin: 0 0 .8em padding: .3rem 0 .8em +.katex-wrap + overflow: auto + + if hexo-config('katex') && hexo-config('katex.hide_scrollbar') + &::-webkit-scrollbar + display: none + // mathjax .mathjax-overflow overflow-x: auto diff --git a/source/css/_mode/darkmode.styl b/source/css/_mode/darkmode.styl index bc34b0a..14df968 100644 --- a/source/css/_mode/darkmode.styl +++ b/source/css/_mode/darkmode.styl @@ -27,6 +27,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark' --blockquote-bg: lighten(#121212, 10) --reward-pop: lighten(#121212, 10) --sidebar-icon-color: alpha(#FFFFFF, .7) + --toc-link-color: alpha(#FFFFFF, .6) #web_bg:before, #footer:before, diff --git a/source/css/_mode/readmode.styl b/source/css/_mode/readmode.styl index d0da99a..802e296 100644 --- a/source/css/_mode/readmode.styl +++ b/source/css/_mode/readmode.styl @@ -12,18 +12,21 @@ if hexo-config('readmode') [data-theme='dark'] .read-mode - --font-color: rgba(255, 255, 255, .6) + --font-color: rgba(255, 255, 255, .7) --readmode-light-color: #0d0d0d - --white: rgba(255, 255, 255, .8) - --light-grey: rgba(255, 255, 255, .6) - --gray: rgba(255, 255, 255, .6) - --hr-border: rgba(255, 255, 255, .3) - --hr-before-color: rgba(255, 255, 255, .6) + --white: rgba(255, 255, 255, .9) + --light-grey: rgba(255, 255, 255, .7) + --gray: rgba(255, 255, 255, .7) + --hr-border: rgba(255, 255, 255, .5) + --hr-before-color: rgba(255, 255, 255, .7) -highlight-bg: #171717 .read-mode background: var(--readmode-light-color) + #aside_content + display: none + #body-wrap padding-left: 0 !important @@ -38,23 +41,21 @@ if hexo-config('readmode') padding: 0 text-align: center - .layout_post - > #post - background: transparent - box-shadow: none + #post + margin: 0 auto + background: transparent + box-shadow: none - &:hover - box-shadow: none + &:hover + box-shadow: none & > canvas display: none !important .highlight-tools, #footer, - #post > *:not(:first-child), + #post > *:not(#post-info):not(.post-content), #to_comment, - #sidebar, - #toggle-sidebar, #mobile-toc-button, #nav, .post-outdate-notice, @@ -179,6 +180,7 @@ if hexo-config('readmode') .note border: 2px solid var(--gray) + border-left-color: var(--gray) !important filter: none - background-color: var(--readmode-light-color) + background-color: var(--readmode-light-color) !important color: var(--font-color) \ No newline at end of file diff --git a/source/css/_page/common.styl b/source/css/_page/common.styl index 0a3189a..ced0cac 100644 --- a/source/css/_page/common.styl +++ b/source/css/_page/common.styl @@ -1,4 +1,4 @@ -.layout_page +.layout display: flex margin: 0 auto padding: 2rem 15px @@ -10,7 +10,20 @@ +maxWidth768() padding: 1rem 5px !important + +minWidth2000() + max-width: 1500px + & > div:first-child:not(.recent-posts) + align-self: flex-start + padding: 50px 40px + border-radius: 8px + background: var(--card-bg) + box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06) + transition: all .3s + + &:hover + box-shadow: 0 4px 12px 12px rgba(7, 17, 27, .15) + +maxWidth768() padding: 1.8rem .7rem !important @@ -20,31 +33,20 @@ +maxWidth900() width: 100% !important + if hexo-config('aside.position') == 'left' + +minWidth900() + order: 2 + // 隱藏aside &.hide-aside max-width: 1000px + +minWidth2000() + max-width: 1300px + & > div width: 100% !important -.layout_post > #post, -.layout_page > div:first-child:not(.recent-posts) - align-self: flex-start - padding: 50px 40px - border-radius: 8px - background: var(--card-bg) - box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06) - transition: all .3s - - &:hover - box-shadow: 0 4px 12px 12px rgba(7, 17, 27, .15) - -if hexo-config('aside.position') == 'left' - +minWidth900() - .layout_page - & > div:first-child - order: 2 - #page h1.page-title margin-top: .4rem \ No newline at end of file diff --git a/source/css/var.styl b/source/css/var.styl index f0ac7ce..ba88091 100644 --- a/source/css/var.styl +++ b/source/css/var.styl @@ -66,6 +66,8 @@ $sidebar-width = 300px $sidebar-background = #f6f8fa $sidebar-active-color = #fff $mobile-sidebar-width = 250px +// aside +$toc-link-color = #666261 // Button $button-color = #fff $button-hover-color = $themeColorEnable && hexo-config('theme_color.button_hover') ? convert(hexo-config('theme_color.button_hover')) : $light-orange diff --git a/source/js/main.js b/source/js/main.js index 7297f0a..9b251cd 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -1,21 +1,11 @@ - -/** - * 當menu過多時，自動適配，避免UI錯亂 - * @param {*} n - * 傳入 1 sidebar打開時 - * 傳入 2 正常狀態下 - */ - $(function () { const blogNameWidth = $('#site-name').width() const menusWidth = $('#menus').width() - const sidebarWidth = $('#sidebar').width() || 300 - const adjustMenu = function (n) { + const adjustMenu = () => { const $nav = $('#nav') let t - if (n === 0) t = true - else if (n === 1) t = blogNameWidth + menusWidth > $nav.width() - sidebarWidth - 30 + if (window.innerWidth < 768) t = true else t = blogNameWidth + menusWidth > $nav.width() - 30 if (t) { @@ -27,157 +17,45 @@ $(function () { // 初始化header const initAdjust = () => { - if (window.innerWidth < 768) adjustMenu(0) - else adjustMenu(2) + adjustMenu() $('#nav').addClass('show') } - /** - * 進入post頁sidebar處理 - */ - const OpenSidebarAuto = () => { - if (window.innerWidth > 1024 && $('#toggle-sidebar').hasClass('on')) { - setTimeout(function () { - openSidebar() - }, 400) - } - } - - /** - * 點擊左下角箭頭,顯示sidebar - */ - - const closeSidebar = () => { - $('#sidebar').removeClass('tocOpenPc').animate({ - left: '-300px' - }, 400) - $('#menus').animate({ - paddingRight: 0 - }, 400) - $('#body-wrap').animate({ - paddingLeft: 0 - }, 400) - if ($('#nav').hasClass('hide-menu')) { - setTimeout(function () { - adjustMenu(2) - }, 400) - } - } - - const openSidebar = () => { - if (!$('#nav').hasClass('hide-menu')) { - adjustMenu(1) - } - $('#sidebar').addClass('tocOpenPc').animate({ - left: 0 - }, 400) - $('#menus').animate({ - paddingRight: 300 - }, 400) - $('#body-wrap').animate({ - paddingLeft: 300 - }, 400) - } - - const toggleSidebar = function () { - $('#toggle-sidebar').on('click', function () { - const isOpen = $(this).hasClass('on') - isOpen ? $(this).removeClass('on') : $(this).addClass('on') - if (isOpen) { - closeSidebar() - } else { - openSidebar() - } - }) - } - - /** - * 手機menu和toc按鈕點擊 - * 顯示menu和toc的sidebar - */ - + // sidebar menus const sidebarFn = () => { const $toggleMenu = $('#toggle-menu') const $mobileSidebarMenus = $('#mobile-sidebar-menus') - const $mobileTocButton = $('#mobile-toc-button') const $menuMask = $('#menu_mask') const $body = $('body') - const $sidebar = $('#sidebar') - function openMobileSidebar (name) { + function openMobileSidebar () { btf.sidebarPaddingR() $body.css('overflow', 'hidden') $menuMask.fadeIn() - - if (name === 'menu') { - $toggleMenu.removeClass('close').addClass('open') - $mobileSidebarMenus.addClass('open') - } - - if (name === 'toc') { - $mobileTocButton.removeClass('close').addClass('open') - $sidebar.addClass('tocOpenMobile').css({ transform: 'translate3d(-100%,0,0)', left: '' }) - } + $toggleMenu.removeClass('close').addClass('open') + $mobileSidebarMenus.addClass('open') } - function closeMobileSidebar (name) { + function closeMobileSidebar () { $body.css({ overflow: '', 'padding-right': '' }) $menuMask.fadeOut() - - if (name === 'menu') { - $toggleMenu.removeClass('open').addClass('close') - $mobileSidebarMenus.removeClass('open') - } - - if (name === 'toc') { - $mobileTocButton.removeClass('open').addClass('close') - $sidebar.removeClass('tocOpenMobile').css({ transform: '' }) - } + $toggleMenu.removeClass('open').addClass('close') + $mobileSidebarMenus.removeClass('open') } $toggleMenu.on('click', function () { - openMobileSidebar('menu') - }) - - $mobileTocButton.on('click', function () { - openMobileSidebar('toc') + openMobileSidebar() }) $menuMask.on('click touchstart', function (e) { if ($toggleMenu.hasClass('open')) { - closeMobileSidebar('menu') - } - if ($mobileTocButton.hasClass('open')) { - closeMobileSidebar('toc') + closeMobileSidebar() } }) $(window).on('resize', function (e) { if (!$toggleMenu.is(':visible')) { - if ($toggleMenu.hasClass('open')) closeMobileSidebar('menu') - } - }) - - const mql = window.matchMedia('(max-width: 1024px)') - const $toggleSidebar = $('#toggle-sidebar') - const matchFn = (ev) => { - if (ev.matches) { - if ($sidebar.hasClass('tocOpenPc')) closeSidebar() - } else { - if ($toggleSidebar.hasClass('on')) openSidebar() - if ($mobileTocButton.hasClass('open')) closeMobileSidebar('toc') - } - } - - mql.addListener(matchFn) - document.addEventListener('pjax:send', () => { mql.removeListener(matchFn) }) - - // toc元素點擊 - $sidebar.find('.toc-link').on('click', function (e) { - e.preventDefault() - btf.scrollToDest(decodeURI($(this).attr('href'))) - if (window.innerWidth < 1024) { - closeMobileSidebar('toc') + if ($toggleMenu.hasClass('open')) closeMobileSidebar() } }) } @@ -427,9 +305,10 @@ $(function () { * toc */ const tocFn = function () { - const $sidebar = $('#sidebar') - const $tocChild = $sidebar.find('.toc-child') - const $tocLink = $sidebar.find('.toc-link') + const $cardTocLayout = $('#card-toc') + const $cardToc = $cardTocLayout.find('.toc-content') + const $tocChild = $cardToc.find('.toc-child') + const $tocLink = $cardToc.find('.toc-link') const $article = $('#article-container') $tocChild.hide() @@ -459,10 +338,7 @@ $(function () { const percentage = (scrollPercentRounded > 100) ? 100 : (scrollPercentRounded <= 0) ? 0 : scrollPercentRounded - $sidebar.find('.progress-num').text(percentage) - $sidebar.find('.sidebar-toc__progress-bar').animate({ - width: percentage + '%' - }, 100) + $cardToc.attr('progress-percentage', percentage) } // anchor @@ -473,9 +349,36 @@ $(function () { } } + const mobileToc = { + open: () => { + $cardTocLayout.addClass('open') + }, + + close: () => { + $cardTocLayout.removeClass('open') + } + } + + $('#mobile-toc-button').on('click', () => { + if ($cardTocLayout.is(':visible')) { + mobileToc.close() + } else { + mobileToc.open() + } + }) + + // toc元素點擊 + $tocLink.on('click', function (e) { + e.preventDefault() + btf.scrollToDest(decodeURI($(this).attr('href'))) + if (window.innerWidth < 900) { + mobileToc.close() + } + }) + const autoScrollToc = function (currentTop, item) { const activePosition = item.offset().top - const $tocContent = $sidebar.find('.sidebar-toc__content') + const $tocContent = $cardToc const sidebarScrollTop = $tocContent.scrollTop() if (activePosition > (currentTop + $(window).height() - 100)) { $tocContent.scrollTop(sidebarScrollTop + 100) @@ -489,7 +392,6 @@ $(function () { // DOM Hierarchy: // ol.toc > (li.toc-item, ...) // li.toc-item > (a.toc-link, ol.toc-2child > (li.toc-item, ...)) - const versionBiggerFive = GLOBAL_CONFIG.hexoversion.split('.')[0] >= 5 const list = $article.find('h1,h2,h3,h4,h5,h6') const findHeadPosition = function (top) { @@ -503,8 +405,7 @@ $(function () { list.each(function () { const head = $(this) if (top > head.offset().top - 70) { - if (versionBiggerFive) currentId = '#' + encodeURI($(this).attr('id')) - else currentId = '#' + $(this).attr('id') + currentId = '#' + encodeURI($(this).attr('id')) } }) @@ -765,9 +666,7 @@ $(function () { const unRefreshFn = function () { $(window).on('resize', function () { - if (window.innerWidth < 768) adjustMenu(0) - else if ($('#sidebar').hasClass('tocOpenPc') && $('#nav').hasClass('fixed')) adjustMenu(1) - else adjustMenu(2) + adjustMenu() }) clickFnOfSubMenu() @@ -779,9 +678,7 @@ $(function () { initAdjust() if (GLOBAL_CONFIG_SITE.isPost) { - OpenSidebarAuto() - toggleSidebar() - GLOBAL_CONFIG_SITE.isSidebar && tocFn() + GLOBAL_CONFIG_SITE.isToc && tocFn() GLOBAL_CONFIG.noticeOutdate !== undefined && addPostOutdateNotice() GLOBAL_CONFIG.relativeDate.post && relativeDate($('#post-meta time')) } else { diff --git a/source/js/search/algolia.js b/source/js/search/algolia.js index 4f0632b..c3f4b11 100644 --- a/source/js/search/algolia.js +++ b/source/js/search/algolia.js @@ -36,7 +36,7 @@ $(function () { searchClickFn() - window.addEventListener('pjax:success', function () { + window.addEventListener('pjax:send', function () { closeSearch() searchClickFn() }) diff --git a/source/js/search/local-search.js b/source/js/search/local-search.js index a760e6c..42ec4e4 100644 --- a/source/js/search/local-search.js +++ b/source/js/search/local-search.js @@ -47,7 +47,7 @@ $(function () { } searchClickFn() - window.addEventListener('pjax:success', function () { + window.addEventListener('pjax:send', function () { $('#local-search').is(':visible') && closeSearch() searchClickFn() })