AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

butterfly主题魔改日记(一)

2022-11-08 1057
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 这一篇内容是在hexo+GitHub两篇的 基础上进行魔改，这是我自己的记录，你可以直接看我推荐大佬的博客，然后进行魔改，这篇文章不常更，还望周知！！！

前言

  • 推荐大佬博客，根据自己的需求进行魔改：糖果屋

butterfly魔改

  • 看到这里相信大家已经搭建好了属于自己的博客，本来想这先出优化博客的教程，但是我觉得通过上篇的教程，网页还是有很多不足的地方，本篇教程继续带领大家，完成博客的美化，搭好框架，打造一个属于自己免费的炫酷博客。
  • 还是那句话，魔改的尽头是默认，哈哈，我只挑我觉得不足的地方，争取教会大家方法，大家也可以根据自己的喜好，查询官方文档，设置自己的博客。
    官方文档链接：https://butterfly.js.org/posts/4aa8abbe/
  • 如果你没有 pug 以及 stylus 的渲染器，请下载安装
    npm install hexo-renderer-pug hexo-renderer-stylus --save

主页的美化

  • 我发现每次进来这个部分的背景颜色都不一样，有的时候随机匹配出来的很丑，于是乎我就开始看代码，查官方文档的帮助文档，将这部分内容做了修改，觉得没有影响的可以忽略这部分的内容。

网络异常，图片无法展示
|

  • 我设置了主题配置文件以下内容：
  • 方式一：删除掉后面的值，我觉得更美观些
    网络异常，图片无法展示
    |

  • 方式二：将背景改成透明,或者引用别人的css文件，推荐的大佬博客里面都有，这里不在赘述

生成文章唯一链接

  • Hexo的默认文章链接格式是年，月，日，标题这种格式来生成的。如果你的标题是中文的话，那你的URL链接就会包含中文，复制后的URL路径就是把中文变成了一大堆字符串编码，如果你在其他地方用这边文章的url链接，偶然你又修改了改文章的标题，那这个URL链接就会失效。为了给每一篇文章来上一个属于自己的链接，利用 hexo-abbrlink 插件 ,来解决这个问题。
  • 参考github官方： hexo-abbrlink 按照此教程配置完之后如下：
  • 记得修改每篇文章 abbrlink 的值

1、安装插件，在博客根目录下打开终端，运行以下指令：

CODE

npm install hexo-abbrlink --save

2、插件安装成功后，在根目录 的配置文件 _config.yml 找到 permalink：

CODE

permalink: :year/:month/:day/:title/
#修改为
permalink: post/:abbrlink.html # post为自定义前缀
abbrlink:
        alg: crc32   #算法： crc16(default) and crc32
        rep: hex     #进制： dec(default) and hex

打字效果

修改主题配置文件 _config.butterfly.yml 的 activate_power_mode即可

CODE

activate_power_mode:
  enable: true
  colorful: true # open particle animation (冒光特效)
  shake: true #  open shake (抖動特效)
  mobile: false

网站副标题

可设置主页中展示的网站副标题或者自己喜欢的座右铭

修改主题配置文件 _config.butterfly.yml

CODE

# Site
title: Hexo
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # loop (循環打字)
  loop: true
  # source 調用第三方服務
  # source: false 關閉調用
  # source: 1  調用一言網的一句話（簡體） https://hitokoto.cn/
  # source: 2  調用一句網（簡體） http://yijuzhan.com/
  # source: 3  調用今日詩詞（簡體） https://www.jinrishici.com/
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  # source: 3
  # 如果關閉打字效果，subtitle 只會顯示 sub 的第一行文字
  sub:
    - 我双手合十的愿望里永远有你。
    - 穿越人海，只为与你相拥。
    - 手握日月摘 ♥ 陈。

文章置顶

PS：要实现这个功能的方法很多，有一个就可以了

方式一：

Hexo 本身并没有内置文章置顶功能，因此需要自行安装。

CODE

# 先卸载
npm uninstall --save hexo-generator-index
# 再安装
npm install --save hexo-generator-index-pin-top

