文章标题栏

文章标题栏波浪效果

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

diff

header#page-header(class=`${isHomeClass+isFixedClass}` style=bg_img)
  !=partial('includes/header/nav', {}, {cache: true})
  if top_img !== false
    if is_post()
      include ./post-info.pug
+     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')
    else if is_home() 
      #site-info

css 波浪效果

css

section.main-hero-waves-area.waves-area {
    background: linear-gradient(to bottom, #fdf8f80d, #ffffffc7 90%, rgba(255, 255, 255, 0.5) 100%);
}
/* 波浪css */
.main-hero-waves-area {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: -11px;
  z-index: 5;
}
.waves-area .waves-svg {
  width: 100%;
  height: 5rem;
}
/* Animation */

.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: #f7f9febd;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
  fill: #f7f9fe82;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
  fill: #f7f9fe36;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
  fill: #f7f9fe;
}
/* 黑色模式背景 */
[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);
  }
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
  .waves-area .waves-svg {
    height: 40px;
    min-height: 40px;
  }
}

标题栏调整

3.1 整体移到标题卡片中间，左侧贴到中间卡片左侧

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; /* 文章标题加大 */
}

/* 标题栏外边距调整 */
#page-header #post-info > * {
    margin: 0;
    max-width: 1400px
}

@media (min-width: 1400px) {
    #page-header #post-info > * {
        margin: 0 calc((100% - 1400px) / 2);
        padding: 0 30px;
    }
}

3.2 标题栏外边距调整，修改\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
        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%

3.3 将分类移动到文章标题上方，并增加标签显示，修改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

#page-header

...

  #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

文章标题栏 ​

文章标题栏波浪效果 ​

文章标题栏

文章标题栏波浪效果