Hexo-Butterfly主题修改记录-2

十玖八柒

发布于 2022-08-01 10:00:05

1.5K0

发布于 2022-08-01 10:00:05

文章被收录于专栏：ahzoo.cn的博客分享ahzoo.cn的博客分享

页脚修改

添加跳动的心

首先在博客引入这个开源css

\themes\butterfly\layout\includes\footer.pug，找到此段代码：

if theme.footer.owner.since && theme.footer.owner.since != nowYear
  .copyright!= `&copy;${theme.footer.owner.since} - ${nowYear} By ${config.author}`
else
  .copyright!= `&copy;${nowYear} By ${config.author}`

修改为

if theme.footer.owner.since && theme.footer.owner.since != nowYear
  .copyright!= `&copy;${theme.footer.owner.since} - ${nowYear} <i style="color:#FF6A6A" class="fa fa-heartbeat"></i> ${config.author}`
else
  .copyright!= `&copy;${nowYear} <i style="color:#FF6A6A;animation: announ_animation 0.8s linear infinite;" class="fa fa-heartbeat"></i> ${config.author}`

page顶部图高斯模糊

引入css

/*page 顶部图高斯模糊*/
#page-header.post-bg {
    backdrop-filter: blur(20px) saturate(120%) !important;
  }

在main.js添加

//page-img
var postbg = document.getElementsByClassName("post-bg");
if (postbg.length != 0) {
  postbg[0].style.background = "#fff0";
}

随机背景图

\Butterfly\layout\includes\layout.pug

找到代码：

if theme.background
  - var is_photo = theme.background.substring(3,0) === 'url' ? 'photo':'color'

修改：

if theme.background
  - var is_photo = 'photo'

找到代码：

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

在其下方增加代码后：

footer#footer(style=footer_bg data-type=is_bg)
  !=partial('includes/footer', {}, {cache:theme.fragment_cache})
#if !is_post()
  script() var bg_index = Math.floor(Math.random() * #{theme.background_num});var res = 'background-image: url(?developer/article/2063323/"/img/banner/&); background-attachment: fixed;';document.getElementById('web_bg').style = res

if !is_post()表示文章页面不采用随机背景

修改完毕后在配置文件中将background设置为任意颜色，并添加代码：

# 随机背景图banner的数量
background_num: 16

修改背景颜色及透明度

主题文档\source\css\var.styl

$card-bg:卡片背景
$body-bg:主体界面背景

直接修改上述两个属性的颜色即可

Copyright版权美化

点此展开

主题文档\layout\includes\post\post-copyright.pug 将原文档：

if theme.post_copyright.enable && page.copyright !== false
  - let author = page.copyright_author ? page.copyright_author : config.author
  - let authorhref = page.copyright_author_href ? page.copyright_author_href : `mailto:${config.email}`
  - let url = page.copyright_url ? page.copyright_url : page.permalink
  - let info = page.copyright_info ? page.copyright_info : _p('post.copyright.copyright_content', theme.post_copyright.license_url, theme.post_copyright.license, config.url, config.title)
  .post-copyright
    .post-copyright__author
      span.post-copyright-meta= _p('post.copyright.author') + ": "
      span.post-copyright-info
        a(href=authorhref)=author
    .post-copyright__type
      span.post-copyright-meta= _p('post.copyright.link') + ": "
      span.post-copyright-info
        a(href=url_for(url))= theme.post_copyright.decode ? decodeURI(url) : url
    .post-copyright__notice
      span.post-copyright-meta= _p('post.copyright.copyright_notice') + ": "
      span.post-copyright-info!= info

全部删除后修改为：

if theme.post_copyright.enable && page.copyright !== false
  - let author = page.copyright_author ? page.copyright_author : config.author
  - let url = page.copyright_url ? page.copyright_url : page.permalink
  - let license = page.license ? page.license : theme.post_copyright.license
  - let license_url = page.license_url ? page.license_url : theme.post_copyright.license_url
  .post-copyright
    .post-copyright__title
      span.post-copyright-info
        h #[=page.title]
    .post-copyright__type
      span.post-copyright-info
        a(href=url_for(url))= theme.post_copyright.decode ? decodeURI(url) : url
    .post-copyright-m
      .post-copyright-m-info
        .post-copyright-a
            h 作者
            .post-copyright-cc-info
                h=author
        .post-copyright-c
            h 发布于
            .post-copyright-cc-info
                h=date(page.date, config.date_format)
        .post-copyright-u
            h 更新于
            .post-copyright-cc-info
                h=date(page.updated, config.date_format)
        .post-copyright-c
            h 许可协议
            .post-copyright-cc-info
                a.icon(rel='noopener' target='_blank' title='Creative Commons' href='https://creativecommons.org/')
                  i.fab.fa-creative-commons
                a(rel='noopener' target='_blank' title=license href=url_for(license_url))=license

主题文档\source\css\_layout\post.styl

# 228行左右
.post-copyright
    position: relative
    margin: 2rem 0 .5rem
    padding: .5rem .8rem
    border: 1px solid var(--light-grey)
    transition: box-shadow .3s ease-in-out
+   overflow: hidden
+   border-radius: 12px!important
+   background-color: rgb(239 241 243)

238行左右
    &:before
-     @extend .fontawesomeIcon
-     position: absolute
-     top: .1rem
-     right: .6rem
-     color: $theme-color
-     content: '\f1f9'
-     font-size: 1rem
+     position: absolute
+     right: -26px
+     top: -120px
+     content: '\f25e'
+     font-size: 200px
+     font-family: 'Font Awesome 5 Brands'
+     opacity: .2


    &:hover
      box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5)

    .post-copyright
      &-meta
        color: $light-blue
        font-weight: bold

      &-info
        padding-left: .3rem
