From 7e729cff79fb87d12d8fbc65af10bf236265d5c2 Mon Sep 17 00:00:00 2001 From: Jerry Date: Mon, 27 Sep 2021 00:12:13 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=A8=99=E7=B1=A4?= =?UTF-8?q?=E5=A4=96=E6=8E=9B=20timeline=20closed=20#644=20fix:=20?= =?UTF-8?q?=E8=87=AA=E5=BB=BA=E9=A0=81=E9=9D=A2=E5=9C=96=E7=89=87=E6=B2=92?= =?UTF-8?q?=E6=9C=89=20blur=20=E6=95=88=E6=9E=9C=20improvement:=20?= =?UTF-8?q?=E5=84=AA=E5=8C=96=20404=20=E9=A0=81=E9=9D=A2=20UI=20improvemen?= =?UTF-8?q?t:=20lazyload=20=E9=BB=98=E8=AA=8D=E4=BD=94=E4=BD=8D=E5=9C=96?= =?UTF-8?q?=E6=94=B9=E7=82=BA=E9=80=8F=E6=98=8E=E5=9C=96=E7=89=87=20improv?= =?UTF-8?q?ement:=20=E5=84=AA=E5=8C=96=20lazyload=20blur=20=E5=87=BA?= =?UTF-8?q?=E7=8F=BE=E7=89=B9=E6=95=88=20improvement:=20=E5=84=AA=E5=8C=96?= =?UTF-8?q?=20css?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- languages/default.yml | 4 +- languages/en.yml | 4 +- languages/zh-CN.yml | 4 +- languages/zh-TW.yml | 4 +- layout/includes/404.pug | 15 +++---- layout/includes/head.pug | 2 +- package.json | 2 +- scripts/filters/post_lazyload.js | 2 +- scripts/tag/timeline.js | 40 +++++++++++++++++++ source/css/_global/function.styl | 23 +++++++++++ source/css/_global/index.styl | 5 ++- source/css/_layout/aside.styl | 11 ++---- source/css/_layout/footer.styl | 2 +- source/css/_layout/pagination.styl | 16 +------- source/css/_layout/post.styl | 3 +- source/css/_layout/relatedposts.styl | 13 +------ source/css/_mode/darkmode.styl | 1 + source/css/_mode/readmode.styl | 3 ++ source/css/_page/404.styl | 53 ++++++++++--------------- source/css/_page/archives.styl | 14 ++----- source/css/_page/categories.styl | 2 +- source/css/_page/flink.styl | 3 +- source/css/_page/homepage.styl | 5 +-- source/css/_search/algolia.styl | 2 +- source/css/_search/local-search.styl | 2 +- source/css/_tags/gallery.styl | 2 +- source/css/_tags/timeline.styl | 58 ++++++++++++++++++++++++++++ source/css/var.styl | 6 ++- 28 files changed, 186 insertions(+), 115 deletions(-) create mode 100644 scripts/tag/timeline.js create mode 100644 source/css/_tags/timeline.styl diff --git a/languages/default.yml b/languages/default.yml index 3e0cd28..09f14c1 100644 --- a/languages/default.yml +++ b/languages/default.yml @@ -118,6 +118,4 @@ Snackbar: loading: Loading... -error404: - error_title: Page not found - back_button: Go back home +error404: Page not found diff --git a/languages/en.yml b/languages/en.yml index 40aabfb..2465afa 100644 --- a/languages/en.yml +++ b/languages/en.yml @@ -118,6 +118,4 @@ Snackbar: loading: Loading... -error404: - error_title: Page not found - back_button: Go back home +error404: Page not found diff --git a/languages/zh-CN.yml b/languages/zh-CN.yml index a48bf3e..3270a21 100644 --- a/languages/zh-CN.yml +++ b/languages/zh-CN.yml @@ -119,6 +119,4 @@ Snackbar: loading: 加载中... -error404: - error_title: 页面没有找到 - back_button: 回到主页 +error404: 页面没有找到 diff --git a/languages/zh-TW.yml b/languages/zh-TW.yml index 2356331..4217284 100644 --- a/languages/zh-TW.yml +++ b/languages/zh-TW.yml @@ -119,6 +119,4 @@ Snackbar: loading: 載入中... -error404: - error_title: 頁面沒有找到 - back_button: 回到主頁 +error404: 頁面沒有找到 diff --git a/layout/includes/404.pug b/layout/includes/404.pug index 5d370c0..4a022c8 100644 --- a/layout/includes/404.pug +++ b/layout/includes/404.pug @@ -1,17 +1,12 @@ -- var top_img = theme.error_404.background || theme.default_top_img -- var bg_img = `background-image: url('${url_for(top_img)}')` +- var top_img_404 = theme.error_404.background || theme.default_top_img #body-wrap.error404 - div(style='display: none') - include ./header/index.pug + include ./header/index.pug #error-wrap .error-content - .error-img(style=bg_img) + .error-img + img(src=url_for(top_img_404) alt='Page not found') .error-info h1.error_title= '404' - .error_subtitle= theme.error_404.subtitle - a.button--animated(href=config.root) - i.fas.fa-rocket - = _p('error404.back_button') - + .error_subtitle= theme.error_404.subtitle || _p('error404') diff --git a/layout/includes/head.pug b/layout/includes/head.pug index cefb644..6af325a 100644 --- a/layout/includes/head.pug +++ b/layout/includes/head.pug @@ -4,7 +4,7 @@ - else if (is_category()) pageTitle = _p('page.category') + ': ' + page.category - else if (is_month()) pageTitle += ': ' + page.month + '/' + page.year - else if (is_year()) pageTitle += ': ' + page.year -- else if (is_current('/404.html', [strict])) pageTitle = _p('error404.error_title') +- else if (is_current('/404.html', [strict])) pageTitle = _p('error404') - else pageTitle = page.title || config.title || '' - var isSubtitle = config.subtitle ? ' - ' + config.subtitle : '' diff --git a/package.json b/package.json index f326611..4fb23c4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hexo-theme-butterfly", - "version": "4.0.0-b6", + "version": "4.0.0-b7", "description": "A Simple and Card UI Design theme for Hexo", "main": "package.json", "scripts": { diff --git a/scripts/filters/post_lazyload.js b/scripts/filters/post_lazyload.js index 0b21de9..c4267d1 100644 --- a/scripts/filters/post_lazyload.js +++ b/scripts/filters/post_lazyload.js @@ -9,7 +9,7 @@ const urlFor = require('hexo-util').url_for.bind(hexo) function lazyload (htmlContent) { - const bg = hexo.theme.config.lazyload.placeholder ? urlFor(hexo.theme.config.lazyload.placeholder) : 'data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=' + const bg = hexo.theme.config.lazyload.placeholder ? urlFor(hexo.theme.config.lazyload.placeholder) : 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' return htmlContent.replace(/(\n([\w\W\s\S]*?)/g + + let result = '' + if (args.length) { + args = hexo.render.renderSync({ text: args.join(' '), engine: 'markdown' }) + result += `
${args}
` + } + + const matches = [] + let match + + while ((match = tlBlock.exec(content)) !== null) { + matches.push(match[1]) + matches.push(match[2]) + } + + console.log(matches) + + for (let i = 0; i < matches.length; i += 2) { + const tlChildTitle = hexo.render.renderSync({ text: matches[i], engine: 'markdown' }) + const tlChildContent = hexo.render.renderSync({ text: matches[i + 1], engine: 'markdown' }) + + const tlTitleHtml = `
${tlChildTitle}
` + const tlContentHtml = `
${tlChildContent}
` + + result += `
${tlTitleHtml + tlContentHtml}
` + } + + return `
${result}
` +} + +hexo.extend.tag.register('timeline', timeLineFn, { ends: true }) diff --git a/source/css/_global/function.styl b/source/css/_global/function.styl index 6788bb8..003d9a7 100644 --- a/source/css/_global/function.styl +++ b/source/css/_global/function.styl @@ -27,6 +27,29 @@ &:hover box-shadow: var(--card-hover-box-shadow) +.imgHover + width: 100% + height: 100% + transition: filter 375ms ease-in .2s, transform .6s + object-fit: cover + + &:hover + transform: scale(1.1) + +.postImgHover + &:hover + img + opacity: .8 + transform: scale(1.1) + + img + position: absolute + width: 100% + height: 100% + opacity: .4 + transition: all .6s, filter 375ms ease-in .2s + object-fit: cover + maxWidth600() @media screen and (max-width: 600px) {block} diff --git a/source/css/_global/index.styl b/source/css/_global/index.styl index 23f40b5..a14cad0 100644 --- a/source/css/_global/index.styl +++ b/source/css/_global/index.styl @@ -29,6 +29,9 @@ --toc-link-color: $toc-link-color --card-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .05) --card-hover-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .09) + --timeline-bg: $timeline-content-bg + --timeline-border-color: $timeline-border-color + --pseudo-hover: $pseudo-hover body position: relative @@ -203,7 +206,7 @@ img if hexo-config('lazyload.enable') && hexo-config('lazyload.blur') && !hexo-config('lazyload.placeholder') img &[data-lazy-src]:not(.loaded) - filter: blur(10px) brightness(1) + filter: blur(8px) brightness(1) &[data-lazy-src].error filter: none diff --git a/source/css/_layout/aside.styl b/source/css/_layout/aside.styl index be55212..d59c24f 100644 --- a/source/css/_layout/aside.styl +++ b/source/css/_layout/aside.styl @@ -130,13 +130,7 @@ height: w & > img - width: 100% - height: 100% - transition: all .6s - object-fit: cover - - &:hover - transform: scale(1.1) + @extend .imgHover .content flex: 1 @@ -253,6 +247,7 @@ width: $toc-mobile-width opacity: 0 transform-origin: right bottom + transition: none .toc-percentage float: right @@ -323,7 +318,7 @@ img height: 100% - transition: all .5s + transition: filter 375ms ease-in 0.2s, transform .3s object-fit: cover &:hover diff --git a/source/css/_layout/footer.styl b/source/css/_layout/footer.styl index 3b8a3bf..3fb1d39 100644 --- a/source/css/_layout/footer.styl +++ b/source/css/_layout/footer.styl @@ -1,7 +1,7 @@ #footer position: relative background: $light-blue - background-attachment: local + background-attachment: scroll background-position: bottom background-size: cover diff --git a/source/css/_layout/pagination.styl b/source/css/_layout/pagination.styl index 5038e57..601e7bc 100644 --- a/source/css/_layout/pagination.styl +++ b/source/css/_layout/pagination.styl @@ -8,15 +8,6 @@ background: $theme-paginator-color color: var(--white) - img.prev-cover, - img.next-cover - position: absolute - width: 100% - height: 100% - opacity: .4 - transition: all .6s - object-fit: cover - .pagination-info position: absolute top: 50% @@ -45,6 +36,7 @@ .prev-post, .next-post + @extend .postImgHover width: 50% +maxWidth768() @@ -56,12 +48,6 @@ overflow: hidden height: 150px - &:hover - img.prev-cover, - img.next-cover - opacity: .8 - transform: scale(1.1) - &.pagination-post overflow: hidden margin-top: 40px diff --git a/source/css/_layout/post.styl b/source/css/_layout/post.styl index d6fa246..482cbc2 100644 --- a/source/css/_layout/post.styl +++ b/source/css/_layout/post.styl @@ -108,7 +108,7 @@ beautify() &:hover &:before - border-color: $pseudo-hover + border-color: var(--pseudo-hover) &:before $w = .42em @@ -152,6 +152,7 @@ no-beautify() display: block margin: 0 auto 20px max-width: 100% + transition: filter 375ms ease-in 0.2s p margin: 0 0 16px diff --git a/source/css/_layout/relatedposts.styl b/source/css/_layout/relatedposts.styl index dba9154..e064202 100644 --- a/source/css/_layout/relatedposts.styl +++ b/source/css/_layout/relatedposts.styl @@ -16,11 +16,7 @@ height: 200px background: $dark-black vertical-align: bottom - - &:hover - .cover - opacity: .8 - transform: scale(1.1) + @extend .postImgHover +maxWidth768() margin: 2px @@ -30,13 +26,6 @@ +maxWidth600() width: calc(100% - 4px) - .cover - width: 100% - height: 100% - opacity: .4 - transition: all .6s - object-fit: cover - .content position: absolute top: 50% diff --git a/source/css/_mode/darkmode.styl b/source/css/_mode/darkmode.styl index d287bfc..14e3b78 100644 --- a/source/css/_mode/darkmode.styl +++ b/source/css/_mode/darkmode.styl @@ -35,6 +35,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark' --hlnumber-color: alpha(#FFFFFF, .4) --hlscrollbar-bg: lighten(#121212, 5) --hlexpand-bg: linear-gradient(180deg, rgba(lighten(#121212, 2), .6), rgba(lighten(#121212, 2), .9)) + --timeline-bg: lighten(#121212, 5) #web_bg:before, #footer:before, diff --git a/source/css/_mode/readmode.styl b/source/css/_mode/readmode.styl index 19c790c..8d2b4f7 100644 --- a/source/css/_mode/readmode.styl +++ b/source/css/_mode/readmode.styl @@ -11,6 +11,9 @@ if hexo-config('readmode') --exit-btn-bg: #C0C0C0 --exit-btn-color: #fff --exit-btn-hover: darken(#C0C0C0, 20) + --timeline-bg: none + --timeline-border-color: none + --pseudo-hover: none [data-theme='dark'] .read-mode diff --git a/source/css/_page/404.styl b/source/css/_page/404.styl index 60244be..ea8e056 100644 --- a/source/css/_page/404.styl +++ b/source/css/_page/404.styl @@ -6,75 +6,64 @@ if hexo-config('error_404.enable') right: 0 left: 0 margin: 0 auto - padding: 0 20px + padding: 60px 20px 0 max-width: 1000px transform: translate(0, -50%) .error-content @extend .cardHover - display: flex - flex-direction: row - justify-content: center - align-items: center + overflow: hidden margin: 0 20px height: 360px +maxWidth768() - flex-direction: column margin: 0 height: 500px .error-img - flex: 1 + display: inline-block + overflow: hidden + width: 50% height: 100% - border-top-left-radius: 8px - border-bottom-left-radius: 8px - background-color: $theme-color - background-position: center - background-size: cover +maxWidth768() - flex: 1 width: 100% - border-top-right-radius: 8px - border-bottom-left-radius: 0 + height: 45% + + img + @extend .imgHover + background-color: $theme-color .error-info - flex: 1 - padding: 10px + display: inline-flex + flex-direction: column + justify-content: center + align-content: center + width: 50% + height: 100% + vertical-align: top text-align: center - font-size: 14px if $site-name-font font-family: $site-name-font +maxWidth768() - flex: 1.1 width: 100% + height: 55% .error_title - margin-top: -80px + margin-top: -.6em font-size: 9em +maxWidth768() - margin-top: -60px + font-size: 8em .error_subtitle @extend .limit-more-line - margin-top: -70px + margin-top: -3em word-break: break-word font-size: 1.6em -webkit-line-clamp: 2 - a - display: inline-block - margin-top: 10px - padding: 6px 30px - background: var(--btn-bg) - color: var(--btn-color) - - i - padding-right: 6px - & + #rightside display: none \ No newline at end of file diff --git a/source/css/_page/archives.styl b/source/css/_page/archives.styl index f2bc8c5..4575fbb 100644 --- a/source/css/_page/archives.styl +++ b/source/css/_page/archives.styl @@ -12,7 +12,7 @@ &:hover &:before - border-color: $pseudo-hover + border-color: var(--pseudo-hover) &:before position: absolute @@ -47,7 +47,7 @@ &:hover &:before - border-color: $pseudo-hover + border-color: var(--pseudo-hover) &:before $w = 6px @@ -75,7 +75,7 @@ border-color: $light-blue &:before - border-color: $pseudo-hover + border-color: var(--pseudo-hover) &-time color: $theme-meta-color @@ -102,13 +102,7 @@ height: 80px img - width: 100% - height: 100% - transition: all .6s - object-fit: cover - - &:hover - transform: scale(1.1) + @extend .imgHover &-info flex: 1 diff --git a/source/css/_page/categories.styl b/source/css/_page/categories.styl index 38d92cf..ab18108 100644 --- a/source/css/_page/categories.styl +++ b/source/css/_page/categories.styl @@ -59,4 +59,4 @@ &:hover &:before - border-color: $pseudo-hover + border-color: var(--pseudo-hover) diff --git a/source/css/_page/flink.styl b/source/css/_page/flink.styl index 651d4b7..d1cad61 100644 --- a/source/css/_page/flink.styl +++ b/source/css/_page/flink.styl @@ -58,7 +58,8 @@ img width: 100% height: 100% - transition: all .3s + object-fit: cover + transition: filter 375ms ease-in 0.2s, transform .3s .img-alt display: none diff --git a/source/css/_page/homepage.styl b/source/css/_page/homepage.styl index 288e02b..8000916 100644 --- a/source/css/_page/homepage.styl +++ b/source/css/_page/homepage.styl @@ -32,10 +32,7 @@ height: 230px img.post_bg - width: 100% - height: 100% - transition: all .6s - object-fit: cover + @extend .imgHover &.right order: 1 diff --git a/source/css/_search/algolia.styl b/source/css/_search/algolia.styl index 702f8dc..b96ae92 100644 --- a/source/css/_search/algolia.styl +++ b/source/css/_search/algolia.styl @@ -19,7 +19,7 @@ &:hover &:before - border-color: $pseudo-hover + border-color: var(--pseudo-hover) &:before $w = .5em diff --git a/source/css/_search/local-search.styl b/source/css/_search/local-search.styl index aa07477..455846c 100644 --- a/source/css/_search/local-search.styl +++ b/source/css/_search/local-search.styl @@ -22,7 +22,7 @@ &:hover &:before - border-color: $pseudo-hover + border-color: var(--pseudo-hover) &:before $w = .5em diff --git a/source/css/_tags/gallery.styl b/source/css/_tags/gallery.styl index b726062..f09e32b 100644 --- a/source/css/_tags/gallery.styl +++ b/source/css/_tags/gallery.styl @@ -32,7 +32,7 @@ figure.gallery-group height: 250px backface-visibility: hidden opacity: .8 - transition: opacity .35s, transform .35s + transition: all .3s, filter 375ms ease-in 0.2s !important transform: translate3d(-10px, 0, 0) object-fit: cover diff --git a/source/css/_tags/timeline.styl b/source/css/_tags/timeline.styl new file mode 100644 index 0000000..056c392 --- /dev/null +++ b/source/css/_tags/timeline.styl @@ -0,0 +1,58 @@ +#article-container + .timeline + margin: 0 0 20px + padding: 14px 20px 5px + border-left: 2px solid var(--timeline-border-color) + + .timeline-item + margin: 0 0 15px + + &:hover + .item-circle + &:before + border: 3px solid var(--pseudo-hover) + + &.headline + .timeline-item-title + .item-circle + > p + font-weight: 600 + font-size: 1.2em + + &:before + left: -28px + border: 4px solid var(--pseudo-hover) + + .timeline-item-title + position: relative + + .item-circle + &:before + position: absolute + top: 50% + left: -27px + width: 6px + height: 6px + border: 3px solid var(--timeline-border-color) + border-radius: 50% + background: var(--card-bg) + content: '' + transition: all .3s + transform: translate(0, -50%) + + > p + margin: 0 0 8px + font-weight: 500 + + .timeline-item-content + position: relative + padding: 12px 10px + border-radius: 8px + background: var(--timeline-bg) + font-size: .93em + + & > :last-child + margin-bottom: 0 + + & + .timeline + margin-top: -20px \ No newline at end of file diff --git a/source/css/var.styl b/source/css/var.styl index d36ab41..fc2934d 100644 --- a/source/css/var.styl +++ b/source/css/var.styl @@ -174,4 +174,8 @@ $tab-botton-color = $font-color $tab-button-hover-bg = darken($tab-border-color, 8) $tab-active-border-color = $theme-color $tab-button-active-bg = $card-bg -$tab-to-top-color = #99a9bf \ No newline at end of file +$tab-to-top-color = #99a9bf + +// timeline +$timeline-content-bg = #f6f6f6 +$timeline-border-color = $theme-color