博客主页 🍚
HEXO的美化——Butterfly的美化整理

Author:

火喵酱

©

Wordage:

共计 13866 字

needs:

约 4 分钟

Popular:

1365 ℃

Created:

目 录
本页部分内容来自互联网,并附带转载链接;提取的内容仅仅指代本站实际使用内容,可能更换成本站主题适配的内容,仅适合本站主题使用,其他主题雷同;更多的共同内容请看原链接

针对主题版本为2.1.0

右下方看板娘
https://blog.csdn.net/qq_36759224/article/details/85420403
获取 live2d

输入如下命令获取 live2d :

 $ npm install --save hexo-helper-live2d 

输入以下命令,下载相应的模型,将 packagename 更换成模型名称即可,更多模型选择请点击此处,各个模型的预览请访问原作者的博客,或者访问这里
本小站使用的是live2d-widget-model-shizuku

添加如下代码

打开站点目录下的 _config.yml 文件,添加如下代码:

live2d:
    enable: true
    scriptFrom: local
    model: 
        use: live2d-widget-model-haruto #模型选择
    display: 
        position: right  #模型位置
        width: 150       #模型宽度
        height: 300      #模型高度
    mobile: 
        show: false      #是否在手机端显示

设置好过后我们就拥有了一个卡通人物

自定义鼠标指针样式
选好指针样式

本站使用的是奥日与黑暗森林下载地址在这里,你也可以换成自己喜欢的指针样式

应用到本博客

参考过本博客主题结构,定位到\hexo\themes\butterfly\source\css\index.styl
将以下代码复制到最开头

/**普通指针样式**/
body 
  cursor url('xxxx.cur'),default
/**链接指针样式**/
a 
  &:hover 
    cursor url('xxxx.cur'),pointer

这样就好了~

右侧小工具栏添加网易云音乐
先去找网易云外链

这部比较简单恕不详细说明,百度一大堆,举个例子,比如这首打上花火,播放页下侧就能找到外链的页面
并取得下面的HTML代码