258行左右
        a
-         text-decoration: underline
+         text-decoration: none
          word-break: break-word

          &:hover
            text-decoration: none

+ .post-copyright-cc-info
+   color: $theme-color;

268行左右
  .post-outdate-notice
    position: relative
    margin: 0 0 1rem
    padding: .5em 1.2em
-   border-radius: 3px
+   border-radius: 15px
    background-color: $noticeOutdate-bg
    color: $noticeOutdate-color

并在底部添加如下代码：

  .ads-wrap
    margin: 2rem 0
.post-copyright-m-info
  .post-copyright-a,
  .post-copyright-c,
  .post-copyright-u
    display inline-block
    width fit-content
    padding 2px 5px
[data-theme="dark"]
  #post
    .post-copyright
      background-color #07080a
      text-shadow #bfbeb8 0 0 2px
      border 1px solid rgb(19 18 18 / 35%)
      box-shadow 0 0 5px rgb(20, 120, 210)
      animation flashlight 1s linear infinite alternate
  .post-copyright-info
    color #e0e0e4

#post
  .post-copyright__title
    font-size 22px
  .post-copyright__notice
    font-size 15px

@keyframes flashlight
  from
    box-shadow 0 0 5px rgb(20, 120, 210)
  to
    box-shadow 0 0 2px rgb(20, 120, 210)

拓展功能（在文档front-matter处添加）：

copyright_author:  自定义作者
copyright_url: 自定义原文链接
license: 自定义许可协议名称
license_url: 自定义许可协议链接

合并CSS文件

将自定义CSS并入主体CSS中，用以节省请求次数，以此加快访问速度

但是如果是单页CSS就没必要了，反而会拖慢加载速度

主题文档\source\css\index.styl

@import '引入CSS文件的地址（网络或本地地址均可，相对路径为与css的相对路径）'

如果要合并整个文件夹的话也无需一个个添加，

主题文档\source\css\下新建文件夹，文件夹名随意

然后在主题文件\source\css\index.styl中添加如下代码

@import '文件夹名/*.css'

Hexo-Butterfly添加磁吸效果分类

主题文档\layout\index.pug

extends includes/layout.pug

block content
  include ./includes/mixins/post-ui.pug
  #recent-posts.recent-posts
+   if theme.categoryBar.enable
+     .recent-post-item(style='height:auto;width:100%;padding:0px;margin-top:20px;')
+     #categoryBar!= list_categories(site.categories,{class: 'categoryBar',depth: 1})
    +postUI
    include includes/pagination.pug