就需要在文章的头部信息栏加入一个 header 属性：

CODE

title: 谢谢你来看我的博客
date: 2020-01-31 17:09:13
top: true
header: false

方式二：

  • 在你的 .md 的文件属性栏添加sticky 属性，值越大文章越靠前

代码高亮主题

Butterfly 支持6种代码高亮样式：

  • darker
  • pale night
  • light
  • ocean
  • mac
  • mac light

修改主题配置文件 _config.butterfly.yml

CODE

highlight_theme: mac light

这个自行选择

运行时间

网页已运行时间

修改主题配置文件 _config.butterfly.yml

CODE

runtimeshow:
  enable: true
  publish_date: 6/7/2018 00:00:00  
  ##网页开通时间
  #格式: 月/日/年 时间
  #也可以写成 年/月/日 时间

网络异常，图片无法展示
|

代码复制

主题支持代码复製功能

修改 主题配置文件

CODE

highlight_copy: true

侧边栏时钟

1、安装插件，在博客根目录 [Blog] 下打开终端，运行以下指令：

CODE

npm install hexo-butterfly-clock --save

2、添加配置信息，以下为写法示例

在站点配置文件 _config.yml 或者主题配置文件 _config.butterfly.yml 中添加：

CODE

# 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: https://npm.elemecdn.com/hexo-butterfly-clock/lib/loading.gif #加载动画自定义
  clock_css: https://npm.elemecdn.com/hexo-butterfly-clock/lib/clock.min.css
  clock_js: https://npm.elemecdn.com/hexo-butterfly-clock/lib/clock.min.js
  ip_api: https://pv.sohu.com/cityjson?ie=utf-8

字数统计

要为 Butterfly 配上字数统计特性, 你需要如下几个步骤:

  1. 打开 hexo 工作目录
  2. npm install hexo-wordcount —save or yarn add hexo-wordcount
  3. 修改主题配置文件 _config.butterfly.yml

CODE

wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

公告2个小人

这里提供两个方式，一个是本地引入，第二种方式是直接引入别人的

方式一：

在 node_modules\hexo-theme-butterfly\layout\includes\widget\card_announcement.pug 下添加如下代码：

CODE

 .xpand(style='height:200px;')
  canvas.illo(width='800' height='800' style='max-width: 200px; max-height: 200px; touch-action: none; width: 640px; height: 640px;')
script(src='https://fastly.jsdelivr.net/gh/xiaopengand/blogCdn@latest/xzxr/twopeople1.js')
script(src='https://fastly.jsdelivr.net/gh/xiaopengand/blogCdn@latest/xzxr/zdog.dist.js')
script#rendered-js(src='https://fastly.jsdelivr.net/gh/xiaopengand/blogCdn@latest/xzxr/twopeople.js')
style.
  .card-widget.card-announcement {
  margin: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
  }
  canvas {
  display: block;
  margin: 0 auto;
  cursor: move;
  }

方式二：

添加个性化板娘

  • 以下整理了很多类别，选择自己喜好的怕动手就第一种，现在都很成熟，放心大胆的引用，我使用的就是第一种，但每种都试过了，才写出来,可以参考一下推荐的大佬博客的看板娘。
  • 不怕动手建议选择大神魔改版本，可以根据自己的喜好进行配置，修改！！！
  • 第一种：最简单引用方式在Butterfly/_config.yml中inject添加，复制的时候注意一下格式

CODE

inject:
   head:
     - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
   bottom:
    - <script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>
  • 第二种：Hexo插件版看板娘（不能换装）
  • 在Hexo根目录[Blogroot]下打开终端，输入以下指令安装必要插件。

CODE

npm install --save hexo-helper-live2d
  • 打开站点配置文件[Blog]\config.yml
    搜索live2d,按照如下注释内容指示进行操作。
    如果没有搜到live2d的配置项，就直接把以下内容复制到最底部

    CODE
# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:
  enable: true #开关插件版看板娘
  scriptFrom: local # 默认
  pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
  pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
  pluginModelPath: assets/ # 模型文件相对与插件根目录路径
  # scriptFrom: jsdelivr # jsdelivr CDN
  # scriptFrom: unpkg # unpkg CDN
  # scriptFrom: https://npm.elemecdn.com/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url
  tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
  debug: false # 调试, 是否在控制台输出日志
  model:
    use: live2d-widget-model-wanko # npm-module package name
    # use: wanko # 博客根目录/live2d_models/ 下的目录名
    # use: ./wives/wanko # 相对于博客根目录的路径
    # use: https://npm.elemecdn.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定义 url
  display:
    position: right #控制看板娘位置
    width: 150 #控制看板娘大小
    height: 300 #控制看板娘大小
  mobile:
    show: true # 手机中是否展示
  • 完成后保存修改，在Hexo根目录下运行指令

    CODE
hexo clean
hexo g
hexo s
  • 之所以必须要使用hexo clean是因为我们需要清空缓存重新生成静态页面，不然看板娘没被加入生成的静态页面里，是不会出现的。

更换看板娘

  1. 同样是在Hexo根目录[Blog]下，打开终端，选择想要的看板娘进行安装，例如我这里用到的是 live2d-widget-model-koharu，一个Q版小正太。其他的模型也可以在模型预览里查看以供选择。
  2. 输入指令

    CODE
BASH
npm install --save live2d-widget-model-koharu
  1. 然后在站点配置文件

    CODE
[Blogroot]\_config.yml
  1. 里找到

    CODE
model
  1. 项修改为期望的模型。

    CODE
YML
model:
  use: live2d-widget-model-koharu
  # 默认为live2d-widget-model-wanko
  1. 之后按部就班的运行

    CODE
BASH
hexo clean
hexo g
hexo s
  1. 就能在

    CODE
localhost:4000
  1. 上查看效果了。

卸载看板娘

这个是第二种方式安装看板娘的卸载方法，其它方式很简单就不说了

卸载插件和卸载模型的指令都是通过npm进行操作的。在博客根目录[Blog]打开终端，输入：

CODE

npm uninstall hexo-helper-live2d #卸载看板娘插件
npm uninstall live2d-widget-model-modelname #卸载看板娘模型。记得替换modelname为看板娘名称

卸载后为了保证配置项不出错，记得把[Blog]\_config.yml里的配置项给注释或者删除掉。

大神魔改看板娘

会说话，能换装，来自张书樵大神 链接：https://github.com/stevenjoezhang/live2d-widget.git

  1. 在[Blog]\node_modules\hexo-theme-butterfly\source目录下打开终端,输入

    CODE
  1. 这行指令的意思就是clone这个项目到source路径下并重命名为live2d-widget。
    我下载失败了就去了网址下载了压缩包，如果是用下载项目压缩包，解压后放到这里的，也记得把文件夹更名为live2d-widget。
  2. 找到路径[Blog]\node_modules\hexo-theme-butterfly\source\live2d-widget\autoload.js，打开autoload.js，找到这行代码，修改为如下内容：

    CODE
const live2d_path = "/live2d-widget/";
  1. 此处引用一下参考教程原话：autoload.js中的注释的绝对地址指的是，将资源打包放到[Blogroot]/theme/next/source中后，以[Blogroot]/theme/next/source为根目录（/）的绝对路径。【旧版教程，可能和新版本路径不一样，明白意思即可】
  2. 在Butterfly的主题配置文件[Blog]\_config.butterfly.yml中,butterfly主题其实自带fontawesome依赖，无需引入

    CODE
inject
      bottom:
       - <script defer src="/live2d-widget/autoload.js"></script>
  1. 引入的时候记得写注释，以后改起来也方便
  2. 保存所有文件的修改，然后照例执行

    CODE
hexo clean
hexo g
hexo s
  1. 就能在localhost:4000看到预览了。
  2. 自定义修改有一定前端基础的小伙伴可以通过修改[Blog]\\node_modules\hexo-theme-butterfly\source\live2d-widget路径下的样式资源文件：
  • waifu-tips.js:包含了按钮和对话框的逻辑
  • waifu-tips.json :定义了触发条件（selector，CSS 选择器）和触发时显示的文字（text）；
  • waifu.css:看板娘的样式表。可以对看板娘的位置布局等做自定义修改。

