From 082df5611215037765b073961947436daca1bcd5 Mon Sep 17 00:00:00 2001 From: Jerry Date: Fri, 8 Nov 2019 22:25:00 +0800 Subject: [PATCH] =?UTF-8?q?1.=20=E5=AE=8C=E5=96=84gitalk=20=E5=9C=A8=20dar?= =?UTF-8?q?k=20mode=E4=B8=8B=E7=9A=84=E9=A1=AF=E7=A4=BA=202.=20=E5=AE=8C?= =?UTF-8?q?=E5=96=84footer=20=E6=9C=89=E8=83=8C=E6=99=AF=E5=92=8C=E7=84=A1?= =?UTF-8?q?=E8=83=8C=E6=99=AF=E4=B8=8B=EF=BC=8C=E5=9C=A8dark=20mode?= =?UTF-8?q?=E4=B8=8B=E7=9A=84=E9=A1=AF=E7=A4=BA=203.=20=E7=95=8C=E9=9D=A2?= =?UTF-8?q?=E5=BE=AE=E8=AA=BF=204.=20=E5=A2=9E=E5=8A=A0=E9=81=B8=E9=A0=85?= =?UTF-8?q?=E5=8F=AF=E9=97=9C=E9=96=89aside=E5=9C=A8=E6=89=8B=E6=A9=9F?= =?UTF-8?q?=E4=B8=8A=E7=9A=84=E9=A1=AF=E7=A4=BA=205.=20=E4=BF=AE=E5=BE=A9?= =?UTF-8?q?=E9=97=9C=E9=96=89=E5=A4=9C=E9=96=93=E6=A8=A1=E5=BC=8F=E6=83=85?= =?UTF-8?q?=E6=B3=81=E4=B8=8B=EF=BC=8Cconsole=E5=A0=B1Uncaught=20Reference?= =?UTF-8?q?Error:=20autoChangeMode=20is=20not=20defined=20=E7=9A=84bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _config.yml | 3 +++ layout/includes/layout.pug | 3 ++- source/css/_layout/aside.styl | 6 +++++ source/css/_layout/footer.styl | 6 ++--- source/css/_layout/page.styl | 4 +-- source/css/_layout/post.styl | 20 +++++++------- source/css/_layout/z-darkmode.styl | 39 ++++++++++++++------------- source/js/main.js | 42 ++++++++++++++++-------------- 8 files changed, 68 insertions(+), 55 deletions(-) diff --git a/_config.yml b/_config.yml index 49e6b3c..2d8be8b 100644 --- a/_config.yml +++ b/_config.yml @@ -428,6 +428,9 @@ subtitle: #### 側邊欄 #### #------------------------------------- +# 手機頁面（ 顯示寬度 < 768px ）是否顯示aside内容 +aside_mobile: true + # 側邊欄顯示設置 aside: position: right # left or right diff --git a/layout/includes/layout.pug b/layout/includes/layout.pug index d0f87e2..b9f7e98 100644 --- a/layout/includes/layout.pug +++ b/layout/includes/layout.pug @@ -70,7 +70,8 @@ html(lang=config.language data-theme=theme.display_mode) block content - var footer_bg = theme.footer_bg == false ? '' : bg_img - footer#footer(style=footer_bg) + - var is_bg = theme.footer_bg == false ? 'color' : 'photo' + footer#footer(style=footer_bg data-type=is_bg) include ./footer.pug include ./rightside.pug each item in theme.CDN_USE.js diff --git a/source/css/_layout/aside.styl b/source/css/_layout/aside.styl index 4e7b14f..03e9963 100644 --- a/source/css/_layout/aside.styl +++ b/source/css/_layout/aside.styl @@ -273,3 +273,9 @@ margin-left: 15px else margin-right: 15px + +if hexo-config('aside_mobile') == false + @media screen and (max-width: $sm) + #aside_content + display: none + diff --git a/source/css/_layout/footer.styl b/source/css/_layout/footer.styl index bd99f12..5d63fd5 100644 --- a/source/css/_layout/footer.styl +++ b/source/css/_layout/footer.styl @@ -15,13 +15,11 @@ content: '' width: 100% height: 100% - opacity: 0.5 - background-color: #394245 - background-image: linear-gradient(234deg, #394245 0%, #000 100%) + background-color: alpha($dark-black,0.5) #footer-wrap - padding: 1.2rem 1rem 1rem + padding: 2rem 1rem color: $light-grey text-align: center position: relative diff --git a/source/css/_layout/page.styl b/source/css/_layout/page.styl index 2e5a6d2..81da60d 100644 --- a/source/css/_layout/page.styl +++ b/source/css/_layout/page.styl @@ -319,7 +319,7 @@ #tag, #category padding: 1.8rem 1.3rem - margin-top: 10px + margin: 0 .category-lists padding: 0 @@ -344,7 +344,7 @@ display: none &:first-child - margin-top: 10px + margin: 0 @media screen and (min-width: 900px) if hexo-config("aside.position") == "left" diff --git a/source/css/_layout/post.styl b/source/css/_layout/post.styl index c937daa..30f912f 100644 --- a/source/css/_layout/post.styl +++ b/source/css/_layout/post.styl @@ -41,16 +41,14 @@ if hexo-config("post_beautify.enable") height: 19rem &:before - position: absolute; - top: 0; - left: 0; - display: block; - content: ''; - width: 100%; - height: 100%; - opacity: 0.5; - background-color: #394245; - background-image: linear-gradient(234deg, #394245 0%, #000 100%); + position: absolute + top: 0 + left: 0 + display: block + content: '' + width: 100% + height: 100% + background-color: alpha($dark-black,0.5) a color: $light-grey @@ -464,4 +462,4 @@ img @media screen and (max-width:768px) .layout_post padding: 1.8rem 1rem - margin: 30px 5px + margin: 0px 5px diff --git a/source/css/_layout/z-darkmode.styl b/source/css/_layout/z-darkmode.styl index 4a5040a..9bbd62c 100644 --- a/source/css/_layout/z-darkmode.styl +++ b/source/css/_layout/z-darkmode.styl @@ -181,13 +181,11 @@ #category, #page, .flink, - .layout_post, - #footer-wrap - background:#2d3035 + .layout_post + background: #2d3035 #nav, - #top-container, - #footer + #top-container &::before content: "" position: absolute @@ -195,7 +193,7 @@ bottom: 0 left: 0 right: 0 - background-color: rgba(0,0,0,0.7) + background-color: alpha($dark-black,0.7) #nav span, #nav i, @@ -234,23 +232,19 @@ border-top: 13px solid lighten(#2d3035,10) !important - #web_bg[data-type=color] + #web_bg[data-type=color], + #footer[data-type=color] background: #2d3032 - #web_bg[data-type=photo]:before - content: "" - position: absolute - top: 0 - bottom: 0 - left: 0 - right: 0 - background-color: rgba(0,0,0,0.8) + #web_bg[data-type=photo]:before, + #footer[data-type=photo]:before + background-color: alpha($dark-black,0.7) - #hbe-security - label + #hexo-blog-encrypt + label,input color: #99a9bf !important input - background-color: #616a6b + background-color: #2d3035 #mobile-sidebar @@ -283,6 +277,15 @@ .bookmark--animated:before background: lighten(#2d3035,20) !important + + if hexo-config('gitalk') && hexo-config('gitalk.enable') + #gitalk-container + .gt-header-textarea + background-color: #2d3035 !important + color: #99a9bf + border: 1px solid #99a9bf + .gt-comment-content + filter: brightness(0.7) diff --git a/source/js/main.js b/source/js/main.js index 4f574c1..124fb3f 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -746,26 +746,30 @@ $(function () { * Darkmode */ - // if (autoChangeMode == '1') { - // window.matchMedia("(prefers-color-scheme: dark)").addListener(function (e) { - // if (e.matches) { - // activateDarkMode() - // change_light_icon() - // Cookies.remove('theme') - // } else { - // activateLightMode() - // change_dark_icon() - // Cookies.remove('theme') - // } - - // }) - // } + if (typeof autoChangeMode !== "undefined") { + - if (autoChangeMode == '1' || autoChangeMode == '2') { - if (Cookies.get("theme") == "dark") { - change_light_icon() - } else { - change_dark_icon() + // if (autoChangeMode == '1') { + // window.matchMedia("(prefers-color-scheme: dark)").addListener(function (e) { + // if (e.matches) { + // activateDarkMode() + // change_light_icon() + // Cookies.remove('theme') + // } else { + // activateLightMode() + // change_dark_icon() + // Cookies.remove('theme') + // } + + // }) + // } + + if (autoChangeMode == '1' || autoChangeMode == '2') { + if (Cookies.get("theme") == "dark") { + change_light_icon() + } else { + change_dark_icon() + } } }