Hexo博客Butterfly主题美化

作者:神秘网友 发布时间:2020-10-05 17:21:38

Hexo博客Butterfly主题美化

Hexo博客Butterfly主题美化
Hexo博客Butterfly主题美化姓名:shadow
个人博客传送门

CSS/JS的使用

在主题文件夹的source目录下,有css和js两个文件夹,分别在里面创建一个css文件和js文件,把修改的代码贴进去保存

CSS/JS的引用

  1. 打开主题配置文件(butterfly.yml)
  2. 定位inject属性
  3. 其中head用于引入css,bottom用于引入js

示例

inject:
  head:
  - <link rel="stylesheet" href="/css/shadow.css">
  - <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sviptzk/[email protected]/butterfly/css/plugins.min.css">
  bottom:
    - <script src="/js/shadow.js"></script>
    - <script src="https://myhkw.cn/player/js/player.js" id="myhk" key="159611061656" m="1"></script>

引入css和js有两种方式,分别是相对路径引入和外链引入。相对路径就是把文件放在主题文件夹的source目录的css文件夹和js文件夹下,外链就是使用文件的外链地址。

头像背景

效果图:
Hexo博客Butterfly主题美化
Hexo博客Butterfly主题美化
CSS代码:

/* 彩带 */
.card-info-avatar:hover {
  background: url(https://cdn.jsdelivr.net/gh/rigodlee/BLOGCDN/img/H3342af90d24b4d62b9bbfec9688ccc25M.gif);
}

/* 花 */
/* .card-info-avatar:hover {
  background: url(https://cdn.jsdelivr.net/gh/rigodlee/BLOGCDN/img/20200530181856.gif);
} */

公告板图片

效果图:
Hexo博客Butterfly主题美化
Hexo博客Butterfly主题美化
在butterfly.yml中搜索card_announcement,使用img标签引用图片

页脚美化

效果图:
Hexo博客Butterfly主题美化

JS代码:

$(document).ready(function(e){
    $('.copyright').html('©2020 <i class="fa-fw fas fa-heart card-announcement-animation cc_pointer"></i> shadow');
})

更多图标和动画效果可以查看FontAwesome5的官网和文档

JS代码:

$(document).ready(function(e){
        $('.framework-info').html('本站已运行<SPAN id=span_dt_dt style="color: #fff;"></SPAN>');
    })

function show_date_time(){
    window.setTimeout("show_date_time()", 1000);
    BirthDay=new Date("5/2/2020 0:0:0");
    today=new Date();
    timeold=(today.getTime()-BirthDay.getTime());
    sectimeold=timeold/1000
    secondsold=Math.floor(sectimeold);
    msPerDay=24*60*60*1000
    e_daysold=timeold/msPerDay
    daysold=Math.floor(e_daysold);
    e_hrsold=(e_daysold-daysold)*24;
    hrsold=Math.floor(e_hrsold);
    e_minsold=(e_hrsold-hrsold)*60;
    minsold=Math.floor((e_hrsold-hrsold)*60);
    seconds=Math.floor((e_minsold-minsold)*60);
    span_dt_dt.innerHTML=' <font style=color:#2d85f0>'+daysold+'</font> 天 <font style=color:#f4433c>'+hrsold+'</font> 时 <font style=color:#ffbc32>'+minsold+'</font> 分 <font style=color:#0aa858>'+seconds+'</font> 秒';
    }
    show_date_time();

Hexo博客Butterfly主题美化
把代码中的new Date()修改成自己网站搭建的时间(月/日/年 时:分:秒)

在butterfly.yml中搜索custom_text,把代码贴进去(不同版本可以有所不同,但都是footer属性中修改)

'<a href="https://console.upyun.com/" target="_blank" alt="图片" />
这个已经有大佬出了完整教程,传送门

标签外挂

Hexo博客Butterfly主题美化
Hexo博客Butterfly主题美化
标签外挂源于Volantis主题,扩展的标签分别为 Checkbox & Radio、富文本按钮、Folding、fancybox、span。文件下载地址:https://tzk.lanzous.com/b06m0pbmh
将下载后的文件添加到主题目录下的scripts的tags文件夹中
Hexo博客Butterfly主题美化
接下来引入 css 即可:https://cdn.jsdelivr.net/gh/sviptzk/[email protected]/butterfly/css/plugins.min.css
标签外挂的具体语法参考Volantis标签文档

Hexo博客Butterfly主题美化相关教程

  1. c++虚函数表解析

    c++虚函数表解析 转载自csdn博客原博客戳这里。 0 前言 c++是一门面向对象的程序设计语言。所谓面向对象的程序设计,它的核心思想是数据抽象、继承、动态绑定。通过数据抽象,可以将类的接口与实现分离;使用继承,可以定义相似的关系并对相似的关系建模;使

  2. hexo美化

    hexo美化 Hexo个性化搭建笔记 1.hexo博客的启动 1.首先在命令面板中进入到博客建设目录 在输入启动命令 hexo s -p 5555 这个端口号可以自己设的 只要不冲突 问题就不大解析 hexo 是博客 s是启动 5555是调动的端口 2.语言配置 1.官方文档给的是修改站点配置文

  3. 最近的生活

    最近的生活 好久没有更新我的博客了,今天吃过饭,看到以前的同事,也算是师兄们的博客都纷纷上线了,不由的停下了脚步,写写我这段时间的生活和学习。 从何说起呢?就从9月1开始吧!暑假“玩”了两个月,开学才意识到自己还要考网工,9月6号去了南京报了名,回来

  4. 使用Editor.md实现博客markdown功能

    使用Editor.md实现博客markdown功能 建个人博客需要实现markdown功能。我最终在github上找到了相关方法。 Editor.md 是一款开源的、可嵌入的 Markdown 在线编辑器(组件),基于 CodeMirror、jQuery 和 Marked 构建。 github:https://github.com/pandao/edit

  5. wordpress关闭博客评论的两种方法

    wordpress关闭博客评论的两种方法 为什么80%的码农都做不了架构师? 勾掉允许评论即可。 第二种,应部分企业建站需求,需要关闭全站资讯评论。 把以下代码copy到主题的function.php文件即可 /**禁用博客评论功能*/functiondisable_page_comments($posts){if(i

  6. CF 应用开发大赛Blog4j个人独立博客

    【CF 应用开发大赛】Blog4j个人独立博客 为什么80%的码农都做不了架构师? **应用的名称:**Blog4j个人独立博客 应用URL 地址: http://blog4j.cloudfoundry.com 应用说明及使用场景: 搭建个人独立博客, 分享和记录自己的工作学习经验 应用所使用的技术及软件:

  7. hexo搭建博客的几种方式(入门级)

    hexo搭建博客的几种方式(入门级) hexo搭建博客的几种方式(入门级) 概述 网站介绍 html css js hexo node.js git hexo安装 安装node.js 安装Git 安装hexo 初始化hexo 网站部署 免费的进来 注册github账号 建立仓库 配置SSH 小花钱的进来 域名 绑定域名 git

  8. 个人博客建站最全解析

    个人博客建站最全解析 大家好~又见面了。 今天呢我想给大家,也给我自己, 对我的个人网站yanyy.cn/yanyy 做一个全面的整理和分析。 也给有这方面想法的朋友一个参考。 做网站的有爱好也有带有目的性的。 不过我还是希望大家能够传播正能量~ 进入正题 网站首