关于一些bug说明

  • 在配置了gulp和pwa之后，看板娘消失。这个是gulp-babel压缩导致的。

解决方法

  1. 直接把看板娘提取出来作为单独的项目，然后借助jsdelivr引用相应的静态资源。live2d-widget文件夹不放在博客的source目录中，而是存在独立的github仓库里。这样gulp怎么也压缩不到。而且得益于jsdelivr，看板娘的加载速度也有所提高。
  2. 配置方法是将live2d-widget 项目fork到自己的仓库（用原项目也可以，但是那样不方便更改样式啊），然后修改 autoload.js 里的路径为你自己的仓库名。【看清楚需要修改的地方】

    CODE
const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/";
const live2d_path = "https://cdn.jsdelivr.net/gh/YourGithubName/live2d-widget/";
  1. 在主题配置项里也可以使用https://cdn.jsdelivr.net/gh/YourGithubName/live2d-widget/autoload.js来引入。

说明：不知道怎么弄的可以去 csdn 搜一下 本地仓库上传到github 教程

本地化API配置

  1. 懒人配置方案:修改张书樵大神的项目内的~\live2d-widget\autoload.js,将模型资源由cdnPath改为apiPath。

    CODE
  // 加载 waifu.css live2d.min.js waifu-tips.js
  if (screen.width >= 768) {
  	Promise.all([
  		loadExternalResource(live2d_path + "waifu.css", "css"),
  		loadExternalResource(live2d_path + "live2d.min.js", "js"),
  		loadExternalResource(live2d_path + "waifu-tips.js", "js")
  	]).then(() => {
  		initWidget({
  			waifuPath: live2d_path + "waifu-tips.json",
- 			//apiPath: "https://live2d.fghrsh.net/api/",
-  			cdnPath: "https://cdn.jsdelivr.net/gh/fghrsh/live2d_api/"
+ 			apiPath: "https://live2d.fghrsh.net/api/",
+  			//cdnPath: "https://cdn.jsdelivr.net/gh/fghrsh/live2d_api/"
  		});
  	});
  }
  1. 上面已经说到过，张书樵大神的魔改方案其实已经实现了本地化API，只是因为模型配置路径不同才导致无法换装的。所以其实只要注意配置模型时，保证每个可以展示的模型都有相应的index.json并且在model_list.json里有相应的模型路径就可以了。这里读者可以直接使用我配置好的本地化项目的路径：修改张书樵大神的项目内的~\live2d-widget\autoload.js,修改cdnPath

    CODE
  // 加载 waifu.css live2d.min.js waifu-tips.js
  if (screen.width >= 768) {
  	Promise.all([
  		loadExternalResource(live2d_path + "waifu.css", "css"),
  		loadExternalResource(live2d_path + "live2d.min.js", "js"),
  		loadExternalResource(live2d_path + "waifu-tips.js", "js")
  	]).then(() => {
  		initWidget({
  			waifuPath: live2d_path + "waifu-tips.json",
  			//apiPath: "https://live2d.fghrsh.net/api/",
-  			cdnPath: "https://cdn.jsdelivr.net/gh/fghrsh/live2d_api/"
+  			cdnPath: "https://npm.elemecdn.com/akilar-live2dapi@latest/"
//因为jsdelivr不支持50MB以上的包的加速，可能报403错误，所以用的vercel的CDN服务。
//可以考虑clone我配置好的live2d_api仓库自己部署到其他更快的cdn服务上。
  		});
  	});
  }
  1. 除了让原有模型换装可用化以为，还顺便添加了亚丝娜、和泉纱雾，血小板、土间埋（干物妹小埋）和香风智乃的模型哦。

页脚跳动的♥

编辑博客根目录node_modules\hexo-theme-butterfly\layout\includes\footer.pug文件，修改以下内容

  • 改第一部分内容

CODE

