当前位置: 首页 > 工具软件 > Butterfly Dag > 使用案例 >

hexo-butterfly美化

宋弘壮
2023-12-01

butterfly主题美化

接下来的美化是在官方文档的基础之上进行的美化

1:樱花飘落背景

Js文件下载地址

  • 把下载好的Js文件放在~\Butterfly\source\js文件夹下

  • ~\Butterfly\layout\includes文件夹下找到head.pug文件,在最后引入

    if theme.sakura.enable
      script(src="/js/sakura.js")
    
  • 在主题的主配置文件加入

    # 页面樱花飘落动效
    sakura:
      enable: true
    

2:浏览器标题恶搞

  • ~\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 = ' ( ๑•̀ㅂ•́) ✧被发现了~';
             titleTime = setTimeout(function () {
                 document.title = OriginTitle;
             }, 2000);
         }
     });
    
  • ~\Butterfly\layout\includes\layout.pug中添加以下代码来引入

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

3:为主页图添加上升气泡

  • 在主题的配置文件的CDN_USE的中添加

    - https://cdn.jsdelivr.net/gh/sunchaser-lilu/sunchaser-cdn@master/js/circleMagic.min.js
    

4:添加标签云

  • 进入到Hexo的跟文件目录下,打开package.json,添加以下内容

    "hexo-tag-cloud": "2.1.*"
    
  • 使用命令进行安装

    npm install hexo-tag-cloud@^2.0.* --save 
    
  • 打开~\Butterfly\layout\includes\widget\card_tags.pug文件,用下面内容将其替换掉

    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'})
    
  • 通过hexo ghexo d来预览,官方说尽量不使用组合命令hexo g -d

5:添加个性化板娘

由于hexo官方版的板娘不能说话,不能换装,功能较少

所以这里使用张书樵的魔改项目

  • 先到~\Butterfly\source文件夹下执行,确保clone下的项目文件夹为live2d-widget

    git clone https://github.com/stevenjoezhang/live2d-widget.git
    
  • 进入live2d-widget文件夹,将里面autoload.js文件的第一行改为

    const live2d_path = "/live2d-widget/";
    
  • 在主题配置文的件CDN_USE的中添加/live2d-widget/autoload.js

    # CDN
    # 網站必須
    # 可根據需要自行添加js/css
    CDN_USE:
      css:
        - /css/index.css
        - https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@master/Hexo/css/flink.min.css
        - https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css
      js:
        - https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js #/js/third-party/jquery.min.js
        - /js/utils.js
        - /js/main.js
        - /live2d-widget/autoload.js
    
  • 在主题配置文件下添加

    live2d:
      enable: true
    

6:添加小客服功能

  • 先去DaoVoice官网注册账号

  • ~\Butterfly\layout\includes文件夹下创建addons\daovoice.pug,并将以下代码放入将xxxxx改为自己的应用id

    html
      body
        script.
          (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/xxxxxxxx.js","daovoice")
          daovoice('init', {
          app_id: "xxxxxxxx"
          });
          daovoice('update');
    
  • 然后我们打开./layout/index.pug文件,在里面加入以下内容

    if theme.daovoice.enable
      include includes/addons/daovoice.pug
    
  • 在主题配置文件下添加

    # Daovoice实时客服功能
    daovoice:
      enable: true
    
 类似资料: