参考文章

HCLonely

MuJin

初辰

涉及页面模板

Pixiv 日榜

使用的是超能小紫提供的服务：https://cloud.mokeyjay.com/pixiv，也可以自行搭建，搭建方式请看这里->传送门

在themes\Butterfly\layout\includes\widget文件夹新建card_pixiv.pug文件，文件内容如下：

.card-widget.card-pixiv
  .card-content
    .item-headline
      i.fas.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;")

编辑themes\Butterfly\layout\includes\widget\index.pug文件，在你想要显示的位置引入上面的文件，具体参考你使用的版本
编辑butterfly.yml文件，在card_webinfo下面添加一行card_pixiv: true
编辑themes\Butterfly\languages\zh-CN.yml文件 (请根据你的网站语言选择)，找到card_announcement: 公告, 在下面添加一行card_pixiv: Pixiv日榜Top50(后面的文本可自定义)

文章日历

安装hexo-generator-calendar插件
1
yarn add hexo-generator-calendar

在主题配置的inject中引入

head:
  - <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/moelody/cdn@latest/css/butterfly/src/calendar.min.css">
bottom:
  - <script data-pjax src="https://cdn.jsdelivr.net/gh/moelody/cdn@latest/js/calendar.min.js"></script>

在themes\Butterfly\layout\includes\widget文件夹新建card_calendar.pug文件，文件内容如下：

.card-widget.card-calendar
  .card-content
    .item-headline
      i.far.fa-calendar-alt(aria-hidden="true")
      span= _p('aside.card_calendar')
    div.widget-wrap
    div#calendar.widget

编辑themes\Butterfly\layout\includes\widget\index.pug文件，在你想要显示的位置引入上面的文件，具体参考你使用的版本
编辑butterfly.yml文件，在card_webinfo下面添加一行card_calendar: true
编辑themes\Butterfly\languages\zh-CN.yml文件 (请根据你的网站语言选择)，找到card_announcement:公告, 在下面添加一行card_calendar: 文章日历(后面的文本可自定义)

投票系统

前往widgetpack注册账号
登陆后在点击左侧侧边栏Rating->Install, 你会看到代码有wpac_init.push({widget: 'Rating', id: *****});，记住id

在博客根目录themes/Butterfly/layout/includes/post/目录内新建文件 rate.pug, 内容如下：