修改主题文件
  1. 首先模仿公告的样式,在hexo\themes\butterfly\layout\includes\widget多复制出来一个card_announcement.pug文件并更名
  2. 将新文件中的最后一行.announcement_content= theme.announcement.content替换成网易云音乐外链,并在<iframe前加条竖线,例如这样|<iframe
  3. 修改第一行和倒数第二号内容为自定义的命名...总之最后的我是这种效果...我也说不清楚惹qaq

         .card-widget.card-netmusic
             .card-content
                 .item-headline
                     i.fa.fa-music(aria-hidden="true")
                     span= _p('aside.card_netmusic')
                     |<iframe 吧啦吧啦
  4. hexo\themes\butterfly\layout\includes\widget\index.pug中加入新的小工具列表,例如我的:

     if theme.aside.card_netmusic
     include ./card_netmusic.pug
  5. 然后应该emmm没了吧,应该可以了~
  6. ps.果然忘了,在hexo\themes\butterfly\languages\zh-CN.ymlbutterfly.ymlaside:里添加对应名称

    浏览器网页标题修改♂(欺骗)

    hexo\themes\butterfly\source\js中添加crash_cheat.js
    填入内容(别忘了修改成自己喜欢的):

    <!--崩溃欺骗-->
     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 = '(ฅ>ω<*ฅ) 喵喵爱你哟~' + OriginTitle;
          titleTime = setTimeout(function () {
              document.title = OriginTitle;
          }, 2000);
      }
     });

    然后在hexo\themes\butterfly\layout\includes\layout.pug文件中添加如下代码:

     script(type='text/javascript', src='/js/crash_cheat.js')
    雪花背景特效

    雪花特效有两种,使用方法雷同上一个浏览器标题欺骗,在hexo\themes\butterfly\source\js中建立snow.js 文件,粘贴以下代码:

    /*样式一*/
    (function($){
     $.fn.snow = function(options){
     var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('&#10052;'),
     documentHeight     = $(document).height(),
     documentWidth    = $(document).width(),
     defaults = {
         minSize        : 10,
         maxSize        : 20,
         newOn        : 1000,
         flakeColor    : "#AFDAEF" /* 此处可以定义雪花颜色,若要白色可以改为#FFFFFF */
     },
     options    = $.extend({}, defaults, options);
     var interval= setInterval( function(){
     var startPositionLeft = Math.random() * documentWidth - 100,
     startOpacity = 0.5 + Math.random(),
     sizeFlake = options.minSize + Math.random() * options.maxSize,
     endPositionTop = documentHeight - 200,
     endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
     durationFall = documentHeight * 10 + Math.random() * 5000;
     $flake.clone().appendTo('body').css({
         left: startPositionLeft,
         opacity: startOpacity,
         'font-size': sizeFlake,
         color: options.flakeColor
     }).animate({
         top: endPositionTop,
         left: endPositionLeft,
         opacity: 0.2
     },durationFall,'linear',function(){
         $(this).remove()
     });
     }, options.newOn);
     };
    })(jQuery);
    $(function(){
     $.fn.snow({ 
         minSize: 5, /* 定义雪花最小尺寸 */
         maxSize: 50,/* 定义雪花最大尺寸 */
         newOn: 300  /* 定义密集程度,数字越小越密集 */
     });
    });
    

    或者

    /*样式二*/
    /* 控制下雪 */
    function snowFall(snow) {
     /* 可配置属性 */
     snow = snow || {};
     this.maxFlake = snow.maxFlake || 200;   /* 最多片数 */
     this.flakeSize = snow.flakeSize || 10;  /* 雪花形状 */
     this.fallSpeed = snow.fallSpeed || 1;   /* 坠落速度 */
    }
    /* 兼容写法 */
    requestAnimationFrame = window.requestAnimationFrame ||
     window.mozRequestAnimationFrame ||
     window.webkitRequestAnimationFrame ||
     window.msRequestAnimationFrame ||
     window.oRequestAnimationFrame ||
     function(callback) { setTimeout(callback, 1000 / 60); };
    
    cancelAnimationFrame = window.cancelAnimationFrame ||
     window.mozCancelAnimationFrame ||
     window.webkitCancelAnimationFrame ||
     window.msCancelAnimationFrame ||
     window.oCancelAnimationFrame;
    /* 开始下雪 */
    snowFall.prototype.start = function(){
     /* 创建画布 */
     snowCanvas.apply(this);
     /* 创建雪花形状 */
     createFlakes.apply(this);
     /* 画雪 */
     drawSnow.apply(this)
    }
    /* 创建画布 */
    function snowCanvas() {
     /* 添加Dom结点 */
     var snowcanvas = document.createElement("canvas");
     snowcanvas.id = "snowfall";
     snowcanvas.width = window.innerWidth;
     snowcanvas.height = document.body.clientHeight;
     snowcanvas.setAttribute("style", "position:absolute; top: 0; left: 0; z-index: 1; pointer-events: none;");
     document.getElementsByTagName("body")[0].appendChild(snowcanvas);
     this.canvas = snowcanvas;
     this.ctx = snowcanvas.getContext("2d");
     /* 窗口大小改变的处理 */
     window.onresize = function() {
         snowcanvas.width = window.innerWidth;
         /* snowcanvas.height = window.innerHeight */
     }
    }
    /* 雪运动对象 */
    function flakeMove(canvasWidth, canvasHeight, flakeSize, fallSpeed) {
     this.x = Math.floor(Math.random() * canvasWidth);   /* x坐标 */
     this.y = Math.floor(Math.random() * canvasHeight);  /* y坐标 */
     this.size = Math.random() * flakeSize + 2;          /* 形状 */
     this.maxSize = flakeSize;                           /* 最大形状 */
     this.speed = Math.random() * 1 + fallSpeed;         /* 坠落速度 */
     this.fallSpeed = fallSpeed;                         /* 坠落速度 */
     this.velY = this.speed;                             /* Y方向速度 */
     this.velX = 0;                                      /* X方向速度 */
     this.stepSize = Math.random() / 30;                 /* 步长 */
     this.step = 0                                       /* 步数 */
    }
    flakeMove.prototype.update = function() {
     var x = this.x,
         y = this.y;
     /* 左右摆动(余弦) */
     this.velX *= 0.98;
     if (this.velY <= this.speed) {
         this.velY = this.speed
     }
     this.velX += Math.cos(this.step += .05) * this.stepSize;
    
     this.y += this.velY;
     this.x += this.velX;
     /* 飞出边界的处理 */
     if (this.x >= canvas.width || this.x <= 0 || this.y >= canvas.height || this.y <= 0) {
         this.reset(canvas.width, canvas.height)
     }
    };
    /* 飞出边界-放置最顶端继续坠落 */
    flakeMove.prototype.reset = function(width, height) {
     this.x = Math.floor(Math.random() * width);
     this.y = 0;
     this.size = Math.random() * this.maxSize + 2;
     this.speed = Math.random() * 1 + this.fallSpeed;
     this.velY = this.speed;
     this.velX = 0;
    };
    // 渲染雪花-随机形状(此处可修改雪花颜色!!!)
    flakeMove.prototype.render = function(ctx) {
     var snowFlake = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size);
     snowFlake.addColorStop(0, "rgba(255, 255, 255, 0.9)");  /* 此处是雪花颜色,默认是白色 */
     snowFlake.addColorStop(.5, "rgba(255, 255, 255, 0.5)"); /* 若要改为其他颜色,请自行查 */
     snowFlake.addColorStop(1, "rgba(255, 255, 255, 0)");    /* 找16进制的RGB 颜色代码。 */
     ctx.save();
     ctx.fillStyle = snowFlake;
     ctx.beginPath();
     ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
     ctx.fill();
     ctx.restore();
    };
    /* 创建雪花-定义形状 */
    function createFlakes() {
     var maxFlake = this.maxFlake,
         flakes = this.flakes = [],
         canvas = this.canvas;
     for (var i = 0; i < maxFlake; i++) {
         flakes.push(new flakeMove(canvas.width, canvas.height, this.flakeSize, this.fallSpeed))
     }
    }
    /* 画雪 */
    function drawSnow() {
     var maxFlake = this.maxFlake,
         flakes = this.flakes;
     ctx = this.ctx, canvas = this.canvas, that = this;
     /* 清空雪花 */
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     for (var e = 0; e < maxFlake; e++) {
         flakes[e].update();
         flakes[e].render(ctx);
     }
     /*  一帧一帧的画 */
     this.loop = requestAnimationFrame(function() {
         drawSnow.apply(that);
     });
    }
    /* 调用及控制方法 */
    var snow = new snowFall({maxFlake:60});
    snow.start();
    

    然后在hexo\themes\butterfly\layout\includes\layout.pug文件里引用即可:

    <!-- 雪花特效 -->
    <script type="text/javascript" src="\js\snow.js"></script>

    如果没效果,请确认网页是否已载入JQurey,如果没有请在下雪代码之前引入JQ即可:

    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.js"></script>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
