feat: 新增標籤外掛 timeline closed #644

fix: 自建頁面圖片沒有 blur 效果
improvement: 優化 404 頁面 UI
improvement: lazyload 默認佔位圖改為透明圖片
improvement: 優化 lazyload blur 出現特效
improvement: 優化 css

languages/default.yml

@@ -118,6 +118,4 @@ Snackbar:
 
 loading: Loading...
 
-error404:
+error404: Page not found
-  error_title: Page not found
-  back_button: Go back home

languages/en.yml

@@ -118,6 +118,4 @@ Snackbar:
 
 loading: Loading...
 
-error404:
+error404: Page not found
-  error_title: Page not found
-  back_button: Go back home

languages/zh-CN.yml

@@ -119,6 +119,4 @@ Snackbar:
 
 loading: 加载中...
 
-error404:
+error404: 页面没有找到
-  error_title: 页面没有找到
-  back_button: 回到主页

languages/zh-TW.yml

@@ -119,6 +119,4 @@ Snackbar:
 
 loading: 載入中...
 
-error404:
+error404: 頁面沒有找到
-  error_title: 頁面沒有找到
-  back_button: 回到主頁

layout/includes/404.pug

@@ -1,17 +1,12 @@
-- var top_img = theme.error_404.background || theme.default_top_img
+- var top_img_404 = theme.error_404.background || theme.default_top_img
-- var bg_img = `background-image: url('${url_for(top_img)}')`
 
 #body-wrap.error404
-  div(style='display: none')
   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
+        .error_subtitle= theme.error_404.subtitle || _p('error404')
-        a.button--animated(href=config.root)
-          i.fas.fa-rocket
-          = _p('error404.back_button')
-          

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 : ''

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": {

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(/(<img.*? src=)/ig, `$1 "${bg}" data-lazy-src=`)
 }
 

scripts/tag/timeline.js

@@ -0,0 +1,40 @@
+/**
+ * timeline
+ * by Jerry
+ */
+
+'use strict'
+
+function timeLineFn (args, content) {
+  const tlBlock = /<!--\s*timeline (.*?)\s*-->\n([\w\W\s\S]*?)<!--\s*endtimeline\s*-->/g
+
+  let result = ''
+  if (args.length) {
+    args = hexo.render.renderSync({ text: args.join(' '), engine: 'markdown' })
+    result += `<div class='timeline-item headline'><div class='timeline-item-title'><div class='item-circle'>${args}</div></div></div>`
+  }
+
+  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 = `<div class='timeline-item-title'><div class='item-circle'>${tlChildTitle}</div></div>`
+    const tlContentHtml = `<div class='timeline-item-content'>${tlChildContent}</div>`
+
+    result += `<div class='timeline-item'>${tlTitleHtml + tlContentHtml}</div>`
+  }
+
+  return `<div class="timeline">${result}</div>`
+}
+
+hexo.extend.tag.register('timeline', timeLineFn, { ends: true })

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}

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

source/css/_layout/aside.styl

@@ -130,13 +130,7 @@
         height: w
 
         & > img
-          width: 100%
+          @extend .imgHover
-          height: 100%
-          transition: all .6s
-          object-fit: cover
-
-          &:hover
-            transform: scale(1.1)
 
       .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

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
 

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

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

source/css/_layout/relatedposts.styl

@@ -16,11 +16,7 @@
       height: 200px
       background: $dark-black
       vertical-align: bottom
-
+      @extend .postImgHover
-      &:hover
-        .cover
-          opacity: .8
-          transform: scale(1.1)
 
       +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%

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,

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

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
+        overflow: hidden
-        flex-direction: row
-        justify-content: center
-        align-items: center
         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
+            height: 45%
-            border-bottom-left-radius: 0
+
+          img
+            @extend .imgHover
+            background-color: $theme-color
 
         .error-info
-          flex: 1
+          display: inline-flex
-          padding: 10px
+          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

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%
+        @extend .imgHover
-        height: 100%
-        transition: all .6s
-        object-fit: cover
-
-        &:hover
-          transform: scale(1.1)
 
     &-info
       flex: 1

source/css/_page/categories.styl

@@ -59,4 +59,4 @@
 
         &:hover
           &:before
-            border-color: $pseudo-hover
+            border-color: var(--pseudo-hover)

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

source/css/_page/homepage.styl

@@ -32,10 +32,7 @@
         height: 230px
 
       img.post_bg
-        width: 100%
+        @extend .imgHover
-        height: 100%
-        transition: all .6s
-        object-fit: cover
 
       &.right
         order: 1

source/css/_search/algolia.styl

@@ -19,7 +19,7 @@
 
       &:hover
         &:before
-          border-color: $pseudo-hover
+          border-color: var(--pseudo-hover)
 
       &:before
         $w = .5em

source/css/_search/local-search.styl

@@ -22,7 +22,7 @@
 
       &:hover
         &:before
-          border-color: $pseudo-hover
+          border-color: var(--pseudo-hover)
 
       &:before
         $w = .5em

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
 

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

source/css/var.styl

@@ -175,3 +175,7 @@ $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
+
+// timeline
+$timeline-content-bg = #f6f6f6
+$timeline-border-color = $theme-color