主题文档\source\css\_layout\：

新建categoryBar.styl

if hexo-config('categoryBar.enable')
  #categoryBar
    width 100%!important
  ul
    &.categoryBar-list
      margin 5px 5px 0 5px!important
      padding 0!important

  li
    &.categoryBar-list-item
      font-weight bold
      display inline-block
      height 180px!important
      margin 5px .5% 0 .5%!important
      background-image linear-gradient(rgba(0, 0, 0, 0.4) 25%, rgba(16, 16, 16, 0) 100%)
      border-radius 10px
      padding 25px 0 25px 25px!important
      box-shadow rgba(50, 50, 50, 0.3)  50px 50px 50px 50px inset
      overflow hidden
      background-size 100%!important
      background-position center!important
      &:hover
        background-size 110%!important
        box-shadow inset 500px 50px 50px 50px rgba(50,50,50, 0.6)
        span
          &.categoryBar-list-count
            &::after
              transition all .5s
              transform translate(-100%, 0)
  a
    &.categoryBar-list-link
      color white!important
      font-size 20px!important
      &::before
        content '|'!important
        color white!important
        font-size 20px!important
      &:after
        content ''
        position relative
        width 0
        bottom 0
        display block
        height 3px
        border-radius 3px
        background-color white
      &:hover
        &:after
          width 90%
          left 1%
          transition all 0.5s

  span
    &.categoryBar-list-count
      display block!important
      color white!important
      font-size 20px!important
      &::before
        content '\f02d'!important
        padding-right 15px!important
        @extend .fontawesomeIcon
      &::after
        padding 5px
        display block!important
        color white!important
        font-size 20px!important
        position relative
        right -100%
  covers = hexo-config('categoryBar.cover')
  for cover,i in covers
    li.categoryBar-list-item:nth-child({i+1})
      background unquote(cover)
  descrs = hexo-config('categoryBar.descr')
  for descr,i in descrs
    li.categoryBar-list-item:nth-child({i+1})>span::after
      content descr!important
  if hexo-config('categoryBar.column') == 'odd'
    li
      &.categoryBar-list-item
        width 32.3%!important
  else if hexo-config('categoryBar.column') == 'even'
    li
      &.categoryBar-list-item
        width 24%!important
  @media screen and (max-width: 650px)
    li
      &.categoryBar-list-item
        width 48%!important
        height 150px!important
        margin 5px 1% 0 1%!important

  $caterow =  hexo-config('categoryBar.row')?hexo-config('categoryBar.row'):2
  .categoryBar-list
    max-height 190px * $caterow
    overflow auto
    &::-webkit-scrollbar
      width 0!important
  @media screen and (max-width: 650px)
    .categoryBar-list
      max-height 160px * $caterow

在主题配置文件中添加：

# 首页分类
categoryBar:
  enable: true
  column: odd # 显示列数,odd：3列 | even：4列
  row: 2 #显示行数，默认两行，超过行数切换为滚动显示
  descr:
    - 这里写自己标签的备注
    - 比如：
    - 这个是分类一
    - 这个是分类二
    - 这个是分类N
  cover:
    - 这里是背景
    - 可以是颜色或者图片
    - 其它形式的背景请自测
    - 下面是示例
    - '#FFFFFF'
    - url('hhttps://unpkg.zhimg.com/ahzo@latest/blogpic/8.jpg')

效果图：

Hexo-Butterfly轮播置顶样式

主题文档\layout\includes

新建sliderbar.pug

添加代码：

.blog-slider.swiper-container-fade.swiper-container-horizontal#swiper_container
  .blog-slider__wrp.swiper-wrapper(style='transition-duration: 0ms;')
    if site.data.slider
      each i in site.data.slider
        .blog-slider__item.swiper-slide(style='width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;')
          a.blog-slider__img(href=url_for(i.link)  alt='')|
            img(width='48' height='48' src=url_for(i.cover) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.post_page) + `'`, alt='')
          .blog-slider__content
            span.blog-slider__code= i.timeline
            a.blog-slider__title(href=url_for(i.link)  alt='')= i.title
            .blog-slider__text= i.description
            a.blog-slider__button(href=url_for(i.link)  alt='')= i.button      
  .blog-slider__pagination.swiper-pagination-clickable.swiper-pagination-bullets