.copyright!= `&copy;${theme.footer.owner.since} - ${nowYear} By ${config.author}`

将上面代码改为下面的

CODE

.copyright!= `&copy;${theme.footer.owner.since} - ${nowYear} <i id="heartbeat" class="fa fas fa-heartbeat"></i>  ${config.author}`
  • 改第二部分内容

    CODE
.copyright!= `&copy;${nowYear} By ${config.author}`
  • 将上面代码改为下面的

    CODE
.copyright!= `&copy;${nowYear} <i id="heartbeat" class="fa fas fa-heartbeat"></i> ${config.author}`
  • 编辑butterfly.yml文件
    在inject->head下面添加如下内容：

    CODE
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/HCLonely/images@master/others/heartbeat.min.css">

Butterfly加载动画修改

添加配置文件，在目录node_modules\hexo-theme-butterfly\layout\includes\loading\loaded.ejs下添加 loaded.ejs 文件，代码如下

CODE

<% if (theme.preloader.enable) { %>
<div id='loader'>
    <% if(theme.preloader.layout == 'gear' ) {%>
    <div class="outer_box">
    <div class='loader_overlay'></div>
    <div class='loader_cogs'>
        <div class='loader_cogs__top'>
            <div class='top_part'></div>
            <div class='top_part'></div>
            <div class='top_part'></div>
            <div class='top_hole'></div>
        </div>
        <div class='loader_cogs__left'>
            <div class='left_part'></div>
            <div class='left_part'></div>
            <div class='left_part'></div>
            <div class='left_hole'></div>
        </div>
        <div class='loader_cogs__bottom'>
            <div class='bottom_part'></div>
            <div class='bottom_part'></div>
            <div class='bottom_part'></div>
            <div class='bottom_hole'></div>
        </div>
        <p style="text-align:center">&nbsp;&nbsp;&nbsp;loading...</p>
    </div>
    </div>
  <% } else if(theme.preloader.layout == 'spinner-box') { %>
    <div class="loading-left-bg"></div>
    <div class="loading-right-bg"></div>
    <div class="spinner-box">
        <div class="configure-border-1">
            <div class="configure-core"></div>
        </div>
        <div class="configure-border-2">
            <div class="configure-core"></div>
        </div>
        <div class="loading-word">加载中...</div>
    </div>
  <% } %>
</div>
<script>
  var endLoading = function () {
    document.body.style.overflow = 'auto';
    document.getElementById('loader').classList.add("loading");
  }
  window.addEventListener('load',endLoading);
</script>
<% } %>

引入样式文件

  • 引入spinner-boxbutterfly，在主题配置文件 inject 处 heard处引入以下代码

CODE

- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zyoushuo/Blog@latest/hexo/css/loading_style_1.css" >

gear风格样式文件引入

CODE

- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zyoushuo/Blog@latest/hexo/css/loading_style_2.css" >
  • 引入到页面

找到 node_modules\hexo-theme-butterfly\layout\includes\layout.pug ,将如下代码替换

CODE

if theme.preloader
      !=partial('includes/loading/loading', {}, {cache:theme.fragment_cache})

替换为如下代码：

CODE

if theme.preloader
      !=partial('includes/loading/loaded.ejs', {}, {cache:theme.fragment_cache})
  • 开启加载
    主题配置文件下的

    CODE
preloader: true
  • 改为如下：

    CODE
preloader:
  enable: true
  layout: gear # gear, spinner-box 两种样式
  • 不需要的话关掉即可

浏览器标题恶搞

在node_modules\hexo-theme-butterfly\source\js\crash_cheat.js文件夹下添加crash_cheat.js文件 填入以下内容：（记得修改你喜好的标题）

CODE

var OriginTitle = document.title;
 var titleTime;
 document.addEventListener('visibilitychange', function () {
     if (document.hidden) {
         $('[rel="icon"]').attr('href', "/joke.ico");
         document.title = '看不见我🙈~看不见我🙈~';
         clearTimeout(titleTime);
     }
     else {
         $('[rel="icon"]').attr('href', "/favicon.ico");
         document.title = ' ( ๑•̀ㅂ•́) ✧被发现了～';
         titleTime = setTimeout(function () {
             document.title = OriginTitle;
         }, 2000);
     }
 });

