复制本文标题复制本文地址

新窗口打开复制链接

Hexo+Butterfly操作指南、美化方案和优化教程

发表于2023-01-03|更新于2026-10-21|前端Hexo

|总字数:1.1k|阅读时长:3分钟|浏览量:

操作指南

界面美化

美化方案

优化教程

扩展功能

更多精彩内容

文章作者: 竹山一叶

文章链接: https://zsyyblog.com/4f4901fe.html

版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源竹山一叶！

赞助

微信
支付宝

💡 准备购买云服务器 / 域名来搭建或部署站点？

通过下面的链接下单，通常能领到新用户专属优惠，也能小额支持本站持续更新：
阿里云（返现）｜腾讯云 2核2G 99元/年｜腾讯云云产品特惠

相关推荐

Hexo关闭文章评论

如果我们不想让别人评论，那该怎么办呢？实现起来很简单，只需要在头文件加上一行 comments: false 就可以了。 123456789---title: Hexo关闭文章评论categories: - Hexotags: - Hexoabbrlink: 2c1ccad9date: 2022-11-12 12:19:43--- 只需要在文章的Front-Matter的位置中添加 comments 就可以了 12345678910---title: Hexo关闭文章评论categories: - Hexotags: - Hexoabbrlink: 2c1ccad9date: 2022-11-12 12:19:43comments: false # :后面和false中间是有一个空格的---

Hexo页脚养鱼

在主题配置的 inject 引入 js: https://cdn.jsdelivr.net/gh/xiabo2/CDN@latest/fishes.js这里以butterfly主题为例： 123456789# Inject# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)# 插入代码到头部 </head> 之前和底部 </body> 之前inject: head: # - <link rel="stylesheet" href="/xxx.css"> bottom: - <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> - <script...

Hexo文章页面透明效果

前言在不妨碍正常阅读的情况下想更好地展示背景或者一些效果，实现文章页透明是一种不错的选择。操作步骤在\themes\butterfly\source\css路径下创建一个xxx.css文件，在文件中添加如下代码： 123456789/* 首页文章栏背景透明 */#recent-posts>.recent-post-item,.layout_page>div:first-child:not(.recent-posts),.layout_post>#page,.layout_post>#post,.read-mode .layout_post>#post { background: var(--light_bg_color)}/* 侧边栏透明 */#aside-content .card-widget { background: var(--light_bg_color)} 然后将该文件引入到_config.butterfly.yml文件中inject的head处： 1- <link...

Hexo增加上升气泡效果

前言本文将介绍如何增添上升气泡效果。操作找到主题配置文件_config.butterfly.yml，在inject的bottom处引入以下文件: 1234inject: head: bottom: - <script defer src="https://cdn.jsdelivr.net/combine/npm/jquery@latest/dist/jquery.min.js,gh/weilining/jsdelivr/jquery/circlemagic/circlemagic.min.js,gh/weilining/jsdelivr@latest/jquery/circlemagic/butterflycirclemagic.js"></script> 重新部署，启动，就可以看到效果啦。结语很好看的一个效果，请参考本页面的实际效果。

Hexo增加动态线条效果背景

前言效果如本站所示，我看过一些博客，有很多一部分都有这个动线效果背景。操作操作步骤很简单，只需在_config.butterfly.yml文件中，找到inject，在bottom处直接引入：https://cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js 1- <script src="https://cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script> # 背景动态线条或者直接修改_config.butterfly.yml配置文件中的canvas_nest配置 123456789# canvas_nest# https://github.com/hustcc/canvas-nest.jscanvas_nest: enable: true color: '0,0,255' #color of lines, default: '0,0,0';...

Hexo页脚美化

前言本文将介绍如何美化页脚，效果展示在最底部。操作在\themes\butterfly\source\js目录下创建一个js文件，将如下代码写入该文件: 12345678910111213141516171819202122232425262728// 动态心跳$(document).ready(function(e) { $('.copyright').html('©2021 <i class="fa-fw fas fa-heartbeat card-announcement-animation cc_pointer"></i> By 竹山一叶');})$(document).ready(function(e) { show_date_time();})//本站运行时间function show_date_time()...

评论

数据加载中