script(defer src=url_for(theme.CDN.swiper_js))
script(defer data-pjax src=url_for(theme.CDN.swiper_init))

主题文档\layout\index.pug：

extends includes/layout.pug

block content
  include ./includes/mixins/post-ui.pug
  #recent-posts.recent-posts
+   .recent-post-item(style='height:auto;width:100%;')
+     !=partial('includes/sliderbar', {}, {cache:true})
    +postUI
    include includes/pagination.pug

主题文档\source\css\_layout\

新建swiperstyle.styl，写入代码:

*
  box-sizing border-box
div#swiper_container
  background rgba(255, 255, 255, 0);
.blog-slider
  width 100%
  position relative
  border-radius 12px 8px 8px 12px
  margin auto
  background var(--global-bg)
  padding: 10px
  transition all .3s

.blog-slider__item
  display flex
  align-items center
  &.swiper-slide-active
    .blog-slider__img
      img
        opacity 1
        transition-delay .3s
    .blog-slider__content
      & > *
        opacity 1
        transform none
      & > *:nth-child(1)
        transition-delay 0.3s
      & > *:nth-child(2)
        transition-delay 0.4s
      & > *:nth-child(3)
        transition-delay 0.5s
      & > *:nth-child(4)
        transition-delay 0.6s
      & > *:nth-child(5)
        transition-delay 0.7s
      & > *:nth-child(6)
        transition-delay 0.8s
      & > *:nth-child(7)
        transition-delay 0.9s
      & > *:nth-child(8)
        transition-delay 1s
      & > *:nth-child(9)
        transition-delay 1.1s
      & > *:nth-child(10)
        transition-delay 1.2s
      & > *:nth-child(11)
        transition-delay 1.3s
      & > *:nth-child(12)
        transition-delay 1.4s
      & > *:nth-child(13)
        transition-delay 1.5s
      & > *:nth-child(14)
        transition-delay 1.6s
      & > *:nth-child(15)
        transition-delay 1.7s



.blog-slider__img
  width 200px
  flex-shrink 0
  height 200px
  padding 10px
  border-radius 5px
  transform translateX(0px)
  overflow hidden
  &:after
    content ''
    position absolute
    top 0
    left 0
    width 100%
    height 100%
    border-radius 5px
    opacity 0.8
  img
    width 100%
    height 100%
    object-fit cover
    display block
    opacity 0
    border-radius 5px
    transition all .3s

.blog-slider__content
  padding-right 50px
  padding-left 50px
  & > *
    opacity 0
    transform translateY(25px)
    transition all .4s


.blog-slider__code
  color var(--font-color)
  margin-bottom 0px
  display block
  font-weight 500

.blog-slider__title
  font-size 18px
  font-weight 700
  color var(--font-color)
  margin-bottom 15px
  -webkit-line-clamp 1
  display -webkit-box
  overflow hidden
  -webkit-box-orient vertical

.blog-slider__text
  color var(--font-color)
  -webkit-line-clamp 1
  display -webkit-box
  overflow hidden
  -webkit-box-orient vertical
  margin-bottom 15px
  line-height 1.5em
  width 100%
  display block
  word-break break-all
  word-wrap break-word

.blog-slider__button
  display inline-flex
  background-color var(--btn-bg)
  padding 4px 14px
  border-radius 8px
  color var(--btn-color)
  text-decoration none
  font-weight 500
  justify-content center
  text-align center
  letter-spacing 1px
  display none
  &:hover
    background-color var(--btn-hover-color)
    color var(--btn-color)

.blog-slider .swiper-container-horizontal > .swiper-pagination-bullets, .blog-slider .swiper-pagination-custom, .blog-slider .swiper-pagination-fraction
  bottom 10px
  left 0
  width 100%

