Hexo + Butterfly 自定义页脚

news2024/11/24 18:31:48

原文链接 ：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://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。

  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%，最后重新编译运行即可看见效果。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/114726.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

CSDN每日一练最长递增的区间长度 C语言

CSDN每日一练最长递增的区间长度 C语言

题目名称&#xff1a;最长递增的区间长度 时间限制&#xff1a;1000ms 内存限制&#xff1a;256M 题目描述 给一个无序数组&#xff0c;求最长递增的区间长度。如&#xff1a;[5,2,3,8,1,9] 最长区间 2,3,8 长度为 3 &#xff08;注意&#xff1a;测试用例仅做参考&#xff0c;…
阅读更多...
Spring web开发之Request 获取三种方式

Spring web开发之Request 获取三种方式

在开发 Java Web 项目中&#xff0c;我们经常使用 HttpServletRequest 获取请求参数、请求头等信息。在Spring项目&#xff0c;我们通常会使用 Spring 提供的注解获取参数&#xff0c;如 RequestParam、RequestHeader。 不过在某些场景下&#xff0c;我们可能需要从 HttpServl…
阅读更多...
初识Docker：（4）Docker基本操作

初识Docker：（4）Docker基本操作

初识Docker&#xff1a;&#xff08;4&#xff09;Docker基本操作1 镜像操作1.1 镜像名称1.2 镜像操作命令1.3 案例&#xff1a;docker拉取nginx镜像利用docker save将nginx镜像导出磁盘&#xff0c;然后再通过load加载回来1.4 镜像操作总结2 容器操作2.1 案例创建运行一个ngin…
阅读更多...
【阅读笔记】《持续交付2.0》中理解分支、发布策略

【阅读笔记】《持续交付2.0》中理解分支、发布策略

文章目录1. 前言1.1 分支、发布 管理上解耦2. 主干 (Trunk) 和分支 (Branch)2.1 Trunk 开发 Trunk 发布2.1.1 Trunk 开发 Trunk 发布需要解决&#xff1a;重构的需求2.1.2 Trunk 开发 Trunk 发布需要解决&#xff1a;未开发完成的功能被带入发布版本2.2 Trunk 开发 Branch 发布…
阅读更多...
leetcode：6272. 好分区的数目【思维转换（正难则反） + dp定义 + 背包问题 + 选or不选】

leetcode：6272. 好分区的数目【思维转换（正难则反） + dp定义 + 背包问题 + 选or不选】

目录题目截图题目分析ac code总结题目截图 题目分析 先特判&#xff0c;如果sum(nums) < 2 * k显然不可能成功&#xff01;返回0出现Mod大概率就是dp1000的话提示我们用平方复杂度的dp这种取子序列的问题&#xff0c;本质就是选or不选的问题如果我们只考虑一维dp,dp[i]肯定…
阅读更多...
Linux--信号

Linux--信号

目录1. 信号概念2. 信号产生前2.1 信号产生的各种方式3. 信号产生中信号保存的方式3.1 阻塞信号3.2 信号屏蔽字4. 信号产生后信号处理的方式4.1 信号集操作函数4.2 sigprocmask函数4.3 sigpending函数4.4 sigaction函数5. 信号是什么时候被处理的1. 信号概念 信号是进程之间事…
阅读更多...
golang访问KingbaseES V8R6

golang访问KingbaseES V8R6

概述 本文介绍go语言连接KingbaseES V8R6数据库的步骤 测试环境 操作系统&#xff1a;CentOS 7.2.1511 数据库版本&#xff1a;KINGBASE (KingbaseES) V008R006C007B0012 go版本&#xff1a;go version go1.19.4 linux/amd64 KingbaseES go驱动获取 go连接kingbase数据库需…
阅读更多...
MySQL为什么使用B+树为索引结构

MySQL为什么使用B+树为索引结构

目录 1、什么是索引 2、索引的类型 3、为什么要用索引 4、索引的使用场景 5、索引为什么要用B树&#xff0c;为什么不能用二叉树、红黑树、B树&#xff1f; 介绍一款可以帮助理解数据结构的网站&#xff08;很好用&#xff09;&#xff1a;Data Structure Visualization …
阅读更多...
hadoop生产调优之Hadoop-Yarn 生产经验（参数调优）

hadoop生产调优之Hadoop-Yarn 生产经验（参数调优）

一、常用的调优参数 1&#xff09;调优参数列表 &#xff08;1&#xff09;Resourcemanager 相关 yarn.resourcemanager.scheduler.client.thread-count ResourceManager 处理调度器请求的线程数量 yarn.resourcemanager.scheduler.class 配置调度器&#xff08;2&#xff0…
阅读更多...
js中ArrayBuffer和node中Buffer的关系和区别

