2025-2-26-fixed

2025-02-26 09:16:07 +08:00
parent bf50b6c865
commit 4968d276dc
456 changed files with 27801 additions and 1 deletions
--- a/themes/fluid/source/css/_functions/base.styl
+++ b/themes/fluid/source/css/_functions/base.styl
@@ -0,0 +1,8 @@
+theme-config(config, predef)
+  unquote(hexo-config(config) ? hexo-config(config):predef)
+
+theme-config-unit(config, predef, unit)
+  unit(hexo-config(config) ? hexo-config(config):predef, unit)
+
+theme-config-origin(config, predef)
+  (hexo-config(config) ? hexo-config(config):predef)
--- a/themes/fluid/source/css/_mixins/base.styl
+++ b/themes/fluid/source/css/_mixins/base.styl
@@ -0,0 +1,23 @@
+/* 给锚点增加偏移量（适配导航栏的高度） */
+anchor-offset()
+  &::before
+    display block
+    content ""
+    margin-top -5rem
+    height 5rem
+    width 1px
+    visibility hidden
+
+/* 毛玻璃透明效果 */
+ground-glass($px, $bg-color, $alpha)
+  /* 若浏览器支持 backdrop-filter，则启用毛玻璃 */
+  @supports (-webkit-backdrop-filter: blur($px)) or (backdrop-filter: blur($px))
+    &
+      background rgba(convert($bg-color), $alpha)
+      -webkit-backdrop-filter blur($px)
+      backdrop-filter blur($px)
+
+  /* 若浏览器器不支持，则使用透明 */
+  @supports not ((-webkit-backdrop-filter: blur($px)) or (backdrop-filter: blur($px)))
+    &
+      background rgb(convert($bg-color))
--- a/themes/fluid/source/css/_pages/_about/about.styl
+++ b/themes/fluid/source/css/_pages/_about/about.styl
@@ -0,0 +1,32 @@
+.about-avatar
+  position relative
+  margin -8rem auto 1rem
+  width 10rem
+  height 10rem
+  z-index 3
+
+  img
+    width 100%
+    height 100%
+    border-radius 50%
+    background-color transparent
+    object-fit cover
+    box-shadow 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)
+
+.about-info
+  & > div
+    margin-bottom .5rem
+
+.about-name
+  font-size 1.75rem
+  font-weight bold
+
+.about-intro
+  font-size 1rem
+
+.about-icons
+  & > a:not(:last-child)
+    margin-right .5rem
+
+  & > a > i
+    font-size 1.5rem
--- a/themes/fluid/source/css/_pages/_archive/archive.styl
+++ b/themes/fluid/source/css/_pages/_archive/archive.styl
@@ -0,0 +1,31 @@
+.list-group
+  a ~ p.h5
+    margin-top 1rem
+
+.list-group-item
+  display flex
+  background-color transparent
+  border 0
+
+  time
+    flex 0 0 5rem
+
+  .list-group-item-title
+    white-space nowrap
+    overflow hidden
+    text-overflow ellipsis
+
+@media (max-width: 575px)
+  .list-group-item
+    font-size .95rem
+    padding 0.5rem 0.75rem
+
+    time
+      flex 0 0 4rem
+
+.list-group-item-action
+  color var(--text-color)
+
+  &:focus, &:hover
+    color var(--link-hover-color)
+    background-color var(--link-hover-bg-color)
--- a/themes/fluid/source/css/_pages/_base/_widget/anchorjs.styl
+++ b/themes/fluid/source/css/_pages/_base/_widget/anchorjs.styl
@@ -0,0 +1,8 @@
+// Rewrite anchorjs
+.anchorjs-link
+  text-decoration none !important
+  transition opacity .2s ease-in-out
+
+.markdown-body h1, h2, h3, h4, h5, h6
+  &:hover > .anchorjs-link
+    opacity 1
--- a/themes/fluid/source/css/_pages/_base/_widget/banner.styl
+++ b/themes/fluid/source/css/_pages/_base/_widget/banner.styl
@@ -0,0 +1,29 @@
+.banner
+  height 100%
+  position relative
+  overflow hidden
+  cursor default
+
+  .mask
+    position absolute
+    width 100%
+    height 100%
+    background-color rgba(0, 0, 0, 0.3)
+
+  &[parallax="true"]
+    will-change transform
+    -webkit-transform-style preserve-3d
+    -webkit-backface-visibility hidden
+    transition transform .05s ease-out
+
+if $banner-width-height-ratio > 0
+  @media (max-width: unit($banner-width-height-ratio * 100, "vh"))
+    .header-inner
+      max-height unit(100 / $banner-width-height-ratio, "vw")
+
+    #board
+      margin-top -1rem !important
+
+  @media (max-width: unit($scroll-arrow-height-limit - 0.01, "vh"))
+    .scroll-down-bar
+      display none
--- a/themes/fluid/source/css/_pages/_base/_widget/board.styl
+++ b/themes/fluid/source/css/_pages/_base/_widget/board.styl
@@ -0,0 +1,10 @@
+#board
+  position relative
+  margin-top -2rem
+  padding 3rem 0
+  background-color var(--board-bg-color)
+  transition background-color .2s ease-in-out
+  border-radius 0.5rem
+  z-index 3
+  -webkit-box-shadow 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19)
+  box-shadow 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19)
--- a/themes/fluid/source/css/_pages/_base/_widget/code-widget.styl
+++ b/themes/fluid/source/css/_pages/_base/_widget/code-widget.styl
@@ -0,0 +1,36 @@
+.code-widget
+  display inline-block
+  background-color transparent
+  font-size .75rem
+  line-height 1
+  font-weight bold
+  padding .3rem .1rem .1rem .1rem
+  position absolute
+  right .45rem
+  top .15rem
+  z-index 1
+
+.code-widget-light
+  color #999
+
+.code-widget-dark
+  color #bababa
+
+.copy-btn
+  cursor pointer
+  user-select none
+  -webkit-appearance none
+  outline none
+
+  & > i
+    font-size .75rem !important
+    font-weight 400
+    margin-right .15rem
+    opacity 0
+    transition opacity .2s ease-in-out
+
+.markdown-body pre:hover > .copy-btn > i
+  opacity 0.9
+
+.markdown-body pre:hover > .copy-btn, .markdown-body pre:not(:hover) > .copy-btn
+  outline none
--- a/themes/fluid/source/css/_pages/_base/_widget/copyright.styl
+++ b/themes/fluid/source/css/_pages/_base/_widget/copyright.styl
@@ -0,0 +1,90 @@
+// Modified from [hexo-theme-icarus](https://github.com/ppoffice/hexo-theme-icarus)
+
+.license-box
+  background-color rgba(#1b1f23, .05)
+  transition background-color .2s ease-in-out
+  border-radius 4px
+  font-size .9rem
+  overflow hidden
+  padding 1.25rem
+  position relative
+  z-index 1
+
+  .license-icon
+    position absolute
+    top 50%
+    left 100%
+
+    &::after
+      content "\e8e4"
+      font-size 12.5rem
+      line-height 1
+      opacity 0.1
+      position relative
+      left -.85em
+      bottom .5em
+      z-index -1
+
+  .license-title
+    margin-bottom 1rem
+
+    div:nth-child(1)
+      line-height 1.2
+      margin-bottom .25rem
+
+    div:nth-child(2)
+      color var(--sec-text-color)
+      font-size .8rem
+
+  .license-meta
+    align-items center
+    display flex
+    flex-wrap wrap
+    justify-content flex-start
+
+    .license-meta-item
+      align-items center
+      justify-content center
+      margin-right 1.5rem
+
+      div:nth-child(1)
+        color var(--sec-text-color)
+        font-size .8rem
+        font-weight normal
+
+      i.iconfont
+        font-size 1rem
+
+  @media (max-width: 575px) and (min-width: 425px)
+    .license-meta
+
+      .license-meta-item
+        display flex
+        justify-content flex-start
+        flex-wrap wrap
+        font-size .8rem
+        flex 0 0 50%
+        max-width 50%
+        margin-right 0
+
+        div:nth-child(1)
+          margin-right .5rem
+
+      .license-meta-date
+        order -1
+
+  @media (max-width: 424px)
+    &::after
+      top -65px
+
+    .license-meta
+      flex-direction column
+      align-items flex-start
+
+      .license-meta-item
+        display flex
+        flex-wrap wrap
+        font-size .8rem
+
+        div:nth-child(1)
+          margin-right .5rem
--- a/themes/fluid/source/css/_pages/_base/_widget/footer.styl
+++ b/themes/fluid/source/css/_pages/_base/_widget/footer.styl
@@ -0,0 +1,65 @@
+.footer-inner
+  padding 3rem 0 1rem 0
+  text-align center
+
+  & > div:not(:first-child)
+    margin .25rem 0
+    font-size .85rem
+
+  .statistics
+    display flex
+    flex-direction row
+    justify-content center
+
+    & > span
+      flex 1
+      margin 0 .25rem
+
+    & > *:nth-last-child(2):first-child
+      text-align right
+
+    & > *:nth-last-child(2):first-child ~ *
+      text-align left
+
+  .beian
+    display flex
+    flex-direction row
+    justify-content center
+
+    & > *
+      margin 0 .25rem
+
+  .beian-police
+    position relative
+    overflow hidden
+    display inline-flex
+    align-items center
+    justify-content left
+
+    img
+      margin-right 3px
+      width 1rem
+      height 1rem
+      margin-bottom .1rem
+
+  @media (max-width: 424px)
+    .statistics
+      flex-direction column
+
+      & > *:nth-last-child(2):first-child
+        text-align center
+
+      & > *:nth-last-child(2):first-child ~ *
+        text-align center
+
+    .beian
+      flex-direction column
+
+      .beian-police
+        justify-content center
+
+      & > *:nth-last-child(2):first-child
+        text-align center
+
+      & > *:nth-last-child(2):first-child ~ *
+        text-align center
--- a/themes/fluid/source/css/_pages/_base/_widget/footnote.styl
+++ b/themes/fluid/source/css/_pages/_base/_widget/footnote.styl
@@ -0,0 +1,25 @@
+sup > a, .footnote-text
+  anchor-offset()
+  &::before
+    display inline-block
+
+.footnote-item
+  anchor-offset()
+
+.footnote-list
+  ol
+    list-style-type none
+    counter-reset sectioncounter
+    padding-left .5rem
+    font-size .95rem
+
+    li:before
+      font-family "Helvetica Neue", monospace, "Monaco"
+      content "["counter(sectioncounter)"]"
+      counter-increment sectioncounter
+
+    li+li
+      margin-top .5rem
+
+.footnote-text
+  padding-left .5em
--- a/themes/fluid/source/css/_pages/_base/_widget/header.styl
+++ b/themes/fluid/source/css/_pages/_base/_widget/header.styl
@@ -0,0 +1,174 @@
+// Rewrite navbar
+.navbar
+  background-color transparent
+  font-size 0.875rem
+  box-shadow 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)
+  -webkit-box-shadow 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)
+
+  .navbar-brand
+    color var(--navbar-text-color)
+
+  .navbar-toggler .animated-icon span
+    background-color var(--navbar-text-color)
+
+  .nav-item .nav-link
+    display block
+    color var(--navbar-text-color)
+    transition color .2s ease-in-out, background-color .2s ease-in-out
+
+    &:hover
+      color var(--link-hover-color)
+
+    &:focus
+      color var(--navbar-text-color)
+
+    i
+      font-size 0.875rem
+      line-height inherit
+
+    i:only-child
+      margin 0 .2rem
+
+  .navbar-toggler
+    border-width 0
+    outline 0
+
+  &.scrolling-navbar
+    will-change background, padding
+    -webkit-transition background 0.5s ease-in-out, padding 0.5s ease-in-out
+    transition background 0.5s ease-in-out, padding 0.5s ease-in-out
+
+    @media (min-width: 600px)
+      &
+        padding-top 12px
+        padding-bottom 12px
+
+      & .navbar-nav > li
+        -webkit-transition-duration 1s
+        transition-duration 1s
+
+    &.top-nav-collapse
+      padding-top 5px
+      padding-bottom 5px
+
+  .dropdown-menu
+    font-size 0.875rem
+    color var(--navbar-text-color)
+    background-color rgba(0, 0, 0, 0.3)
+    border none
+    min-width 8rem
+    -webkit-transition background .5s ease-in-out,padding .5s ease-in-out
+    transition background .5s ease-in-out,padding .5s ease-in-out
+
+    @media (max-width: 991.98px)
+      text-align center
+
+  .dropdown-item
+    color var(--navbar-text-color)
+
+    &:hover, &:focus
+      color var(--link-hover-color)
+      background-color rgba(0, 0, 0, 0.1)
+
+  @media (min-width: 992px)
+    .dropdown:hover > .dropdown-menu
+      display block
+
+    .dropdown > .dropdown-toggle:active
+      pointer-events none
+
+    .dropdown-menu
+      top 95%
+
+  .animated-icon
+    width 30px
+    height 20px
+    position relative
+    margin 0
+    -webkit-transform rotate(0deg)
+    -moz-transform rotate(0deg)
+    -o-transform rotate(0deg)
+    transform rotate(0deg)
+    -webkit-transition .5s ease-in-out
+    -moz-transition .5s ease-in-out
+    -o-transition .5s ease-in-out
+    transition .5s ease-in-out
+    cursor pointer
+
+    span
+      display block
+      position absolute
+      height 3px
+      width 100%
+      border-radius 9px
+      opacity 1
+      left 0
+      -webkit-transform rotate(0deg)
+      -moz-transform rotate(0deg)
+      -o-transform rotate(0deg)
+      transform rotate(0deg)
+      -webkit-transition .25s ease-in-out
+      -moz-transition .25s ease-in-out
+      -o-transition .25s ease-in-out
+      transition .25s ease-in-out
+      background #ffffff
+
+      &:nth-child(1)
+        top 0
+
+      &:nth-child(2)
+        top 10px
+
+      &:nth-child(3)
+        top 20px
+
+    &.open
+      span
+        &:nth-child(1)
+          top 11px
+          -webkit-transform rotate(135deg)
+          -moz-transform rotate(135deg)
+          -o-transform rotate(135deg)
+          transform rotate(135deg)
+
+        &:nth-child(2)
+          opacity 0
+          left -60px
+
+        &:nth-child(3)
+          top 11px
+          -webkit-transform rotate(-135deg)
+          -moz-transform rotate(-135deg)
+          -o-transform rotate(-135deg)
+          transform rotate(-135deg)
+
+.navbar .dropdown-collapse, .top-nav-collapse, .navbar-col-show
+  if $navbar-glass-enable
+    ground-glass($navbar-glass-px, $navbar-bg-color, $navbar-glass-alpha)
+  else
+    background-color var(--navbar-bg-color)
+
+@media (max-width: 767px)
+  .navbar
+    font-size 1rem
+    line-height 2.5rem
+
+.banner-text
+  color var(--subtitle-color)
+  max-width calc(960px - 6rem)
+  width 80%
+  overflow-wrap break-word
+
+  .typed-cursor
+    margin 0 .2rem
+
+@media (max-width: 767px)
+  #subtitle, .typed-cursor
+    font-size 1.5rem
+
+@media (max-width: 575px)
+  .banner-text
+    font-size 0.9rem
+
+  #subtitle, .typed-cursor
+    font-size 1.35rem
--- a/themes/fluid/source/css/_pages/_base/_widget/modal.styl
+++ b/themes/fluid/source/css/_pages/_base/_widget/modal.styl
@@ -0,0 +1,100 @@
+// Rewrite modal
+.modal-dialog .modal-content
+  background-color var(--board-bg-color)
+  border 0
+  border-radius .125rem
+  -webkit-box-shadow 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15)
+  box-shadow 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15)
+
+.modal-dialog .modal-content .modal-header
+  border-bottom-color var(--line-color)
+  transition border-bottom-color .2s ease-in-out
+
+.close
+  color var(--text-color)
+
+  &:hover
+    color var(--link-hover-color)
+
+  &:focus
+    outline 0
+
+.modal-dialog .modal-content .modal-header
+  border-top-left-radius .125rem
+  border-top-right-radius .125rem
+  border-bottom 1px solid #dee2e6
+
+.md-form
+  position relative
+  margin-top 1.5rem
+  margin-bottom 1.5rem
+
+.md-form
+  input[type]
+    -webkit-box-sizing content-box
+    box-sizing content-box
+    background-color transparent
+    border none
+    border-bottom 1px solid #ced4da
+    border-radius 0
+    outline none
+    -webkit-box-shadow none
+    box-shadow none
+    transition border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out
+
+    $normal = #4285f4
+
+    &:focus:not([readonly])
+      border-bottom 1px solid $normal
+      -webkit-box-shadow 0 1px 0 0 $normal
+      box-shadow 0 1px 0 0 $normal
+
+      & + label
+        color: $normal
+
+    $valid = #00c851
+
+    &.valid, &:focus.valid
+      border-bottom 1px solid $valid
+      -webkit-box-shadow 0 1px 0 0 $valid
+      box-shadow 0 1px 0 0 $valid
+
+      & + label
+        color: $valid
+
+    $invalid = #f44336
+
+    &.invalid, &:focus.invalid
+      border-bottom 1px solid $invalid
+      -webkit-box-shadow 0 1px 0 0 $invalid
+      box-shadow 0 1px 0 0 $invalid
+
+      & + label
+        color $invalid
+
+    &.validate
+      margin-bottom 2.5rem
+
+    &.form-control
+      height auto
+      padding .6rem 0 .4rem 0
+      margin 0 0 .5rem 0
+      color var(--text-color)
+      background-color transparent
+      border-radius 0
+
+  label
+    font-size 0.8rem
+    position absolute
+    top -1rem
+    left 0
+    color #757575
+    cursor text
+    transition color .2s ease-out
+
+.modal-open[style]
+  padding-right: 0 !important
+  overflow auto
+
+  #navbar[style]
+    padding-right 1rem !important
--- a/themes/fluid/source/css/_pages/_base/_widget/ngrogress.styl
+++ b/themes/fluid/source/css/_pages/_base/_widget/ngrogress.styl
@@ -0,0 +1,12 @@
+// Rewrite nprogress
+$npColor = theme-config("fun_features.progressbar.color", "#29d")
+#nprogress
+  .bar
+    height theme-config-unit("fun_features.progressbar.height_px", 3, "px") !important
+    background-color $npColor !important
+  .peg
+    box-shadow 0 0 14px $npColor, 0 0 8px $npColor !important
+
+  @media (max-width: 575px)
+    .bar
+      display none
--- a/themes/fluid/source/css/_pages/_base/_widget/noscript.styl
+++ b/themes/fluid/source/css/_pages/_base/_widget/noscript.styl
@@ -0,0 +1,12 @@
+.noscript-warning
+  background-color #f55
+  color #fff
+  font-family sans-serif
+  font-size 1rem
+  font-weight bold
+  position fixed
+  left 0
+  bottom  0
+  text-align center
+  width 100%
+  z-index 99
--- a/themes/fluid/source/css/_pages/_base/_widget/pagination.styl
+++ b/themes/fluid/source/css/_pages/_base/_widget/pagination.styl
@@ -0,0 +1,23 @@
+// Rewrite pagination
+.pagination
+  margin-top 3rem
+  justify-content center
+
+  .space
+    align-self flex-end
+
+  .page-number, .current, .extend
+    outline 0
+    border 0
+    background-color transparent
+    font-size .9rem
+    padding .5rem .75rem
+    line-height 1.25
+    border-radius .125rem
+
+  .page-number
+    margin 0 .05rem
+
+  .page-number:hover, .current
+    transition background-color .2s ease-in-out
+    background-color var(--link-hover-bg-color)
--- a/themes/fluid/source/css/_pages/_base/_widget/qrcode.styl
+++ b/themes/fluid/source/css/_pages/_base/_widget/qrcode.styl
@@ -0,0 +1,17 @@
+.qr-trigger
+  cursor pointer
+  position relative
+
+  &:hover .qr-img
+    display block
+    transition all .3s
+
+.qr-img
+  max-width 12rem
+  position absolute
+  right -5.25rem
+  z-index 99
+  display none
+  border-radius .2rem
+  background-color transparent
+  box-shadow 0 0 20px -5px hsla(0, 0%, 62%, .2)
--- a/themes/fluid/source/css/_pages/_base/_widget/scroll-btn.styl
+++ b/themes/fluid/source/css/_pages/_base/_widget/scroll-btn.styl
@@ -0,0 +1,46 @@
+.scroll-down-bar
+  position absolute
+  width 100%
+  height 6rem
+  text-align center
+  cursor pointer
+  bottom 0
+
+  i.iconfont
+    font-size 2rem
+    font-weight bold
+    display inline-block
+    position relative
+    padding-top 2rem
+    color var(--subtitle-color)
+    transform translateZ(0)
+    animation scroll-down 1.5s infinite
+
+#scroll-top-button
+  position fixed
+  z-index 99
+  background var(--board-bg-color)
+  transition background-color .2s ease-in-out, bottom .3s ease
+  border-radius 4px
+  min-width 40px
+  min-height 40px
+  bottom -60px
+  outline none
+  display flex
+  display -webkit-flex
+  align-items center
+  box-shadow 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)
+
+  i
+    font-size 32px
+    margin auto
+    color var(--sec-text-color)
+
+  &:hover i, &:active i
+    animation-name scroll-top
+    animation-duration 1s
+    animation-delay .1s
+    animation-timing-function ease-in-out
+    animation-iteration-count infinite
+    animation-fill-mode forwards
+    animation-direction alternate
--- a/themes/fluid/source/css/_pages/_base/_widget/search.styl
+++ b/themes/fluid/source/css/_pages/_base/_widget/search.styl
@@ -0,0 +1,9 @@
+#local-search-result
+  .search-list-title
+    border-left 3px solid #0d47a1
+
+  .search-list-content
+    padding 0 1.25rem
+
+  .search-word
+    color orangered
--- a/themes/fluid/source/css/_pages/_base/_widget/toc.styl
+++ b/themes/fluid/source/css/_pages/_base/_widget/toc.styl
@@ -0,0 +1,75 @@
+#toc
+  visibility hidden
+
+.toc-header
+  margin-bottom .5rem
+  font-weight bold
+  line-height 1.2
+
+  &, & > i
+    font-size 1.25rem
+
+.toc-body
+  max-height 75vh
+  overflow-y auto
+  overflow -moz-scrollbars-none
+  -ms-overflow-style none
+
+  ol
+    list-style none
+    padding-inline-start 1rem
+
+  &::-webkit-scrollbar
+    display none
+
+.tocbot-list
+  position relative
+
+  ol
+    list-style none
+    padding-left 1rem
+
+  a
+    font-size 0.95rem
+
+.tocbot-link
+  color var(--text-color)
+
+.tocbot-active-link
+  font-weight bold
+  color var(--link-hover-color)
+
+.tocbot-is-collapsed
+  max-height 0
+
+.tocbot-is-collapsible
+  overflow hidden
+  transition all .3s ease-in-out
+
+.toc-list-item
+  white-space nowrap
+  overflow hidden
+  text-overflow ellipsis
+
+  &.is-active-li::before
+    height 1rem
+    margin 0.25rem 0
+    visibility visible
+
+  &::before
+    width 0.15rem
+    height 0.2rem
+    position absolute
+    left 0.25rem
+    content ""
+    border-radius 2px
+    margin 0.65rem 0
+    background var(--link-hover-color)
+    visibility hidden
+    transition height .1s ease-in-out, margin .1s ease-in-out, visibility .1s ease-in-out
+
+.sidebar
+  position -webkit-sticky
+  position sticky
+  top 2rem
+  padding 3rem 0
--- a/themes/fluid/source/css/_pages/_base/base.styl
+++ b/themes/fluid/source/css/_pages/_base/base.styl
@@ -0,0 +1,68 @@
+@import "_widget/*"
+
+html
+  font-size $font-size
+  letter-spacing $letter-spacing
+
+html, body
+  height 100%
+  font-family $font-family
+  overflow-wrap break-word
+
+body
+  transition color .2s ease-in-out, background-color .2s ease-in-out
+  background-color var(--body-bg-color)
+  color var(--text-color)
+  -webkit-font-smoothing antialiased
+  -moz-osx-font-smoothing grayscale
+
+  a
+    color var(--text-color)
+    text-decoration none
+    cursor pointer
+    transition color .2s ease-in-out, background-color .2s ease-in-out
+
+    &:hover
+      color var(--link-hover-color)
+      text-decoration none
+      transition color .2s ease-in-out, background-color .2s ease-in-out
+
+code
+  color inherit
+
+table
+  font-size inherit
+  color var(--post-text-color)
+
+img[lazyload]
+  object-fit cover
+
+*[align="left"]
+  text-align left
+
+*[align="center"]
+  text-align center
+
+*[align="right"]
+  text-align right
+
+::-webkit-scrollbar
+  width 6px
+  height 6px
+
+::-webkit-scrollbar-thumb
+  background-color var(--scrollbar-color)
+  border-radius 6px
+
+  &:hover
+    background-color var(--scrollbar-hover-color)
+
+::-webkit-scrollbar-corner
+  background-color transparent
+
+label
+  margin-bottom 0
+
+i.iconfont
+  font-size 1em
+  line-height 1
--- a/themes/fluid/source/css/_pages/_base/color-schema.styl
+++ b/themes/fluid/source/css/_pages/_base/color-schema.styl
@@ -0,0 +1,79 @@
+:root
+  --color-mode "light"
+  --body-bg-color $body-bg-color
+  --board-bg-color $board-bg-color
+  --text-color $text-color
+  --sec-text-color $sec-text-color
+  --post-text-color $post-text-color
+  --post-heading-color $post-heading-color
+  --post-link-color $post-link-color
+  --link-hover-color $link-hover-color
+  --link-hover-bg-color $link-hover-bg-color
+  --line-color $line-color
+  --navbar-bg-color $navbar-bg-color
+  --navbar-text-color $navbar-text-color
+  --subtitle-color $subtitle-color
+  --scrollbar-color $scrollbar-color
+  --scrollbar-hover-color $scrollbar-hover-color
+  --button-bg-color $button-bg-color
+  --button-hover-bg-color $button-hover-bg-color
+  --highlight-bg-color $highlight-bg-color
+  --inlinecode-bg-color $inlinecode-bg-color
+  --fold-title-color $text-color
+  --fold-border-color $line-color
+
+dark-colors()
+  --body-bg-color $body-bg-color-dark
+  --board-bg-color $board-bg-color-dark
+  --text-color $text-color-dark
+  --sec-text-color $sec-text-color-dark
+  --post-text-color $post-text-color-dark
+  --post-heading-color $post-heading-color-dark
+  --post-link-color $post-link-color-dark
+  --link-hover-color $link-hover-color-dark
+  --link-hover-bg-color $link-hover-bg-color-dark
+  --line-color $line-color-dark
+  --navbar-bg-color $navbar-bg-color-dark
+  --navbar-text-color $navbar-text-color-dark
+  --subtitle-color $subtitle-color-dark
+  --scrollbar-color $scrollbar-color-dark
+  --scrollbar-hover-color $scrollbar-hover-color-dark
+  --button-bg-color $button-bg-color-dark
+  --button-hover-bg-color $button-hover-bg-color-dark
+  --highlight-bg-color $highlight-bg-color-dark
+  --inlinecode-bg-color $inlinecode-bg-color-dark
+  --fold-title-color $text-color-dark
+  --fold-border-color $line-color-dark
+
+  img
+    -webkit-filter brightness(.9)
+    filter brightness(.9)
+    transition filter .2s ease-in-out
+
+  .navbar .dropdown-collapse, .top-nav-collapse, .navbar-col-show
+    if $navbar-glass-enable
+      ground-glass($navbar-glass-px, $navbar-bg-color-dark, $navbar-glass-alpha)
+
+  .license-box
+    background-color rgba(#3e4b5e, .35)
+    transition background-color .2s ease-in-out
+
+  .gt-comment-admin .gt-comment-content
+    background-color transparent
+    transition background-color .2s ease-in-out
+
+if (hexo-config("dark_mode.enable"))
+  @media (prefers-color-scheme: dark)
+    :root
+      --color-mode "dark"
+
+    :root:not([data-user-color-scheme])
+      dark-colors()
+
+  @media not print
+    [data-user-color-scheme="dark"]
+      dark-colors()
+
+  @media print
+    :root
+      --color-mode "light"
--- a/themes/fluid/source/css/_pages/_base/inline.styl
+++ b/themes/fluid/source/css/_pages/_base/inline.styl
@@ -0,0 +1,51 @@
+.fade-in-up
+  -webkit-animation-name fade-in-up
+  animation-name fade-in-up
+
+.hidden-mobile
+  display block
+
+.visible-mobile
+  display none
+
+@media (max-width: 575px)
+  .hidden-mobile
+    display none
+
+  .visible-mobile
+    display block
+
+.nomargin-x
+  margin-left 0 !important
+  margin-right 0 !important
+
+.nopadding-x
+  padding-left 0 !important
+  padding-right 0 !important
+
+@media (max-width: 767px)
+  .nopadding-x-md
+    padding-left 0 !important
+    padding-right 0 !important
+
+.flex-center
+  display -webkit-box
+  display -ms-flexbox
+  display flex
+  -webkit-box-align center
+  -ms-flex-align center
+  align-items center
+  -webkit-box-pack center
+  -ms-flex-pack center
+  justify-content center
+  height 100%
+
+.hover-with-bg
+  display inline-block
+  line-height 1
+
+  &:hover
+    background-color var(--link-hover-bg-color)
+    transition-duration .2s
+    transition-timing-function ease-in-out
+    border-radius .2rem
--- a/themes/fluid/source/css/_pages/_base/keyframes.styl
+++ b/themes/fluid/source/css/_pages/_base/keyframes.styl
@@ -0,0 +1,31 @@
+@keyframes fade-in-up
+  from
+    opacity 0
+    -webkit-transform translate3d(0, 100%, 0)
+    transform translate3d(0, 100%, 0)
+  to
+    opacity 1
+    -webkit-transform translate3d(0, 0, 0)
+    transform translate3d(0, 0, 0)
+
+@keyframes scroll-down
+  0%
+    opacity 0.8
+    top 0
+  50%
+    opacity 0.4
+    top -1em
+  100%
+    opacity 0.8
+    top 0
+
+@keyframes scroll-top
+  0%
+    -webkit-transform translateY(0)
+    transform translateY(0)
+  50%
+    -webkit-transform translateY(-0.35rem)
+    transform translateY(-0.35rem)
+  100%
+    -webkit-transform translateY(0)
+    transform translateY(0)
--- a/themes/fluid/source/css/_pages/_base/print.styl
+++ b/themes/fluid/source/css/_pages/_base/print.styl
@@ -0,0 +1,38 @@
+@media print
+  header, footer, .side-col, #scroll-top-button, .post-prevnext, #comments
+    display none !important
+
+  .markdown-body
+    a:not([href^='#']):not([href^='javascript:']):not(.print-no-link)::after
+      content ' (' attr(href) ')'
+      font-size 0.8rem
+      color var(--post-text-color)
+      opacity 0.8
+
+    & > h1, h2
+      border-bottom-color transparent !important
+
+    & > h1, h2, h3, h4, h5, h6
+      margin-top 1.25em !important
+      margin-bottom 0.25em !important
+
+    [data-anchorjs-icon]::after
+      display none
+
+    figure.highlight
+      table, tbody, tr, td.code, td.code pre
+        width 100% !important
+        display block !important
+
+      pre > code
+        white-space pre-wrap
+
+      .gutter, .code-widget
+        display none !important
+
+  .post-metas a
+    text-decoration none
+
+@media not print
+  #seo-header
+    display none
--- a/themes/fluid/source/css/_pages/_category/category-bar.styl
+++ b/themes/fluid/source/css/_pages/_category/category-bar.styl
@@ -0,0 +1,58 @@
+.category-bar
+
+  .category-list
+    max-height 85vh
+    overflow-y auto
+    overflow-x hidden
+
+    &::-webkit-scrollbar
+      display none
+
+    & > .category-sub > a
+      font-weight bold
+      font-size 1.2rem
+
+    .category-item-action i
+      margin 0
+
+    .category-subitem
+      &.list-group-item
+        padding-left .5rem
+        padding-right 0
+
+    .category-collapse
+      .category-post-list
+        margin-top .25rem
+        margin-bottom .5rem
+
+      .category-post
+        font-size .9rem
+        line-height 1.75
+
+    .category-item-action:hover
+      background-color initial
+
+  .list-group-item
+    padding 0
+
+    &.active
+      color var(--link-hover-color)
+      background-color initial
+      font-weight bold
+      font-family "iconfont"
+      font-style normal
+      -webkit-font-smoothing antialiased
+
+      &::before
+        content "\e61f"
+        font-weight initial
+        margin-right .25rem
+
+  .list-group-count
+    margin-left .2rem
+    margin-right .2rem
+    font-size .9em
+
+  .list-group-item-action
+    &:focus, &:hover
+      background-color initial
--- a/themes/fluid/source/css/_pages/_category/category-chain.styl
+++ b/themes/fluid/source/css/_pages/_category/category-chain.styl
@@ -0,0 +1,6 @@
+.category-chains
+  display flex
+  flex-wrap wrap
+
+  & > *:not(:last-child)
+    margin-right 1em
--- a/themes/fluid/source/css/_pages/_category/category-list.styl
+++ b/themes/fluid/source/css/_pages/_category/category-list.styl
@@ -0,0 +1,62 @@
+.category
+
+  &:not(:last-child)
+    margin-bottom 1rem
+
+  .category-sub
+    pass
+
+  .category-item, .category-subitem
+    font-weight bold
+    display flex
+    align-items center
+
+  .category-item
+    font-size 1.25rem
+
+  .category-subitem
+    font-size 1.1rem
+
+  .category-collapse
+    padding-left: 1.25rem
+    width 100%
+
+  .category-count
+    font-size .9rem
+    font-weight initial
+    min-width 1.3em
+    line-height 1.3em
+    display flex
+    align-items center
+
+    i
+      padding-right  .25rem
+
+    span
+      width 2rem
+
+  .category-post
+    white-space nowrap
+    overflow hidden
+    text-overflow ellipsis
+
+  .category-item-action
+
+    &:not(.collapsed) > i
+      transform rotate(90deg)
+      transform-origin center center
+
+    i
+      transition transform .3s ease-out
+      display inline-block
+      margin-left .25rem
+
+    .category:hover
+      z-index 1
+      color var(--link-hover-color)
+      text-decoration none
+      background-color var(--link-hover-bg-color)
+
+  .row
+    margin-left 0
+    margin-right 0
--- a/themes/fluid/source/css/_pages/_index/index.styl
+++ b/themes/fluid/source/css/_pages/_index/index.styl
@@ -0,0 +1,80 @@
+.index-card
+  margin-bottom 2.5rem
+
+.index-img
+  img
+    display block
+    width 100%
+    height 10rem
+    object-fit cover
+    box-shadow 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15)
+    border-radius .25rem
+    background-color transparent
+
+.index-info
+  display flex
+  flex-direction column
+  justify-content space-between
+  padding-top .5rem
+  padding-bottom .5rem
+
+.index-header
+  color var(--text-color)
+  font-size 1.5rem
+  font-weight bold
+  line-height 1.4
+  white-space nowrap
+  overflow hidden
+  text-overflow ellipsis
+  margin-bottom .25rem
+
+  .index-pin
+    color var(--text-color)
+    font-size 1.5rem
+    margin-right .15rem
+
+.index-btm
+  color var(--sec-text-color)
+
+  a
+    color var(--sec-text-color)
+
+.index-excerpt
+  color var(--sec-text-color)
+  margin 0.5rem 0
+  height calc(1.4rem * 3)
+  overflow hidden
+  display flex
+
+  & > div
+    width 100%
+    line-height 1.4rem
+    word-break break-word
+    display -webkit-box
+    -webkit-box-orient vertical
+    -webkit-line-clamp 3
+
+.index-excerpt__noimg
+  height auto
+  max-height calc(1.4rem * 3)
+
+@media (max-width: 767px)
+  .index-info
+    padding-top 1.25rem
+
+  .index-header
+    font-size 1.25rem
+    white-space normal
+    overflow hidden
+    word-break break-word
+    display -webkit-box
+    -webkit-box-orient vertical
+    -webkit-line-clamp 2
+
+    .index-pin
+      font-size 1.25rem
+
+  .index-excerpt
+    height auto
+    max-height calc(1.4rem * 3)
+    margin 0.25rem 0
--- a/themes/fluid/source/css/_pages/_links/links.styl
+++ b/themes/fluid/source/css/_pages/_links/links.styl
@@ -0,0 +1,79 @@
+.links
+  .card
+    box-shadow none
+    min-width 33%
+    background-color transparent
+    border 0
+
+  .card-body
+    margin 1rem 0
+    padding 1rem
+    border-radius .3rem
+    display block
+    width 100%
+    height 100%
+
+    &:hover
+      .link-avatar
+        transform scale(1.1)
+
+  .card-content
+    display flex
+    flex-wrap nowrap
+    width 100%
+    height 3.5rem
+
+.link-avatar
+  flex none
+  width 3rem
+  height 3rem
+  margin-right .75rem
+  object-fit cover
+  transition-duration .2s
+  transition-timing-function ease-in-out
+
+  img
+    width 100%
+    height 100%
+    border-radius 50%
+    background-color transparent
+    object-fit cover
+
+.link-text
+  flex 1
+  display grid
+  flex-direction column
+  line-height 1.5
+
+.link-title
+  overflow hidden
+  text-overflow ellipsis
+  white-space nowrap
+  color var(--text-color)
+  font-weight bold
+
+.link-intro
+  max-height 2rem
+  font-size 0.85rem
+  line-height 1.2
+  color var(--sec-text-color)
+  display -webkit-box
+  -webkit-box-orient vertical
+  -webkit-line-clamp 2
+  text-overflow ellipsis
+  overflow hidden
+
+@media (max-width 767px)
+  .links
+    display flex
+    flex-direction column
+    justify-content center
+    align-items center
+
+    .card
+      padding-left 2rem
+      padding-right 2rem
+
+@media (min-width 768px)
+  .link-text:only-child
+    margin-left 1rem
--- a/themes/fluid/source/css/_pages/_post/comment.styl
+++ b/themes/fluid/source/css/_pages/_post/comment.styl
@@ -0,0 +1,27 @@
+// Rewrite valine
+#valine.v[data-class=v]
+  .status-bar, .veditor, .vinput, .vbtn, p, pre code
+    color var(--text-color)
+
+  .vinput::placeholder
+    color var(--sec-text-color)
+
+  .vicon
+    fill var(--text-color)
+
+// Rewrite gitalk
+.gt-container
+
+  .gt-comment-content:hover
+    -webkit-box-shadow none
+    box-shadow none
+
+  .gt-comment-body
+    color var(--text-color) !important
+    transition color .2s ease-in-out
+
+// Rewrite remark42
+#remark-km423lmfdslkm34-back
+  z-index 1030
+#remark-km423lmfdslkm34-node
+  z-index 1031
--- a/themes/fluid/source/css/_pages/_post/highlight.styl
+++ b/themes/fluid/source/css/_pages/_post/highlight.styl
@@ -0,0 +1,67 @@
+.markdown-body
+  .highlight pre, pre
+    padding 1.45rem 1rem
+
+  pre code.hljs
+    padding 0
+
+  pre[class*="language-"]
+    padding-top 1.45rem
+    padding-bottom 1.45rem
+    padding-right 1rem
+    line-height 1.5
+    margin-bottom 1rem
+
+  .code-wrapper
+    position relative
+    border-radius 4px
+    margin-bottom 1rem
+
+  .hljs, .highlight pre, .code-wrapper pre, figure.highlight td.gutter
+    transition color .2s ease-in-out, background-color .2s ease-in-out
+    background-color var(--highlight-bg-color)
+
+pre[class*=language-].line-numbers
+  position initial
+
+figure
+  margin 1rem 0
+
+figure.highlight
+  position relative
+
+  table
+    border 0
+    margin 0
+    width auto
+    border-radius 4px
+
+  td
+    border 0
+    padding 0
+
+  tr
+    border 0
+
+  td.code
+    width 100%
+
+  td.gutter
+    display table-cell
+    position -webkit-sticky
+    position sticky
+    left 0
+    z-index 1
+
+    pre
+      text-align right
+      padding 0 .75rem
+      border-radius initial
+      border-right 1px solid #999
+
+      span.line
+        color #999
+
+  td.code > pre
+    border-top-left-radius 0
+    border-bottom-left-radius 0
--- a/themes/fluid/source/css/_pages/_post/markdown.styl
+++ b/themes/fluid/source/css/_pages/_post/markdown.styl
@@ -0,0 +1,92 @@
+// Rewrite github-markdown.css
+.markdown-body
+  font-size 1rem
+  line-height 1.6
+  font-family $font-family
+  margin-bottom 2rem
+  color var(--post-text-color)
+
+  & > h1, h2
+    border-bottom-color var(--line-color)
+
+  & > h1, h2, h3, h4, h5, h6
+    anchor-offset()
+    color var(--post-heading-color)
+    transition color .2s ease-in-out, border-bottom-color 0.2s ease-in-out
+    font-weight bold
+    margin-bottom .75em
+    margin-top 2em
+
+    &:focus
+      outline none
+
+  a
+    color var(--post-link-color)
+
+  strong
+    font-weight bold
+
+  code
+    tab-size 4
+    background-color var(--inlinecode-bg-color)
+    transition background-color .2s ease-in-out
+
+  table
+    tr
+      background-color var(--board-bg-color)
+      transition background-color .2s ease-in-out
+    tr:nth-child(2n)
+      background-color var(--board-bg-color)
+      transition background-color .2s ease-in-out
+    th, td
+      border-color var(--line-color)
+      transition border-color .2s ease-in-out
+
+  pre
+    font-size $code-font-size !important
+
+    .mermaid
+      text-align center
+
+      & > svg
+        min-width 100%
+
+  p > img, p > a > img, figure > img, figure > a > img
+    max-width 90%
+    margin 1.5rem auto
+    display block
+    box-shadow $img-shadow
+    border-radius 4px
+    background-color transparent
+
+  blockquote
+    color var(--sec-text-color)
+
+  details
+    cursor pointer
+
+    summary
+      outline none
+
+// Rewrite hr
+hr, .markdown-body hr
+  background-color initial
+  border-top 1px solid var(--line-color)
+  transition border-top-color .2s ease-in-out
+
+.markdown-body hr
+  height 0
+  margin 2rem 0
+
+// Rewrite figcaption
+.markdown-body
+  figcaption.image-caption
+    font-size .8rem
+    color var(--post-text-color)
+    opacity 0.65
+    line-height 1
+    margin -0.75rem auto 2rem
+    text-align center
+
+  figcaption:not(.image-caption)
+    display none
--- a/themes/fluid/source/css/_pages/_post/post-page.styl
+++ b/themes/fluid/source/css/_pages/_post/post-page.styl
@@ -0,0 +1,181 @@
+.post-content, post-custom
+  box-sizing border-box
+  padding-left 10%
+  padding-right 10%
+
+@media (max-width: 767px)
+  .post-content, post-custom
+    padding-left 2rem
+    padding-right 2rem
+
+  .page-content, .post-content
+    overflow hidden
+
+@media (max-width: 424px)
+  .post-content, post-custom
+    padding-left 1rem
+    padding-right 1rem
+
+  .page-content, .post-content
+    overflow hidden
+
+  .anchorjs-link-left
+    opacity 0 !important
+
+.page-content, .post-content
+  strong
+    font-weight bold
+
+  & > *:nth-child(2)
+    margin-top 0
+
+  img
+    object-fit cover
+    max-width 100%
+
+.post-metas
+  display flex
+  flex-wrap wrap
+  font-size .9rem
+
+.post-meta
+
+  & > *:not(.hover-with-bg)
+    margin-right .2rem
+
+.post-prevnext
+  display flex
+  flex-wrap wrap
+  justify-content space-between
+  font-size .9rem
+  margin-left -.35rem
+  margin-right -.35rem
+
+  .post-prev, .post-next
+    display flex
+    padding-left 0
+    padding-right 0
+
+    i
+      font-size 1.5rem
+
+    a
+      display flex
+      align-items center
+
+    .hidden-mobile
+      display -webkit-box
+      -webkit-box-orient vertical
+      -webkit-line-clamp 2
+      text-overflow ellipsis
+      overflow hidden
+
+    @media (max-width: 575px)
+      .hidden-mobile
+        display none
+
+  .post-prev:hover i, .post-prev:active i, .post-next:hover i, .post-next:active i
+    -webkit-animation-duration 1s
+    animation-duration 1s
+    -webkit-animation-delay .1s
+    animation-delay .1s
+    -webkit-animation-timing-function ease-in-out
+    animation-timing-function ease-in-out
+    -webkit-animation-iteration-count infinite
+    animation-iteration-count infinite
+    -webkit-animation-fill-mode forwards
+    animation-fill-mode forwards
+    -webkit-animation-direction alternate
+    animation-direction alternate
+
+  .post-prev:hover i, .post-prev:active i
+    -webkit-animation-name post-prev-anim
+    animation-name post-prev-anim
+
+  .post-next:hover i, .post-next:active i
+    -webkit-animation-name post-next-anim
+    animation-name post-next-anim
+
+  .post-next
+    justify-content flex-end
+
+  .fa-chevron-left
+    margin-right .5rem
+
+  .fa-chevron-right
+    margin-left .5rem
+
+@keyframes post-prev-anim
+  0%
+    -webkit-transform translateX(0)
+    transform translateX(0)
+  50%
+    -webkit-transform translateX(-0.35rem)
+    transform translateX(-0.35rem)
+  100%
+    -webkit-transform translateX(0)
+    transform translateX(0)
+
+@keyframes post-next-anim
+  0%
+    -webkit-transform translateX(0)
+    transform translateX(0)
+  50%
+    -webkit-transform translateX(0.35rem)
+    transform translateX(0.35rem)
+  100%
+    -webkit-transform translateX(0)
+    transform translateX(0)
+
+#seo-header
+  color var(--post-heading-color)
+  font-weight bold
+  margin-top 0.5em
+  margin-bottom 0.75em
+  border-bottom-color var(--line-color)
+  border-bottom-style solid
+  border-bottom-width 2px
+  line-height 1.5
+
+.custom, #comments
+  margin-top 2rem
+
+#comments
+  noscript
+    display block
+    text-align center
+    padding 2rem 0
+
+.visitors
+  font-size .8em
+  padding .45rem
+  float right
+
+a.fancybox:hover
+  text-decoration none
+
+// Rewrite mathjax
+mjx-container, .mjx-container
+  overflow-x auto
+  overflow-y hidden !important
+  padding .5em 0
+
+  &:focus, svg:focus
+    outline none
+
+.mjx-char
+  line-height 1
+
+// Rewrite katex
+.katex-block
+  overflow-x auto
+
+.katex, .mjx-mrow
+  white-space pre-wrap !important
+
+// Rewrite hint
+.footnote-ref [class*=hint--][aria-label]:after
+  max-width 12rem
+  white-space nowrap
+  overflow hidden
+  text-overflow ellipsis
--- a/themes/fluid/source/css/_pages/_post/post-tag.styl
+++ b/themes/fluid/source/css/_pages/_post/post-tag.styl
@@ -0,0 +1,168 @@
+// fold
+.fold
+  margin 1rem 0
+  border 0.5px solid var(--fold-border-color)
+  position relative
+  clear both
+  border-radius 0.125rem
+
+  .fold-title
+    color var(--fold-title-color)
+    padding 0.5rem 0.75rem
+    font-size 0.9rem
+    font-weight bold
+    border-radius 0.125rem
+
+    &:not(.collapsed) > .fold-arrow
+      transform rotate(90deg)
+      transform-origin center center
+
+    .fold-arrow
+      display inline-block
+      margin-right 0.35rem
+      transition transform .3s ease-out
+
+  .fold-content
+    padding 1rem 1rem
+
+    & > *:last-child
+      margin-bottom 0
+
+.fold-default, .fold-secondary
+  background-color rgba(#bbbbbb, 0.25)
+
+.fold-primary
+  background-color rgba(#b7a0e0, 0.25)
+
+.fold-info
+  background-color rgba(#a0c5e4, 0.25)
+
+.fold-success
+  background-color rgba(#aedcae, 0.25)
+
+.fold-warning
+  background-color rgba(#f8d6a6, 0.25)
+
+.fold-danger
+  background-color rgba(#eca9a7, 0.25)
+
+.fold-light
+  background-color rgba(#fefefe, 0.25)
+
+// note
+.note
+  padding 0.75rem
+  border-left 0.35rem solid
+  border-radius 0.25rem
+  margin 1.5rem 0
+  color var(--text-color)
+  transition color .2s ease-in-out
+  font-size 0.9rem
+
+  a
+    color var(--text-color)
+    transition color .2s ease-in-out
+
+  *:last-child
+    margin-bottom 0
+
+.note-default, .note-secondary
+  background-color rgba(#bbbbbb, 0.25)
+  border-color #777
+
+.note-primary
+  background-color rgba(#b7a0e0, 0.25)
+  border-color #6f42c1
+
+.note-success
+  background-color rgba(#aedcae, 0.25)
+  border-color #5cb85c
+
+.note-danger
+  background-color rgba(#eca9a7, 0.25)
+  border-color #d9534f
+
+.note-warning
+  background-color rgba(#f8d6a6, 0.25)
+  border-color #f0ad4e
+
+.note-info
+  background-color rgba(#a0c5e4, 0.25)
+  border-color #428bca
+
+.note-light
+  background-color rgba(#fefefe, 0.25)
+  border-color #0f0f0f
+
+// label
+.label
+  display inline
+  border-radius 3px
+  font-size 85%
+  margin 0
+  padding .2em .4em
+  color var(--text-color)
+  transition color .2s ease-in-out
+
+.label-default, .label-secondary
+  background-color rgba(#bbbbbb, 0.25)
+
+.label-primary
+  background-color rgba(#b7a0e0, 0.25)
+
+.label-info
+  background-color rgba(#a0c5e4, 0.25)
+
+.label-success
+  background-color rgba(#aedcae, 0.25)
+
+.label-warning
+  background-color rgba(#f8d6a6, 0.25)
+
+.label-danger
+  background-color rgba(#eca9a7, 0.25)
+
+// button
+.markdown-body .btn
+  border 1px solid var(--line-color)
+  background-color var(--button-bg-color)
+  color var(--text-color)
+  transition color .2s ease-in-out, background .2s ease-in-out, border-color .2s ease-in-out
+  border-radius .25rem
+  display inline-block
+  font-size .875em
+  line-height 2
+  padding 0 .75rem
+  margin-bottom 1rem
+
+  &:hover
+    background-color var(--button-hover-bg-color)
+    text-decoration none
+
+// group-image
+.group-image-container
+  margin 1.5rem auto
+
+  & img
+    margin 0 auto
+    border-radius 3px
+    background-color transparent
+    box-shadow 0 3px 9px 0 rgba(0, 0, 0, 0.15), 0 3px 9px 0 rgba(0, 0, 0, 0.15)
+
+.group-image-row
+  margin-bottom .5rem
+  display flex
+  justify-content center
+
+.group-image-wrap
+  flex 1
+  display flex
+  justify-content center
+
+  &:not(:last-child)
+    margin-right .25rem
+
+// checkbox
+input[type=checkbox]
+  margin 0 0.2em 0.2em 0
+  vertical-align middle
--- a/themes/fluid/source/css/_pages/_tag/tag.styl
+++ b/themes/fluid/source/css/_pages/_tag/tag.styl
--- a/themes/fluid/source/css/_pages/_tag/tags.styl
+++ b/themes/fluid/source/css/_pages/_tag/tags.styl
@@ -0,0 +1,9 @@
+.tagcloud
+  padding 1rem 5%
+
+  a
+    display inline-block
+    padding .5rem
+
+    &:hover
+      color var(--link-hover-color) !important
--- a/themes/fluid/source/css/_pages/pages.styl
+++ b/themes/fluid/source/css/_pages/pages.styl
@@ -0,0 +1,8 @@
+@import "_base/*"
+@import "_index/*"
+@import "_post/*"
+@import "_archive/*"
+@import "_about/*"
+@import "_category/*"
+@import "_tag/*"
+@import "_links/*"
--- a/themes/fluid/source/css/_variables/base.styl
+++ b/themes/fluid/source/css/_variables/base.styl
@@ -0,0 +1,71 @@
+// font
+$font-size = theme-config("font.font_size", "16px")
+$letter-spacing = theme-config("font.letter_spacing", "0.02em")
+$font-family = theme-config("font.font_family", "var(--font-family-sans-serif)")
+$code-font-size = theme-config("font.code_font_size", "85%")
+
+// body
+$body-bg-color = theme-config("color.body_bg_color", "#eee")
+$body-bg-color-dark = theme-config("color.body_bg_color_dark", "#181c27")
+
+// text
+$text-color = theme-config("color.text_color", "#3c4858")
+$text-color-dark = theme-config("color.text_color_dark", "#c4c6c9")
+$sec-text-color = theme-config("color.sec_text_color", "#718096")
+$sec-text-color-dark = theme-config("color.sec_text_color_dark", "#a7a9ad")
+
+// post
+$post-text-color = theme-config("color.post_text_color", "#2c3e50")
+$post-text-color-dark = theme-config("color.post_text_color_dark", "#c4c6c9")
+$post-heading-color = theme-config("color.post_heading_color", "#1a202c")
+$post-heading-color-dark = theme-config("color.post_heading_color_dark", "#c4c6c9")
+$post-link-color = theme-config("color.post_link_color", "#2c3e50")
+$post-link-color-dark = theme-config("color.post_link_color_dark", "#c4c6c9")
+$link-hover-color = theme-config("color.link_hover_color", "#30a9de")
+$link-hover-color-dark = theme-config("color.link_hover_color_dark", "#30a9de")
+$link-hover-bg-color = theme-config("color.link_hover_bg_color", "#ebedef")
+$link-hover-bg-color-dark = theme-config("color.link_hover_bg_color_dark", "#364151")
+$line-color = theme-config("color.line_color", "#eaecef")
+$line-color-dark = theme-config("color.line_color_dark", "#435266")
+$button-bg-color = theme-config("color.button_bg_color", "#f6f8fa")
+$button-bg-color-dark = theme-config("color.button_bg_color_dark", "#2f4154")
+$button-hover-bg-color = theme-config("color.button_hover_bg_color", "#f2f3f5")
+$button-hover-bg-color-dark = theme-config("color.button_hover_bg_color_dark", "#46647e")
+
+// navbar
+$navbar-bg-color = theme-config("color.navbar_bg_color", "#2f4154")
+$navbar-bg-color-dark = theme-config("color.navbar_bg_color_dark", "#1f3144")
+$navbar-text-color = theme-config("color.navbar_text_color", "#fff")
+$navbar-text-color-dark = theme-config("color.navbar_text_color_dark", "d0d0d0")
+$navbar-glass-enable = theme-config-origin("navbar.ground_glass.enable", false)
+$navbar-glass-px = theme-config-unit("navbar.ground_glass.px", 0, "px")
+$navbar-glass-alpha = theme-config-origin("navbar.ground_glass.alpha", 0)
+
+// banner
+$banner-width-height-ratio = theme-config-origin("banner.width_height_ratio", 0)
+
+// subtitle
+$subtitle-color = theme-config("color.subtitle_color", "#fff")
+$subtitle-color-dark = theme-config("color.subtitle_color_dark", "d0d0d0")
+
+// scroll arrow
+$scroll-arrow-height-limit = theme-config-origin("scroll_down_arrow.banner_height_limit", 0)
+
+// board
+$board-bg-color = theme-config("color.board_color", "#fff")
+$board-bg-color-dark = theme-config("color.board_color_dark", "#252d38")
+
+// scrollbar
+$scrollbar-color = theme-config("color.scrollbar_color", "#c4c6c9")
+$scrollbar-color-dark = theme-config("color.scrollbar_color_dark", "#687582")
+$scrollbar-hover-color = theme-config("color.scrollbar_hover_color", "#a6a6a6")
+$scrollbar-hover-color-dark = theme-config("color.scrollbar_hover_color_dark", "#9da8b3")
+
+// code
+$highlight-bg-color = hexo-config("code.highlight.highlightjs.light.backgroundColor") && hexo-config("code.highlight.highlightjs.light.backgroundColor") != "#fff" ? unquote(hexo-config("code.highlight.highlightjs.light.backgroundColor")):#f6f8fa
+$highlight-bg-color-dark = hexo-config("code.highlight.highlightjs.dark.backgroundColor") && hexo-config("code.highlight.highlightjs.dark.backgroundColor") != "#fff" ? unquote(hexo-config("code.highlight.highlightjs.dark.backgroundColor")):#2d333b
+$inlinecode-bg-color = rgba(175, 184, 193, .2)
+$inlinecode-bg-color-dark = rgba(99, 110, 123, .4)
+
+// shadow
+$img-shadow = 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15)
--- a/themes/fluid/source/css/gitalk.css
+++ b/themes/fluid/source/css/gitalk.css
@@ -0,0 +1,546 @@
+@font-face {
+  font-family: octicons-link;
+  src: url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAZwABAAAAAACFQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABEU0lHAAAGaAAAAAgAAAAIAAAAAUdTVUIAAAZcAAAACgAAAAoAAQAAT1MvMgAAAyQAAABJAAAAYFYEU3RjbWFwAAADcAAAAEUAAACAAJThvmN2dCAAAATkAAAABAAAAAQAAAAAZnBnbQAAA7gAAACyAAABCUM+8IhnYXNwAAAGTAAAABAAAAAQABoAI2dseWYAAAFsAAABPAAAAZwcEq9taGVhZAAAAsgAAAA0AAAANgh4a91oaGVhAAADCAAAABoAAAAkCA8DRGhtdHgAAAL8AAAADAAAAAwGAACfbG9jYQAAAsAAAAAIAAAACABiATBtYXhwAAACqAAAABgAAAAgAA8ASm5hbWUAAAToAAABQgAAAlXu73sOcG9zdAAABiwAAAAeAAAAME3QpOBwcmVwAAAEbAAAAHYAAAB/aFGpk3jaTY6xa8JAGMW/O62BDi0tJLYQincXEypYIiGJjSgHniQ6umTsUEyLm5BV6NDBP8Tpts6F0v+k/0an2i+itHDw3v2+9+DBKTzsJNnWJNTgHEy4BgG3EMI9DCEDOGEXzDADU5hBKMIgNPZqoD3SilVaXZCER3/I7AtxEJLtzzuZfI+VVkprxTlXShWKb3TBecG11rwoNlmmn1P2WYcJczl32etSpKnziC7lQyWe1smVPy/Lt7Kc+0vWY/gAgIIEqAN9we0pwKXreiMasxvabDQMM4riO+qxM2ogwDGOZTXxwxDiycQIcoYFBLj5K3EIaSctAq2kTYiw+ymhce7vwM9jSqO8JyVd5RH9gyTt2+J/yUmYlIR0s04n6+7Vm1ozezUeLEaUjhaDSuXHwVRgvLJn1tQ7xiuVv/ocTRF42mNgZGBgYGbwZOBiAAFGJBIMAAizAFoAAABiAGIAznjaY2BkYGAA4in8zwXi+W2+MjCzMIDApSwvXzC97Z4Ig8N/BxYGZgcgl52BCSQKAA3jCV8CAABfAAAAAAQAAEB42mNgZGBg4f3vACQZQABIMjKgAmYAKEgBXgAAeNpjYGY6wTiBgZWBg2kmUxoDA4MPhGZMYzBi1AHygVLYQUCaawqDA4PChxhmh/8ODDEsvAwHgMKMIDnGL0x7gJQCAwMAJd4MFwAAAHjaY2BgYGaA4DAGRgYQkAHyGMF8NgYrIM3JIAGVYYDT+AEjAwuDFpBmA9KMDEwMCh9i/v8H8sH0/4dQc1iAmAkALaUKLgAAAHjaTY9LDsIgEIbtgqHUPpDi3gPoBVyRTmTddOmqTXThEXqrob2gQ1FjwpDvfwCBdmdXC5AVKFu3e5MfNFJ29KTQT48Ob9/lqYwOGZxeUelN2U2R6+cArgtCJpauW7UQBqnFkUsjAY/kOU1cP+DAgvxwn1chZDwUbd6CFimGXwzwF6tPbFIcjEl+vvmM/byA48e6tWrKArm4ZJlCbdsrxksL1AwWn/yBSJKpYbq8AXaaTb8AAHja28jAwOC00ZrBeQNDQOWO//sdBBgYGRiYWYAEELEwMTE4uzo5Zzo5b2BxdnFOcALxNjA6b2ByTswC8jYwg0VlNuoCTWAMqNzMzsoK1rEhNqByEyerg5PMJlYuVueETKcd/89uBpnpvIEVomeHLoMsAAe1Id4AAAAAAAB42oWQT07CQBTGv0JBhagk7HQzKxca2sJCE1hDt4QF+9JOS0nbaaYDCQfwCJ7Au3AHj+LO13FMmm6cl7785vven0kBjHCBhfpYuNa5Ph1c0e2Xu3jEvWG7UdPDLZ4N92nOm+EBXuAbHmIMSRMs+4aUEd4Nd3CHD8NdvOLTsA2GL8M9PODbcL+hD7C1xoaHeLJSEao0FEW14ckxC+TU8TxvsY6X0eLPmRhry2WVioLpkrbp84LLQPGI7c6sOiUzpWIWS5GzlSgUzzLBSikOPFTOXqly7rqx0Z1Q5BAIoZBSFihQYQOOBEdkCOgXTOHA07HAGjGWiIjaPZNW13/+lm6S9FT7rLHFJ6fQbkATOG1j2OFMucKJJsxIVfQORl+9Jyda6Sl1dUYhSCm1dyClfoeDve4qMYdLEbfqHf3O/AdDumsjAAB42mNgYoAAZQYjBmyAGYQZmdhL8zLdDEydARfoAqIAAAABAAMABwAKABMAB///AA8AAQAAAAAAAAAAAAAAAAABAAAAAA==) format('woff');
+}
+/* variables */
+/* functions & mixins */
+/* variables - calculated */
+/* styles */
+.gt-container {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  font-size: 16px;
+  /* loader */
+  /* error */
+  /* initing */
+  /* no int */
+  /* link */
+  /* meta */
+  /* popup */
+  /* header */
+  /* comments */
+  /* comment */
+}
+.gt-container * {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.gt-container a {
+  color: #6190e8;
+}
+.gt-container a:hover {
+  color: #81a6ed;
+  border-color: #81a6ed;
+}
+.gt-container a.is--active {
+  color: #333;
+  cursor: default !important;
+}
+.gt-container a.is--active:hover {
+  color: #333;
+}
+.gt-container .hide {
+  display: none !important;
+}
+.gt-container .gt-svg {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  vertical-align: sub;
+}
+.gt-container .gt-svg svg {
+  width: 100%;
+  height: 100%;
+  fill: #6190e8;
+}
+.gt-container .gt-ico {
+  display: inline-block;
+}
+.gt-container .gt-ico-text {
+  margin-left: 0.3125em;
+}
+.gt-container .gt-ico-github {
+  width: 100%;
+  height: 100%;
+}
+.gt-container .gt-ico-github .gt-svg {
+  width: 100%;
+  height: 100%;
+}
+.gt-container .gt-ico-github svg {
+  fill: inherit;
+}
+.gt-container .gt-spinner {
+  position: relative;
+}
+.gt-container .gt-spinner::before {
+  content: '';
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  position: absolute;
+  top: 3px;
+  width: 0.75em;
+  height: 0.75em;
+  margin-top: -0.1875em;
+  margin-left: -0.375em;
+  border-radius: 50%;
+  border: 1px solid #fff;
+  border-top-color: #6190e8;
+  -webkit-animation: gt-kf-rotate 0.6s linear infinite;
+  animation: gt-kf-rotate 0.6s linear infinite;
+}
+.gt-container .gt-loader {
+  position: relative;
+  border: 1px solid #999;
+  -webkit-animation: ease gt-kf-rotate 1.5s infinite;
+  animation: ease gt-kf-rotate 1.5s infinite;
+  display: inline-block;
+  font-style: normal;
+  width: 1.75em;
+  height: 1.75em;
+  line-height: 1.75em;
+  border-radius: 50%;
+}
+.gt-container .gt-loader:before {
+  content: '';
+  position: absolute;
+  display: block;
+  top: 0;
+  left: 50%;
+  margin-top: -0.1875em;
+  margin-left: -0.1875em;
+  width: 0.375em;
+  height: 0.375em;
+  background-color: #999;
+  border-radius: 50%;
+}
+.gt-container .gt-avatar {
+  display: inline-block;
+  width: 3.125em;
+  height: 3.125em;
+}
+@media (max-width: 479px) {
+  .gt-container .gt-avatar {
+    width: 2em;
+    height: 2em;
+  }
+}
+.gt-container .gt-avatar img {
+  width: 100%;
+  height: auto;
+  border-radius: 3px;
+}
+.gt-container .gt-avatar-github {
+  width: 3em;
+  height: 3em;
+}
+@media (max-width: 479px) {
+  .gt-container .gt-avatar-github {
+    width: 1.875em;
+    height: 1.875em;
+  }
+}
+.gt-container .gt-btn {
+  padding: 0.75em 1.25em;
+  display: inline-block;
+  line-height: 1;
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  border: 1px solid #6190e8;
+  border-radius: 5px;
+  background-color: #6190e8;
+  color: #fff;
+  outline: none;
+  font-size: 0.75em;
+}
+.gt-container .gt-btn-text {
+  font-weight: 400;
+}
+.gt-container .gt-btn-loading {
+  position: relative;
+  margin-left: 0.5em;
+  display: inline-block;
+  width: 0.75em;
+  height: 1em;
+  vertical-align: top;
+}
+.gt-container .gt-btn.is--disable {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.gt-container .gt-btn-login {
+  margin-right: 0;
+}
+.gt-container .gt-btn-preview {
+  background-color: #fff;
+  color: #6190e8;
+}
+.gt-container .gt-btn-preview:hover {
+  background-color: #f2f2f2;
+  border-color: #81a6ed;
+}
+.gt-container .gt-btn-public:hover {
+  background-color: #81a6ed;
+  border-color: #81a6ed;
+}
+.gt-container .gt-error {
+  text-align: center;
+  margin: 0.625em;
+  color: #ff3860;
+}
+.gt-container .gt-initing {
+  padding: 1.25em 0;
+  text-align: center;
+}
+.gt-container .gt-initing-text {
+  margin: 0.625em auto;
+  font-size: 92%;
+}
+.gt-container .gt-no-init {
+  padding: 1.25em 0;
+  text-align: center;
+}
+.gt-container .gt-link {
+  border-bottom: 1px dotted #6190e8;
+}
+.gt-container .gt-link-counts,
+.gt-container .gt-link-project {
+  text-decoration: none;
+}
+.gt-container .gt-meta {
+  margin: 1.25em 0;
+  padding: 1em 0;
+  position: relative;
+  border-bottom: 1px solid #e9e9e9;
+  font-size: 1em;
+  position: relative;
+  z-index: 10;
+}
+.gt-container .gt-meta:before,
+.gt-container .gt-meta:after {
+  content: " ";
+  display: table;
+}
+.gt-container .gt-meta:after {
+  clear: both;
+}
+.gt-container .gt-counts {
+  margin: 0 0.625em 0 0;
+}
+.gt-container .gt-user {
+  float: right;
+  margin: 0;
+  font-size: 92%;
+}
+.gt-container .gt-user-pic {
+  width: 16px;
+  height: 16px;
+  vertical-align: top;
+  margin-right: 0.5em;
+}
+.gt-container .gt-user-inner {
+  display: inline-block;
+  cursor: pointer;
+}
+.gt-container .gt-user .gt-ico {
+  margin: 0 0 0 0.3125em;
+}
+.gt-container .gt-user .gt-ico svg {
+  fill: inherit;
+}
+.gt-container .gt-user .is--poping .gt-ico svg {
+  fill: #6190e8;
+}
+.gt-container .gt-version {
+  color: #a1a1a1;
+  margin-left: 0.375em;
+}
+.gt-container .gt-copyright {
+  margin: 0 0.9375em 0.5em;
+  border-top: 1px solid #e9e9e9;
+  padding-top: 0.5em;
+}
+.gt-container .gt-popup {
+  position: absolute;
+  right: 0;
+  top: 2.375em;
+  background: #fff;
+  display: inline-block;
+  border: 1px solid #e9e9e9;
+  padding: 0.625em 0;
+  font-size: 0.875em;
+  letter-spacing: 0.5px;
+}
+.gt-container .gt-popup .gt-action {
+  cursor: pointer;
+  display: block;
+  margin: 0.5em 0;
+  padding: 0 1.125em;
+  position: relative;
+  text-decoration: none;
+}
+.gt-container .gt-popup .gt-action.is--active:before {
+  content: '';
+  width: 0.25em;
+  height: 0.25em;
+  background: #6190e8;
+  position: absolute;
+  left: 0.5em;
+  top: 0.4375em;
+}
+.gt-container .gt-header {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.gt-container .gt-header-comment {
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  margin-left: 1.25em;
+}
+@media (max-width: 479px) {
+  .gt-container .gt-header-comment {
+    margin-left: 0.875em;
+  }
+}
+.gt-container .gt-header-textarea {
+  padding: 0.75em;
+  display: block;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 5.125em;
+  max-height: 15em;
+  border-radius: 5px;
+  border: 1px solid rgba(0,0,0,0.1);
+  font-size: 0.875em;
+  word-wrap: break-word;
+  resize: vertical;
+  background-color: #f6f6f6;
+  outline: none;
+  -webkit-transition: all 0.25s ease;
+  transition: all 0.25s ease;
+}
+.gt-container .gt-header-textarea:hover {
+  background-color: #fbfbfb;
+}
+.gt-container .gt-header-preview {
+  padding: 0.75em;
+  border-radius: 5px;
+  border: 1px solid rgba(0,0,0,0.1);
+  background-color: #f6f6f6;
+}
+.gt-container .gt-header-controls {
+  position: relative;
+  margin: 0.75em 0 0;
+}
+.gt-container .gt-header-controls:before,
+.gt-container .gt-header-controls:after {
+  content: " ";
+  display: table;
+}
+.gt-container .gt-header-controls:after {
+  clear: both;
+}
+@media (max-width: 479px) {
+  .gt-container .gt-header-controls {
+    margin: 0;
+  }
+}
+.gt-container .gt-header-controls-tip {
+  font-size: 0.875em;
+  color: #6190e8;
+  text-decoration: none;
+  vertical-align: sub;
+}
+@media (max-width: 479px) {
+  .gt-container .gt-header-controls-tip {
+    display: none;
+  }
+}
+.gt-container .gt-header-controls .gt-btn {
+  float: right;
+  margin-left: 1.25em;
+}
+@media (max-width: 479px) {
+  .gt-container .gt-header-controls .gt-btn {
+    float: none;
+    width: 100%;
+    margin: 0.75em 0 0;
+  }
+}
+.gt-container:after {
+  content: '';
+  position: fixed;
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  top: 0;
+  opacity: 0;
+}
+.gt-container.gt-input-focused {
+  position: relative;
+}
+.gt-container.gt-input-focused:after {
+  content: '';
+  position: fixed;
+  bottom: 0%;
+  left: 0;
+  right: 0;
+  top: 0;
+  background: #000;
+  opacity: 0.6;
+  -webkit-transition: opacity 0.3s, bottom 0s;
+  transition: opacity 0.3s, bottom 0s;
+  z-index: 9999;
+}
+.gt-container.gt-input-focused .gt-header-comment {
+  z-index: 10000;
+}
+.gt-container .gt-comments {
+  padding-top: 1.25em;
+}
+.gt-container .gt-comments-null {
+  text-align: center;
+}
+.gt-container .gt-comments-controls {
+  margin: 1.25em 0;
+  text-align: center;
+}
+.gt-container .gt-comment {
+  position: relative;
+  padding: 0.625em 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.gt-container .gt-comment-content {
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  margin-left: 1.25em;
+  padding: 0.75em 1em;
+  background-color: #f9f9f9;
+  overflow: auto;
+  -webkit-transition: all ease 0.25s;
+  transition: all ease 0.25s;
+}
+.gt-container .gt-comment-content:hover {
+  -webkit-box-shadow: 0 0.625em 3.75em 0 #f4f4f4;
+  box-shadow: 0 0.625em 3.75em 0 #f4f4f4;
+}
+@media (max-width: 479px) {
+  .gt-container .gt-comment-content {
+    margin-left: 0.875em;
+    padding: 0.625em 0.75em;
+  }
+}
+.gt-container .gt-comment-header {
+  margin-bottom: 0.5em;
+  font-size: 0.875em;
+  position: relative;
+}
+.gt-container .gt-comment-block-1 {
+  float: right;
+  height: 1.375em;
+  width: 2em;
+}
+.gt-container .gt-comment-block-2 {
+  float: right;
+  height: 1.375em;
+  width: 4em;
+}
+.gt-container .gt-comment-username {
+  font-weight: 500;
+  color: #6190e8;
+  text-decoration: none;
+}
+.gt-container .gt-comment-username:hover {
+  text-decoration: underline;
+}
+.gt-container .gt-comment-text {
+  margin-left: 0.5em;
+  color: #a1a1a1;
+}
+.gt-container .gt-comment-date {
+  margin-left: 0.5em;
+  color: #a1a1a1;
+}
+.gt-container .gt-comment-like,
+.gt-container .gt-comment-edit,
+.gt-container .gt-comment-reply {
+  position: absolute;
+  height: 1.375em;
+}
+.gt-container .gt-comment-like:hover,
+.gt-container .gt-comment-edit:hover,
+.gt-container .gt-comment-reply:hover {
+  cursor: pointer;
+}
+.gt-container .gt-comment-like {
+  top: 0;
+  right: 2em;
+}
+.gt-container .gt-comment-edit,
+.gt-container .gt-comment-reply {
+  top: 0;
+  right: 0;
+}
+.gt-container .gt-comment-body {
+  color: #333 !important;
+}
+.gt-container .gt-comment-body .email-hidden-toggle a {
+  display: inline-block;
+  height: 12px;
+  padding: 0 9px;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 6px;
+  color: #444d56;
+  text-decoration: none;
+  vertical-align: middle;
+  background: #dfe2e5;
+  border-radius: 1px;
+}
+.gt-container .gt-comment-body .email-hidden-toggle a:hover {
+  background-color: #c6cbd1;
+}
+.gt-container .gt-comment-body .email-hidden-reply {
+  display: none;
+  white-space: pre-wrap;
+}
+.gt-container .gt-comment-body .email-hidden-reply .email-signature-reply {
+  padding: 0 15px;
+  margin: 15px 0;
+  color: #586069;
+  border-left: 4px solid #dfe2e5;
+}
+.gt-container .gt-comment-body .email-hidden-reply.expanded {
+  display: block;
+}
+.gt-container .gt-comment-admin .gt-comment-content {
+  background-color: #f6f9fe;
+}
+@-webkit-keyframes gt-kf-rotate {
+  0% {
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes gt-kf-rotate {
+  0% {
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
--- a/themes/fluid/source/css/highlight-dark.styl
+++ b/themes/fluid/source/css/highlight-dark.styl
@@ -0,0 +1,6 @@
+if hexo-config("code.highlight.enable") && hexo-config("dark_mode.enable")
+  if hexo-config("code.highlight.highlightjs.dark.file")
+    @require hexo-config("code.highlight.highlightjs.dark.file")
+
+  if hexo-config("code.highlight.prismjs.dark.file")
+    @require hexo-config("code.highlight.prismjs.dark.file")
--- a/themes/fluid/source/css/highlight.styl
+++ b/themes/fluid/source/css/highlight.styl
@@ -0,0 +1,6 @@
+if hexo-config("code.highlight.enable")
+  if hexo-config("code.highlight.highlightjs.light.file")
+    @require hexo-config("code.highlight.highlightjs.light.file")
+
+  if hexo-config("code.highlight.prismjs.light.file")
+    @require hexo-config("code.highlight.prismjs.light.file")
--- a/themes/fluid/source/css/main.styl
+++ b/themes/fluid/source/css/main.styl
@@ -0,0 +1,19 @@
+// --------------------------------------
+// Fluid
+// https://github.com/fluid-dev/hexo-theme-fluid
+// --------------------------------------
+
+@import "_variables/base"
+for $inject_variable in hexo-config("injects.variable")
+  @import $inject_variable;
+
+@import "_functions/base"
+
+@import "_mixins/base"
+for $inject_mixin in hexo-config("injects.mixin")
+  @import $inject_mixin;
+
+@import "_pages/pages"
+
+for $inject_style in hexo-config("injects.style")
+  @import $inject_style;
--- a/themes/fluid/source/img/avatar.png
+++ b/themes/fluid/source/img/avatar.png
--- a/themes/fluid/source/img/gensokyo.jpg
+++ b/themes/fluid/source/img/gensokyo.jpg
--- a/themes/fluid/source/img/gh0s7.jpg
+++ b/themes/fluid/source/img/gh0s7.jpg
--- a/themes/fluid/source/img/hifuu.png
+++ b/themes/fluid/source/img/hifuu.png
--- a/themes/fluid/source/img/loading.gif
+++ b/themes/fluid/source/img/loading.gif
--- a/themes/fluid/source/img/police_beian.png
+++ b/themes/fluid/source/img/police_beian.png
--- a/themes/fluid/source/js/boot.js
+++ b/themes/fluid/source/js/boot.js
@@ -0,0 +1,22 @@
+/* global Fluid */
+
+Fluid.boot = {};
+
+Fluid.boot.registerEvents = function() {
+  Fluid.events.billboard();
+  Fluid.events.registerNavbarEvent();
+  Fluid.events.registerParallaxEvent();
+  Fluid.events.registerScrollDownArrowEvent();
+  Fluid.events.registerScrollTopArrowEvent();
+  Fluid.events.registerImageLoadedEvent();
+};
+
+Fluid.boot.refresh = function() {
+  Fluid.plugins.fancyBox();
+  Fluid.plugins.codeWidget();
+  Fluid.events.refresh();
+};
+
+document.addEventListener('DOMContentLoaded', function() {
+  Fluid.boot.registerEvents();
+});
--- a/themes/fluid/source/js/color-schema.js
+++ b/themes/fluid/source/js/color-schema.js
@@ -0,0 +1,286 @@
+/* global Fluid */
+
+/**
+ * Modified from https://blog.skk.moe/post/hello-darkmode-my-old-friend/
+ */
+(function(window, document) {
+  var rootElement = document.documentElement;
+  var colorSchemaStorageKey = 'Fluid_Color_Scheme';
+  var colorSchemaMediaQueryKey = '--color-mode';
+  var userColorSchemaAttributeName = 'data-user-color-scheme';
+  var defaultColorSchemaAttributeName = 'data-default-color-scheme';
+  var colorToggleButtonSelector = '#color-toggle-btn';
+  var colorToggleIconSelector = '#color-toggle-icon';
+  var iframeSelector = 'iframe';
+
+  function setLS(k, v) {
+    try {
+      localStorage.setItem(k, v);
+    } catch (e) {}
+  }
+
+  function removeLS(k) {
+    try {
+      localStorage.removeItem(k);
+    } catch (e) {}
+  }
+
+  function getLS(k) {
+    try {
+      return localStorage.getItem(k);
+    } catch (e) {
+      return null;
+    }
+  }
+
+  function getSchemaFromHTML() {
+    var res = rootElement.getAttribute(defaultColorSchemaAttributeName);
+    if (typeof res === 'string') {
+      return res.replace(/["'\s]/g, '');
+    }
+    return null;
+  }
+
+  function getSchemaFromCSSMediaQuery() {
+    var res = getComputedStyle(rootElement).getPropertyValue(
+      colorSchemaMediaQueryKey
+    );
+    if (typeof res === 'string') {
+      return res.replace(/["'\s]/g, '');
+    }
+    return null;
+  }
+
+  function resetSchemaAttributeAndLS() {
+    rootElement.setAttribute(userColorSchemaAttributeName, getDefaultColorSchema());
+    removeLS(colorSchemaStorageKey);
+  }
+
+  var validColorSchemaKeys = {
+    dark : true,
+    light: true
+  };
+
+  function getDefaultColorSchema() {
+    // 取默认字段的值
+    var schema = getSchemaFromHTML();
+    // 如果明确指定了 schema 则返回
+    if (validColorSchemaKeys[schema]) {
+      return schema;
+    }
+    // 默认优先按 prefers-color-scheme
+    schema = getSchemaFromCSSMediaQuery();
+    if (validColorSchemaKeys[schema]) {
+      return schema;
+    }
+    // 否则按本地时间是否大于 18 点或凌晨 0 ~ 6 点
+    var hours = new Date().getHours();
+    if (hours >= 18 || (hours >= 0 && hours <= 6)) {
+      return 'dark';
+    }
+    return 'light';
+  }
+
+  function applyCustomColorSchemaSettings(schema) {
+    // 接受从「开关」处传来的模式，或者从 localStorage 读取，否则按默认设置值
+    var current = schema || getLS(colorSchemaStorageKey) || getDefaultColorSchema();
+
+    if (current === getDefaultColorSchema()) {
+      // 当用户切换的显示模式和默认模式相同时，则恢复为自动模式
+      resetSchemaAttributeAndLS();
+    } else if (validColorSchemaKeys[current]) {
+      rootElement.setAttribute(
+        userColorSchemaAttributeName,
+        current
+      );
+    } else {
+      // 特殊情况重置
+      resetSchemaAttributeAndLS();
+      return;
+    }
+
+    // 根据当前模式设置图标
+    setButtonIcon(current);
+
+    // 设置代码高亮
+    setHighlightCSS(current);
+
+    // 设置其他应用
+    setApplications(current);
+  }
+
+  var invertColorSchemaObj = {
+    dark : 'light',
+    light: 'dark'
+  };
+
+  function getIconClass(scheme) {
+    return 'icon-' + scheme;
+  }
+
+  function toggleCustomColorSchema() {
+    var currentSetting = getLS(colorSchemaStorageKey);
+
+    if (validColorSchemaKeys[currentSetting]) {
+      // 从 localStorage 中读取模式，并取相反的模式
+      currentSetting = invertColorSchemaObj[currentSetting];
+    } else if (currentSetting === null) {
+      // 当 localStorage 中没有相关值，或者 localStorage 抛了 Error
+      // 先按照按钮的状态进行切换
+      var iconElement = document.querySelector(colorToggleIconSelector);
+      if (iconElement) {
+        currentSetting = iconElement.getAttribute('data');
+      }
+      if (!iconElement || !validColorSchemaKeys[currentSetting]) {
+        // 当 localStorage 中没有相关值，或者 localStorage 抛了 Error，则读取默认值并切换到相反的模式
+        currentSetting = invertColorSchemaObj[getSchemaFromCSSMediaQuery()];
+      }
+    } else {
+      return;
+    }
+    // 将相反的模式写入 localStorage
+    setLS(colorSchemaStorageKey, currentSetting);
+
+    return currentSetting;
+  }
+
+  function setButtonIcon(schema) {
+    if (validColorSchemaKeys[schema]) {
+      // 切换图标
+      var icon = getIconClass('dark');
+      if (schema) {
+        icon = getIconClass(schema);
+      }
+      var iconElement = document.querySelector(colorToggleIconSelector);
+      if (iconElement) {
+        iconElement.setAttribute(
+          'class',
+          'iconfont ' + icon
+        );
+        iconElement.setAttribute(
+          'data',
+          invertColorSchemaObj[schema]
+        );
+      } else {
+        // 如果图标不存在则说明图标还没加载出来，等到页面全部加载再尝试切换
+        Fluid.utils.waitElementLoaded(colorToggleIconSelector, function() {
+          var iconElement = document.querySelector(colorToggleIconSelector);
+          if (iconElement) {
+            iconElement.setAttribute(
+              'class',
+              'iconfont ' + icon
+            );
+            iconElement.setAttribute(
+              'data',
+              invertColorSchemaObj[schema]
+            );
+          }
+        });
+      }
+      if (document.documentElement.getAttribute('data-user-color-scheme')) {
+        var color = getComputedStyle(document.documentElement).getPropertyValue('--navbar-bg-color').trim()
+        document.querySelector('meta[name="theme-color"]').setAttribute('content', color)
+      }
+    }
+  }
+
+  function setHighlightCSS(schema) {
+    // 启用对应的代码高亮的样式
+    var lightCss = document.getElementById('highlight-css');
+    var darkCss = document.getElementById('highlight-css-dark');
+    if (schema === 'dark') {
+      if (darkCss) {
+        darkCss.removeAttribute('disabled');
+      }
+      if (lightCss) {
+        lightCss.setAttribute('disabled', '');
+      }
+    } else {
+      if (lightCss) {
+        lightCss.removeAttribute('disabled');
+      }
+      if (darkCss) {
+        darkCss.setAttribute('disabled', '');
+      }
+    }
+
+    setTimeout(function() {
+      // 设置代码块组件样式
+      document.querySelectorAll('.markdown-body pre').forEach((pre) => {
+        var cls = Fluid.utils.getBackgroundLightness(pre) >= 0 ? 'code-widget-light' : 'code-widget-dark';
+        var widget = pre.querySelector('.code-widget-light, .code-widget-dark');
+        if (widget) {
+          widget.classList.remove('code-widget-light', 'code-widget-dark');
+          widget.classList.add(cls);
+        }
+      });
+    }, 200);
+  }
+
+  function setApplications(schema) {
+    // 设置 remark42 评论主题
+    if (window.REMARK42) {
+      window.REMARK42.changeTheme(schema);
+    }
+
+    // 设置 cusdis 评论主题
+    if (window.CUSDIS) {
+      window.CUSDIS.setTheme(schema);
+    }
+
+    // 设置 utterances 评论主题
+    var utterances = document.querySelector('.utterances-frame');
+    if (utterances) {
+      var utterancesTheme = schema === 'dark' ? window.UtterancesThemeDark : window.UtterancesThemeLight;
+      const message = {
+        type : 'set-theme',
+        theme: utterancesTheme
+      };
+      utterances.contentWindow.postMessage(message, 'https://utteranc.es');
+    }
+
+    // 设置 giscus 评论主题
+    var giscus = document.querySelector('iframe.giscus-frame');
+    if (giscus) {
+      var giscusTheme = schema === 'dark' ? window.GiscusThemeDark : window.GiscusThemeLight;
+      const message = {
+        setConfig: {
+          theme: giscusTheme,
+        }
+      };
+      // giscus.style.cssText += 'color-scheme: normal;';
+      giscus.contentWindow.postMessage({ 'giscus': message }, 'https://giscus.app');
+    }
+  }
+
+  // 当页面加载时，将显示模式设置为 localStorage 中自定义的值（如果有的话）
+  applyCustomColorSchemaSettings();
+
+  Fluid.utils.waitElementLoaded(colorToggleIconSelector, function() {
+    applyCustomColorSchemaSettings();
+    var button = document.querySelector(colorToggleButtonSelector);
+    if (button) {
+      // 当用户点击切换按钮时，获得新的显示模式、写入 localStorage、并在页面上生效
+      button.addEventListener('click', function() {
+        applyCustomColorSchemaSettings(toggleCustomColorSchema());
+      });
+      var icon = document.querySelector(colorToggleIconSelector);
+      if (icon) {
+        // 光标悬停在按钮上时，切换图标
+        button.addEventListener('mouseenter', function() {
+          var current = icon.getAttribute('data');
+          icon.classList.replace(getIconClass(invertColorSchemaObj[current]), getIconClass(current));
+        });
+        button.addEventListener('mouseleave', function() {
+          var current = icon.getAttribute('data');
+          icon.classList.replace(getIconClass(current), getIconClass(invertColorSchemaObj[current]));
+        });
+      }
+    }
+  });
+
+  Fluid.utils.waitElementLoaded(iframeSelector, function() {
+    applyCustomColorSchemaSettings();
+  });
+  
+})(window, document);
--- a/themes/fluid/source/js/events.js
+++ b/themes/fluid/source/js/events.js
@@ -0,0 +1,184 @@
+/* global Fluid */
+
+HTMLElement.prototype.wrap = function(wrapper) {
+  this.parentNode.insertBefore(wrapper, this);
+  this.parentNode.removeChild(this);
+  wrapper.appendChild(this);
+};
+
+Fluid.events = {
+
+  registerNavbarEvent: function() {
+    var navbar = jQuery('#navbar');
+    if (navbar.length === 0) {
+      return;
+    }
+    var submenu = jQuery('#navbar .dropdown-menu');
+    if (navbar.offset().top > 0) {
+      navbar.removeClass('navbar-dark');
+      submenu.removeClass('navbar-dark');
+    }
+    Fluid.utils.listenScroll(function() {
+      navbar[navbar.offset().top > 50 ? 'addClass' : 'removeClass']('top-nav-collapse');
+      submenu[navbar.offset().top > 50 ? 'addClass' : 'removeClass']('dropdown-collapse');
+      if (navbar.offset().top > 0) {
+        navbar.removeClass('navbar-dark');
+        submenu.removeClass('navbar-dark');
+      } else {
+        navbar.addClass('navbar-dark');
+        submenu.removeClass('navbar-dark');
+      }
+    });
+    jQuery('#navbar-toggler-btn').on('click', function() {
+      jQuery('.animated-icon').toggleClass('open');
+      jQuery('#navbar').toggleClass('navbar-col-show');
+    });
+  },
+
+  registerParallaxEvent: function() {
+    var ph = jQuery('#banner[parallax="true"]');
+    if (ph.length === 0) {
+      return;
+    }
+    var board = jQuery('#board');
+    if (board.length === 0) {
+      return;
+    }
+    var parallax = function() {
+      var pxv = jQuery(window).scrollTop() / 5;
+      var offset = parseInt(board.css('margin-top'), 10);
+      var max = 96 + offset;
+      if (pxv > max) {
+        pxv = max;
+      }
+      ph.css({
+        transform: 'translate3d(0,' + pxv + 'px,0)'
+      });
+      var sideCol = jQuery('.side-col');
+      if (sideCol) {
+        sideCol.css({
+          'padding-top': pxv + 'px'
+        });
+      }
+    };
+    Fluid.utils.listenScroll(parallax);
+  },
+
+  registerScrollDownArrowEvent: function() {
+    var scrollbar = jQuery('.scroll-down-bar');
+    if (scrollbar.length === 0) {
+      return;
+    }
+    scrollbar.on('click', function() {
+      Fluid.utils.scrollToElement('#board', -jQuery('#navbar').height());
+    });
+  },
+
+  registerScrollTopArrowEvent: function() {
+    var topArrow = jQuery('#scroll-top-button');
+    if (topArrow.length === 0) {
+      return;
+    }
+    var board = jQuery('#board');
+    if (board.length === 0) {
+      return;
+    }
+    var posDisplay = false;
+    var scrollDisplay = false;
+    // Position
+    var setTopArrowPos = function() {
+      var boardRight = board[0].getClientRects()[0].right;
+      var bodyWidth = document.body.offsetWidth;
+      var right = bodyWidth - boardRight;
+      posDisplay = right >= 50;
+      topArrow.css({
+        'bottom': posDisplay && scrollDisplay ? '20px' : '-60px',
+        'right' : right - 64 + 'px'
+      });
+    };
+    setTopArrowPos();
+    jQuery(window).resize(setTopArrowPos);
+    // Display
+    var headerHeight = board.offset().top;
+    Fluid.utils.listenScroll(function() {
+      var scrollHeight = document.body.scrollTop + document.documentElement.scrollTop;
+      scrollDisplay = scrollHeight >= headerHeight;
+      topArrow.css({
+        'bottom': posDisplay && scrollDisplay ? '20px' : '-60px'
+      });
+    });
+    // Click
+    topArrow.on('click', function() {
+      jQuery('body,html').animate({
+        scrollTop: 0,
+        easing   : 'swing'
+      });
+    });
+  },
+
+  registerImageLoadedEvent: function() {
+    if (!('NProgress' in window)) { return; }
+
+    var bg = document.getElementById('banner');
+    if (bg) {
+      var src = bg.style.backgroundImage;
+      var url = src.match(/\((.*?)\)/)[1].replace(/(['"])/g, '');
+      var img = new Image();
+      img.onload = function() {
+        window.NProgress && window.NProgress.status !== null && window.NProgress.inc(0.2);
+      };
+      img.src = url;
+      if (img.complete) { img.onload(); }
+    }
+
+    var notLazyImages = jQuery('main img:not([lazyload])');
+    var total = notLazyImages.length;
+    for (const img of notLazyImages) {
+      const old = img.onload;
+      img.onload = function() {
+        old && old();
+        window.NProgress && window.NProgress.status !== null && window.NProgress.inc(0.5 / total);
+      };
+      if (img.complete) { img.onload(); }
+    }
+  },
+
+  registerRefreshCallback: function(callback) {
+    if (!Array.isArray(Fluid.events._refreshCallbacks)) {
+      Fluid.events._refreshCallbacks = [];
+    }
+    Fluid.events._refreshCallbacks.push(callback);
+  },
+
+  refresh: function() {
+    if (Array.isArray(Fluid.events._refreshCallbacks)) {
+      for (var callback of Fluid.events._refreshCallbacks) {
+        if (callback instanceof Function) {
+          callback();
+        }
+      }
+    }
+  },
+
+  billboard: function() {
+    if (!('console' in window)) {
+      return;
+    }
+    // eslint-disable-next-line no-console
+    console.log(`
+-------------------------------------------------
+|                                               |
+|      ________  __            _        __      |
+|     |_   __  |[  |          (_)      |  ]     |
+|       | |_ \\_| | | __   _   __   .--.| |      |
+|       |  _|    | |[  | | | [  |/ /'\`\\' |      |
+|      _| |_     | | | \\_/ |, | || \\__/  |      |
+|     |_____|   [___]'.__.'_/[___]'.__.;__]     |
+|                                               |
+|            Powered by Hexo x Fluid            |
+| https://github.com/fluid-dev/hexo-theme-fluid |
+|                                               |
+-------------------------------------------------
+    `);
+  }
+};
--- a/themes/fluid/source/js/img-lazyload.js
+++ b/themes/fluid/source/js/img-lazyload.js
@@ -0,0 +1,10 @@
+/* global Fluid, CONFIG */
+
+(function(window, document) {
+  for (const each of document.querySelectorAll('img[lazyload]')) {
+    Fluid.utils.waitElementVisible(each, function() {
+      each.removeAttribute('srcset');
+      each.removeAttribute('lazyload');
+    }, CONFIG.lazyload.offset_factor);
+  }
+})(window, document);
--- a/themes/fluid/source/js/leancloud.js
+++ b/themes/fluid/source/js/leancloud.js
@@ -0,0 +1,192 @@
+/* global CONFIG */
+// eslint-disable-next-line no-console
+
+(function(window, document) {
+  // 查询存储的记录
+  function getRecord(Counter, target) {
+    return new Promise(function(resolve, reject) {
+      Counter('get', '/classes/Counter?where=' + encodeURIComponent(JSON.stringify({ target })))
+        .then(resp => resp.json())
+        .then(({ results, code, error }) => {
+          if (code === 401) {
+            throw error;
+          }
+          if (results && results.length > 0) {
+            var record = results[0];
+            resolve(record);
+          } else {
+            Counter('post', '/classes/Counter', { target, time: 0 })
+              .then(resp => resp.json())
+              .then((record, error) => {
+                if (error) {
+                  throw error;
+                }
+                resolve(record);
+              }).catch(error => {
+                console.error('Failed to create: ', error);
+                reject(error);
+              });
+          }
+        }).catch((error) => {
+          console.error('LeanCloud Counter Error: ', error);
+          reject(error);
+        });
+    });
+  }
+
+  // 发起自增请求
+  function increment(Counter, incrArr) {
+    return new Promise(function(resolve, reject) {
+      Counter('post', '/batch', {
+        'requests': incrArr
+      }).then((res) => {
+        res = res.json();
+        if (res.error) {
+          throw res.error;
+        }
+        resolve(res);
+      }).catch((error) => {
+        console.error('Failed to save visitor count: ', error);
+        reject(error);
+      });
+    });
+  }
+
+  // 构建自增请求体
+  function buildIncrement(objectId) {
+    return {
+      'method': 'PUT',
+      'path'  : `/1.1/classes/Counter/${objectId}`,
+      'body'  : {
+        'time': {
+          '__op'  : 'Increment',
+          'amount': 1
+        }
+      }
+    };
+  }
+
+  // 校验是否为有效的 Host
+  function validHost() {
+    if (CONFIG.web_analytics.leancloud.ignore_local) {
+      var hostname = window.location.hostname;
+      if (hostname === 'localhost' || hostname === '127.0.0.1') {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  // 校验是否为有效的 UV
+  function validUV() {
+    var key = 'LeanCloud_UV_Flag';
+    var flag = localStorage.getItem(key);
+    if (flag) {
+      // 距离标记小于 24 小时则不计为 UV
+      if (new Date().getTime() - parseInt(flag, 10) <= 86400000) {
+        return false;
+      }
+    }
+    localStorage.setItem(key, new Date().getTime().toString());
+    return true;
+  }
+
+  function addCount(Counter) {
+    var enableIncr = CONFIG.web_analytics.enable && !Fluid.ctx.dnt && validHost();
+    var getterArr = [];
+    var incrArr = [];
+
+    // 请求 PV 并自增
+    var pvCtn = document.querySelector('#leancloud-site-pv-container');
+    if (pvCtn) {
+      var pvGetter = getRecord(Counter, 'site-pv').then((record) => {
+        enableIncr && incrArr.push(buildIncrement(record.objectId));
+        var ele = document.querySelector('#leancloud-site-pv');
+        if (ele) {
+          ele.innerText = (record.time || 0) + (enableIncr ? 1 : 0);
+          pvCtn.style.display = 'inline';
+        }
+      });
+      getterArr.push(pvGetter);
+    }
+
+    // 请求 UV 并自增
+    var uvCtn = document.querySelector('#leancloud-site-uv-container');
+    if (uvCtn) {
+      var uvGetter = getRecord(Counter, 'site-uv').then((record) => {
+        var incrUV = validUV() && enableIncr;
+        incrUV && incrArr.push(buildIncrement(record.objectId));
+        var ele = document.querySelector('#leancloud-site-uv');
+        if (ele) {
+          ele.innerText = (record.time || 0) + (incrUV ? 1 : 0);
+          uvCtn.style.display = 'inline';
+        }
+      });
+      getterArr.push(uvGetter);
+    }
+
+    // 如果有页面浏览数节点，则请求浏览数并自增
+    var viewCtn = document.querySelector('#leancloud-page-views-container');
+    if (viewCtn) {
+      var path = eval(CONFIG.web_analytics.leancloud.path || 'window.location.pathname');
+      var target = decodeURI(path.replace(/\/*(index.html)?$/, '/'));
+      var viewGetter = getRecord(Counter, target).then((record) => {
+        enableIncr && incrArr.push(buildIncrement(record.objectId));
+        var ele = document.querySelector('#leancloud-page-views');
+        if (ele) {
+          ele.innerText = (record.time || 0) + (enableIncr ? 1 : 0);
+          viewCtn.style.display = 'inline';
+        }
+      });
+      getterArr.push(viewGetter);
+    }
+
+    // 如果启动计数自增，批量发起自增请求
+    if (enableIncr) {
+      Promise.all(getterArr).then(() => {
+        incrArr.length > 0 && increment(Counter, incrArr);
+      });
+    }
+  }
+
+  var appId = CONFIG.web_analytics.leancloud.app_id;
+  var appKey = CONFIG.web_analytics.leancloud.app_key;
+  var serverUrl = CONFIG.web_analytics.leancloud.server_url;
+
+  if (!appId) {
+    throw new Error('LeanCloud appId is empty');
+  }
+  if (!appKey) {
+    throw new Error('LeanCloud appKey is empty');
+  }
+
+  function fetchData(api_server) {
+    var Counter = (method, url, data) => {
+      return fetch(`${api_server}/1.1${url}`, {
+        method,
+        headers: {
+          'X-LC-Id'     : appId,
+          'X-LC-Key'    : appKey,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(data)
+      });
+    };
+
+    addCount(Counter);
+  }
+
+  var apiServer = serverUrl || `https://${appId.slice(0, 8).toLowerCase()}.api.lncldglobal.com`;
+
+  if (apiServer) {
+    fetchData(apiServer);
+  } else {
+    fetch('https://app-router.leancloud.cn/2/route?appId=' + appId)
+      .then(resp => resp.json())
+      .then((data) => {
+        if (data.api_server) {
+          fetchData('https://' + data.api_server);
+        }
+      });
+  }
+})(window, document);
--- a/themes/fluid/source/js/local-search.js
+++ b/themes/fluid/source/js/local-search.js
@@ -0,0 +1,159 @@
+/* global CONFIG */
+
+(function() {
+  // Modified from [hexo-generator-search](https://github.com/wzpan/hexo-generator-search)
+  function localSearchFunc(path, searchSelector, resultSelector) {
+    'use strict';
+    // 0x00. environment initialization
+    var $input = jQuery(searchSelector);
+    var $result = jQuery(resultSelector);
+
+    if ($input.length === 0) {
+      // eslint-disable-next-line no-console
+      throw Error('No element selected by the searchSelector');
+    }
+    if ($result.length === 0) {
+      // eslint-disable-next-line no-console
+      throw Error('No element selected by the resultSelector');
+    }
+
+    if ($result.attr('class').indexOf('list-group-item') === -1) {
+      $result.html('<div class="m-auto text-center"><div class="spinner-border" role="status"><span class="sr-only">Loading...</span></div><br/>Loading...</div>');
+    }
+
+    jQuery.ajax({
+      // 0x01. load xml file
+      url     : path,
+      dataType: 'xml',
+      success : function(xmlResponse) {
+        // 0x02. parse xml file
+        var dataList = jQuery('entry', xmlResponse).map(function() {
+          return {
+            title  : jQuery('title', this).text(),
+            content: jQuery('content', this).text(),
+            url    : jQuery('url', this).text()
+          };
+        }).get();
+
+        if ($result.html().indexOf('list-group-item') === -1) {
+          $result.html('');
+        }
+
+        $input.on('input', function() {
+          // 0x03. parse query to keywords list
+          var content = $input.val();
+          var resultHTML = '';
+          var keywords = content.trim().toLowerCase().split(/[\s-]+/);
+          $result.html('');
+          if (content.trim().length <= 0) {
+            return $input.removeClass('invalid').removeClass('valid');
+          }
+          // 0x04. perform local searching
+          dataList.forEach(function(data) {
+            var isMatch = true;
+            if (!data.title || data.title.trim() === '') {
+              data.title = 'Untitled';
+            }
+            var orig_data_title = data.title.trim();
+            var data_title = orig_data_title.toLowerCase();
+            var orig_data_content = data.content.trim().replace(/<[^>]+>/g, '');
+            var data_content = orig_data_content.toLowerCase();
+            var data_url = data.url;
+            var index_title = -1;
+            var index_content = -1;
+            var first_occur = -1;
+            // Skip matching when content is included in search and content is empty
+            if (CONFIG.include_content_in_search && data_content === '') {
+              isMatch = false;
+            } else {
+              keywords.forEach(function (keyword, i) {
+                index_title = data_title.indexOf(keyword);
+                index_content = data_content.indexOf(keyword);
+
+                if (index_title < 0 && index_content < 0) {
+                  isMatch = false;
+                } else {
+                  if (index_content < 0) {
+                    index_content = 0;
+                  }
+                  if (i === 0) {
+                    first_occur = index_content;
+                  }
+                }
+              });
+            }
+            // 0x05. show search results
+            if (isMatch) {
+              resultHTML += '<a href=\'' + data_url + '\' class=\'list-group-item list-group-item-action font-weight-bolder search-list-title\'>' + orig_data_title + '</a>';
+              var content = orig_data_content;
+              if (first_occur >= 0) {
+                // cut out 100 characters
+                var start = first_occur - 20;
+                var end = first_occur + 80;
+
+                if (start < 0) {
+                  start = 0;
+                }
+
+                if (start === 0) {
+                  end = 100;
+                }
+
+                if (end > content.length) {
+                  end = content.length;
+                }
+
+                var match_content = content.substring(start, end);
+
+                // highlight all keywords
+                keywords.forEach(function(keyword) {
+                  var regS = new RegExp(keyword, 'gi');
+                  match_content = match_content.replace(regS, '<span class="search-word">' + keyword + '</span>');
+                });
+
+                resultHTML += '<p class=\'search-list-content\'>' + match_content + '...</p>';
+              }
+            }
+          });
+          if (resultHTML.indexOf('list-group-item') === -1) {
+            return $input.addClass('invalid').removeClass('valid');
+          }
+          $input.addClass('valid').removeClass('invalid');
+          $result.html(resultHTML);
+        });
+      }
+    });
+  }
+
+  function localSearchReset(searchSelector, resultSelector) {
+    'use strict';
+    var $input = jQuery(searchSelector);
+    var $result = jQuery(resultSelector);
+
+    if ($input.length === 0) {
+      // eslint-disable-next-line no-console
+      throw Error('No element selected by the searchSelector');
+    }
+    if ($result.length === 0) {
+      // eslint-disable-next-line no-console
+      throw Error('No element selected by the resultSelector');
+    }
+
+    $input.val('').removeClass('invalid').removeClass('valid');
+    $result.html('');
+  }
+
+  var modal = jQuery('#modalSearch');
+  var searchSelector = '#local-search-input';
+  var resultSelector = '#local-search-result';
+  modal.on('show.bs.modal', function() {
+    var path = CONFIG.search_path || '/local-search.xml';
+    localSearchFunc(path, searchSelector, resultSelector);
+  });
+  modal.on('shown.bs.modal', function() {
+    jQuery('#local-search-input').focus();
+  });
+  modal.on('hidden.bs.modal', function() {
+    localSearchReset(searchSelector, resultSelector);
+  });
+})();
--- a/themes/fluid/source/js/plugins.js
+++ b/themes/fluid/source/js/plugins.js
@@ -0,0 +1,164 @@
+/* global Fluid, CONFIG */
+
+HTMLElement.prototype.wrap = function(wrapper) {
+  this.parentNode.insertBefore(wrapper, this);
+  this.parentNode.removeChild(this);
+  wrapper.appendChild(this);
+};
+
+Fluid.plugins = {
+
+  typing: function(text) {
+    if (!('Typed' in window)) { return; }
+
+    var typed = new window.Typed('#subtitle', {
+      strings: [
+        '  ',
+        text
+      ],
+      cursorChar: CONFIG.typing.cursorChar,
+      typeSpeed : CONFIG.typing.typeSpeed,
+      loop      : CONFIG.typing.loop
+    });
+    typed.stop();
+    var subtitle = document.getElementById('subtitle');
+    if (subtitle) {
+      subtitle.innerText = '';
+    }
+    jQuery(document).ready(function() {
+      typed.start();
+    });
+  },
+
+  fancyBox: function(selector) {
+    if (!CONFIG.image_zoom.enable || !('fancybox' in jQuery)) { return; }
+
+    jQuery(selector || '.markdown-body :not(a) > img, .markdown-body > img').each(function() {
+      var $image = jQuery(this);
+      var imageUrl = $image.attr('data-src') || $image.attr('src') || '';
+      if (CONFIG.image_zoom.img_url_replace) {
+        var rep = CONFIG.image_zoom.img_url_replace;
+        var r1 = rep[0] || '';
+        var r2 = rep[1] || '';
+        if (r1) {
+          if (/^re:/.test(r1)) {
+            r1 = r1.replace(/^re:/, '');
+            var reg = new RegExp(r1, 'gi');
+            imageUrl = imageUrl.replace(reg, r2);
+          } else {
+            imageUrl = imageUrl.replace(r1, r2);
+          }
+        }
+      }
+      var $imageWrap = $image.wrap(`
+        <a class="fancybox fancybox.image" href="${imageUrl}"
+          itemscope itemtype="http://schema.org/ImageObject" itemprop="url"></a>`
+      ).parent('a');
+      if ($imageWrap.length !== 0) {
+        if ($image.is('.group-image-container img')) {
+          $imageWrap.attr('data-fancybox', 'group').attr('rel', 'group');
+        } else {
+          $imageWrap.attr('data-fancybox', 'default').attr('rel', 'default');
+        }
+
+        var imageTitle = $image.attr('title') || $image.attr('alt');
+        if (imageTitle) {
+          $imageWrap.attr('title', imageTitle).attr('data-caption', imageTitle);
+        }
+      }
+    });
+
+    jQuery.fancybox.defaults.hash = false;
+    jQuery('.fancybox').fancybox({
+      loop   : true,
+      helpers: {
+        overlay: {
+          locked: false
+        }
+      }
+    });
+  },
+
+  imageCaption: function(selector) {
+    if (!CONFIG.image_caption.enable) { return; }
+
+    jQuery(selector || `.markdown-body > p > img, .markdown-body > figure > img,
+      .markdown-body > p > a.fancybox, .markdown-body > figure > a.fancybox`).each(function() {
+      var $target = jQuery(this);
+      var $figcaption = $target.next('figcaption');
+      if ($figcaption.length !== 0) {
+        $figcaption.addClass('image-caption');
+      } else {
+        var imageTitle = $target.attr('title') || $target.attr('alt');
+        if (imageTitle) {
+          $target.after(`<figcaption aria-hidden="true" class="image-caption">${imageTitle}</figcaption>`);
+        }
+      }
+    });
+  },
+
+  codeWidget() {
+    var enableLang = CONFIG.code_language.enable && CONFIG.code_language.default;
+    var enableCopy = CONFIG.copy_btn && 'ClipboardJS' in window;
+    if (!enableLang && !enableCopy) {
+      return;
+    }
+
+    function getBgClass(ele) {
+      return Fluid.utils.getBackgroundLightness(ele) >= 0 ? 'code-widget-light' : 'code-widget-dark';
+    }
+
+    var copyTmpl = '';
+    copyTmpl += '<div class="code-widget">';
+    copyTmpl += 'LANG';
+    copyTmpl += '</div>';
+    jQuery('.markdown-body pre').each(function() {
+      var $pre = jQuery(this);
+      if ($pre.find('code.mermaid').length > 0) {
+        return;
+      }
+      if ($pre.find('span.line').length > 0) {
+        return;
+      }
+
+      var lang = '';
+
+      if (enableLang) {
+        lang = CONFIG.code_language.default;
+        if ($pre[0].children.length > 0 && $pre[0].children[0].classList.length >= 2 && $pre.children().hasClass('hljs')) {
+          lang = $pre[0].children[0].classList[1];
+        } else if ($pre[0].getAttribute('data-language')) {
+          lang = $pre[0].getAttribute('data-language');
+        } else if ($pre.parent().hasClass('sourceCode') && $pre[0].children.length > 0 && $pre[0].children[0].classList.length >= 2) {
+          lang = $pre[0].children[0].classList[1];
+          $pre.parent().addClass('code-wrapper');
+        } else if ($pre.parent().hasClass('markdown-body') && $pre[0].classList.length === 0) {
+          $pre.wrap('<div class="code-wrapper"></div>');
+        }
+        lang = lang.toUpperCase().replace('NONE', CONFIG.code_language.default);
+      }
+      $pre.append(copyTmpl.replace('LANG', lang).replace('code-widget">',
+        getBgClass($pre[0]) + (enableCopy ? ' code-widget copy-btn" data-clipboard-snippet><i class="iconfont icon-copy"></i>' : ' code-widget">')));
+
+      if (enableCopy) {
+        var clipboard = new ClipboardJS('.copy-btn', {
+          target: function(trigger) {
+            var nodes = trigger.parentNode.childNodes;
+            for (var i = 0; i < nodes.length; i++) {
+              if (nodes[i].tagName === 'CODE') {
+                return nodes[i];
+              }
+            }
+          }
+        });
+        clipboard.on('success', function(e) {
+          e.clearSelection();
+          e.trigger.innerHTML = e.trigger.innerHTML.replace('icon-copy', 'icon-success');
+          setTimeout(function() {
+            e.trigger.innerHTML = e.trigger.innerHTML.replace('icon-success', 'icon-copy');
+          }, 2000);
+        });
+      }
+    });
+  }
+};
--- a/themes/fluid/source/js/umami-view.js
+++ b/themes/fluid/source/js/umami-view.js
@@ -0,0 +1,99 @@
+// 从配置文件中获取 umami 的配置
+const website_id = CONFIG.web_analytics.umami.website_id;
+// 拼接请求地址
+const request_url = `${CONFIG.web_analytics.umami.api_server}/websites/${website_id}/stats`;
+
+const start_time = new Date(CONFIG.web_analytics.umami.start_time).getTime();
+const end_time = new Date().getTime();
+const token = CONFIG.web_analytics.umami.token;
+
+// 检查配置是否为空
+if (!website_id) {
+  throw new Error("Umami website_id is empty");
+}
+if (!request_url) {
+  throw new Error("Umami request_url is empty");
+}
+if (!start_time) {
+  throw new Error("Umami start_time is empty");
+}
+if (!token) {
+  throw new Error("Umami token is empty");
+}
+
+// 构造请求参数
+const params = new URLSearchParams({
+  startAt: start_time,
+  endAt: end_time,
+});
+// 构造请求头
+const request_header = {
+  method: "GET",
+  headers: {
+    "Content-Type": "application/json",
+    "x-umami-api-key": "oZKCH3msvqt10VlXKwoJvHclmaS4bVx0",
+  },
+};
+
+// 获取站点统计数据
+async function siteStats() {
+  try {
+    const response = await fetch(`${request_url}?${params}`, request_header);
+    const data = await response.json();
+    const uniqueVisitors = data.uniques.value; // 获取独立访客数
+    const pageViews = data.pageviews.value; // 获取页面浏览量
+
+    let pvCtn = document.querySelector("#umami-site-pv-container");
+    if (pvCtn) {
+      let ele = document.querySelector("#umami-site-pv");
+      if (ele) {
+        ele.textContent = pageViews; // 设置页面浏览量
+        pvCtn.style.display = "inline"; // 将元素显示出来
+      }
+    }
+
+    let uvCtn = document.querySelector("#umami-site-uv-container");
+    if (uvCtn) {
+      let ele = document.querySelector("#umami-site-uv");
+      if (ele) {
+        ele.textContent = uniqueVisitors;
+        uvCtn.style.display = "inline";
+      }
+    }
+  } catch (error) {
+    console.error(error);
+    return "-1";
+  }
+}
+
+// 获取页面浏览量
+async function pageStats(path) {
+  try {
+    const response = await fetch(`${request_url}?${params}&url=${path}`, request_header);
+    const data = await response.json();
+    const pageViews = data.pageviews.value;
+
+    let viewCtn = document.querySelector("#umami-page-views-container");
+    if (viewCtn) {
+      let ele = document.querySelector("#umami-page-views");
+      if (ele) {
+        ele.textContent = pageViews;
+        viewCtn.style.display = "inline";
+      }
+    }
+  } catch (error) {
+    console.error(error);
+    return "-1";
+  }
+}
+
+siteStats();
+
+// 获取页面容器
+let viewCtn = document.querySelector("#umami-page-views-container");
+// 如果页面容器存在，则获取页面浏览量
+if (viewCtn) {
+  let path = window.location.pathname;
+  let target = decodeURI(path.replace(/\/*(index.html)?$/, "/"));
+  pageStats(target);
+}
--- a/themes/fluid/source/js/utils.js
+++ b/themes/fluid/source/js/utils.js
@@ -0,0 +1,245 @@
+/* global Fluid, CONFIG */
+
+window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame;
+
+Fluid.utils = {
+
+  listenScroll: function(callback) {
+    var dbc = new Debouncer(callback);
+    window.addEventListener('scroll', dbc, false);
+    dbc.handleEvent();
+    return dbc;
+  },
+
+  unlistenScroll: function(callback) {
+    window.removeEventListener('scroll', callback);
+  },
+
+  listenDOMLoaded(callback) {
+    if (document.readyState !== 'loading') {
+      callback();
+    } else {
+      document.addEventListener('DOMContentLoaded', function () {
+        callback();
+      });
+    }
+  },
+
+  scrollToElement: function(target, offset) {
+    var of = jQuery(target).offset();
+    if (of) {
+      jQuery('html,body').animate({
+        scrollTop: of.top + (offset || 0),
+        easing   : 'swing'
+      });
+    }
+  },
+
+  elementVisible: function(element, offsetFactor) {
+    offsetFactor = offsetFactor && offsetFactor >= 0 ? offsetFactor : 0;
+    var rect = element.getBoundingClientRect();
+    const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+    return (
+      (rect.top >= 0 && rect.top <= viewportHeight * (1 + offsetFactor) + rect.height / 2) ||
+      (rect.bottom >= 0 && rect.bottom <= viewportHeight * (1 + offsetFactor) + rect.height / 2)
+    );
+  },
+
+  waitElementVisible: function(selectorOrElement, callback, offsetFactor) {
+    var runningOnBrowser = typeof window !== 'undefined';
+    var isBot = (runningOnBrowser && !('onscroll' in window))
+      || (typeof navigator !== 'undefined' && /(gle|ing|ro|msn)bot|crawl|spider|yand|duckgo/i.test(navigator.userAgent));
+    if (!runningOnBrowser || isBot) {
+      return;
+    }
+
+    offsetFactor = offsetFactor && offsetFactor >= 0 ? offsetFactor : 0;
+
+    function waitInViewport(element) {
+      Fluid.utils.listenDOMLoaded(function() {
+        if (Fluid.utils.elementVisible(element, offsetFactor)) {
+          callback();
+          return;
+        }
+        if ('IntersectionObserver' in window) {
+          var io = new IntersectionObserver(function(entries, ob) {
+            if (entries[0].isIntersecting) {
+              callback();
+              ob.disconnect();
+            }
+          }, {
+            threshold : [0],
+            rootMargin: (window.innerHeight || document.documentElement.clientHeight) * offsetFactor + 'px'
+          });
+          io.observe(element);
+        } else {
+          var wrapper = Fluid.utils.listenScroll(function() {
+            if (Fluid.utils.elementVisible(element, offsetFactor)) {
+              Fluid.utils.unlistenScroll(wrapper);
+              callback();
+            }
+          });
+        }
+      });
+    }
+
+    if (typeof selectorOrElement === 'string') {
+      this.waitElementLoaded(selectorOrElement, function(element) {
+        waitInViewport(element);
+      });
+    } else {
+      waitInViewport(selectorOrElement);
+    }
+  },
+
+  waitElementLoaded: function(selector, callback) {
+    var runningOnBrowser = typeof window !== 'undefined';
+    var isBot = (runningOnBrowser && !('onscroll' in window))
+      || (typeof navigator !== 'undefined' && /(gle|ing|ro|msn)bot|crawl|spider|yand|duckgo/i.test(navigator.userAgent));
+    if (!runningOnBrowser || isBot) {
+      return;
+    }
+
+    if ('MutationObserver' in window) {
+      var mo = new MutationObserver(function(records, ob) {
+        var ele = document.querySelector(selector);
+        if (ele) {
+          callback(ele);
+          ob.disconnect();
+        }
+      });
+      mo.observe(document, { childList: true, subtree: true });
+    } else {
+      Fluid.utils.listenDOMLoaded(function() {
+        var waitLoop = function() {
+          var ele = document.querySelector(selector);
+          if (ele) {
+            callback(ele);
+          } else {
+            setTimeout(waitLoop, 100);
+          }
+        };
+        waitLoop();
+      });
+    }
+  },
+
+  createScript: function(url, onload) {
+    var s = document.createElement('script');
+    s.setAttribute('src', url);
+    s.setAttribute('type', 'text/javascript');
+    s.setAttribute('charset', 'UTF-8');
+    s.async = false;
+    if (typeof onload === 'function') {
+      if (window.attachEvent) {
+        s.onreadystatechange = function() {
+          var e = s.readyState;
+          if (e === 'loaded' || e === 'complete') {
+            s.onreadystatechange = null;
+            onload();
+          }
+        };
+      } else {
+        s.onload = onload;
+      }
+    }
+    var ss = document.getElementsByTagName('script');
+    var e = ss.length > 0 ? ss[ss.length - 1] : document.head || document.documentElement;
+    e.parentNode.insertBefore(s, e.nextSibling);
+  },
+
+  createCssLink: function(url) {
+    var l = document.createElement('link');
+    l.setAttribute('rel', 'stylesheet');
+    l.setAttribute('type', 'text/css');
+    l.setAttribute('href', url);
+    var e = document.getElementsByTagName('link')[0]
+      || document.getElementsByTagName('head')[0]
+      || document.head || document.documentElement;
+    e.parentNode.insertBefore(l, e);
+  },
+
+  loadComments: function(selector, loadFunc) {
+    var ele = document.querySelector('#comments[lazyload]');
+    if (ele) {
+      var callback = function() {
+        loadFunc();
+        ele.removeAttribute('lazyload');
+      };
+      Fluid.utils.waitElementVisible(selector, callback, CONFIG.lazyload.offset_factor);
+    } else {
+      loadFunc();
+    }
+  },
+
+  getBackgroundLightness(selectorOrElement) {
+    var ele = selectorOrElement;
+    if (typeof selectorOrElement === 'string') {
+      ele = document.querySelector(selectorOrElement);
+    }
+    var view = ele.ownerDocument.defaultView;
+    if (!view) {
+      view = window;
+    }
+    var rgbArr = view.getComputedStyle(ele).backgroundColor.replace(/rgba*\(/, '').replace(')', '').split(/,\s*/);
+    if (rgbArr.length < 3) {
+      return 0;
+    }
+    var colorCast = (0.213 * rgbArr[0]) + (0.715 * rgbArr[1]) + (0.072 * rgbArr[2]);
+    return colorCast === 0 || colorCast > 255 / 2 ? 1 : -1;
+  },
+
+  retry(handler, interval, times) {
+    if (times <= 0) {
+      return;
+    }
+    var next = function() {
+      if (--times >= 0 && !handler()) {
+        setTimeout(next, interval);
+      }
+    };
+    setTimeout(next, interval);
+  }
+
+};
+
+/**
+ * Handles debouncing of events via requestAnimationFrame
+ * @see http://www.html5rocks.com/en/tutorials/speed/animations/
+ * @param {Function} callback The callback to handle whichever event
+ */
+function Debouncer(callback) {
+  this.callback = callback;
+  this.ticking = false;
+}
+
+Debouncer.prototype = {
+  constructor: Debouncer,
+
+  /**
+   * dispatches the event to the supplied callback
+   * @private
+   */
+  update: function() {
+    this.callback && this.callback();
+    this.ticking = false;
+  },
+
+  /**
+   * ensures events don't get stacked
+   * @private
+   */
+  requestTick: function() {
+    if (!this.ticking) {
+      requestAnimationFrame(this.rafCallback || (this.rafCallback = this.update.bind(this)));
+      this.ticking = true;
+    }
+  },
+
+  /**
+   * Attach this as the event listeners
+   */
+  handleEvent: function() {
+    this.requestTick();
+  }
+};
--- a/themes/fluid/source/xml/local-search.xml
+++ b/themes/fluid/source/xml/local-search.xml
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="utf-8"?>
+<search>
+  {% if posts %}
+  {% for post in posts.toArray() %}
+  {% if post.indexing == undefined or post.indexing %}
+  <entry>
+    <title>{{ post.title }}</title>
+    <link href="{{ [url, post.path] | urlJoin | uriencode }}"/>
+    <url>{{ [url, post.path] | urlJoin | uriencode }}</url>
+    {% if content %}
+    <content type="html"><![CDATA[{{ post.content | noControlChars | safe }}]]></content>
+    {% endif %}
+    {% if post.categories and post.categories.length>0 %}
+    <categories>
+      {% for cate in post.categories.toArray() %}
+      <category>{{ cate.name }}</category>
+      {% endfor %}
+    </categories>
+    {% endif %}
+    {% if post.tags and post.tags.length>0 %}
+    <tags>
+      {% for tag in post.tags.toArray() %}
+      <tag>{{ tag.name }}</tag>
+      {% endfor %}
+    </tags>
+    {% endif %}
+  </entry>
+  {% endif %}
+  {% endfor %}
+  {% endif %}
+  {% if pages %}
+  {% for page in pages.toArray() %}
+  {% if post.indexing == undefined or post.indexing %}
+  <entry>
+    <title>{{ page.title }}</title>
+    <link href="{{ [url, post.path] | urlJoin | uriencode }}"/>
+    <url>{{ [url, post.path] | urlJoin | uriencode }}</url>
+    {% if content %}
+    <content type="html"><![CDATA[{{ page.content | noControlChars | safe }}]]></content>
+    {% endif %}
+  </entry>
+  {% endif %}
+  {% endfor %}
+  {% endif %}
+</search>