hexo butterfly主题博客

相遇皆是缘分

面向人群：对hexo搭建博客有一定基础的人 (此教程不建议小白或新手直接食用小白不信邪的可以尝试其实并不难)

博主源码分享：蓝奏云下载提取码：Xian qq群 (363509486)

博客演示地址

准备工作

git 和 node 安装并配置 github 注册并配置（略）

小白可看我之前其他主题博客的文档(只需要看第一步与第二步) 和视频（根据自身情况可快进）

测试本地运行情况

下载文件后，并解压，进入MyBlog(big)文件，打开右键打开git

输入下面命令查看 hexo 是否安装

hexo -v

出现一些hexo 的相应信息代码证明你已经安装过了

没有安装的输入下面命令 (可能会有几个报错，不用理会。) 安装完后，可再次 hexo -v 验证一下

1	npm install -g hexo-cli

使用 npm i 或者 npm install 安装依赖环境包

如果安装依赖环境出错，可以参考文档的问题一

最后执行 hexo clean && hexo g && hexo s 启动Hexo本地预览，即可看到效果。

部署github

要部署github至少要先把 _config.butterfly.yml 和 _config.yml 配置了才能部署

方法请移动到文档(第三步，3.1 和 3.2)

配置相应的修改

_config.butterfly.yml 和 _config.yml

ctrl + f 或 crtl + h 搜索 xxxxxxx
有xxxxxxx 的一行（可能是上一行，也可能是下一行），是需要你自己根据自身博客的情况进行修改的

修改windows

【有看过我以前视频的小伙伴，你们的windows已经修改过了，将你们自己的windows文件复制粘贴覆盖掉原有的windows文件即可】

请移动到文档（查看第三步的 3.5 修改windows）

快捷导航页面个性化

【有看过我以前视频的小伙伴，你们的导航页面已经修改过了，将你们自己的tools文件复制粘贴覆盖掉原有的tools文件即可】

请移动到文档（查看第三步的 3.6 快捷导航页面个性化）

音乐页面

建议用网易和 qq的

修改的文件路径 MyBlog\source\List\music\index.md

【简单方法】

去网易官网发现音乐-- 歌单-- 选择一个自己喜欢的歌单–点击生成外链播放器

复制下面的HTML 代码修改下面相应的代码内容（其它不变）

1	width=100% height=800

粘贴到index.md

【复杂方法】

请移动到官方文档

视频页面

【博主已经没有在用了，改为 11.电影】

修改的文件路径 MyBlog\source\List\movies\index.md

去 b站官网找一个喜欢的视频–点击分享–嵌入代码

复制下面的HTML 代码修改下面相应的代码内容（其它不变）

1	width=100% height=700

粘贴到 index.md

说说如何设置

前置要求，参考 Artitalk 文档 - LeanCloud 的相关准备，必须要配置好 LeanCloud 再往下看

在_config.butterfly.yml 下找到

artitalk:
  enable: true
  appId:
  appKey:
  path:
  js:
  option:
  front_matter:
    aside: false # 关闭侧边栏
    comments: false # 关闭评论

参数	说明
appId	【必须】LeanCloud 创建应用的 AppID
appKey	【必须】LeanCloud 创建应用的 AppKEY
path	【可选】Artitalk 的路径名称（默认为 `artitalk`，生成的页面为 artitalk/index.html）
js	【可选】更換 Artitalk 的 js CDN（默认为 `https://cdn.jsdelivr.net/npm/artitalk`）
option	【可选】Artitalk 需要的额外配置
front_matter	【可选】Artitalk 页面的 front_matter 配置

【appId 和 appKey 在设置–应用凭证里面】

留言板

LeanCloud 注册（国际版）

在_config.butterfly.yml 下找到

valine:
  appId:   # leancloud application app id            
  appKey:    # leancloud application app key         
  pageSize: 10 # comment list page size
  avatar: monsterid # gravatar style https://valine.js.org/#/avatar
  lang: zh-CN # i18n: zh-CN/zh-TW/en/ja
  placeholder: 畅所欲言！ # valine comment input placeholder (like: Please leave your footprints)
  guest_info: nick,mail,link # valine comment header info (nick/mail/link)
  recordIP: false # Record reviewer IP
  serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
  bg: # valine background
  emojiCDN: # emoji CDN
  enableQQ: false # enable the Nickname box to automatically get QQ Nickname and QQ Avatar
  requiredFields: nick,mail # required fields (nick/mail)
  visitor: false
  option:

