侧边栏访客地图

  1. 前往clustramps网站注册一个账号

  2. 找到Free Tools下面的Website Widget, 点击Get Map Widget

  3. 输入你的博客地址 , 点击 Next

  4. 根据自己的喜好方式选择样式Map Widget或Globe Widget

  5. 找到如下代码 , 记住 src(**********的部分);

    1
    <script type="text/javascript" id="clstr_globe" src="**********************">

  6. 在 themes\Butterfly\layout\includes\widget 文件夹新建card_maps.pug文件, 文件内容如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    .card-widget.card-maps
      .card-content
        .item-headline
          i.fas.fa-globe-asia(aria-hidden="true")
          span= _p('aside.card_maps')
        //- 下面这行适用于3D地图(Globe Widget)
        script#clstr_globe(type="text/javascript" defer="defer" src="******************")
        //- 下面这行适用于平面地图(Map Widget)
        script#clustrmaps(type="text/javascript" defer="defer" src="******************")
        //- 我的文件内容
        script#clstr_globe(type="text/javascript" defer="defer" src="//cdn.clustrmaps.com/globe.js?d=0-deMHkrQS3T0qm12KvIIVlBDiMz8X9QKjEF45xFsbU")

  7. 编辑themes\Butterfly\layout\includes\widget\index.pug文件, 在你想要显示的位置插入以下代码:

    1
    2
    3
    if theme.aside.card_maps
            !=partial('includes/widget/card_maps', {}, {cache:theme.fragment_cache})
    //- 缩进使用空格, 不要使用tab

  8. 编辑butterfly.yml文件, 在card_webinfo下面加一行 card_maps: true

  9. 编辑themes\Butterfly\languages\zh-CN.yml文件(根据网站语言选择), 找到card_announcement: 公告, 在下面添加一行card_maps: 访客地图(后面的文本可自定义)

  10. 如果不想显示, 直接把butterfly.yml的card_maps: true改为card_maps: false即可

原文链接

侧边栏Pixiv日榜

  1. 在themes\Butterfly\layout\includes\widget文件夹内新建card_pixiv.pug文件, 文件内容如下:

    1
    2
    3
    4
    5
    6
    .card-widget.card-pixiv
      .card-content
        .item-headline
          i.fa.fa-image(aria-hidden="true")
          span= _p('aside.card_pixiv')
        iframe(src="https://cloud.mokeyjay.com/pixiv" frameborder="0" style="width:99%;height:380px;margin:0;")

  2. 编辑themes\Butterfly\layout\includes\widget\index.pug文件, 在你想要显示的位置插入以下代码:

    1
    2
    if theme.aside.card_pixiv
            !=partial('includes/widget/card_pixiv', {}, {cache:theme.fragment_cache})

  3. 编辑butterfly.yml文件, 在card_webinfo下面添加一行card_pixiv: true

  4. 编辑themes\Butterfly\languages\zh-CN.yml文件(根据网站语言选择), 找到card_announcement: 公告, 在下面添加一行card_pixiv: Pixiv日榜Top50(后面的文本可自定义)

  5. 如果不想显示, 直接把butterfly.yml的card_pixiv: true改为card_pixiv: false即可

原文链接

看板娘

  1. 下载源码 , 解压放到博客目录的themes\Butterfly\source下

  2. 修改文件夹名为live2d-widget , 修改项目中的autoload.js文件 将const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/";改为const live2d_path = "/live2d-widget/";

  3. 在想要加入看板娘的位置增加如下内容:

    1
    <script src="/live2d-widget/autoload.js"></script>

  4. 为了不让toc栏挡住看板娘, 修改waifu.css里面的 #waifu下的left: 0 ,将其改为right: 70px

    1
    2
    3
    4
    5
    6
    7
    8
    9
    #waifu {
    	bottom: -1000px;
    	left: 0;           //这一行改成right: 70px;
    	line-height: 0;
    	position: fixed;
    	transform: translateY(3px);
    	transition: transform .3s ease-in-out, bottom 3s ease-in-out;
    	z-index: 1;
    }

Aplayer

插件参考文档

