Hexo + Butterfly 自定义页脚

168 阅读4分钟
原文链接 :Hexo + Butterfly 自定义页脚

推荐阅读

效果预览


这里用 4.5.1 版本跑了【自定义页脚】的功能,主题是新拉的,可能未过多美化,只是为了验证下该功能有没有问题。如果你在使用此功能时遇见了 BUG ,请检查footer.pug的格式以及custom.css是否正确引入。

步骤

  1. BlogRoot/node_modules/hexo-theme-butterfly/layout/includes/footer.pug中添加如下代码:

    #footer-wrap
          #ft
           .ft-item-1
              .t-top
                   .t-t-l
                          p.ft-t.t-l-t 说点什么
                                 .bg-ad
                                          div
                                                     | (这里的内容随你写,但是不要过长影响整体美观度,具体可根据实现效果修改)随便说点什么说点什么、随便说点什么说点什么随便说点什么说点什么随便说点什么说点什么随便说点什么说。
                                                              .btn-xz-box
                                                                         a.btn-xz(href='https://fe32.top/') 点击跳转到哪儿
                                                                              .t-t-r
                                                                                     p.ft-t.t-l-t 修仙导航
                                                                                            ul.ft-links
                                                                                                     li
                                                                                                                a(href='https://fe32.top/articles/hexo1600/') 建站指南
                                                                                                                           a(href='https://fe32.top/nav.html') 网址导航
                                                                                                                                    li
                                                                                                                                               a(href='https://fe32.top/sponsorWall/') 来杯咖啡
                                                                                                                                                          a(href='https://fe32.top/comments/') 留点什么
                                                                                                                                                                   li
                                                                                                                                                                              a(href='https://fe32.top/about/') 关于博主
                                                                                                                                                                                         a(href='https://fe32.top/archives/') 文章归档
                                                                                                                                                                                                  li
                                                                                                                                                                                                             a(href='https://fe32.top/categories/') 文章分类
                                                                                                                                                                                                                        a(href='https://fe32.top/tags/') 文章标签
                                                                                                                                                                                                                                 li
                                                                                                                                                                                                                                            a(href='https://fe32.top/gallery/') 我的相册
                                                                                                                                                                                                                                                       a(href='https://fe32.top/bangumis/') 我的追番
                                                                                                                                                                                                                                                                li
                                                                                                                                                                                                                                                                           a(href='https://fe32.top/specialEffects/') 一些特效
                                                                                                                                                                                                                                                                                      a(href='https://fe32.top/wallpaper/') 一些壁纸
                                                                                                                                                                                                                                                                                       .ft-item-2
                                                                                                                                                                                                                                                                                          p.ft-t 推荐友链
                                                                                                                                                                                                                                                                                             .ft-img-group
                                                                                                                                                                                                                                                                                                  .img-group-item
                                                                                                                                                                                                                                                                                                         a(href='https://fe32.top/')
                                                                                                                                                                                                                                                                                                                  img(src='https://bu.dusays.com/2022/05/02/626f92e193879.jpg' alt='')
                                                                                                                                                                                                                                                                                                                       .img-group-item
                                                                                                                                                                                                                                                                                                                              a(href='https://fe32.top/')
                                                                                                                                                                                                                                                                                                                                       img(src='https://bu.dusays.com/2022/05/02/626f92e193879.jpg' alt='')
                                                                                                                                                                                                                                                                                                                                            .img-group-item
                                                                                                                                                                                                                                                                                                                                                   a(href='https://fe32.top/')
                                                                                                                                                                                                                                                                                                                                                            img(src='https://bu.dusays.com/2022/05/02/626f92e193879.jpg' alt='')
                                                                                                                                                                                                                                                                                                                                                                 .img-group-item
                                                                                                                                                                                                                                                                                                                                                                        a(href='https://fe32.top/')
                                                                                                                                                                                                                                                                                                                                                                                 img(src='https://bu.dusays.com/2022/05/02/626f92e193879.jpg' alt='')
                                                                                                                                                                                                                                                                                                                                                                                      .img-group-item
                                                                                                                                                                                                                                                                                                                                                                                             a(href='https://fe32.top/')
                                                                                                                                                                                                                                                                                                                                                                                                      img(src='https://bu.dusays.com/2022/05/02/626f92e193879.jpg' alt='')
                                                                                                                                                                                                                                                                                                                                                                                                           .img-group-item
                                                                                                                                                                                                                                                                                                                                                                                                                  a(href='https://fe32.top/')
                                                                                                                                                                                                                                                                                                                                                                                                                           img(src='https://bu.dusays.com/2022/05/02/626f92e193879.jpg' alt='')
                                                                                                                                                                                                                                                                                                                                                                                                                                .img-group-item
                                                                                                                                                                                                                                                                                                                                                                                                                                       a(href='https://fe32.top/')
                                                                                                                                                                                                                                                                                                                                                                                                                                                img(src='https://bu.dusays.com/2022/05/02/626f92e193879.jpg' alt='')
                                                                                                                                                                                                                                                                                                                                                                                                                                                     .img-group-item
                                                                                                                                                                                                                                                                                                                                                                                                                                                            a(href='https://fe32.top/')
                                                                                                                                                                                                                                                                                                                                                                                                                                                                     img(src='https://bu.dusays.com/2022/05/02/626f92e193879.jpg' alt='')
                                                                                                                                                                                                                                                                                                                                                                                                                                                                       if theme.footer.owner.enable
                                                                                                                                                                                                                                                                                                                                                                                                                                                                        - var now = new Date()
                                                                                                                                                                                                                                                                                                                                                                                                                                                                         - var nowYear = now.getFullYear()
                                                                                                                                                                                                                                                                                                                                                                                                                                                                          if theme.footer.owner.since && theme.footer.owner.since != nowYear
                                                                                                                                                                                                                                                                                                                                                                                                                                                                             .copyright!= `&copy;${theme.footer.owner.since} - ${nowYear + ' '} <i id="heartbeat" class="fa fas fa-heartbeat"></i> ${config.author}`
                                                                                                                                                                                                                                                                                                                                                                                                                                                                              else
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 .copyright!= `&copy;${nowYear + ' '} <i id="heartbeat" class="fa fas fa-heartbeat"></i> ${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}`
    你需要添加的代码为#ft整个 div,注意在缩进上与主题的几个if对齐。这里你可以根据自己的需求修改以上内容等,例如【说点什么】、自定义底部导航链接等,【推荐友链】的图片尺寸建议 1:1。
  2. 将以下代码复制到自定义的custom.css

                            .ft-item-1,
                            .ft-item-2 {
                             display: flex;
                              height: 100%;
                               padding: 10px 14px;
                               }
                               
                               .ft-item-1 {
                                flex-direction: column;
                                 flex: 2;
                                 }
                                 
                                 .ft-item-2 {
                                  flex: 1;
                                   flex-direction: column;
                                   }
                                   
                                   .t-top {
                                    display: flex;
                                    }
                                    
                                    .t-top .t-t-l {
                                     display: flex;
                                      flex-direction: column;
                                       flex: 1.4;
                                        margin-right: 10px;
                                        }
                                        
                                        .t-top .t-t-l .bg-ad {
                                         width: 85%;
                                          border-radius: 10px;
                                           padding: 0 10px;
                                           }
                                           
                                           .btn-xz-box {
                                            margin-top: 10px;
                                            }
                                            
                                            .btn-xz {
                                             display: block;
                                              background-color: var(--btn-bg);
                                               color: var(--btn-color);
                                                text-align: center;
                                                 line-height: 2.4;
                                                  margin: 8px 0;
                                                   cursor: pointer !important;
                                                   }
                                                   
                                                   .btn-xz:hover {
                                                    text-decoration: none !important;
                                                    
                                                    }
                                                    
                                                    .btn-xz-box:hover .btn-xz {
                                                     background-color: #6f42c1;
                                                     }
                                                     
                                                     .t-top .t-t-r {
                                                      display: flex;
                                                       flex-direction: column;
                                                        flex: 1;
                                                        }
                                                        
                                                        .ft-links {
                                                         padding: 0 14px;
                                                          list-style: none;
                                                           margin-top: 0 !important;
                                                           }
                                                           
                                                           .ft-links li a {
                                                            display: inline-block !important;
                                                             width: 50%;
                                                              cursor: pointer !important;
                                                              }
                                                              
                                                              .ft-links li a:hover {
                                                               text-decoration: none !important;
                                                                color: #6f42c1 !important;
                                                                }
                                                                
                                                                .ft-item-2 .ft-img-group {
                                                                 width: 100%;
                                                                 }
                                                                 
                                                                 .ft-t {
                                                                  font-size: 0.8rem;
                                                                   margin-bottom: 20px;
                                                                    line-height: 1;
                                                                     font-weight: 600;
                                                                     }
                                                                     
                                                                     .t-l-t {
                                                                      padding-left: 14px;
                                                                      }
                                                                      
                                                                      .ft-item-2 .ft-img-group .img-group-item {
                                                                       display: inline-block;
                                                                        width: 18.4%;
                                                                         margin-right: 14px;
                                                                          margin-bottom: 6px;
                                                                          }
                                                                          
                                                                          .ft-item-2 .ft-img-group .img-group-item a {
                                                                           display: inline-block;
                                                                            width: 100%;
                                                                             height: 100%;
                                                                              cursor: pointer !important;
                                                                              }
                                                                              
                                                                              .ft-item-2 .ft-img-group .img-group-item a img {
                                                                               width: 100%;
                                                                                max-height: 80px;
                                                                                }
                                                                                
                                                                                @media screen and (max-width: 768px) {
                                                                                
                                                                                 .ft-item-1 {
                                                                                      flex-basis: 100% !important;
                                                                                       }
                                                                                       
                                                                                        .ft-item-2 {
                                                                                             flex-basis: 100% !important;
                                                                                              }
                                                                                              
                                                                                               .t-top .t-t-l .bg-ad {
                                                                                                    width: 100%;
                                                                                                     }
                                                                                                     }
                                                                                                     
                                                                                                     @media screen and (max-width: 576px) {
                                                                                                      .t-top {
                                                                                                           flex-wrap: wrap;
                                                                                                            }
                                                                                                            
                                                                                                             .t-top .t-t-l {
                                                                                                                  flex-basis: 100% !important;
                                                                                                                  
                                                                                                                   }
                                                                                                                   
                                                                                                                    .t-top .t-t-r {
                                                                                                                         margin-top: 16px;
                                                                                                                              flex-basis: 100% !important;
                                                                                                                               }
                                                                                                                               }
                                                                                                                               /* 自定义底部  End */" aria-label="复制" data-bs-original-title="复制"></button>
    </div>
    </div><pre class="css hljs language-css">
    <span class="hljs-comment">/* 自定义底部  start */</span>
    <span class="hljs-selector-id">#ft</span> {
     <span class="hljs-attribute">max-width</span>: <span class="hljs-number">1200px</span>;
      <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span> auto <span class="hljs-number">12px</span>;
       <span class="hljs-attribute">display</span>: flex;
        <span class="hljs-attribute">color</span>: <span class="hljs-built_in">rgb</span>(<span class="hljs-number">255</span> <span class="hljs-number">255</span> <span class="hljs-number">255</span> / <span class="hljs-number">80%</span>) <span class="hljs-meta">!important</span>;
         <span class="hljs-attribute">text-align</span>: left;
          <span class="hljs-attribute">flex-wrap</span>: wrap;
          }
          
          <span class="hljs-selector-class">.ft-item-1</span>,
          <span class="hljs-selector-class">.ft-item-2</span> {
           <span class="hljs-attribute">display</span>: flex;
            <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;
             <span class="hljs-attribute">padding</span>: <span class="hljs-number">10px</span> <span class="hljs-number">14px</span>;
             }
             
             <span class="hljs-selector-class">.ft-item-1</span> {
              <span class="hljs-attribute">flex-direction</span>: column;
               <span class="hljs-attribute">flex</span>: <span class="hljs-number">2</span>;
               }
               
               <span class="hljs-selector-class">.ft-item-2</span> {
                <span class="hljs-attribute">flex</span>: <span class="hljs-number">1</span>;
                 <span class="hljs-attribute">flex-direction</span>: column;
                 }
                 
                 <span class="hljs-selector-class">.t-top</span> {
                  <span class="hljs-attribute">display</span>: flex;
                  }
                  
                  <span class="hljs-selector-class">.t-top</span> <span class="hljs-selector-class">.t-t-l</span> {
                   <span class="hljs-attribute">display</span>: flex;
                    <span class="hljs-attribute">flex-direction</span>: column;
                     <span class="hljs-attribute">flex</span>: <span class="hljs-number">1.4</span>;
                      <span class="hljs-attribute">margin-right</span>: <span class="hljs-number">10px</span>;
                      }
                      
                      <span class="hljs-selector-class">.t-top</span> <span class="hljs-selector-class">.t-t-l</span> <span class="hljs-selector-class">.bg-ad</span> {
                       <span class="hljs-attribute">width</span>: <span class="hljs-number">85%</span>;
                        <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">10px</span>;
                         <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span> <span class="hljs-number">10px</span>;
                         }
                         
                         <span class="hljs-selector-class">.btn-xz-box</span> {
                          <span class="hljs-attribute">margin-top</span>: <span class="hljs-number">10px</span>;
                          }
                          
                          <span class="hljs-selector-class">.btn-xz</span> {
                           <span class="hljs-attribute">display</span>: block;
                            <span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">var</span>(--btn-bg);
                             <span class="hljs-attribute">color</span>: <span class="hljs-built_in">var</span>(--btn-color);
                              <span class="hljs-attribute">text-align</span>: center;
                               <span class="hljs-attribute">line-height</span>: <span class="hljs-number">2.4</span>;
                                <span class="hljs-attribute">margin</span>: <span class="hljs-number">8px</span> <span class="hljs-number">0</span>;
                                 <span class="hljs-attribute">cursor</span>: pointer <span class="hljs-meta">!important</span>;
                                 }
                                 
                                 <span class="hljs-selector-class">.btn-xz</span><span class="hljs-selector-pseudo">:hover</span> {
                                  <span class="hljs-attribute">text-decoration</span>: none <span class="hljs-meta">!important</span>;
                                  
                                  }
                                  
                                  <span class="hljs-selector-class">.btn-xz-box</span><span class="hljs-selector-pseudo">:hover</span> <span class="hljs-selector-class">.btn-xz</span> {
                                   <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#6f42c1</span>;
                                   }
                                   
                                   <span class="hljs-selector-class">.t-top</span> <span class="hljs-selector-class">.t-t-r</span> {
                                    <span class="hljs-attribute">display</span>: flex;
                                     <span class="hljs-attribute">flex-direction</span>: column;
                                      <span class="hljs-attribute">flex</span>: <span class="hljs-number">1</span>;
                                      }
                                      
                                      <span class="hljs-selector-class">.ft-links</span> {
                                       <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span> <span class="hljs-number">14px</span>;
                                        <span class="hljs-attribute">list-style</span>: none;
                                         <span class="hljs-attribute">margin-top</span>: <span class="hljs-number">0</span> <span class="hljs-meta">!important</span>;
                                         }
                                         
                                         <span class="hljs-selector-class">.ft-links</span> <span class="hljs-selector-tag">li</span> <span class="hljs-selector-tag">a</span> {
                                          <span class="hljs-attribute">display</span>: inline-block <span class="hljs-meta">!important</span>;
                                           <span class="hljs-attribute">width</span>: <span class="hljs-number">50%</span>;
                                            <span class="hljs-attribute">cursor</span>: pointer <span class="hljs-meta">!important</span>;
                                            }
                                            
                                            <span class="hljs-selector-class">.ft-links</span> <span class="hljs-selector-tag">li</span> <span class="hljs-selector-tag">a</span><span class="hljs-selector-pseudo">:hover</span> {
                                             <span class="hljs-attribute">text-decoration</span>: none <span class="hljs-meta">!important</span>;
                                              <span class="hljs-attribute">color</span>: <span class="hljs-number">#6f42c1</span> <span class="hljs-meta">!important</span>;
                                              }
                                              
                                              <span class="hljs-selector-class">.ft-item-2</span> <span class="hljs-selector-class">.ft-img-group</span> {
                                               <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;
                                               }
                                               
                                               <span class="hljs-selector-class">.ft-t</span> {
                                                <span class="hljs-attribute">font-size</span>: <span class="hljs-number">0.8rem</span>;
                                                 <span class="hljs-attribute">margin-bottom</span>: <span class="hljs-number">20px</span>;
                                                  <span class="hljs-attribute">line-height</span>: <span class="hljs-number">1</span>;
                                                   <span class="hljs-attribute">font-weight</span>: <span class="hljs-number">600</span>;
                                                   }
                                                   
                                                   <span class="hljs-selector-class">.t-l-t</span> {
                                                    <span class="hljs-attribute">padding-left</span>: <span class="hljs-number">14px</span>;
                                                    }
                                                    
                                                    <span class="hljs-selector-class">.ft-item-2</span> <span class="hljs-selector-class">.ft-img-group</span> <span class="hljs-selector-class">.img-group-item</span> {
                                                     <span class="hljs-attribute">display</span>: inline-block;
                                                      <span class="hljs-attribute">width</span>: <span class="hljs-number">18.4%</span>;
                                                       <span class="hljs-attribute">margin-right</span>: <span class="hljs-number">14px</span>;
                                                        <span class="hljs-attribute">margin-bottom</span>: <span class="hljs-number">6px</span>;
                                                        }
                                                        
                                                        <span class="hljs-selector-class">.ft-item-2</span> <span class="hljs-selector-class">.ft-img-group</span> <span class="hljs-selector-class">.img-group-item</span> <span class="hljs-selector-tag">a</span> {
                                                         <span class="hljs-attribute">display</span>: inline-block;
                                                          <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;
                                                           <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;
                                                            <span class="hljs-attribute">cursor</span>: pointer <span class="hljs-meta">!important</span>;
                                                            }
                                                            
                                                            <span class="hljs-selector-class">.ft-item-2</span> <span class="hljs-selector-class">.ft-img-group</span> <span class="hljs-selector-class">.img-group-item</span> <span class="hljs-selector-tag">a</span> <span class="hljs-selector-tag">img</span> {
                                                             <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;
                                                              <span class="hljs-attribute">max-height</span>: <span class="hljs-number">80px</span>;
                                                              }
                                                              
                                                              <span class="hljs-keyword">@media</span> screen <span class="hljs-keyword">and</span> (<span class="hljs-attribute">max-width</span>: <span class="hljs-number">768px</span>) {
                                                              
                                                               <span class="hljs-selector-class">.ft-item-1</span> {
                                                                    <span class="hljs-attribute">flex-basis</span>: <span class="hljs-number">100%</span> <span class="hljs-meta">!important</span>;
                                                                     }
                                                                     
                                                                      <span class="hljs-selector-class">.ft-item-2</span> {
                                                                           <span class="hljs-attribute">flex-basis</span>: <span class="hljs-number">100%</span> <span class="hljs-meta">!important</span>;
                                                                            }
                                                                            
                                                                             <span class="hljs-selector-class">.t-top</span> <span class="hljs-selector-class">.t-t-l</span> <span class="hljs-selector-class">.bg-ad</span> {
                                                                                  <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;
                                                                                   }
                                                                                   }
                                                                                   
                                                                                   <span class="hljs-keyword">@media</span> screen <span class="hljs-keyword">and</span> (<span class="hljs-attribute">max-width</span>: <span class="hljs-number">576px</span>) {
                                                                                    <span class="hljs-selector-class">.t-top</span> {
                                                                                         <span class="hljs-attribute">flex-wrap</span>: wrap;
                                                                                          }
                                                                                          
                                                                                           <span class="hljs-selector-class">.t-top</span> <span class="hljs-selector-class">.t-t-l</span> {
                                                                                                <span class="hljs-attribute">flex-basis</span>: <span class="hljs-number">100%</span> <span class="hljs-meta">!important</span>;
                                                                                                
                                                                                                 }
                                                                                                 
                                                                                                  <span class="hljs-selector-class">.t-top</span> <span class="hljs-selector-class">.t-t-r</span> {
                                                                                                       <span class="hljs-attribute">margin-top</span>: <span class="hljs-number">16px</span>;
                                                                                                            <span class="hljs-attribute">flex-basis</span>: <span class="hljs-number">100%</span> <span class="hljs-meta">!important</span>;
                                                                                                             }
                                                                                                             }
                                                                                                             <span class="hljs-comment">/* 自定义底部  End */</span></pre><blockquote>css 中的<code>#6f42c1</code>是我的主题色,这里记得换成你的主题色。</blockquote></li><li>到这里你已经成功了 99.99%,最后重新编译运行即可看见效果。</li></ol>