Hexo + Butterfly 自定義頁腳 Detail - 前端,hexo,javascript 唐志遠 Blog

原文鏈接：Hexo + Butterfly 自定義頁腳

效果預覽

3.7.1 版本效果
4.5.1 版本效果

這裏用 4.5.1 版本跑了【自定義頁腳】的功能，主題是新拉的，可能未過多美化，只是為了驗證下該功能有沒有問題。如果你在使用此功能時遇見了 BUG ，請檢查footer.pug的格式以及custom.css是否正確引入。

步驟

在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。

將以下代碼複製到自定義的custom.css中


/* 自定義底部  start */
#ft {
 max-width: 1200px;
 margin: 0 auto 12px;
 display: flex;
 color: rgb(255 255 255 / 80%) !important;
 text-align: left;
 flex-wrap: wrap;
}

.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 */

css 中的#6f42c1是我的主題色，這裏記得換成你的主題色。

到這裏你已經成功了 99.99%，最後重新編譯運行即可看見效果。

唐志遠 Blog

@tangzhiyuan

Tags

前端 (1202)

Javascript (767)

Css (109)

hexo (22)

flex (17)

博客搭建 (14)

博客 (7)

個人網站 (1)

Stories

Hexo + Butterfly 自定義頁腳

推薦閲讀

效果預覽

步驟

Post Comments