樱花背景特效
https://yremp.live/sakura-js/

因雪花特效有点问题,打算换成樱花特效。

在雪花特效处直接换成樱花特效的Jsdelivr缓存即可。

网站底部设置已运行时间

在主题设置中找到个性化页脚内容设置框,或者在footer.php代码中添加如下代码即可:

 网站已运行:<span id="run_time" style="color: black;"></span>
    <script>
    function runTime() {
    var d = new Date(), str = ''; 
    BirthDay = new Date("2018-12-31");
    today = new Date();
    timeold = (today.getTime() - BirthDay.getTime());
    sectimeold = timeold / 1000
    secondsold = Math.floor(sectimeold);
    msPerDay = 24 * 60 * 60 * 1000
    msPerYear = 365 * 24 * 60 * 60 * 1000
    e_daysold = timeold / msPerDay
    e_yearsold = timeold / msPerYear
    daysold = Math.floor(e_daysold);
    yearsold = Math.floor(e_yearsold);
    //str = yearsold + "年";
    str += daysold + "天";
    str += d.getHours() + '时';
    str += d.getMinutes() + '分';
    str += d.getSeconds() + '秒';
    return str;
    }
    setInterval(function () {
      $('#run_time').html(runTime())
    }, 1000);
    </script>

本小站使用的是这个:

