首页 > 其他分享 >Hexo + Butterfly 自定义页脚

Hexo + Butterfly 自定义页脚

时间：2023-06-18 21:33:15浏览次数：56  
标签：Butterfly ft 自定义 Hexo top img item href https

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

推荐阅读

效果预览

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。

  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是我的主题色，这里记得换成你的主题色。

  1. 到这里你已经成功了 99.99%，最后重新编译运行即可看见效果。

标签：Butterfly,ft,自定义,Hexo,top,img,item,href,https
From： https://www.cnblogs.com/tzy1997/p/17489793.html

相关文章

  • backtrader 自定义分析器，解决多股回测难分析困难问题
    backtrader自定义分析器，解决多股回测分析困难问题解决了啥：解决回测后获取关键指标解决多股回测，获取订单分析解决多股回测买卖点可视化标识效果图通过自定义分析器KeyIndicatorAnalyzer，TradeListAnalyzer，获取回测结果数据，通过回测数据可以轻松可视化回测结果。可视化部......
  • centos添加自定义Systemd服务
    #########################https://zhuanlan.zhihu.com/p/415469149          systemctlenable**nable命令相当于在/etc/systemd/system/目录里添加了一个符号链接，指向/usr/lib/systemd/system/里面的**.service开机时，Systemd会执行/etc/systemd/system......
  • springboot中自定义注解在service方法中，aop失效
    问题描述写了个自定义注解，但是该注解只会出现在serviece层中的方法中。启动发现aop未拦截到问题原因：调用service中的xx()方法时，Spring的动态代理帮我们动态生成了一个代理的对象，暂且叫他$XxxxService。所以调用xx()方法实际上是代理对象$XxxxService调用的。但是在xx()方法内调用同......
  • chrome浏览器Bing主页自定义
    前言在使用Bing主页的时候，无法将主页的新闻彻底隐藏，也无法更换背景图片（如下图）。这就很难受了，我只想要一个只有搜索框加背景图片的一个主页。在集百家之所长后，得到一个符合个人要求的主页。主要文件manifest.json1{2"chrome_url_overrides":{3"newtab":......
  • Go 语言之自定义 zap 日志
    Go语言之自定义zap日志zap日志：https://github.com/uber-go/zap一、日志写入文件zap.NewProduction、zap.NewDevelopment是预设配置好的。zap.New可自定义配置zap.New源码这是构造Logger最灵活的方式，但也是最冗长的方式。对于典型的用例，高度固执己见的预设(NewProdu......
  • 基于Hexo和Butterfly创建个人技术博客，(2) 博客站点配置，Hexo框架_config.yml配置文件细
    Hexo官司网查看这里个人站点效果查看这里本章目标：掌握hexo框架_config.yml配置文件的配置方法特别说明：本文中的配置是建站必要的配置，表格单元格内有重要对于Hexo提供的扩展配置会在另外的章节随着功能一起讲解，因这些扩展功能全是可选的在建站时不一定会需要；yaml文件的值可带引......
  • 通过Systemctl管理自定义linux服务文件
    Systemd默认从目录/etc/systemd/system/读取配置文件。但是，里面存放的大部分文件都是符号链接，指向目录/usr/lib/systemd/system/，真正的配置文件存放在那个目录。systemctlenable命令用于在上面两个目录之间，建立符号链接关系。sudosystemctlenable[example]等同于sudoln-......
  • vue的自定义指令
    自定义指令 含义vue官方提供了v-text,v-bind,v-for,v-model,v-if等常用指令，除此之外vue还允许开发者自定义指令。自定义指令分为两类：私有自定义指令全局自定义指令注意事项自定义指令使用时需要添加v-前缀指令名如果是多个单词，要使用kebab-case短横线命......
  • C#Word开发，VSTO中自定义右键菜单，CommandBarButton的Click事件不触发，或者只触发一次
    C#Word开发，VSTO中自定义右键菜单，CommandBarButton的Click事件不触发，或者只触发一次_vsto右键快捷方式word_话与山鬼听的博客-CSDN博客 Word2016不会响应WindowBeforeRightClick事件的Bug问题 ......
  • 博客园自定义样式修改标签页的icon图标
    步骤1：选择一张自己喜欢的图片，上传到https://www.logosc.cn/logo/favicon这个网站，将它转换成ico格式步骤2：进入博客园→文件界面，1.上传ico格式文件，2.点击这个文件步骤3：复制这一段url步骤4：进入博客园设置界面，将这段代码放入页眉<scripttype="text/javascript"language="jav......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99