基于pjax的Aplayer+Meting不断歌(未实装)

  1. 主题更新至pjax后, 在themes/Butterfly/source内新建js, 名称随意.

  2. 编写此js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    document.writeln("<script src=\'https://cdn.jsdelivr.net/npm/pjax/pjax.min.js\'></script>");
    document.writeln("<script>var pjax = new Pjax({");
    document.writeln("  selectors: [");
    document.writeln("    \'title\',");
    document.writeln("    \'meta[name=description]\',");
    document.writeln("    \'#config_change\',");
    document.writeln("    \'#body-wrap\',");
    document.writeln("    \'#rightside\',");
    document.writeln("    \'.js-pjax\'");
    document.writeln("  ],");
    document.writeln("  cacheBust: false,");
    document.writeln("})");
    document.writeln("");
    document.writeln("document.addEventListener(\'pjax:complete\', function () {");
    document.writeln("  refreshFn()");
    document.writeln("");
    document.writeln("  $(\'script[data-pjax]\').each(function () {");
    document.writeln("    $(this).parent().append($(this).remove())");
    document.writeln("  })");
    document.writeln("");
    document.writeln("  GLOBAL_CONFIG.islazyload && lazyLoadInstance.update()");
    document.writeln("");
    document.writeln("  typeof chatBtnFn === \'function\' && chatBtnFn()");
    document.writeln("  typeof panguInit === \'function\' && panguInit()");
    document.writeln("");
    document.writeln("  if (typeof gtag === \'function\') {");
    document.writeln("    gtag(\'config\', \'ca-pub-1197128104711052\', {\'page_path\': window.location.pathname});");
    document.writeln("  }");
    document.writeln("");
    document.writeln("  if (document.getElementsByClassName(\'aplayer\').length){");
    document.writeln("    loadMeting()");
    document.writeln("  }");
    document.writeln("})");
    document.writeln("");
    document.writeln("document.addEventListener(\'pjax:send\', function () {");
    document.writeln("  if (window.aplayers) {");
    document.writeln("    for (let i = 0; i < window.aplayers.length; i++) {");
    document.writeln("      if (!window.aplayers[i].options.fixed) {");
    document.writeln("        window.aplayers[i].destroy()");
    document.writeln("      }");
    document.writeln("    }");
    document.writeln("  }");
    document.writeln("");
    document.writeln("  $(window).off(\'scroll\')");
    document.writeln("");
    document.writeln("  //reset readmode");
    document.writeln("  $(\'body\').hasClass(\'read-mode\') && $(\'body\').removeClass(\'read-mode\')");
    document.writeln("");
    document.writeln("  //reset font-size");
    document.writeln("  $(\'body\').css(\'font-size\') !== originFontSize && $(\'body\').css(\'font-size\', parseFloat(originFontSize))");
    document.writeln("})</script>");
    document.writeln("<link rel=\'stylesheet\' href=\'https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css\'>");
    document.writeln("<script src=\'https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js\'></script>");
    document.writeln("<script src=\'https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js\'></script>");
    document.writeln("<meting-js server=\'netease\' type=\'playlist\' id=\'2187995420\' fixed=\'true\'></meting-js>");

  3. 修改js中的参数配置.

    1
    2
    3
    4
    5
    6
    7
    8
    server=\'netease\'
    \\ 平台名称 netease: 网易; tencent: 腾讯; xiami: 虾米; kugou: 酷狗; baidu: 百度;

    type=\'playlist\'
    \\ 类型 playlist：歌单; song：单曲; album: 专辑; search: 关键词; artist: 歌手;

    id=’\XXXX'
    \\ 音乐ID

  4. 修改butterfly.yml, 在buttom中引入上面的js

    1
    - <script src="/刚才创建的JS的名字.js"></script>

原文链接

修改源文件引入全局Aplayer

这部分内容我也未实装, 并且没有测试pjax

  1. 打开hemes\Butterfly\layout\includes\head.pug, 结尾处添加一句

    1
    include ./third-party/aplayer.pug

  2. 在hemes\Butterfly\layout\includes\third-party\里面新建文件aplayer.pug, 内容如下:

    1
    2
    3
    4
    5
    6
    if theme.aplayer && theme.aplayer.enable
    	.aplayer(data-id=theme.aplayer.id data-server=theme.aplayer.server data-type=theme.aplayer.type data-fixed=theme.aplayer.fixed data-mini=theme.aplayer.mini data-listFolded=theme.aplayer.listFolded data-order=theme.aplayer.order data-preload=theme.aplayer.preload)
    	each item in theme.aplayer.css
    		link(rel='stylesheet', href=item)
    	each item in theme.aplayer.js
    		script(src=item)

  3. 在butterfly.yml内加入以下内容:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    aplayer:
      enable: true
      # js和css 应该已经全局引入了
      js:
        - https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.js
        - https://cdn.jsdelivr.net/npm/meting@1.2.0/dist/Meting.min.js
      css:
        - https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.css
      # 为避免重复引入 可尝试删除
      id: 2661264578
      server: netease
      type: playlist
      fixed: 'true'
      order: random
      preload: none
      listFolded: 'false'

  4. 为了防止toc栏收回按钮重合, 修改按钮的位置.3.0.0版本后 此按钮的位置属性在themes\Butterfly\source\css\_layout\sidebar.styl文件中, 修改bottom属性为70px .

    1
    2
    3
    4
    5
    6
    7
    8
    9
    #toggle-sidebar
      position: fixed
      bottom: $sidebar-icon-top           //这里改成bottom: 70px
      left: $sidebar-icon-left
      z-index: 100
      font-size: $sidebar-icon-size
      // opacity: 0
      cursor: pointer
      transition: all .2s

