动态

详情 返回 返回

Hexo + Butterfly 自定義頁腳 - 动态 详情

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

推薦閲讀

  • 基於 Hexo 從零開始搭建個人博客（一）: 環境準備
  • 基於 Hexo 從零開始搭建個人博客（二）: 項目初識
  • 基於 Hexo 從零開始搭建個人博客（三）: 主題安裝
  • 基於 Hexo 從零開始搭建個人博客（四）: 基礎配置
  • 基於 Hexo 從零開始搭建個人博客（五）: 詳細配置
  • 基於 Hexo 從零開始搭建個人博客（六）: 主題美化
  • 基於 Hexo 鍵入搜索功能
  • 基於 Hexo 鍵入分享功能
  • 基於 Hexo 鍵入在線聊天功能
  • 基於 Hexo 鍵入評論功能
  • Hexo + Butterfly 自定義右鍵菜單
  • Hexo + Butterfly 一些常見問題
  • 請收下這隻可愛的貓咪吧
  • 關於Vercel被牆導致獲取Twikoo評論失敗的解決方案
  • 飛只因太美，給你的首頁裝上吧！

效果預覽

3.7.1 版本效果
4.5.1 版本效果

這裏用 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中

    
/* 自定義底部  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是我的主題色，這裏記得換成你的主題色。
  3. 到這裏你已經成功了 99.99%，最後重新編譯運行即可看見效果。
hexo , 前端 , Javascript
user avatar linlinma 头像 yinzhixiaxue 头像 razyliang 头像 leexiaohui1997 头像 inslog 头像 zhulongxu 头像 wmbuke 头像 romanticcrystal 头像 licin 头像 xiao2 头像 autohometech 头像 DolphinScheduler 头像
点赞 82 用户, 点赞了这篇动态!
点赞

Add a new 评论

Some HTML is okay.