参数	说明
appId	【必须】LeanCloud 创建应用的 AppID
appKey	【必须】LeanCloud 创建应用的 AppKEY

然后点击设置–安全中心–Web 安全域名 --增加自己的域名

【appId 和 appKey 在设置–应用凭证里面】

在线聊天

【daovoice】

打开daovoice和注册帐号

找到你的app id

在_config.butterfly.yml 下找到

1
2
3

daovoice:
  enable: true
  app_id: xxxxx

【crisp】

打开crisp并註册帐号

找到需要的网站ID

在_config.butterfly.yml 下找到

1
2
3

crisp:
  enable: true
  website_id: xxxxxxxx

【tidio】

博主在用

打开tidio并註册帐号

在_config.butterfly.yml 下找到

# tidio
# https://www.tidio.com/
tidio:
  enable: true
  public_key: xxxxxxxxxxxxxxxxx

【换图标】

代替在线聊天的默认图标

在_config.butterfly.yml 下找到

# Chat Button [recommend]
# It will create a button in the bottom right corner of website, and hide the origin button
chat_btn: true

# The origin chat button is displayed when scrolling up, and the button is hidden when scrolling down
chat_hide_show: true

宠物模型

在_config.yml 下找到

live2d:   # xxxxxxxxx
  enable: true
  scriptFrom: local
  model:
    # 这是白猫的模型
    use: live2d-widget-model-tororo
  display:
    # 设置模型的位置
    position: left
    width: 150
    height: 300
  mobile:
    show: false   # 手机显示开关，建议关闭

模型宠物命令：

1	npm install --save hexo-helper-live2d

CSDN 执念各种模型预览

1	npm install live2d-widget-model-tororo 对应的模型命令

电影

在_config.butterfly.yml 电影修改

清单||fas fa-list:        #fa-heartbeat 爱心
    音乐: /List/music/ || fa fa-music
    相册: /List/gallery/ || fa fa-image
    电影: /movies/ || fas fa-video

安装

1	npm install hexo-butterfly-douban --save

配置（复制到 _config.yml 文件下）

douban:
  user: xxxxx
  builtin: false
  movie:
    title: 'This is my movie title'
    quote: 'This is my movie quote'
    meta: true
    comments: true
    top_img: https://cccccc.png
    aside: true
    path: movies
    limit:
  timeout: 10000

參數	解釋
user	你的豆瓣ID.打開豆瓣，登入賬户，然後在右上角點擊 “個人主頁” ，這時候地址欄的URL大概是這樣：“https://www.douban.com/people/xxxxxx/” ，其中的"xxxxxx"就是你的個人ID了
builtin	是否將生成頁面的功能嵌入`hexo s`和`hexo g`中，默認是`false`,另一可選項為`true`(1.x.x版本新增配置項)
title	該頁面的標題
quote	寫在頁面開頭的一段話,支持 html 語法.
timeout	【可選】爬取數據的超時時間，默認是 10000ms ,如果在使用時發現報了超時的錯(ETIMEOUT)可以把這個數據設置的大一點
meta	【可選】插入 `<meta name="referrer" content="no-referrer">` 到頁面，可解決部分瀏覽器無法顯示豆瓣圖片的問題（會導致一些插件出錯，例如不蒜子計數器。）
comments	【可選】是否顯示評論
top_img	【可選】是否顯示頂部圖
aside	【可選】是否顯示側邊欄
path	【可選】生成的網址 movie 頁面默認為 `//yourblog/movies` book 頁面默認為 `//yourblog/books` game 頁面默認為 ``//yourblog/games`
limit	【可選】限制爬取的頁數

博主配置：

# 电影
douban:
  user: 238752499   # 个人ID
  builtin: true
  movie:
    title: '个人频道'
    quote: '记录下那一刻的美好'
    meta: true
    comments: false
    top_img: https://npm.elemecdn.com/xianqi-hexo/imgg/50.webp
    aside: true
    path: movies
    limit:
  timeout: 10000