<!-- 网站运行时间的设置 -->
<span id="timeDate">载入天数...</span>
<span id="times">载入时分秒...</span>
<script>
    var now = new Date();
    function createtime() {
        var grt= new Date("03/09/2019 13:14:21");
        now.setTime(now.getTime()+250);
        days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
        hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
        if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
        mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
        seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
        snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
        document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 ";
        document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
    }
setInterval("createtime()",250);
</script>
右键菜单美化

在主题设置中加入如下js:

var options = {items:[
  {header: '欢迎做客 喵窝・札记'},
  {divider: true},
  {text: '↜&nbsp;&nbsp;回到首页', href: 'https://dorcandy.cn'},
  {text: '↷&nbsp;&nbsp;刷新页面', onclick: function() {alert("功能添加中,先请手动是用F5或者ctrl+F5刷新页面")}},
  {divider: true},
  {text: '☍&nbsp;&nbsp;友情链接', href: '/link/'},
  {text: '✓&nbsp;&nbsp;留言板', href: '/guestbook/'},
  {text: 'ฅ&nbsp;&nbsp;关于火喵', href: '/about/'},
  {divider: true},
  {text: '☇&nbsp;&nbsp;百度搜索', ======},
  {text: '☄&nbsp;&nbsp;更多...', onclick: function() {alert("噗qaq,更完善的右键菜单 火喵 正在努力攻克中...")}}
]}
$('body').contextify(options);

引入js

<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextify/1.0.8/jquery.contextify.min.js"></script>

还要引入bootstrap.min.css,但是需要做适量修改。

主页头图上升气泡效果

butterfly中的cdn-use—>js里添加一行即可:

- https://cdn.jsdelivr.net/gh/sunchaser-lilu/sunchaser-cdn@master/js/circleMagic.min.js
引入steam游戏展示小工具

代码如下:

<iframe src="https://store.steampowered.com/widget/{%APPID%}/" frameborder="0" width="100%" height=190"></iframe>

代码中的APPID可查询SteamDB
效果如下:

关于背景样式的修改
自动更换随机背景

butterfly.yml里的background:可以直接填写api接口,这里推荐使用岁月小筑大佬提供的API,实现背景自动更换,效果如下:

https://img.xjh.me/random_img.php?type=bg&ctype=nature&return=302
实现背景重复平铺
  1. butterfly.yml里的background:修改成素材图片地址
  2. css\_global\index.styl#web_bg内最后两行

      background-size: cover
      background-repeat: no-repeat

    修改为

      background-size: 400px //cover
    //  background-repeat: no-repeat

    400px为自定义尺寸

实现独立页面无侧边栏
  1. 定位到hexo\themes\butterfly\layout\page.pug
  2. 仿照在else处加上注释之间的内容
  //...................... 
  else if page.type === 'nosidebar'
    article#page
      h1= page.title
      .article-container!= page.content
  //else...................... 
  1. 在想要设置无侧边栏的页面,上方加上type: "nosidebar"
  2. 完成,其中nosidebar可以换自己喜欢的名字,具体效果参照我的关于页
感谢!

如果觉得文章很不错,欢迎点一点下面的广告,来表达对喵喵的支持qaq

- - - The END - - -
共计 2 条评论,点此发表评论
  1. 头像
    kai
    新人

    访客

    halo,我用了六边形下雪特效,但是deploy以后没有效果了.localhost可以看得到效果的但是,deploy以后就没有效果了。。这是什么原因啊? 😭

    · Win 1x · Chrome · 海外
    1. 头像
      火喵酱 kai

      博主

      网站看看有没有cdn缓存,尝试一下强制刷新或者隐私窗口打开看看有没有效果

      · Win 1x · Chrome · 浙江
博客主页 火喵博客・日记本 经为流逝的日月,纬为人们的生业 51统计 百度统计 🌸
萌ICP备20210005号 辽ICP备2021005644号-1 辽公网安备 21021102000984号 十年之约 2 年 266 天 3 小时 31 分 🌸 本站由 Typecho 建站,并搭配自制 MyDiary 主题 Copyright © 2009 ~ 2022. 火喵酱 All rights reserved.
历史足迹
分类目录
  • 日常
  • 晒物
  • 🦙 代码
  • 🏗️ 建站
  • 📷 生活
  • 测试
  • 推广