主题修改记录

if !is_post()
  - var bg_img = 'background-color:transparent;'

if is_home()
  - var top_img = theme.index_img || theme.default_top_img
else if is_post()
  - var top_img = page.top_img || page.cover || page.randomcover || theme.default_top_img
else if is_archive()
  - var top_img = theme.archive_img || theme.default_top_img
else if is_tag()
  - var top_img = theme.tag_img || theme.default_top_img
else if is_category()
  - var top_img = theme.category_img || theme.default_top_img
else
  - var top_img = page.top_img || theme.default_top_img

if theme.douban
  if is_current('/movies/', [strict])
    - var top_img = theme.douban.movies_img || theme.default_top_img
  else if is_current('/books/', [strict])
    - var top_img = theme.douban.books_img || theme.default_top_img
  else if is_current('/games/', [strict])
    - var top_img = theme.douban.games_img || theme.default_top_img

- var bg_img = top_img && top_img !== true ? `background-image: url(${url_for(top_img)})` : ''
- var site_title = is_archive() ? _p('page.archives') : page.title || page.tag || page.category || config.title
- var isHomeClass = is_home() ? 'full_page' : 'not-index-bg'
- is_post() ? isHomeClass = 'post-bg' : isHomeClass

if !is_post()
  - var bg_img = 'background-color:transparent;'
header#page-header(class=isHomeClass style=bg_img)
  !=partial('includes/header/nav', {}, {cache:theme.fragment_cache})
  if is_home()
    #site-info
      h1#site_title=site_title
      #site_subtitle
        span#subtitle
      if(theme.social)
        #site_social_icons
          !=fragment_cache('social', function(){return partial('includes/header/social')})
    #scroll_down
      i.fas.fa-angle-down.scroll-down-effects
  else if is_post()
    include ./post-info.pug 
  else
    #page_site-info
      h1#site_title=site_title

if !is_post()
  if (footerBg === true)
    - var footer_bg = 'background-color: transparent;'
  else
    - var footer_bg = 'background-color: transparent;'
else
  - var footer_bg = 'background-color: transparent;'

- var hideAside = !theme.aside.enable || page.aside === false ? 'hide-aside' : ''

doctype html
html(lang=config.language data-theme=theme.display_mode)
  head
    include ./head.pug
  body
    if theme.preloader
      !=partial('includes/loading/loading', {}, {cache:theme.fragment_cache})

    !=partial('includes/mobile-sidebar/index', {}, {cache:theme.fragment_cache})

    #body-wrap
      if theme.background
        #web_bg

      include ./sidebar.pug
      include ./header/index.pug

      if (!is_post())
        main#content-inner.layout_page(class=hideAside)
          if body
            div!= body
          else
            block content
            if theme.aside.enable && page.aside !== false
              !=partial('includes/widget/index', {}, {cache:theme.fragment_cache})
      else
        main#content-inner.layout_post
          if body
            div!= body
          else
            block content
      
      - var footerBg = theme.footer_bg
      if !is_post()
        if (footerBg === true)
          - var footer_bg = 'background-color: transparent;'
        else
          - var footer_bg = 'background-color: transparent;'
      else
        - var footer_bg = 'background-color: transparent;'

      footer#footer(style=footer_bg)
        !=partial('includes/footer', {}, {cache:theme.fragment_cache})

    include ./rightside.pug
    !=partial('includes/third-party/search/index', {}, {cache:theme.fragment_cache})
    include ./additional-js.pug

if !is_post()
- var footer_bg = 'background-color: transparent;'

- var hideAside = !theme.aside.enable || page.aside === false ? 'hide-aside' : ''

doctype html
html(lang=config.language data-theme=theme.display_mode)
  head
    include ./head.pug
  body
    if theme.preloader
      !=partial('includes/loading/loading', {}, {cache:theme.fragment_cache})

    !=partial('includes/mobile-sidebar/index', {}, {cache:theme.fragment_cache})

    #body-wrap
      if theme.background
        - var is_photo = theme.background.startsWith('url') ? 'photo':'color'
        #web_bg(data-type=is_photo)

      include ./sidebar.pug
      include ./header/index.pug

      if (!is_post())
        main#content-inner.layout_page(class=hideAside)
          if body
            div!= body
          else
            block content
            if theme.aside.enable && page.aside !== false
              !=partial('includes/widget/index', {}, {cache:theme.fragment_cache})
      else
        main#content-inner.layout_post
          if body
            div!= body
          else
            block content
      
      - var footer_bg = theme.footer_bg == false ? '' : bg_img
      if !is_post()
      - var footer_bg = 'background-color: transparent;'
      - var is_bg = theme.footer_bg == false ? 'color' : 'photo'
      footer#footer(style=footer_bg data-type=is_bg)
        !=partial('includes/footer', {}, {cache:theme.fragment_cache})

    include ./rightside.pug
    !=partial('includes/third-party/search/index', {}, {cache:theme.fragment_cache})
    include ./additional-js.pug

