文章标题栏

头图底部波浪效果5.5.2

修改\themes\butterfly\layout\includes\header\index.pug

diff

header#page-header(class=`${headerClassName + isFixedClass}` style=bg_img)
  include ./nav.pug
  if top_img !== false
    if globalPageType === 'post'
      include ./post-info.pug
    else if globalPageType === 'home'
      #site-info
        h1#site-title=config.title
        if theme.subtitle.enable
          - var loadSubJs = true
          #site-subtitle
            span#subtitle
        if theme.social
          #site_social_icons
            !=partial('includes/header/social', {}, {cache: true})
      #scroll-down
        i.fas.fa-angle-down.scroll-down-effects
    else
      #page-site-info
        h1#site-title=page.title || page.tag || page.category
  else
    //- improve seo
    if globalPageType !== 'post'
      h1.title-seo=page.title || page.tag || page.category || config.title

+ section.main-hero-waves-area.waves-area
+   svg.waves-svg(xmlns='http://www.w3.org/2000/svg', xlink='http://www.w3.org/1999/xlink', viewBox='0 24 150 28', preserveAspectRatio='none', shape-rendering='auto')
+     defs
+       path#gentle-wave(d='M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z')
+     g.parallax
+       use(href='#gentle-wave', x='48', y='0')
+       use(href='#gentle-wave', x='48', y='3')
+       use(href='#gentle-wave', x='48', y='5')
+       use(href='#gentle-wave', x='48', y='7')

css 波浪效果

styl

section.main-hero-waves-area.waves-area
  background: linear-gradient(to bottom, #fdf8f80d, #ffffffc7 90%, rgba(255, 255, 255, 0.7) 100%)

.main-hero-waves-area
  width: 100%
  position: absolute
  left: 0
  bottom: -11px
  z-index: 5

.waves-area .waves-svg
  width: 100%
  height: 5rem

.parallax > use
  animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite

.parallax > use:nth-child(1)
  animation-delay: -2s
  animation-duration: 7s
  fill: rgba(255, 255, 255, .7)

.parallax > use:nth-child(2)
  animation-delay: -3s
  animation-duration: 10s
  fill: rgba(255, 255, 255, .5)

.parallax > use:nth-child(3)
  animation-delay: -4s
  animation-duration: 13s
  fill: rgba(255, 255, 255, .3)

.parallax > use:nth-child(4)
  animation-delay: -5s
  animation-duration: 20s
  fill: rgba(255, 255, 255, .1)

[data-theme='dark'] .parallax > use:nth-child(1)
  fill: rgba(24, 23, 29, .784) !important

[data-theme='dark'] .parallax > use:nth-child(2)
  fill: rgba(24, 23, 29, .502) !important

[data-theme='dark'] .parallax > use:nth-child(3)
  fill: rgba(24, 23, 29, .243) !important

[data-theme='dark'] .parallax > use:nth-child(4)
  fill: #000 !important

@keyframes move-forever
  0%
    transform: translate3d(-90px, 0, 0)
  100%
    transform: translate3d(85px, 0, 0)

@media (max-width: 768px)
  .waves-area .waves-svg
    height: 40px
    min-height: 40px

标题优化

整体移到标题卡片中间，和文章卡片左侧对齐

css

#page-header #post-info {
    bottom: unset; /* 取消默认绝对定位偏移量 */
    display: flex; /* 转化为flex容器 */
    flex-direction: column; /* 主轴方向改为垂直 */
    justify-content: center; /* 内容位于容器中间 */
    height: 100%; /* 挤满父元素盒子高度 */
}
#post-info .post-title {
    font-weight: bold; /* 文章标题加粗 */
    font-size: 3.3rem; /* 文章标题加大 */
}

标题栏外边距调整，修改\themes\butterfly\source\css\_layout\head.styl

diff

    if hexo-config('post_meta.post.position') == 'center'
      top: calc(50% + 30px)
      padding: 0 8%
      text-align: center
      transform: translateY(-50%)

      +maxWidth768()
        padding: 0 15px
    else
-     bottom: 30px

      & > *
-       margin: 0 auto
+       margin: 0
        padding: 0 15px
-       max-width: 1200px
+       max-width: 1400px # 宽屏适配

-       @media screen and (min-width: 768px) and (max-width: 1300px)
+       @media screen and (min-width: 768px) and (max-width: 1400px)
          padding: 0 30px

+       @media (min-width: 1400px)
+         margin: 0 calc((100% - 1400px) / 2)
+         padding: 0 30px

-       +minWidth2000()
-         max-width: 70%

将分类移动到文章标题上方，并增加标签显示，修改themes\butterfly\layout\includes\header\post-info.pug

diff

#post-info
+ #post-firstinfo
+   .meta-firstline
+     if theme.post_meta.post.categories && page.categories.data.length > 0
+       span.post-meta-categories
+         if theme.post_meta.post.date_type
+           span.post-meta-separator |
+         each item, index in page.categories.data
+           i.fas.fa-inbox.fa-fw.post-meta-icon
+           a(href=url_for(item.path)).post-meta-categories #[=item.name]
+           if index < page.categories.data.length - 1
+             i.fas.fa-angle-right.post-meta-separator
+
+     if (theme.post_meta.post.tags)
+       span.post-meta-tags
+         span.post-meta-separator |
+         each item, index in page.tags.data
+           i.fas.fa-tag
+           a(href=url_for(item.path)).post-meta-tags #[=item.name]
+           if (index < page.tags.data.length - 1)
+             span.article-meta-link #[='•']

  h1.post-title= page.title || _p('no_title')
    if theme.post_edit.enable
      a.post-edit-link(href=theme.post_edit.url + page.source title=_p('post.edit') target="_blank")
        i.fas.fa-pencil-alt

  #post-meta
    .meta-firstline
    ...
    ...
    ...
            time(datetime=date_xml(page[date_type]) title=date_title + ' ' + full_date(page[date_type]))= date(page[date_type], config.date_format)
-     if theme.post_meta.post.categories && page.categories.data.length > 0
-       span.post-meta-categories
-         if theme.post_meta.post.date_type
-           span.post-meta-separator |
-         each item, index in page.categories.data
-           i.fas.fa-inbox.fa-fw.post-meta-icon
-           a(href=url_for(item.path)).post-meta-categories #[=item.name]
-           if index < page.categories.data.length - 1
-             i.fas.fa-angle-right.post-meta-separator

标签调整，修改themes\butterfly\source\css\_layout\head.styl

diff

  #post-info
    position: absolute
    width: 100%
    display: flex
    flex-direction: column
    justify-content: center
    height: 100%
    
+   #post-firstinfo
+     color: var(--light-grey)
+
+     a
+       color: var(--light-grey)
+     .post-meta-separator
+       margin: 0 5px
+
+   .post-title
+       margin-top: 1rem !important
+       margin-bottom: 1rem !important

文章标题栏 ​

头图底部波浪效果5.5.2 ​

标题优化 ​

文章标题栏

头图底部波浪效果5.5.2

标题优化