前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Hexo + Butterfly 自定义页脚

Hexo + Butterfly 自定义页脚

作者头像
唐志远
发布于 2023-04-22 11:55:44
发布于 2023-04-22 11:55:44
61100
代码可运行
举报
文章被收录于专栏:FE32 CodeFE32 Code
运行总次数:0
代码可运行

效果预览

3.7.1 版本效果

4.5.1 版本效果

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

本人用的是npm方式安装的 hexo-theme-butterfly,后续魔改时更改的文件都是【BlogRoot/node_modules/hexo-theme-butterfly】文件夹中的文件。如果你是git clone方式安装的主题,请在【BlogRoot/themes/butterfly】文件夹下修改对应的文件。

步骤

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
#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://tzy1997.com/') 点击跳转到哪儿
        .t-t-r
          p.ft-t.t-l-t 修仙导航
          ul.ft-links
            li
              a(href='https://tzy1997.com/articles/hexo1600/') 建站指南
              a(href='https://tzy1997.com/nav.html') 网址导航
            li
              a(href='https://tzy1997.com/sponsorWall/') 来杯咖啡
              a(href='https://tzy1997.com/comments/') 留点什么
            li
              a(href='https://tzy1997.com/about/') 关于博主
              a(href='https://tzy1997.com/archives/') 文章归档
            li
              a(href='https://tzy1997.com/categories/') 文章分类
              a(href='https://tzy1997.com/tags/') 文章标签
            li
              a(href='https://tzy1997.com/gallery/') 我的相册
              a(href='https://tzy1997.com/bangumis/') 我的追番
            li
              a(href='https://tzy1997.com/specialEffects/') 一些特效
              a(href='https://tzy1997.com/wallpaper/') 一些壁纸
    .ft-item-2
      p.ft-t 推荐友链
      .ft-img-group
        .img-group-item
          a(href='https://tzy1997.com/')
            img(src='https://bu.dusays.com/2022/05/02/626f92e193879.jpg' alt='')
        .img-group-item
          a(href='https://tzy1997.com/')
            img(src='https://bu.dusays.com/2022/05/02/626f92e193879.jpg' alt='')
        .img-group-item
          a(href='https://tzy1997.com/')
            img(src='https://bu.dusays.com/2022/05/02/626f92e193879.jpg' alt='')
        .img-group-item
          a(href='https://tzy1997.com/')
            img(src='https://bu.dusays.com/2022/05/02/626f92e193879.jpg' alt='')
        .img-group-item
          a(href='https://tzy1997.com/')
            img(src='https://bu.dusays.com/2022/05/02/626f92e193879.jpg' alt='')
        .img-group-item
          a(href='https://tzy1997.com/')
            img(src='https://bu.dusays.com/2022/05/02/626f92e193879.jpg' alt='')
        .img-group-item
          a(href='https://tzy1997.com/')
            img(src='https://bu.dusays.com/2022/05/02/626f92e193879.jpg' alt='')
        .img-group-item
          a(href='https://tzy1997.com/')
            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中,不会自定义css的请阅读 Hexo + Butterfly 一些常见问题 一文中关于【关于自定义的 js 和 css 文件】部分。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/* 自定义底部  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%,最后重新编译运行即可看见效果。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-12-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Netty Review - 优化Netty通信:如何应对粘包和拆包挑战_自定义长度分包编解码码器
Netty Review - 借助SimpleTalkRoom初体验异步网络编程的魅力
小小工匠
2023/12/25
4380
Netty Review - 优化Netty通信:如何应对粘包和拆包挑战_自定义长度分包编解码码器
在netty中使用protobuf并实现数据加密传输
  最近学习netty,为了实践一些知识点,写了一个小demo,完成了client和server端之间的加密数据传输,并使用了protobuf对数据进行封装,代码虽然简单,但对初学者学习netty应该会有些许帮助,特此记录分享。   首先来看Server的实现,Server和所有的netty示例代码差不多,都是构建netty的ServerBootstrap。
xindoo
2024/08/07
2040
Netty之旅二:口口相传的高性能Netty到底是什么?
高清思维导图原件(xmind/pdf/jpg)可以关注公众号:一枝花算不算浪漫 回复netty01即可。
一枝花算不算浪漫
2020/08/25
7980
Netty之旅二:口口相传的高性能Netty到底是什么?
2025春招,Netty面试题汇总
>大家好,我是 V 哥。2025年春招Java 面试,肯定绕不开 Netty 的相关问题,V哥替大家跟几位大厂技术主管交流后,整理的一些 2025 年可能会遇到的 Netty 面试题,涵盖基础概念、核心组件、性能优化、故障排查等方面,分享给大家,收藏起来备用。
威哥爱编程
2025/02/05
1450
Netty服务开发及性能优化
Netty是一个异步基于事件驱动的高性能网络通信框架,可以看做是对NIO和BIO的封装,并提供了简单易用的API、Handler和工具类等,用以快速开发高性能、高可靠性的网络服务端和客户端程序。
闻说社
2023/04/12
5870
netty 构建server和client 服务
编程学习的方法,我认为是以小见大,在理解一个东西之前一定要先会用,并用熟它,这样理解才会快。 就跟理解自行车一样,不会骑,然后先开始研究,最终可能会研究明白,但是毕竟还是事倍功半。 所以先构建一个可以使自己理解的项目,再一点一点学习原理是一种比较好的方式。
潇洒
2023/10/20
2520
Netty Review - 借助SimpleTalkRoom初体验异步网络编程的魅力
小小工匠
2023/12/21
1480
Netty Review - 借助SimpleTalkRoom初体验异步网络编程的魅力
Netty 的编码 解码 案例
1、HTTP 中有一个 Nagle 算法,每个报文都是一段的,使用网络发送发现网络效率低,然后 HTTP 设置一个算法,设置到一定程度发,所以出现一些延时,提高销量,所以形成了粘包
BUG弄潮儿
2021/07/22
1.1K0
Socket粘包问题终极解决方案—Netty版(2W字)!
上一篇我们讲了《Socket粘包问题的3种解决方案》,但没想到评论区竟然炸了。介于大家的热情讨论,以及不同的反馈意见,本文就来做一个扩展和延伸,试图找到问题的最优解,以及消息通讯的最优解决方案。
磊哥
2021/01/14
5990
Socket粘包问题终极解决方案—Netty版(2W字)!
Netty框架
Netty 是由 JBOSS 提供的一个 Java 开源框架。Netty 提供异步的、基于事件驱动的网络应用程序框架,用以快速开发高性能、高可靠性的网络 IO 程序。
全栈程序员站长
2022/07/22
3690
Netty框架
Netty接收数据时一次读取多少字节以及读多少次
本篇使用Netty构建一个简单的服务端,使用Python构建一个简单的客户端,然后客户端向服务端发送数据,然后观察Netty每次读取的字节数.
书唐瑞
2022/06/02
9040
Netty接收数据时一次读取多少字节以及读多少次
Netty的部分案例实现
Netty简单入门案例实现 server端 package com.shi.netty.netty1.simple; import io.netty.bootstrap.ServerBootstrap; import io.netty.channel.ChannelFuture; import io.netty.channel.ChannelInitializer; import io.netty.channel.ChannelOption; import io.netty.channel.EventL
用户5927264
2020/06/16
6210
netty 构建一个简易服务
构建一个只有Server服务端的netty服务,不需要额外的编写client去访问,也就是说使用现在的软件去访问。 最简单的就是使用浏览器去访问,浏览是HTTP协议,所以服务必须是一个支持HTTP协议的应用。
潇洒
2023/10/20
2090
netty 构建一个简易服务
【Netty】使用 Netty 开发 HTTP 服务器
① HTTP 服务器端 : 在服务器端使用 Netty 开发 HTTP 服务器 , 该 HTTP 服务器监听 8888 端口 ;
韩曙亮
2023/03/27
6250
【Netty】使用 Netty 开发 HTTP 服务器
Netty一文深入
通过2个位置指针来协助缓冲区的读写,读使用 readerIndex,写使用 writerIndex。
趣学程序-shaofeer
2020/07/17
7860
Netty一文深入
史诗级最强教科书式“NIO与Netty编程”
java.nio全称java non-blocking IO,是指JDK1.4开始提供的新API。从JDK1.4开始,Java提供了一系列改进的输入/输出的新特性,也被称为NIO(既New IO),新增了许多用于处理输入输出的类,这些类都被放在java.nio包及子包下,并且对原java.io包中的很多类进行改写,新增类满足NIO的功能。 NIO和BIO有着相同的目的和作用,但是它们的实现方式完全不同,BIO以流的方式处理数据,而NIO以块的方式处理数据,块I/O的效率比流I/O高很多。另外,NIO是非阻塞式的,这一点跟BIO也很不相同,使用它可以提供非阻塞式的高伸缩性网络。 NIO主要有三大核心部分 :Channel(通道),Buffer(缓冲区),Selector(选择器)。传统的BIO基于字节流和字符流进行操作,而NIO基于Channel和Buffer(缓冲区)进行操作,数据总是从通道读取到缓冲区中,或者从缓冲区写入到通道中。Selector(选择区)用于监听多个通道的事件(比如 :连接打开,数据到达)。因此使用单个线程就可以监听多个数据管道。
海仔
2019/08/26
9390
史诗级最强教科书式“NIO与Netty编程”
【Java】Netty创建网络服务端客户端(TCP/UDP)
Netty是一个基于Java的异步事件驱动的网络应用程序框架,专门用于快速开发高性能、可扩展和可维护的网络服务器和客户端。它提供了简单而强大的API,使开发人员能够轻松地构建各种网络应用,包括TCP、UDP、HTTP、WebSocket等。
DevFrank
2024/07/24
8690
【Java】Netty创建网络服务端客户端(TCP/UDP)
Netty | 工作流程 & 核心组件讲解 & 代码案例
我们先来看看Netty的工作原理图,简单说一下工作流程,然后通过这张图来一一分析Netty的核心组件。
宁在春
2022/10/31
3.8K1
Netty | 工作流程 & 核心组件讲解 & 代码案例
java架构之路-(netty专题)netty的基本使用和netty聊天室
  上次博客,我们主要说了我们的IO模型,BIO同步阻塞,NIO同步非阻塞,AIO基于NIO二次封装的异步非阻塞,最重要的就是我们的NIO,脑海中应该有NIO的模型图。
小菜的不能再菜
2020/02/23
1.3K0
一个异步无限发送的Netty实例
官方案例地址:https://netty.io/4.1/xref/io/netty/example/echo/package-summary.html
Java猫说
2019/08/20
1.1K0
推荐阅读
相关推荐
Netty Review - 优化Netty通信:如何应对粘包和拆包挑战_自定义长度分包编解码码器
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验