基于小康xkTool工具库引入全局Meting

在自建js中加入下面一行代码 .

1
对象名.meting("2802022828", "netease", "playlist");

三个参数分别表示

  • ID

    可选为song id / playlist id / album id / search keyword

  • server

    music platform: netease, tencent, kugou, xiami, baidu

  • type

    song, playlist, album, search, artist

引入后 , 音乐播放器依旧会挡住Toc栏的收回按钮 . 因此需要修改源文件调整其位置 . 3.0.0版本后 此按钮的位置属性在themes\Butterfly\source\css\_layout\sidebar.styl文件中, 修改bottom属性为70px .

1
2
3
4
5
6
7
8
9
#toggle-sidebar
  position: fixed
  bottom: $sidebar-icon-top           //这里改成bottom: 70px
  left: $sidebar-icon-left
  z-index: 100
  font-size: $sidebar-icon-size
  // opacity: 0
  cursor: pointer
  transition: all .2s

基于小康博客魔改教程的CSS

为了在有需要时方便查询 , 记录一下我的inject部分的内容 .

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
inject:
  head:
    # - <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sviptzk/StaticFile_HEXO@v3.2.3/butterfly/css/iconfont.min.css">
    - <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@master/Hexo/css/custom.min.css">
    - <link rel="stylesheet" href="/css/background.css">
    - <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sviptzk/StaticFile_HEXO@v3.2.3/butterfly/css/buttons.min.css">
    - <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sviptzk/StaticFile_HEXO@latest/butterfly/css/tags.css">
    - <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sviptzk/StaticFile_HEXO@latest/butterfly/css/plugins.min.css">
    - <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sviptzk/StaticFile_HEXO@latest/butterfly/css/font-awesome-animation.min.css">
    - <link rel="stylesheet" href="/css/mycss.css"> # 正文字体大小设置成15px
    - <link href="https://cdn.bootcss.com/dplayer/1.25.0/DPlayer.min.css" rel="stylesheet"> # dplayer
  bottom:
    - <script src="https://cdn.jsdelivr.net/gh/sviptzk/StaticFile_HEXO@master/xkTool/v3.1.0/xkTool.js"></script>
    # - <script data-pjax src="/js/iconfont.js"></script>
    - <script src="/js/myjs.js"></script>
    - <script src="/live2d-widget/autoload.js"></script>
    - <script data-pjax src="/js/background.js"></script>
    - <script src="https://cdn.bootcss.com/dplayer/1.25.0/DPlayer.min.js"></script> # dplayer
    - <script src="https://cdn.bootcss.com/hls.js/0.12.4/hls.min.js"></script> # dplayer
    # - <script data-pjax src="https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/js/mouse_snow.min.js"></script> # 星星特效
    # - <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/mirai-mamori/web-img/js/sakura-quarter.js"></script> # 樱花特效

原文链接

页脚跳动的心

  1. 编辑博客根目录/themes/Butterfly/layout/includes/footer.pug . 将第六行和第八行的By修改为<i id="heartbeat" class="fa fas fa-heartbeat"></i> , 在自己写的mycss.css中加入一行i#heartbeat{color:red;animation:iconAnimate 1.33s ease-in-out infinite}@-moz-keyframes iconAnimate{0%,100%{transform:scale(1)}10%,30%{transform:scale(.9)}20%,40%,60%,80%{transform:scale(1.1)}50%,70%{transform:scale(1.1)}}@-webkit-keyframes iconAnimate{0%,100%{transform:scale(1)}10%,30%{transform:scale(.9)}20%,40%,60%,80%{transform:scale(1.1)}50%,70%{transform:scale(1.1)}}@-o-keyframes iconAnimate{0%,100%{transform:scale(1)}10%,30%{transform:scale(.9)}20%,40%,60%,80%{transform:scale(1.1)}50%,70%{transform:scale(1.1)}}@keyframes iconAnimate{0%,100%{transform:scale(1)}10%,30%{transform:scale(.9)}20%,40%,60%,80%{transform:scale(1.1)}50%,70%{transform:scale(1.1)}} .

    image-20200816175248368

  2. 在inject处引入mycss.css即可 . 基于此修改了菜单栏中IU为跳动的心.

原文链接