hexo-butterfly魔改记录

2021/11/12 6:10:01

本文主要是介绍hexo-butterfly魔改记录,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

使用hexo-butterfly框架搭建个人博客

这里记录一下我自己搭建(魔改/照搬他人)个人博客的步骤,日后查找起来也方便。

留言板信封

出自https://akilar.top/posts/e2d3c450/

这里直接npm安装配置拿来用了。这里转载一下安装方法:

博客根目录执行

npm install hexo-butterfly-envelope --save

在站点配置文件或者主题配置文件添加配置项(对,两者任一均可。但不要都写)

# envelope_comment
# see https://akilar.top/posts/58900a8/
envelope_comment:
  enable: true #开关
  cover: https://ae01.alicdn.com/kf/U5bb04af32be544c4b41206d9a42fcacfd.jpg #信笺封面图
  message: #信笺内容,支持多行
    - 有什么想问的?
    - 有什么想说的?
    - 有什么想吐槽的?
    - 哪怕是有什么想吃的,都可以告诉我哦~
  bottom: 自动书记人偶竭诚为您服务! #信笺结束语,只能单行
  height: #调整信笺划出高度,默认1050px
  path: #【可选】comments 的路径名称。默认为 comments,生成的页面为 comments/index.html
  front_matter: #【可选】comments页面的 front_matter 配置
    title: 留言板
    comments: true

字体样式修改

修改字体样式直接引入css文件和字体包即可。

1、首先寻找喜欢的字体,有些字体很好看并且是免费非商用的,我们可以拿来用。

这里推荐几个网址供参考:方正字库,第一字体网,字体天下,字体家,自由字体

2、将需要使用的字体文件放入博客目录下,我这里是放在blog/source/butterfly/css下,方便css文件引入。

3、如有有css文件,就在最下面继续写;如果没有,则新建一个css文件,文件名任取

@font-face{
  font-family: 'FZFW' ;  /* 自定义字体名称 */
  src: url('FZFWZhu.ttf'); /* 引入字体文件的路径 */
}
/*应用在body体里,放在第一个,font-family会按顺序使用字体族。如果第一个没找到就会找第二个,以此类推。*/
body {
font-family: FZFW,-apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Lato, Roboto, "PingFang SC", "STZhongsong", "Lantinghei SC", sans-serif
}

鼠标样式修改

这里使用的是小康博客的鼠标样式。如果只想修改鼠标样式,在css文件添加下方代码,然后引入即可。

/*指针样式*/
body {
    cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/default.cur),
        default;
}
/*链接小手样式*/
a,
img {
    cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/pointer.cur),
        default;
}

小康博客css修改

我这里是直接使用大佬现成的文件,主题配置中inject引入css文件。

inject:
  head:
    - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/static-butterfly/dist/css/index.min.css">

图片透明度修改

这里使用的是Akilar大佬的修改方案,个人倾向于一图流,比较符合我的审美。

/* 页脚透明 */
#footer{
  background: transparent!important;
}
/* 头图透明 */
#page-header{
  background: transparent!important;
}
/*top-img黑色透明玻璃效果移除,不建议加,除非你执着于完全一图流或者背景图对比色明显 */
#page-header.post-bg:before {
  background-color: transparent!important;
}
/*夜间模式伪类遮罩层透明*/
[data-theme="dark"]
  #footer::before{
      background: transparent!important;
    }
[data-theme="dark"]
  #page-header::before{
    background: transparent!important;
    }

由于前面使用了小康博客的css,页脚的模糊毛玻璃效果没去掉,在页面F12审查元素之后发现是#footer, #footer:before这个选择器有问题,修改如下:

#footer, #footer:before {
    background: transparent!important
}

这样页脚就透明了。

背景音乐添加

这里参考作者的全局吸底Aplayer教程,为方便后续自己查阅,特摘抄出来。

首先安装hexo-tag-aplayer插件,官方github;

博客根目录安装:

npm install --save hexo-tag-aplayer

由于需要全局都插入aplayer和meting资源,为了防止插入重复的资源,需要把asset_inject设为false

在hexo的配置文件中

aplayer:
  meting: true
  asset_inject: false

在主题配置文件中,enable设为trueper_page设为true

# Inject the css and script (aplayer/meting)
aplayerInject:
  enable: true
  per_page: true

然后把代码插入到页脚中

inject:
  head:
  bottom:
    - <div class="aplayer no-destroy" data-id="000PeZCQ1i4XVs" data-server="tencent" data-type="artist" data-fixed="true" data-mini="true" data-listFolded="false" data-order="random" data-preload="none" data-autoplay="true" muted></div>