background-color: alpha($dark-black, .7)

if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
  [data-theme='dark']
    --global-bg: darken(#121212, 2)
    --font-color: alpha(#FFFFFF, .6)
    --hr-border: alpha(#FFFFFF, .3)
    --hr-before-color: alpha(#FFFFFF, .6)
    --search-bg: #121212
    --search-input-color: alpha(#FFFFFF, .6)
    --search-result-title: alpha(#FFFFFF, .8)
    --preloader-bg: darken(#121212, 2)
    --preloader-color: alpha(#FFFFFF, .6)
    --tab-border-color: #2c2c2c
    --tab-botton-bg: #2c2c2c
    --tab-botton-color: alpha(#FFFFFF, .6)
    --tab-button-hover-bg: lighten(#121212, 15)
    --tab-button-active-bg: #121212
    --card-bg: #121212
    --sidebar-bg: #121212
    --btn-hover-color: lighten(#121212, 40)
    --btn-color: alpha(#FFFFFF, .6)
    --btn-bg: lighten(#121212, 5)
    --text-bg-hover: lighten(#121212, 15)
    --light-grey: alpha(#FFFFFF, .6)
    --white: alpha(#FFFFFF, .8)
    --text-highlight-color: alpha(#FFFFFF, .8)
    --blockquote-color: alpha(#FFFFFF, .6)
    --blockquote-bg: lighten(#121212, 10)
    --reward-pop: lighten(#121212, 10)
    --sidebar-icon-color: alpha(#FFFFFF, .6)

    // 網站背景，footer背景
    #web_bg[data-type=color],
    #footer[data-type=color]
      background: darken(#121212, 2)

    #web_bg[data-type=photo]:before,
    #footer[data-type=photo]:before
      position: absolute
      width: 100%
      height: 100%
      background-color: alpha($dark-black, .7)
      content: ''

    #page-header
      background-color: #121212

    #article-container
      code
        background: #2c2c2c

      pre > code
        background: 0

      .note
        code
          background: $code-background

    // 頭部
    #page-header
      &:before
        position: absolute
        top: 0
        left: 0
        display: block
        width: 100%
        height: 100%
        content: ''

      & > #nav
        &.fixed
          background: alpha(#121212, .8)
          box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0)

    // 代碼框
    #article-container
      pre,
      .highlight:not(.js-file-line-container)
        background-color: lighten(#121212, 2) !important
        color: alpha(#FFFFFF, .6) !important

      figure.highlight
        box-shadow: none

        if hexo-config('rootConfig.highlight') && hexo-config('rootConfig.highlight.enable')
          table::-webkit-scrollbar-thumb
            background: lighten(#121212, 5)

          .line:before
            color: alpha(#FFFFFF, .6) !important

          .hljs
            background-color: lighten(#121212, 2) !important

        pre[class*='language-']::-webkit-scrollbar-thumb
          background: lighten(#121212, 5)

        .highlight-tools
          background: lighten(#121212, 3) !important
          color: #90a4ae !important

    #post-comment
      .comment-switch
        if hexo-config('comments.text')
          background: #2c2c2c !important

        label
          filter: brightness(.7)

    // note
    if hexo-config('note.style') == 'modern' || hexo-config('note.style') == 'flat'
      .note
        filter: brightness(.7)

    // hide-tags
    .hide-button,
    .btn-beautify,
    .mermaid,
    .post-outdate-notice,
    .error-img,
    #article-container iframe,
    img,
    .gist,
    .aplayer
      filter: brightness(.7)

    #aside_content .aside-list > .aside-list-item:not(:last-child)
      border-bottom: 1px dashed alpha(#FFFFFF, .1)

    // 第三方
    // 插件 hexo-blog-encrypt
    #hexo-blog-encrypt
      label,
      input
        color: alpha(#FFFFFF, .6) !important

      input
        background-color: #121212

    // Gitalk
    #gitalk-container
      filter: brightness(.8)

      svg
        fill: alpha(#FFFFFF, .8) !important

    // Disqus and Disqusjs
    #disqus_thread
      #dsqjs
        .dsqjs-tab-active,
        .dsqjs-no-comment
          color: alpha(#FFFFFF, .6)

        .dsqjs-order-label
          background-color: lighten(#121212, 5)

        .dsqjs-post-body
          color: alpha(#FFFFFF, .6)

          code,
          pre
            background: #2c2c2c

          blockquote
            color: alpha(#FFFFFF, .6)

//滚动栏开始
*::-webkit-scrollbar
  width: 10px
  height: 10px

*::-webkit-scrollbar-thumb
  background: var(--btn-bg)
  background-image: -webkit-linear-gradient( 45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent)
  border-radius: 2em

*::-webkit-scrollbar-track
  background-color: transparent

*::-webkit-scrollbar-corner 
    background-color: transparent

*::-moz-selection
    color: #fff
    background-color: var(--btn-bg)
//滚动栏结束

html
  height: 100%
  font-size: 20px

body
  position: relative
  min-height: 100%
  background: var(--global-bg)
  color: var(--font-color)
  font-size: $font-size
  font-family: $font-family
  line-height: $text-line-height
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)

  if !hexo-config('copy.enable')
    user-select: none
    
//滚动栏开始
*::-webkit-scrollbar
  width: 10px
  height: 10px

*::-webkit-scrollbar-thumb
  background: var(--btn-bg)
  background-image: -webkit-linear-gradient( 45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent)
  border-radius: 2em

*::-webkit-scrollbar-track
  background-color: transparent

*::-webkit-scrollbar-corner 
    background-color: transparent

*::-moz-selection
    color: #fff
    background-color: var(--btn-bg)
//滚动栏结束

input::placeholder
  color: var(--font-color)

#web_bg
  position: fixed
  z-index: -999
  width: 100%
  height: 100%
  background: $web-bg
  background-attachment: local
  background-position: center
  background-size: cover
  background-repeat: no-repeat

h1,
h2,
h3,
h4,
h5,
h6
  position: relative
  margin: 1rem 0 .7rem
  color: var(--text-highlight-color)
  font-weight: bold

  code
    font-size: inherit !important

*
  box-sizing: border-box

hr
  position: relative
  margin: 2rem auto
  border: 2px dashed var(--hr-border)

  if hexo-config('hr_icon.enable')
    width: calc(100% - 4px)

    &:hover
      &:before
        left: calc(95% - 20px)

    &:before
      position: absolute
      top: $hr-icon-top
      left: 5%
      z-index: 1
      color: var(--hr-before-color)
      content: $hr-icon
      font-size: 20px
      line-height: 1
      transition: all 1s ease-in-out
      @extend .fontawesomeIcon

.table-wrap
  overflow-x: scroll
  margin: 0 0 1rem

table
  display: table
  width: 100%
  border-spacing: 0
  border-collapse: collapse
  empty-cells: show

  thead
    background: alpha($table-thead-bg, 10%)

  th,
  td
    padding: .3rem .6rem
    border: 1px solid var(--light-grey)
    vertical-align: middle

*::selection
  background: $theme-text-selection-color
  color: #F7F7F7

button
  padding: 0
  outline: 0
  border: none
  background: none
  cursor: pointer

// font
#page-header #site_title,
#page-header #site_subtitle,
#site-name,
#aside_content .author-info__name,
#aside_content .author-info__description
  font-family: $site-name-font

.is-center
  text-align: center

.copy-true
  user-select: all

.pull-left
  float: left

.pull-right
  float: right

.button--animated
  position: relative
  z-index: 1
  transition: color 1s

  &:before
    position: absolute
    top: 0
    right: 0
    bottom: 0
    left: 0
    z-index: -1
    background: var(--btn-hover-color)
    content: ''
    transition: transform .5s ease-out
    transform: scaleX(0)
    transform-origin: 0 50%

  &:hover
    &:before
      transition-timing-function: cubic-bezier(.45, 1.64, .47, .66)
      transform: scaleX(1)

img[src=''],
img:not([src])
  opacity: 0

.img-alt
  margin: -.5rem 0 .5rem
  color: #858585

  &:hover
    text-decoration: none !important

.post-ad
  margin: 2rem 0

.ad_height
  display: block !important
  height: auto !important

// animation
#content-inner,
#footer
  animation: main 1s

#page-header
  animation: header-effect 1s

#site_title,
#site_subtitle
  animation: titlescale 1s

canvas:not(#ribbon-canvas),
#web_bg
  animation: to_show 4s

#ribbon-canvas
  animation: ribbon_to_show 4s

.card-announcement-animation
  color: #FF0000
  animation: announ_animation .8s linear infinite

.scroll-down-effects
  animation: scroll-down-effect 1.5s infinite

if hexo-config('avatar.effect') == true
  .avatar-img
    animation: avatar_turn_around 2s linear infinite

.reward-main
  animation: donate_effcet .3s .1s ease both

.tocOpenPc
  .sidebar-toc__title
    animation: tocsidebarLtoR .5s

  .sidebar-toc__progress
    animation: tocsidebarLtoR .7s

  .sidebar-toc__content
    animation: tocsidebarLtoR .9s

.tocOpenMobile
  .sidebar-toc__title
    animation: tocsidebarRtoL .4s

  .sidebar-toc__progress
    animation: tocsidebarRtoL .6s

  .sidebar-toc__content
    animation: tocsidebarRtoL .7s

#mobile-sidebar-menus
  &.open
    transform: translate3d(-100%, 0, 0)

    for i in 1 2 3 4
      > :nth-child({i})
        animation: sidebarItem (i / 5)s

@keyframes scroll-down-effect
  0%
    top: 0
    opacity: .4

  50%
    top: -16px
    opacity: 1

  100%
    top: 0
    opacity: .4

@keyframes header-effect
  0%
    opacity: 0
    transform: translateY(-50px)

  100%
    opacity: 1
    transform: translateY(0)

@keyframes headerNoOpacity
  0%
    transform: translateY(-50px)

  100%
    transform: translateY(0)

@keyframes main
  0%
    opacity: 0
    transform: translateY(50px)

  100%
    opacity: 1
    transform: translateY(0)

@keyframes titlescale
  0%
    opacity: 0
    transform: scale(.7)

  100%
    opacity: 1
    transform: scale(1)

@keyframes search_close
  0%
    opacity: 1
    transform: scale(1)

  100%
    opacity: 0
    transform: scale(.7)

@keyframes to_show
  0%
    opacity: 0

  100%
    opacity: 1

@keyframes ribbon_to_show
  0%
    opacity: 0

  100%
    opacity: hexo-config('canvas_ribbon.alpha')

@keyframes avatar_turn_around
  from
    transform: rotate(0)

  to
    transform: rotate(360deg)

@keyframes sub_menus
  0%
    opacity: 0
    transform: translateY(10px)

  100%
    opacity: 1
    transform: translateY(0)

@keyframes donate_effcet
  0%
    opacity: 0
    transform: translateY(-20px)

  100%
    opacity: 1
    transform: translateY(0)

@keyframes announ_animation
  0%,
  to
    transform: scale(1)

  50%
    transform: scale(1.2)

@keyframes sidebarItem
  0%
    transform: translateX(200px)

  100%
    transform: translateX(0)

@keyframes tocsidebarRtoL
  0%
    transform: translateX(200px)

  100%
    transform: translateX(0)

@keyframes tocsidebarLtoR
  0%
    transform: translateX(-200px)

  100%
    transform: translateX(0)

&nbsp;<i style="color:#FF6A6A;animation: announ_animation 0.8s linear infinite;"class="fas fa-heart"></i>

#footer-wrap
  if theme.footer.owner.enable
    - var now = new Date()
    - var nowYear = now.getFullYear()
    if theme.footer.owner.since && theme.footer.owner.since != nowYear
      .copyright!= `©${theme.footer.owner.since} - ${nowYear} By ${config.author}`
    else
      .copyright!= `&copy; ${nowYear}&nbsp;<i style="color:#FF6A6A;animation: announ_animation 0.8s linear infinite;"class="fas fa-heart"></i> By ${config.author}`
  if theme.footer.copyright
    .framework-info
      span= _p('footer.framework') + ' '
      a(href='https://hexo.io')= 'Hexo'
      span.footer-separator |
      span= _p('footer.theme') + ' '
      a(href='https://github.com/jerryc127/hexo-theme-butterfly')= 'Butterfly'
  if theme.footer.custom_text
    .footer_custom_text!=`${theme.footer.custom_text}`   
  if theme.footer.ICP.enable
    .icp
      a(href=theme.footer.ICP.url)
        if theme.footer.ICP.icon
          img.icp-icon(src=url_for(theme.footer.ICP.icon))
        span=theme.footer.ICP.text