.blog-slider__pagination
  position absolute
  z-index 21
  right 20px
  width 11px !important
  text-align center
  left auto !important
  top 50%
  bottom auto !important
  transform translateY(-50%)
  &.swiper-pagination-bullets
    .swiper-pagination-bullet
      margin 8px 0
  .swiper-pagination-bullet
    width 11px
    height 11px
    display block
    border-radius 10px
    background #858585
    opacity 0.2
    transition all .3s
  .swiper-pagination-bullet-active
    opacity 1
    background var(--btn-bg)
    height 30px

@media screen and (max-width: 600px)
  .blog-slider__pagination
    transform translateX(-50%)
    left 50% !important
    top 320px
    width 100% !important
    display flex
    justify-content center
    align-items center

  .blog-slider__pagination
    &.swiper-pagination-bullets
      .swiper-pagination-bullet
        margin 0 5px

  .blog-slider__pagination
    .swiper-pagination-bullet-active
      height 11px
      width 30px

  .blog-slider__button
    display inline-flex
    width 100%
  .blog-slider__text
    margin-bottom 40px

  .blog-slider
    min-height 350px
    height auto
    margin-top 110px
    margin-bottom 10px

  .blog-slider__content
    margin-top -80px
    text-align center
    padding 0 30px

  .blog-slider__item
    flex-direction column

  .blog-slider__img
    transform translateY(-50%)
    width 90%



  .blog-slider__content
    padding-left 10px
    padding-right 10px

  .blog-slider__pagination.swiper-pagination-clickable.swiper-pagination-bullets
    top 110px


@media screen and (min-width: 600px)
  .blog-slider
    height 200px

  .blog-slider__img
    height 200px

在主题配置文件的CDN配置中增加代码：

# 首页轮播图
swiper_js: https://cdn.jsdelivr.net/gh/ooahz/hexo@latest/js/swiper.min.js
swiper_css: https://cdn.jsdelivr.net/gh/ooahz/hexo@latest/css/swiper.min.css
swiper_init: https://cdn.jsdelivr.net/gh/ooahz/hexo@latest/js/swiper_init.js

主题文档\source\css\index.styl中添加如下代码引入：

@import url(?developer/article/2063323/hexo-config(&))

最后在HEXO根目录\source\_data\

新建slider.yml，进行信息的配置：

- cover: 封面图片链接(图片与博客的相对路径或者去掉协议头的绝对路径)
  timeline: 日期，格式：'年-月-日'
  link: 置顶文章链接，站内文章建议填相对链接
  title: 置顶文章标题
  description: 置顶文章描述
  button: 手机端按钮内容
- cover: /img/xxx.jpg
  timeline: 2021-06-01
  link: /p/b2101151/
  title: hexo-butterfly轮播置顶样式
  description: Hexo-Butterfly样式的修改
  button: 详情

# ......

效果图预览：

引入Symbol图标

首先引入fonticon图标库的js链接，引入方式可参考Hexo-Butterfly主题修改记录【引入第三方图标库】部分

菜单图标

butterfly\layout\includes\header\menu_item.pug ：

  if theme.menu
    //- for mobile sidebar
    - let sidebarChildHide = theme.hide_sidebar_menu_child ? 'hide' : ''

    .menus_items
      each value, label in theme.menu
        if typeof value !== 'object'
          .menus_item
-           a.site-page(href=url_for(trim(value.split('||')[0])))
+           a.site-page.faa-parent.animated-hover(href=url_for(trim(value.split('||')[0])))
              if value.split('||')[1]
-               i.fa-fw(class=trim(value.split('||')[1]))
+               - var icon_value = trim(value.split('||')[1])
+               - var anima_value = value.split('||')[2] ? trim(value.split('||')[2]) : 'faa-tada'
+               if icon_value.substring(0,2)=="fa"      
+                 i.fa-fw(class=icon_value + ' ' + anima_value)
+               else if icon_value.substring(0,4)=="icon"          
+                 svg.icon(aria-hidden="true" class=anima_value)
+                   use(xlink:href=`#`+ icon_value)
              span=' '+label
        else
          .menus_item
-           a.site-page(href='javascript:void(0);')
+           a.site-page.faa-parent.animated-hover(href='javascript:void(0);')
              if label.split('||')[1]