在 node_modules\hexo-theme-butterfly\layout\includes\layout.pug 中添加以下代码来引入

CODE

script(type='text/javascript', src='/js/crash_cheat.js')

在inject: -> bottom: 引入以下文件

JAVASCRIPT

- <scriptsrc="https://cdn.jsdelivr.net/gh/weilain/cdn-photo/js/jquery.min.js"></script>

自定义文章封面

  • 首先：找到主题配置文件 cover ，文章主题的修改在 cover 下，如果不想麻烦可以选择统一的封面，把默认的修改成自己喜欢的图片地址即可
    网络异常，图片无法展示
    |

  • 自定义文章封面
    写文章的时候在cover后面输入你想要的封面图片的url，在top_img后面加上你想要的顶部图片的url

背景渐变

在css——>style.css 引入以下文件即可

CODE

#web_bg {
  background: -webkit-linear-gradient(
    0deg,
    rgba(247, 149, 51, 0.1) 0,
    rgba(243, 112, 85, 0.1) 15%,
    rgba(239, 78, 123, 0.1) 30%,
    rgba(161, 102, 171, 0.1) 44%,
    rgba(80, 115, 184, 0.1) 58%,
    rgba(16, 152, 173, 0.1) 72%,
    rgba(7, 179, 155, 0.1) 86%,
    rgba(109, 186, 130, 0.1) 100%
  );
  background: -moz-linear-gradient(
    0deg,
    rgba(247, 149, 51, 0.1) 0,
    rgba(243, 112, 85, 0.1) 15%,
    rgba(239, 78, 123, 0.1) 30%,
    rgba(161, 102, 171, 0.1) 44%,
    rgba(80, 115, 184, 0.1) 58%,
    rgba(16, 152, 173, 0.1) 72%,
    rgba(7, 179, 155, 0.1) 86%,
    rgba(109, 186, 130, 0.1) 100%
  );
  background: -o-linear-gradient(
    0deg,
    rgba(247, 149, 51, 0.1) 0,
    rgba(243, 112, 85, 0.1) 15%,
    rgba(239, 78, 123, 0.1) 30%,
    rgba(161, 102, 171, 0.1) 44%,
    rgba(80, 115, 184, 0.1) 58%,
    rgba(16, 152, 173, 0.1) 72%,
    rgba(7, 179, 155, 0.1) 86%,
    rgba(109, 186, 130, 0.1) 100%
  );
  background: -ms-linear-gradient(
    0deg,
    rgba(247, 149, 51, 0.1) 0,
    rgba(243, 112, 85, 0.1) 15%,
    rgba(239, 78, 123, 0.1) 30%,
    rgba(161, 102, 171, 0.1) 44%,
    rgba(80, 115, 184, 0.1) 58%,
    rgba(16, 152, 173, 0.1) 72%,
    rgba(7, 179, 155, 0.1) 86%,
    rgba(109, 186, 130, 0.1) 100%
  );
  background: linear-gradient(
    90deg,
    rgba(247, 149, 51, 0.1) 0,
    rgba(243, 112, 85, 0.1) 15%,
    rgba(239, 78, 123, 0.1) 30%,
    rgba(161, 102, 171, 0.1) 44%,
    rgba(80, 115, 184, 0.1) 58%,
    rgba(16, 152, 173, 0.1) 72%,
    rgba(7, 179, 155, 0.1) 86%,
    rgba(109, 186, 130, 0.1) 100%
  );
}

引入阿里矢量图标库

添加标签云

使用命令进行安装插件

CODE

npm install hexo-tag-cloud --save

打开node_modules\hexo-theme-butterfly\layout\includes\widget\card_tags.pug 文件，用下面内容将其替换掉，最好把之前的文件备份一下,防止后悔

CODE

