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

fix: 自建頁面圖片沒有 blur 效果 improvement: 優化 404 頁面 UI improvement: lazyload 默認佔位圖改為透明圖片 improvement: 優化 lazyload blur 出現特效 improvement: 優化 css
2026-04-10 21:17:07 +08:00 · 2021-09-27 00:12:13 +08:00
parent 3708fdf569
commit 7e729cff79
28 changed files with 186 additions and 115 deletions
--- 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}
--- 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
--- 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
--- 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

--- 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
--- 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
--- 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%
--- 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,
--- 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
--- 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
--- 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
--- 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)
--- 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
--- 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
--- 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
--- 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
--- 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

--- a/source/css/_tags/timeline.styl
+++ 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
--- 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
+$tab-to-top-color = #99a9bf
+
+// timeline
+$timeline-content-bg = #f6f6f6
+$timeline-border-color = $theme-color