关于前端:Hexo-Butterfly-自定义页脚

53次阅读

共计 4700 个字符，预计需要花费 12 分钟才能阅读完成。

原文链接：Hexo + Butterfly 自定义页脚

基于 Hexo 从零开始搭建集体博客（一）: 环境筹备
基于 Hexo 从零开始搭建集体博客（二）: 我的项目初识
基于 Hexo 从零开始搭建集体博客（三）: 主题装置
基于 Hexo 从零开始搭建集体博客（四）: 根底配置
基于 Hexo 从零开始搭建集体博客（五）: 具体配置
基于 Hexo 从零开始搭建集体博客（六）: 主题丑化
基于 Hexo 键入搜寻性能
基于 Hexo 键入分享性能
基于 Hexo 键入在线聊天性能
基于 Hexo 键入评论性能
Hexo + Butterfly 自定义右键菜单
Hexo + Butterfly 一些常见问题
请收下这只可恶的猫咪吧
对于 Vercel 被墙导致获取 Twikoo 评论失败的解决方案
飞只因太美，给你的首页装上吧！

这里用 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%，最初从新编译运行即可看见成果。

正文完

发表至：前端

2023-06-18

0

前端进阶算法5全方位解读前端用到的栈结构调用栈堆垃圾回收等

关于前端:使用-mock-模拟登录接口数据

关于前端:深入理解https原理解析

关于前端:JavaScript的作用域

关于程序员:如何在-Linux-中列出-Systemd-下所有正在运行的服务

关于java:Spring-FrameWork从入门到NB-primaryQualifierResourceValue