运行Hexo就可以看到网页左下角出现了Aplayer

最后,如果你想切换页面时,音乐不会中断。把主题配置文件的pjax设为true即可。

参数解释:

选项 默认值 描述
data-id 必须值 歌曲 id / 播放列表 id / 相册 id / 搜索关键字
data-server 必须值 音乐平台: netease, tencent, kugou, xiami, baidu
data-type 必须值 song, playlist, album, search, artist
data-fixed false 开启固定模式
data-mini false 开启迷你模式
data-loop all 列表循环模式:all, one,none
data-order list 列表播放模式: list, random
data-volume 0.7 播放器音量
data-lrctype 0 歌词格式类型
data-listfolded false 指定音乐播放列表是否折叠
data-storagename metingjs LocalStorage 中存储播放器设定的键名
data-autoplay true 自动播放,移动端浏览器暂时不支持此功能
data-mutex true 该选项开启时,如果同页面有其他 aplayer 播放,该播放器会暂停
data-listmaxheight 340px 播放列表的最大长度
data-preload auto 音乐文件预载入模式,可选项: none, metadata, auto
data-theme #ad7a86 播放器风格色彩设置

随机背景图

参考Akilar大佬的修改方案。

首先必须设置网站背景图,在主题配置中找到并且配置。我这里是配置成了'#efefef'

# Website Background (設置網站背景)
# can set it to color or image (可設置圖片 或者 顔色)
# The formal of image: url(http://xxxxxx.com/xxx.jpg)
background: '#efefef'

配置之后,主页使用#web_bg的div来存放背景图片,使用#page-header来存放banner图片。使用js随机选择一张图片,然后根据id取值重设即可做到每次切换或刷新时,随机背景图片。

我这里在blog/source/butterfly/js下新建了rdmbkg.js文件

//随机背景图片数组,图片可以换成图床链接,注意最后一条后面不要有逗号
var backimg =[
  "url(/img/bg1.JPG)",
  "url(/img/bg2.jpg)",
  "url(/img/bg3.jpg)",
  "url(/img/bg4.jpg)"
];
//获取背景图片总数,生成随机数
var bgindex =Math.ceil(Math.random() * (backimg.length-1));
//重设背景图片
document.getElementById("web_bg").style.backgroundImage = backimg[bgindex];
//随机banner数组,图片可以换成图床链接,注意最后一条后面不要有逗号
var bannerimg =[
  "url(/img/bg1.JPG)",
  "url(/img/bg2.jpg)",
  "url(/img/bg3.jpg)",
  "url(/img/bg4.jpg)"
];
//获取banner图片总数,生成随机数
var bannerindex =Math.ceil(Math.random() * (bannerimg.length-1));
//重设banner图片
document.getElementById("page-header").style.backgroundImage = bannerimg[bannerindex];

最后在主题配置文件中引入js

inject:
  head:
  bottom:
    - <script async data-pjax src="/js/randombg.js"></script>

侧边栏时钟

参考这里,我直接npm安装之后拿来用了,下面内容均摘自原博客。

博客根目录执行命令

npm install hexo-butterfly-clock --save

在hexo配置,或者主题配置中任选一个添加如下配置信息即可。二选一,不要都添加。

# electric_clock
# see https://akilar.top/posts/4e39cf4a/
electric_clock:
  enable: true # 开关
  priority: 5 #过滤器优先权
  enable_page: all # 应用页面
  exclude:
    # - /posts/
    # - /about/
  layout: # 挂载容器类型
    type: class
    name: sticky_layout
    index: 0
  loading: /img/loading.gif #加载动画自定义

参数说明

参数 备选值/类型 释义
priority number 【可选】过滤器优先级,数值越小,执行越早,默认为10,选填
enable true/false 【必选】控制开关
enable_page path/all 【可选】填写想要应用的页面的相对路径(即路由地址),如根目录就填’/‘,分类页面就填’/categories/‘。若要应用于所有页面,就填’all’,默认为all
exclude path 【可选】填写想要屏蔽的页面,可以多个。写法见示例。原理是将屏蔽项的内容逐个放到当前路径去匹配,若当前路径包含任一屏蔽项,则不会挂载。
layout.type id/class 【可选】挂载容器类型,填写id或class,不填则默认为id
layout.name text 【必选】挂载容器名称
layout.index 0和正整数 【可选】前提是layout.type为class,因为同一页面可能有多个class,此项用来确认究竟排在第几个顺位
loading URL 【可选】电子钟加载动画的图片


这篇关于hexo-butterfly魔改记录的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程