hexo-butterfly美化

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 g，hexo 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