diff --git a/_config.yml b/_config.yml index 48be3f5..21b2c0c 100644 --- a/_config.yml +++ b/_config.yml @@ -497,6 +497,9 @@ footer_bg: false # the position of bottom right button/default unit: px (右下角按鈕距離底部的距離/默認單位為px) rightside-bottom: +# Enter transitions (開啓網頁進入效果) +enter_transitions: true + # Background effects (背景特效) # -------------------------------------- diff --git a/layout/includes/additional-js.pug b/layout/includes/additional-js.pug index 16ff624..214badc 100644 --- a/layout/includes/additional-js.pug +++ b/layout/includes/additional-js.pug @@ -68,4 +68,7 @@ div include ./head/aplayer.pug if theme.pjax.enable - !=partial('includes/third-party/pjax', {}, {cache:theme.fragment_cache}) \ No newline at end of file + !=partial('includes/third-party/pjax', {}, {cache:theme.fragment_cache}) + + !=partial('includes/third-party/baidu_push', {}, {cache:theme.fragment_cache}) + \ No newline at end of file diff --git a/layout/includes/head/config.pug b/layout/includes/head/config.pug index f0198d5..cfb04ba 100644 --- a/layout/includes/head/config.pug +++ b/layout/includes/head/config.pug @@ -124,7 +124,6 @@ script. js: '!{theme.CDN.justifiedGallery_js}', css: '!{theme.CDN.justifiedGallery_css}' }, - baiduPush: !{theme.baidu_push}, isPhotoFigcaption: !{theme.photofigcaption}, islazyload: !{theme.lazyload.enable}, isanchor: !{theme.anchor} diff --git a/layout/includes/header/index.pug b/layout/includes/header/index.pug index b9f388c..c4ed6e6 100644 --- a/layout/includes/header/index.pug +++ b/layout/includes/header/index.pug @@ -47,14 +47,14 @@ header#page-header(class=isHomeClass style=bg_img) include ./post-info.pug else if is_home() #site-info - h1#site_title=site_title - #site_subtitle + h1#site-title=site_title + #site-subtitle span#subtitle if(theme.social) #site_social_icons !=fragment_cache('social', function(){return partial('includes/header/social')}) - #scroll_down + #scroll-down i.fas.fa-angle-down.scroll-down-effects else - #page_site-info - h1#site_title=site_title + #page-site-info + h1#site-title=site_title diff --git a/layout/includes/mixins/post-ui.pug b/layout/includes/mixins/post-ui.pug index 917efee..7748b8e 100644 --- a/layout/includes/mixins/post-ui.pug +++ b/layout/includes/mixins/post-ui.pug @@ -78,4 +78,4 @@ mixin postUI(posts) if theme.ad && theme.ad.index if (index + 1) % 3 == 0 - .recent-post-item.ad_height!=theme.ad.index + .recent-post-item.ad-height!=theme.ad.index diff --git a/layout/includes/page/artitalk.pug b/layout/includes/page/artitalk.pug index 9103f92..c5128bb 100644 --- a/layout/includes/page/artitalk.pug +++ b/layout/includes/page/artitalk.pug @@ -1 +1,4 @@ +if top_img === false + h1.page-title= page.title + #artitalk_main \ No newline at end of file diff --git a/layout/includes/third-party/baidu_push.pug b/layout/includes/third-party/baidu_push.pug new file mode 100644 index 0000000..13faf11 --- /dev/null +++ b/layout/includes/third-party/baidu_push.pug @@ -0,0 +1,15 @@ +if theme.baidu_push + script. + (function(){ + const bp = document.createElement('script'); + const curProtocol = window.location.protocol.split(':')[0]; + if (curProtocol === 'https'){ + bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; + } + else{ + bp.src = 'http://push.zhanzhang.baidu.com/push.js'; + } + bp.dataset.pjax = '' + const s = document.getElementsByTagName("script")[0]; + s.parentNode.insertBefore(bp, s); + })() \ No newline at end of file diff --git a/package.json b/package.json index d96b0e0..bf7fd39 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hexo-theme-butterfly", - "version": "3.2.0-b5", + "version": "3.2.0-b6", "description": "A Simple and Card UI Design theme for Hexo", "main": "package.json", "scripts": { diff --git a/source/css/_global/function.styl b/source/css/_global/function.styl index 2b2bc62..d404aa7 100644 --- a/source/css/_global/function.styl +++ b/source/css/_global/function.styl @@ -45,31 +45,189 @@ minWidth2000() @media screen and (min-width: 2000px) {block} -[data-theme='light'] - --global-bg: $body-bg - --font-color: $font-black - --hr-border: lighten($theme-hr-color, 50%) - --hr-before-color: lighten($theme-hr-color, 30%) - --search-bg: $search-bg - --search-input-color: $search-input-color - --search-result-title: $search-result-title - --preloader-bg: $preloader-bg - --preloader-color: $preloader-word-color - --tab-border-color: $tab-border-color - --tab-botton-bg: $tab-botton-bg - --tab-botton-color: $tab-botton-color - --tab-button-hover-bg: $tab-button-hover-bg - --tab-button-active-bg: $tab-button-active-bg - --card-bg: $card-bg - --sidebar-bg: $sidebar-background - --btn-hover-color: $button-hover-color - --btn-color: $button-color - --btn-bg: $button-bg - --text-bg-hover: $text-bg-hover - --light-grey: $light-grey - --white: $white - --text-highlight-color: $text-highlight-color - --blockquote-color: $blockquote-color - --blockquote-bg: $blockquote-background-color - --reward-pop: $reward-pop-up-bg - --sidebar-icon-color: $sidebar-icon-color \ No newline at end of file +// animation +if hexo-config('enter_transitions') + #content-inner, + #footer + animation: main 1s + + #page-header + animation: header-effect 1s + + #site-title, + #site-subtitle + animation: titlescale 1s + + #nav.show + animation: headerNoOpacity 1s + + canvas:not(#ribbon-canvas), + #web_bg + animation: to_show 4s + + #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 + > :nth-child({i}) + animation: sidebarItem (i / 5)s + +.card-announcement-animation + color: #FF0000 + animation: announ_animation .8s linear infinite + +.scroll-down-effects + animation: scroll-down-effect 1.5s infinite + +if hexo-config('avatar.effect') == true + .avatar-img + animation: avatar_turn_around 2s linear infinite + +.reward-main + animation: donate_effcet .3s .1s ease both + +@keyframes scroll-down-effect + 0% + top: 0 + opacity: .4 + + 50% + top: -16px + opacity: 1 + + 100% + top: 0 + opacity: .4 + +@keyframes header-effect + 0% + opacity: 0 + transform: translateY(-50px) + + 100% + opacity: 1 + transform: translateY(0) + +@keyframes headerNoOpacity + 0% + transform: translateY(-50px) + + 100% + transform: translateY(0) + +@keyframes main + 0% + opacity: 0 + transform: translateY(50px) + + 100% + opacity: 1 + transform: translateY(0) + +@keyframes titlescale + 0% + opacity: 0 + transform: scale(.7) + + 100% + opacity: 1 + transform: scale(1) + +@keyframes search_close + 0% + opacity: 1 + transform: scale(1) + + 100% + opacity: 0 + transform: scale(.7) + +@keyframes to_show + 0% + opacity: 0 + + 100% + opacity: 1 + +@keyframes ribbon_to_show + 0% + opacity: 0 + + 100% + opacity: hexo-config('canvas_ribbon.alpha') + +@keyframes avatar_turn_around + from + transform: rotate(0) + + to + transform: rotate(360deg) + +@keyframes sub_menus + 0% + opacity: 0 + transform: translateY(10px) + + 100% + opacity: 1 + transform: translateY(0) + +@keyframes donate_effcet + 0% + opacity: 0 + transform: translateY(-20px) + + 100% + opacity: 1 + transform: translateY(0) + +@keyframes announ_animation + 0%, + to + transform: scale(1) + + 50% + transform: scale(1.2) + +@keyframes sidebarItem + 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 b9a8ccf..0e24ddd 100644 --- a/source/css/_global/index.styl +++ b/source/css/_global/index.styl @@ -1,3 +1,32 @@ +[data-theme='light'] + --global-bg: $body-bg + --font-color: $font-black + --hr-border: lighten($theme-hr-color, 50%) + --hr-before-color: lighten($theme-hr-color, 30%) + --search-bg: $search-bg + --search-input-color: $search-input-color + --search-result-title: $search-result-title + --preloader-bg: $preloader-bg + --preloader-color: $preloader-word-color + --tab-border-color: $tab-border-color + --tab-botton-bg: $tab-botton-bg + --tab-botton-color: $tab-botton-color + --tab-button-hover-bg: $tab-button-hover-bg + --tab-button-active-bg: $tab-button-active-bg + --card-bg: $card-bg + --sidebar-bg: $sidebar-background + --btn-hover-color: $button-hover-color + --btn-color: $button-color + --btn-bg: $button-bg + --text-bg-hover: $text-bg-hover + --light-grey: $light-grey + --white: $white + --text-highlight-color: $text-highlight-color + --blockquote-color: $blockquote-color + --blockquote-bg: $blockquote-background-color + --reward-pop: $reward-pop-up-bg + --sidebar-icon-color: $sidebar-icon-color + html height: 100% font-size: 20px @@ -112,8 +141,8 @@ button cursor: pointer // font -#page-header #site_title, -#page-header #site_subtitle, +#site-title, +#site-subtitle, #site-name, #aside_content .author-info__name, #aside_content .author-info__description @@ -168,191 +197,6 @@ img:not([src]) .post-ad margin: 2rem 0 -.ad_height +.ad-height display: block !important - height: auto !important - -// animation -#content-inner, -#footer - animation: main 1s - -#page-header - animation: header-effect 1s - -#site_title, -#site_subtitle - animation: titlescale 1s - -canvas:not(#ribbon-canvas), -#web_bg - animation: to_show 4s - -#ribbon-canvas - animation: ribbon_to_show 4s - -.card-announcement-animation - color: #FF0000 - animation: announ_animation .8s linear infinite - -.scroll-down-effects - animation: scroll-down-effect 1.5s infinite - -if hexo-config('avatar.effect') == true - .avatar-img - animation: avatar_turn_around 2s linear infinite - -.reward-main - animation: donate_effcet .3s .1s ease both - -.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 - transform: translate3d(-100%, 0, 0) - - for i in 1 2 3 4 - > :nth-child({i}) - animation: sidebarItem (i / 5)s - -@keyframes scroll-down-effect - 0% - top: 0 - opacity: .4 - - 50% - top: -16px - opacity: 1 - - 100% - top: 0 - opacity: .4 - -@keyframes header-effect - 0% - opacity: 0 - transform: translateY(-50px) - - 100% - opacity: 1 - transform: translateY(0) - -@keyframes headerNoOpacity - 0% - transform: translateY(-50px) - - 100% - transform: translateY(0) - -@keyframes main - 0% - opacity: 0 - transform: translateY(50px) - - 100% - opacity: 1 - transform: translateY(0) - -@keyframes titlescale - 0% - opacity: 0 - transform: scale(.7) - - 100% - opacity: 1 - transform: scale(1) - -@keyframes search_close - 0% - opacity: 1 - transform: scale(1) - - 100% - opacity: 0 - transform: scale(.7) - -@keyframes to_show - 0% - opacity: 0 - - 100% - opacity: 1 - -@keyframes ribbon_to_show - 0% - opacity: 0 - - 100% - opacity: hexo-config('canvas_ribbon.alpha') - -@keyframes avatar_turn_around - from - transform: rotate(0) - - to - transform: rotate(360deg) - -@keyframes sub_menus - 0% - opacity: 0 - transform: translateY(10px) - - 100% - opacity: 1 - transform: translateY(0) - -@keyframes donate_effcet - 0% - opacity: 0 - transform: translateY(-20px) - - 100% - opacity: 1 - transform: translateY(0) - -@keyframes announ_animation - 0%, - to - transform: scale(1) - - 50% - transform: scale(1.2) - -@keyframes sidebarItem - 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 + height: auto !important \ No newline at end of file diff --git a/source/css/_layout/head.styl b/source/css/_layout/head.styl index 7d33366..659a0c5 100644 --- a/source/css/_layout/head.styl +++ b/source/css/_layout/head.styl @@ -19,14 +19,14 @@ padding: 0 .5rem width: 100% - #site_title, - #site_subtitle, - #scroll_down .scroll-down-effects + #site-title, + #site-subtitle, + #scroll-down .scroll-down-effects text-align: center text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15) line-height: 1.5 - #site_title + #site-title margin: 0 color: var(--white) font-size: 1.85em @@ -34,7 +34,7 @@ +minWidth768() font-size: 2.85em - #site_subtitle + #site-subtitle color: var(--light-grey) font-size: 1.15em @@ -57,7 +57,7 @@ font-size: 1.43em cursor: pointer - #scroll_down + #scroll-down position: absolute bottom: 0 width: 100% @@ -76,7 +76,7 @@ +maxWidth768() height: 14rem - #page_site-info + #page-site-info position: absolute top: 10rem padding: 0 .5rem @@ -228,7 +228,6 @@ _:future, &.show opacity: 1 - animation: headerNoOpacity 1s #blog_name flex: 1 diff --git a/source/css/_layout/mobile-sidebar.styl b/source/css/_layout/mobile-sidebar.styl index 2c1970e..57a40eb 100644 --- a/source/css/_layout/mobile-sidebar.styl +++ b/source/css/_layout/mobile-sidebar.styl @@ -19,6 +19,9 @@ background: var(--sidebar-bg) transition: all .5s + &.open + transform: translate3d(-100%, 0, 0) + & > .mobile_author_icon padding: 1.3rem 1.5rem 0 text-align: center diff --git a/source/css/_layout/post.styl b/source/css/_layout/post.styl index 788abab..51173a0 100644 --- a/source/css/_layout/post.styl +++ b/source/css/_layout/post.styl @@ -291,9 +291,6 @@ img iframe margin: 0 0 1rem - & > .page-title - margin-top: .4rem - .post-outdate-notice position: relative margin: 0 0 1rem diff --git a/source/css/_layout/third-party.styl b/source/css/_layout/third-party.styl index 7a3014a..f4fa222 100644 --- a/source/css/_layout/third-party.styl +++ b/source/css/_layout/third-party.styl @@ -1,5 +1,5 @@ #vcomment - font-size: 1.15em + font-size: 1.1em .vbtn border: none @@ -13,6 +13,9 @@ textarea background: url(hexo-config('valine.bg')) 100% 100% no-repeat + &:focus + background: none + .vimg transition: all .3s diff --git a/source/css/_page/common.styl b/source/css/_page/common.styl index fbb2e82..0a3189a 100644 --- a/source/css/_page/common.styl +++ b/source/css/_page/common.styl @@ -43,4 +43,8 @@ if hexo-config('aside.position') == 'left' +minWidth900() .layout_page & > div:first-child - order: 2 \ No newline at end of file + order: 2 + +#page + h1.page-title + margin-top: .4rem \ No newline at end of file diff --git a/source/js/main.js b/source/js/main.js index ba98522..7297f0a 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -186,7 +186,7 @@ $(function () { * 首頁top_img底下的箭頭 */ const scrollDownInIndex = () => { - $('#scroll_down').on('click', function () { + $('#scroll-down').on('click', function () { btf.scrollToDest('#content-inner') }) } @@ -656,22 +656,6 @@ $(function () { }) } - /** - * 百度推送 - */ - const pushToBaidu = () => { - const bp = document.createElement('script') - const curProtocol = window.location.protocol.split(':')[0] - if (curProtocol === 'https') { - bp.src = 'https://zz.bdstatic.com/linksubmit/push.js' - } else { - bp.src = 'http://push.zhanzhang.baidu.com/push.js' - } - bp.dataset.pjax = '' - const s = document.getElementsByTagName('script')[0] - s.parentNode.insertBefore(bp, s) - } - /** * tag-hide */ @@ -789,7 +773,6 @@ $(function () { clickFnOfSubMenu() GLOBAL_CONFIG.islazyload && lazyloadImg() GLOBAL_CONFIG.copyright !== undefined && addCopyright() - GLOBAL_CONFIG.baiduPush && pushToBaidu() } window.refreshFn = function () { diff --git a/source/js/search/local-search.js b/source/js/search/local-search.js index b23f1f2..c5bea4d 100644 --- a/source/js/search/local-search.js +++ b/source/js/search/local-search.js @@ -62,7 +62,7 @@ $(function () { return { title: $('title', this).text(), content: $('content', this).text(), - url: $('url', this).text() + url: GLOBAL_CONFIG.root + $('url', this).text() } }).get()