-               i.fa-fw(class=trim(label.split('||')[1]))
+               - var icon_label = trim(label.split('||')[1])
+               - var anima_label = label.split('||')[2] ? trim(label.split('||')[2]) : 'faa-tada'
+               if icon_label.substring(0,2)=="fa"      
+                 i.fa-fw(class=icon_label + ' ' + anima_label)
+               else if icon_label.substring(0,4)=="icon"    
+                 svg.icon(aria-hidden="true" class=anima_label)
+                   use(xlink:href=`#`+ icon_label)
              span=' '+ trim(label.split('||')[0])
              i.fas.fa-chevron-down.expand(class=sidebarChildHide)
            ul.menus_item_child
              each val,lab in value
                li
-                 a.site-page.child(href=url_for(trim(val.split('||')[0])))
+                 a.site-page.child.faa-parent.animated-hover(href=url_for(trim(val.split('||')[0])))
                    if val.split('||')[1]
-                     i.fa-fw(class=trim(val.split('||')[1]))
+                     - var icon_val = trim(val.split('||')[1])
+                     - var anima_val = val.split('||')[2] ? trim(val.split('||')[2]) : 'faa-tada'
+                     if icon_val.substring(0,2)=="fa"      
+                       i.fa-fw(class=icon_val + ' ' + anima_val)
+                     else if icon_val.substring(0,4)=="icon"
+                       svg.icon(aria-hidden="true" class=anima_val)
+                         use(xlink:href=`#`+ icon_val)
                    span=' '+ lab

使用：

menu:
  文章: /categories/ || icon-pingtai
  友链: /friends/ || icon-guanlian

预览效果见下图

侧边工具栏

butterfly\layout\includes\header\social.pug ：

-each url, icon in theme.social
-  a.social-icon(href=url_for(trim(url.split('||')[0])) target="_blank" 
-  title=url.split('||')[1] === ?developer/article/2063323/undefined ? '' : trim(url.split('||')[1]))
-    i(class=icon
       
++each value, title in theme.social
++  a.social-icon.faa-parent.animated-hover(href=url_for(trim(value.split('||')[0])) target="_blank" title=title === ?developer/article/2063323/undefined ? '' : trim(title))
++    if value.split('||')[1]
++      - var icon_value = trim(value.split('||')[1])
++      - var anima_value = value.split('||')[2] ? trim(value.split('||')[2]) : 'faa-tada'
++      if icon_value.substring(0,2)=="fa"      
++        i.fa-fw(class=icon_value + ' ' + anima_value)
++      else if icon_value.substring(0,4)=="icon"          
++        svg.icon(aria-hidden="true" class=anima_value)
++          use(xlink:href=`#`+ icon_value)

使用：

social:
  Github: https://github.com/ooahz || icon-github || faa-tada
  Twitter: https://twitter.com/Ahzoo999 || icon-twitter ||faa-float

预览效果见下图

搜索

butterfly\layout\includes\header\nav.pug ：

-        a.site-page.social-icon.search
-          i.fas.fa-search.fa-fw
+        a.site-page.faa-parent.animated-hover.social-icon.search
+          - var anima_value = "faa-tada"
+          - var icon_value = "icon-sousuo"
+          svg.icon(aria-hidden="true" class=anima_value)
+            use(xlink:href=`#`+ icon_value)

隐藏首页文章

butterfly/layout/includes/mixins/post-ui.pug

mixin postUI(posts)
  each article , index in page.posts.data
+    if article.hide !== true
+     .recent-post-item
-	 .recent-post-item

然后在Front-matter中添加字段

hide: true

缺点：虽然被隐藏的文章不会在首页显示了，但是仍会占据首页空间

参考文章：

教程：基于 Butterfly 主题的分类磁贴 2.0 版

Swiper Bar

Hexo的Butterfly下如何隐藏部分文章不在首页显示

本文参与?腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-06-18，如有侵权请联系 cloudcommunity@tencent.com 删除

css

本文分享自作者个人站点/博客?前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与?腾讯云自媒体同步曝光计划? ，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度