# wpac-rating
script.
  wpac_init = window.wpac_init || [];
  wpac_init.push({widget: 'Rating', id: #{config.rate.id}});
  (function() {
    if ('WIDGETPACK_LOADED' in window) return;
    WIDGETPACK_LOADED = true;
    var mc = document.createElement('script');
    mc.type = 'text/javascript';
    mc.async = true;
    mc.src = '//embed.widgetpack.com/widget.js';
    var s = document.getElementsByTagName['script'](0); s.parentNode.insertBefore(mc, s.nextSibling);
  })();
style.
  #wpac-rating {
    margin-top: 20px;
    text-align: center;
  }

编辑博客根目录themes/Butterfly/layout/post.pug文件，在theme.reward.enable下方添加：（根据自己的版本灵活变更）
1
2
if page.rating
include includes/post/rate.pug
在 hexo 根目录配置文件内添加上复制好的id：
1
2
rate:
id: xxx
在文章顶部加上rating: false即可为指定文章关闭投票

引入类

文章统计图表

安装插件
1
yarn add hexo-charts

在关于页面中引入

<script>
    if(typeof(echarts)=='undefined'){
        location.href='/about/';
    }
</script>

<div id="posts-chart"></div>

<!-- "data-length"为显示标签个数(从多到少)，默认为10 -->
<div id="tags-chart" data-length="10"></div>

<div id="categories-chart"></div>

页脚跳动的心

在主题配置的inject中引入 js

1 2	bottom: - <script data-pjax src="https://cdn.jsdelivr.net/gh/moelody/cdn@latest/js/heartbeat.min.js"></script>

在页脚养鱼

在主题配置的inject中引入 js

1 2	bottom: - <script data-pjax src="https://cdn.jsdelivr.net/gh/moelody/cdn@latest/js/butterfly/src/fish.min.js"></script>

valine 评论添加博主等标签

修改themes/Butterfly/layout/includes/comments/valine.pug

- let emojiMaps = '""'
if site.data.valine
  - emojiMaps = JSON.stringify(site.data.valine)

- let links = []
if site.data.link
  each i in site.data.link
    each item in i.link_list
      - links.push(item.link)
script.
  function loadValine () {
    function initValine () {
      window.valine = new Valine({
        el: '#vcomment',
        appId: '#{theme.valine.appId}',
        appKey: '#{theme.valine.appKey}',
        placeholder: '#{theme.valine.placeholder}',
        avatar: '#{theme.valine.avatar}',
        meta: '#{theme.valine.guest_info }'.split(','),
        pageSize: '#{theme.valine.pageSize}',
        lang: '#{theme.valine.lang}',
        recordIP: #{theme.valine.recordIP},
        serverURLs: '#{theme.valine.serverURLs}',
        emojiCDN: '#{theme.valine.emojiCDN}',
        emojiMaps: !{emojiMaps},
        enableQQ: #{theme.valine.enableQQ},
        path: window.location.pathname,
        verify: #{theme.valine.verify},
        master: '#{ theme.valine.master }'.split(',').concat('#{ config.url }'),
        friends: '#{ theme.valine.friends }'.split(',').concat('#{ links }'.split(',')),
        tagMeta: '#{ theme.valine.tagMeta }'.split(','),
        metaPlaceholder: !{JSON.stringify(theme.valine.metaPlaceholder)}
      });
      if ('#{theme.valine.requiredFields}') { valine.config.requiredFields= '#{theme.valine.requiredFields}'.split(',') }
    }

    if (typeof Valine === 'function') initValine()
    else $.getScript('!{url_for(theme.CDN.valine)}', initValine)
  }

  if ('!{theme.comments.use[0]}' === 'Valine' || !!{theme.comments.lazyload}) {
    if (!{theme.comments.lazyload}) btf.loadComment(document.querySelector('#vcomment'),loadValine)
    else setTimeout(() => loadValine(), 0)
  } else {
    function loadOtherComment () {
      loadValine()
    }
  }

修改主题valine配置，添加如下配置项

verify: false # 评论时是否需要验证，需 jQuery 支持
master: www.moelody.com # 修改为自己的，多写几个也行，配置了根目录配置url的也可以不写
friends: # 小伙伴的网址，link.yml中配置了友链的也可不写
tagMeta: 博主,小伙伴,访客 # 自定义标签
metaPlaceholder: # 输入框的背景文字
 nick: 昵称/QQ 号
 mail: 邮箱(必填)
 link: 网址(https://)

修改主题CDN配置，将valine链接改为https://cdn.jsdelivr.net/gh/moelody/cdn@latest/js/others/valine.min.js

在主题配置的inject中引入 css

1 2	head - <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/moelody/cdn@latest/css/valine.min.css">

添加卡通人物（看板娘）

安装hexo-helper-live2d插件
1
yarn add hexo-helper-live2d

修改根目录配置，添加如下配置

# Live2D看板娘
live2d:
 enable: true
 pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
 pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
 pluginModelPath: assets/ # 模型文件相对与插件根目录路径
 # scriptFrom: local # 默认
 # scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # 原L2Dwidget配置
 scriptFrom: https://cdn.jsdelivr.net/gh/moelody/live2d-widget.js@latest/lib/L2Dwidget.min.js # 博主修改过的L2Dwidget配置
 tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
 debug: false # 调试, 是否在控制台输出日志
 model:
   use: https://cdn.jsdelivr.net/gh/moelody/live2d-models@latest/fairy/air_attack/index.json # 单个模型
   scale: 1 # 模型与canvas的缩放
   # 新增配置
   homePath: # 如果以下已配置或只使用单个模型，则可留空；否则需要配置。例如：https://cdn.jsdelivr.net/gh/moelody/live2d-models@latest/
   tipPath: https://cdn.jsdelivr.net/gh/moelody/live2d-models@latest/model_tips_butterfly.json # 看板娘触发，如homePath已配置可留空默认读取路径下model_tips.json
   listPath: https://cdn.jsdelivr.net/gh/moelody/live2d-models@latest/model_list_fairy.json # 看板娘列表，配置后覆盖单个模型，不配置此项请务必配置单个模型
 display:
   superSample: 2 # 模型超采样等级
   width: 200 # canvas的长度
   height: 200 # canvas的高度
   position: right # 模型位置
   hOffset: 30 # 水平偏移
   vOffset: 0 # 垂直偏移
 mobile:
   show: false # 是否在移动设备上显示
   scale: 0.8 # 移动设备上的缩放
 # name:
 #   canvas: 'live2dcanvas' # canvas元素的ID
 #   div: 'live2d-widget' # div元素的ID
 # react:
 #   opacity: 1 # 模型透明度
 # dev:
 #   border: false # 在canvas周围显示边界
 dialog:
   enable: true
   # script:
   ## 新增项如下为css自定义
   ## 默认配置
   # bottom: 90% # 对话框距离模型底部比例
   # hOffset: 20 # 对话框水平偏移量，根据工具栏position方向
   # border: 1px solid rgba(224, 186, 140, .62) # 对话框边框
   # borderDark: 1px solid rgba(6, 6, 6, .3) # 对话框边框（夜见模式 data-theme=dark ）
   # background: rgba(236, 217, 188, .5) # 对话框背景
   # backgroundDark: rgba(18, 18, 18,.7) # 对话框背景（夜见模式 data-theme=dark ）
   ## 博主的配置
   border: 1px solid rgb(255, 255, 255, .5)
   borderDark: 1px solid rgba(6, 6, 6, .3)
   background: var(--card-bg,#fff)
   backgroundDark: var(--card-bg,#121212)
 # 新增小工具栏
 tool:
   enable: true
   ## 如下为css自定义
   ## 默认配置
   # position: left # 工具栏位置，影响对话框hOffset
   # top: 10% # 工具栏距离对话框顶部比例
   # hOffset: 20 # 工具栏相对模型的水平偏移量
   # color: '#7b8c9d' # 工具栏图标颜色
   # colorHover: '#0684bd' # 鼠标悬浮工具栏图标颜色
   ## 博主的配置
   color: var(--light-grey)
   colorHover: '#0684bd'
   ## 小工具栏配置
   # hitokoto: # 一言api
   #   enable: true
   #   param: # 一言api参数
   # plane: true # 小飞机游戏
   # camera: true # 模型照相
   # model: true # 模型切换（存在模型列表时有效）
   # texture: true # 模型皮肤切换（模型配置有多贴图时有效）

单个模型配置要点（model/index.json）

{
 "type": "Live2D Model Setting",
 "name": "air_attack",
 // 多个模型文件随机加载一个
 "model": [
   "model.moc",
   "model2.moc",
   "model3.moc"
 ],
 // 多个贴图（即模型皮肤）配置
 "textures": [
   "textures.1024/texture_00.png",
   "textures.1024/texture_01.png",
   "textures.1024/texture_02.png"
 ]
}

多模型列表配置（model_list.json）

{
   // 根目录下模型路径
   "models": [
       "fairy/air_attack",
       "fairy/airborne",
       "fairy/armor",
       "fairy/command",
       "fairy/fighting",
       "fairy/fortress",
       "fairy/golden",
       "fairy/shield",
       "fairy/target"
   ],
   // 模型加载后显示的信息
   "messages": [
       "轰炸姬登场~（嗨）",
       "我是空降姬哦~（吖）",
       "盾牌姬在这~~（含羞）",
       "这里是指挥姬，收到请回话~！（笑）",
       "干嘛！有事吗？（▼㉨▼メ）",
       "堡垒施工中~~（呼）",
       "看啥~！（嘿嘿）",
       "啦啦~啦啦~啦~",
       "目标已瞄准，准备滑稽（欸）~"
   ]
}

触发文件配置（model_tips.json）

{
 // 默认触发控件
 "waifu": {
   "console_open_msg": ["哈哈，你打开了控制台，是想要看看我的秘密吗？"],
   "copy_message": ["你都复制了些什么呀，转载要记得加上出处哦"],
   "visible_message": ["哇，你终于回来了～"],
   "screenshot_message": ["照好了嘛，是不是很可爱呢？"],
   "hidden_message": ["愿你有一天能与重要的人重逢。"],
   "load_textures_message": ["我还没有其他衣服呢!", "我的新衣服好看嘛?"],
   "load_model_message": ["请多指教，ご主人様！"],
   "idle_message": ["好久不见，日子过得好快呢……", "大坏蛋！你都多久没理人家了呀，嘤嘤嘤～", "嗨～快来逗我玩吧！", "拿小拳拳锤你胸口！", "记得把小家加入 Adblock 白名单哦！"],
   "hour_tips": {
     "t5-7": ["早上好！一日之计在于晨，美好的一天就要开始了"],
     "t7-11": ["上午好！工作顺利嘛，不要久坐，多起来走动走动哦！"],
     "t11-14": ["中午了，工作了一个上午，现在是午餐时间！"],
     "t14-17": ["午后很容易犯困呢，今天的运动目标完成了吗？"],
     "t17-19": ["傍晚了！窗外夕阳的景色很美丽呢，最美不过夕阳红~"],
     "t19-21": ["晚上好，今天过得怎么样？"],
     "t21-23": ["已经这么晚了呀，早点休息吧，晚安~"],
     "t23-5": ["你是夜猫子呀？这么晚还不睡觉，明天起的来嘛"],
     "default": ["嗨~ 快来逗我玩吧！"]
   },
   "referrer_message": {
     "localhost": ["欢迎阅读<span style=\"color:#0099cc;\">『", "』</span>", " - "],
     "baidu": ["Hello! 来自 百度搜索 的朋友<br>你是搜索 <span style=\"color:#0099cc;\">", "</span> 找到的我吗？"],
     "so": ["Hello! 来自 360搜索 的朋友<br>你是搜索 <span style=\"color:#0099cc;\">", "</span> 找到的我吗？"],
     "google": ["Hello! 来自 谷歌搜索 的朋友<br>欢迎阅读<span style=\"color:#0099cc;\">『", "』</span>", " - "],
     "default": ["Hello! 来自 <span style=\"color:#0099cc;\">", "</span> 的朋友"],
     "none": ["欢迎阅读<span style=\"color:#0099cc;\">『", "』</span>", " - "]
   }
 },
 // 鼠标悬浮配置 selector为css选择器，text随机显示数组里的一条信息
 "mouseover": [{
   "selector": "#live2d-widget #live2dcanvas",
   "text": ["干嘛呢你，快把手拿开～～", "鼠…鼠标放错地方了！", "你要干嘛呀？", "喵喵喵？", "怕怕(ノ≧∇≦)ノ", "非礼呀！救命！", "这样的话，只能使用武力了！", "我要生气了哦", "不要动手动脚的！", "真…真的是不知羞耻！", "Hentai！"]
 }, {
   "selector": "#live2d-widget-tool .fa-comment",
   "text": ["猜猜我要说些什么？", "我从青蛙王子那里听到了不少人生经验。"]
 }, {
   "selector": "#live2d-widget-tool .fa-paper-plane",
   "text": ["要不要来玩飞机大战？", "这个按钮上写着「不要点击」。", "怎么，你想来和我玩个游戏？", "听说这样可以蹦迪！"]
 }, {
   "selector": "#live2d-widget-tool .fa-user-circle",
   "text": ["你是不是不爱人家了呀，呜呜呜～", "要见见我的姐姐嘛？", "想要看我妹妹嘛？", "要切换看板娘吗？"]
 }, {
   "selector": "#live2d-widget-tool .fa-street-view",
   "text": ["喜欢换装 PLAY 吗？", "这次要扮演什么呢？", "变装！", "让我们看看接下来会发生什么！"]
 }, {
   "selector": "#live2d-widget-tool .fa-camera-retro",
   "text": ["你要给我拍照呀？一二三～茄子～", "要不，我们来合影吧！", "保持微笑就好了～"]
 }, {
   "selector": "#live2d-widget-tool .fa-info-circle",
   "text": ["想要知道更多关于我的事么？", "这里记录着我搬家的历史呢。", "你想深入了解我什么呢？"]
 }, {
   "selector": "#live2d-widget-tool .fa-times",
   "text": ["到了要说再见的时候了吗？", "呜呜 QAQ 后会有期……", "不要抛弃我呀……", "我们，还能再见面吗……", "哼，你会后悔的！"]
 }],
 // 鼠标点击配置 selector为css选择器，text随机显示数组里的一条信息
 "click": [{
   "selector": "#live2d-widget #live2dcanvas",
   "text": ["是…是不小心碰到了吧…", "萝莉控是什么呀？", "你看到我的小熊了吗？", "再摸的话我可要报警了！⌇●﹏●⌇", "110 吗，这里有个变态一直在摸我(ó﹏ò｡)", "不要摸我了，我会告诉老婆来打你的！", "干嘛动我呀！小心我咬你！", "别摸我，有什么好摸的！"]
 }, {
   "selector": "#veditor",
   "text": ["要吐槽些什么呢？", "一定要认真填写喵～", "有什么想说的吗？"]
 }],
 // 时间触发控件 date日期，text随机显示数组里的一条信息
 "seasons": [{
   "date": "01/01",
   "text": ["<span style=\"color:#0099cc;\">元旦</span>了呢，新的一年又开始了，今年是{year}年~"]
 }, {
   "date": "02/14",
   "text": ["又是一年<span style=\"color:#0099cc;\">情人节</span>，{year}年找到对象了嘛~"]
 }, {
   "date": "03/08",
   "text": ["今天是<span style=\"color:#0099cc;\">妇女节</span>！"]
 }, {
   "date": "03/12",
   "text": ["今天是<span style=\"color:#0099cc;\">植树节</span>，要保护环境呀"]
 }, {
   "date": "04/01",
   "text": ["悄悄告诉你一个秘密~<span style=\"background-color:#34495e;\">今天是愚人节，不要被骗了哦~</span>"]
 }, {
   "date": "05/01",
   "text": ["今天是<span style=\"color:#0099cc;\">五一劳动节</span>，计划好假期去哪里了吗~"]
 }, {
   "date": "06/01",
   "text": ["<span style=\"color:#0099cc;\">儿童节</span>了呢，快活的时光总是短暂，要是永远长不大该多好啊…"]
 }, {
   "date": "09/03",
   "text": ["<span style=\"color:#0099cc;\">中国人民抗日战争胜利纪念日</span>，铭记历史、缅怀先烈、珍爱和平、开创未来。"]
 }, {
   "date": "09/10",
   "text": ["<span style=\"color:#0099cc;\">教师节</span>，在学校要给老师问声好呀~"]
 }, {
   "date": "10/01",
   "text": ["<span style=\"color:#0099cc;\">国庆节</span>，新中国已经成立69年了呢"]
 }, {
   "date": "11/05-11/12",
   "text": ["今年的<span style=\"color:#0099cc;\">双十一</span>是和谁一起过的呢~"]
 }, {
   "date": "12/20-12/31",
   "text": ["这几天是<span style=\"color:#0099cc;\">圣诞节</span>，主人肯定又去剁手买买买了~"]
 }]
}