if site.tags.length
  .card-widget.card-tags
    .card-content
      .item-headline
        i.fa.fa-tags(aria-hidden="true")
        span= _p('aside.card_tags')
        script(type="text/javascript" charset="utf-8" src="/js/tagcloud.js")
        script(type="text/javascript" charset="utf-8" src="/js/tagcanvas.js")
        #myCanvasContainer.widget.tagcloud(align='center')
          canvas#resCanvas(width='200', height='200', style='width=100%')
            != tagcloud()
          != tagcloud({min_font: 16, max_font: 24, amount: 50, color: true, start_color: '#999', end_color: '#99a9bf'})

普通标签备份

CODE

if theme.aside.card_tags.enable
  if site.tags.length
    .card-widget.card-tags
      .item-headline
        i.fas.fa-tags
        span= _p('aside.card_tags')
      - let tagLimit = theme.aside.card_tags.limit === 0 ? 0 : theme.aside.card_tags.limit || 40
      if theme.aside.card_tags.color
        .card-tag-cloud!= cloudTags({source: site.tags, minfontsize: 1.15, maxfontsize: 1.45, limit: tagLimit, unit: 'em'})
      else
        .card-tag-cloud!= tagcloud({min_font: 1.1, max_font: 1.5, amount: tagLimit , color: true, start_color: '#999', end_color: '#99a9bf', unit: 'em'})

twikoo评论块气泡风格魔改美化

糖果屋教程：https://akilar.top/posts/d99b5f01/

引入音乐播放器

https://akilar.top/posts/3afa069a/

手机端fixed定位侧栏布局魔改方案

https://akilar.top/posts/451ac5f8/

给博客添加自定义的通知悬浮窗

https://kmar.top/posts/de06ec72/

文章页相关推荐

山岳博文https://kmar.top/posts/3bc89eb/

hexo-swiper 文章轮播图插件

https://zfe.space/post/hexo-swiper.html

在 Front-matter 添加以下参数即可，index 数字越大越靠前展示。

MARKDOWN

swiper_index: 8
swiper_desc: 简单好用的 hexo 博客文章置顶插件！
swiper_cover: /images/letter/p.png
  • 若你安装了插件功能都有了，但是点击无法跳转

butterfly主题文章双栏布局插件

https://zfe.space/post/hexo-butterfly-article-double-row.html

hexo-magnet 插件 1.0

https://zfe.space/post/hexo-magnet.html