js中ArrayBuffer和node中Buffer的关系和区别

ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区。 它是一个字节数组&#xff0c;通常在其他语言中称为“byte array”。你不能直接操作 ArrayBuffer 中的内容&#xff1b;而是要通过类型化数组对象或 DataView 对象来操作&#xff0c;它们会将缓冲区中的数据…
阅读更多...
C++、python、VS code插件安装与SSH使用

C++、python、VS code插件安装与SSH使用

下载按照VS coda 官网&#xff1a;https://code.visualstudio.com 1.安装相关插件 1.中文插件&#xff08;可选&#xff09; MS-CEINTL.vscode-language-pack-zh-hans 2.C插件&#xff08;必选&#xff09; ms-vscode.cpptools 3.ssh 远程&#xff08;必选&#xff09; ms-vs…
阅读更多...
数据结构——快排的三种实现方式

数据结构——快排的三种实现方式

坚持看完&#xff0c;结尾有思维导图总结 这里写目录标题什么是快排&#xff1f;如何实现递归单次的排序要如何实现hore 的办法![在这里插入图片描述](https://img-blog.csdnimg.cn/40b2ac63f2424bd1828a45f8509ff116.gif#pic_center)坑位法双指针法总结什么是快排&#xff1f;…
阅读更多...
线程池（一）

线程池（一）

个人博客地址&#xff1a; http://xiaohe-blog.top/index.php/archives/14/ 文章目录1. 为什么要使用线程池2. Executor3. ThreadPoolExecutor3.1 七个参数3.2 任务队列3.3 拒绝策略4. 创建线程池5. Executors5.1 CachedThreadPool5.2 FixedThreadPool5.3 SingleThreadExecutor…
阅读更多...
SAP UI5 应用里一些容器控件的介绍

SAP UI5 应用里一些容器控件的介绍

sap.m.Shell 控件可用作应用程序的根元素。 它可以包含 App 或 SplitApp 控件。 Shell 为整个应用程序提供了一些总体功能&#xff0c;并负责在桌面浏览器平台上进行视觉适配&#xff0c;例如应用程序周围的框架。 sap.m.App: 该 App 继承自 sap.m.NavContainer 并因此提供其导…
阅读更多...
VUEElement 学习笔记

VUEElement 学习笔记

1 VUE 1.1 示例 新建test_vue.jsp <% page contentType"text/html;charsetUTF-8" language"java" %> <html> <head><title>Title</title> </head> <body><div id"app"><input name"…
阅读更多...
三、SpringBoot启动流程及自动化配置

三、SpringBoot启动流程及自动化配置

一、Springboot启动流程 图一：Springboot项目的启动流程 首先，针对上图中自己不太明确的两个知识点，这里做如下总结： 1.Banner：参考这篇文章：SpringBoot之Banner介绍 - MarkLogZhu - 博客园 (cnblogs.com) ； 2.钩子方…
阅读更多...
【Javassist】快速入门系列07 当检测到字段被访问时使用语句块替换访问

【Javassist】快速入门系列07 当检测到字段被访问时使用语句块替换访问

系列文章目录 01 在方法体的开头或结尾插入代码 02 使用Javassist实现方法执行时间统计 03 使用Javassist实现方法异常处理 04 使用Javassist更改整个方法体 05 当有指定方法调用时替换方法调用的内容 06 当有构造方法调用时替换方法调用的内容 07 当检测到字段被访问时使用语…
阅读更多...
一个最基本的lLinux驱动开发框架和编译驱动方式

一个最基本的lLinux驱动开发框架和编译驱动方式

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录前言一、编写驱动文件1.相关头文件2.驱动入口 &出口3.申明完整代码二、编译驱动的方式三、编译驱动1. 和内核一起编译&#xff1a;2. 编译成驱动模块&#xff1a…
阅读更多...
Kafka消息写入流程

Kafka消息写入流程

Kafka消息写入流程 0,写入消息简要流程图 1,从示例开始 在Kafka中,Producer实例是线程安全的,通常一个Producer的进程只需要生成一个Producer实例. 这样比一个进程中生成多个Producer实例的效率反而会更高. 在Producer的配置中,可以配置Producer的每个batch的内存缓冲区的大小…
阅读更多...
如何下载最新的NDVI数据？需要翻墙，安装MRT，如何处理下载的NDVI数据？

如何下载最新的NDVI数据？需要翻墙，安装MRT，如何处理下载的NDVI数据？

一、下载NDVI数据 参照网站&#xff1a; https://www.zhihu.com/question/48176218 1、先在网站https://modis.gsfc.nasa.gov/data/dataprod/mod13.php查看要下载的数据 其实没什么要看的&#xff0c;就看下面这个图就可以了&#xff0c;根据下图找到自己要下载的数据简称&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023