文章标签：
CDN
JavaScript
前端开发
搜索推荐
资源调度
CDN
API
缓存
程序员余白
目录
相关文章
愿天堂没有BUG（公众号同名）
|
设计模式 缓存 前端开发
一款清新优雅的中后台模板，内置丰富可配置的主题（强烈推荐）
Soybean Admin 是一个基于 Vue3、Vite3、TypeScript、NaiveUI、Pinia 和 UnoCSS 的清新优雅的中后台模版，它使用了最新的前端技术栈，内置丰富的主题配置，有着极高的代码规范，基于 mock 实现的动态权限路由，开箱即用的中后台前端解决方案，也可用于学习参考。
愿天堂没有BUG（公众号同名）
199 0
。思索
|
4月前
|
缓存 前端开发 JavaScript
cnblogs——从主题开发浅谈前端性能优化
cnblogs——从主题开发浅谈前端性能优化
。思索
48 0
疯狂的猿
|
6月前
|
PHP
一款小众清新的Typecho主题
DearLicy主题，一款小众化小清新风格的博客主题 主题支持Typecho所支持的所有版本PHP 简约、小众、优雅
疯狂的猿
53 0
一款小众清新的Typecho主题
江帅帅
|
7月前
|
存储 JavaScript 搜索推荐
《VitePress 简易速速上手小册》第3章：主题定制与扩展（2024 最新版）
《VitePress 简易速速上手小册》第3章：主题定制与扩展（2024 最新版）
江帅帅
282 0
1236817069727849
|
7月前
|
API
一个简约风的VitePress博客主题
前言 笔者的博客之前是使用 VuePress + reco主题 随着博客文章数量越来越多（md文件已经300+了），博客本地启动和构建越来越来慢了emmm 恰好此时 VitePress 也相对成熟了（1.x alpha），就萌生了迁移到 VitePress 的想法 其相比 VuePress 更加的简洁，可玩性强，上手成本也低，由 Vite 加持体验也是非常不错。 按照官方的给的定位，VitePress 只提供一些基础主题API，所有定制都在自己的主题里完成（个人感觉就像Hexo丰富多彩的主题一样），不提供插件系统
1236817069727849
997 0
dingtalk_kbhtqx
butterfly主题的下载及美化
butterfly主题的下载及美化
dingtalk_kbhtqx
220 0
游客ruqdfvh2iuyqc
|
前端开发 CDN
ant-design实现主题暗黑主题 和 亮色主题的 切换（实现网站黑白皮肤）
最近在使用vite+react + ant-design 来搭建个人站点，看到网上好多网站都实现了黑白皮肤的切换，并且ant-design帮我们实现了三套主题色，一个默认亮白色，暗黑主题和紧凑主题。于是我也想来弄一弄。最后还是实现了，打包后也是ok的。
游客ruqdfvh2iuyqc
1802 0
ant-design实现主题暗黑主题 和 亮色主题的 切换（实现网站黑白皮肤）
LonelySnowman
|
前端开发
【Butterfly美化】Hexo Butterfly主题使用阿里巴巴iconfont
Butterfly主题支持 font-awesome v6 但是还是不够用怎么办呢？可以使用阿里巴巴iconfont来拓展啦，今天教大家在Hexo中使用阿里巴巴iconfont矢量图标库。
LonelySnowman
584 0
程序员余白
|
数据安全/隐私保护 CDN
butterfly主题魔改日记(二)
这篇是给大家推荐一些大佬的博客教程和更多实用教程，希望大家做出自己喜欢的静态博客
程序员余白
275 0
程序员囧辉
|
Web App开发 前端开发
Concise，一款为hexo设计的简约而漂亮的主题
Concise，一款为hexo设计的简约而漂亮的
程序员囧辉
272 0

热门文章

最新文章

  • 1
    四大触点，教你从“用户视角”构建数据分析体系
  • 2
    Spring-boot+Dubbo应用启停源码分析
  • 3
    《Stata统计分析与应用（第2版）》一3.4 图形的保存、合并及修改
  • 4
    RocketMq-Request-Reply消息
  • 5
    Confluence 6 手动添加用户
  • 6
    2013年4月20日 通用权限管理系统组件V3.8功能改进说明
  • 7
    Configuring EIGRP Unequal-Cost Paths
  • 8
    PowerShell 指定关键词遍历文件内容
  • 9
    Windows时间服务出现故障 向用户发送错误的时间
  • 10
    三种dedecms调用相关文章的方法
  • 1
    《鸿蒙HarmonyOS应用开发从入门到精通（第2版）》简介
    55
  • 2
    《Python 助力：人工智能模型的“瘦身”与“加速”之旅》
    111
  • 3
    《非计算机专业者：Python 开启人工智能职业新航道》
    40
  • 4
    《Python赋能：智绘智慧城市新蓝图》
    43
  • 5
    《智育新篇：点亮学生人工智能伦理与社会责任之光》
    47
  • 6
    《数据主权：人工智能时代的核心基石与挑战》
    34
  • 7
    鸿蒙HarmonyOS应用开发 | 探索 HarmonyOS Next-从开发到实战掌握 HarmonyOS Next 的分布式能力
    111
  • 8
    鸿蒙原生开发环境的创新与性能优化：从工具到跨平台支持的全方位提升
    280
  • 9
    鸿蒙HarmonyOS应用开发 | 「鸿蒙技术分享」HarmonyOS NEXT元服务卡片实战体验
    165
  • 10
    Qwen-Coder：通过Qwen 2.5模型实现智能代码生成的技术实践
    41

    • 相关电子书

    更多
  • 《阿里巴巴Android开发手册》
  • JS零基础入门教程（上册）
  • 2020前端工程师必读手册
    • 下一篇
    DataWorks售前咨询