hexo从零开始之butterfly主题美化(Ⅱ)

阅读此文章,建议先阅读前面的文章:
hexo从零开始之butterfly主题美化(Ⅰ)

更新记录

点击查看更新记录

更新主题记录

2022-11-21 持续优化中

2022-11-17 持续优化中

2022-11-17 美化主题

添加哔哩哔哩番剧页面插件

查看详情

npm install hexo-bilibili-bangumi --save
# 如果是老版本就用下面更新依赖
npm install hexo-bilibili-bangumi --update --save

修改站点配置文件_confing.yml

bangumi:
  enable: true  #是否启用
  vmid: 156909445 #哔哩哔哩的vmid
  title: '生命不息，追番不止。' # 该页面的标题
  quote: 'Where there is life, there is life.' #写在页面开头的一段话，支持 html 语法
  show: 1 #0: 想看 , 1: 在看 , 2: 看过，默认为 1
  loading: '/img/bangumi-loading.gif' #图片加载完成前的 loading 图片

# 然后在自己想放的目录下配置
menu:
  番剧: /bangumis/ || fas fa-tv

在根目录下执行如下命令,生成一个文件

hexo new page bangumis

找到项目目录/source/bangumis/index.md这个文件,在文件开头位置修改type: bangumis

---
title: bangumis
date: xxxx-xx-xx xx:xx:xx
type: "bangumis"
---

防止请求次数过多插件不再自动获取番剧数据，所以请根据自己的需要在hexo generate或hexo deploy之前
更新番剧:使用hexo bangumi -u命令。
删除番剧:使用hexo bangumi -d命令

先登录哔哩哔哩后
点击后面的链接https://space.bilibili.com/xxxxxxxxx 其中xxxxxxx就是你的uid

懒加载问题，此插件懒加载可能与你主题的懒加载存在冲突，以下为几种解决方法：

1.全站关闭懒加载，此插件启用/不启用懒加载均可正常运行；
2.如果主题提供单独页面的懒加载配置参数，可在插件配置的extra_option中配置为关。
3.[建议]关闭此插件的懒加载，并按照主题的懒加载图片格式配置srcValue和lazyloadAttrName，例butterfly主题：

bangumi:
  enable: true
  ...
  lazyload: false
  srcValue: '__image__'
  ...

更多设置请看

侧边栏增加Pivix日榜Top50框

查看配置详情

pixiv的图片效果

1.在项目目录/themes/layout/includes/widget文件新建一个card_pixiv.pug文件,代码如下:

.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/" loading="lazy" data-rocket-lazyload="fitvidscompatible" data-ll-status="loaded" frameborder="0"  style="width:99%;height:380px;margin:0;")

src:这个路径是用了超能小紫提供的服务,自动塔建入口
data-ll-status: loaded //加载
loading: lazy //加载方法懒加载
style: 定义这个iframe引入标签的大小

2.在项目目录/themes/layout/includes/widget/index.pug中,在你想要的位置加入如下代码
if theme.aside.card_pixiv
!=partial('includes/widget/card_pixiv', {}, {cache:true})
我加上的地方
3.在项目目录/themes/languages/zh-CN.yml文件,找到card_announcement: 公告,在下面添加一行 $\color{red}{card\_pixiv: Pixiv日榜Top50 }$ (后面的文字可以自定义,是上面标题名字)

4.编辑主题配置文件_config.butterfly.yml,搜索关键词aside

card_webinfo:
  enable: true
  post_count: true
  last_push_date: true
  sort_order: # Don't modify the setting unless you know how it works
card_pixiv: true  #将它打开 不需要了就设置为false

添加豆瓣插件 (老版本了)

如果出现了豆瓣爬取数据失败问题,建议安装较低的node版本(v12.18.0)
timeout: 爬取数据的超时时间，默认是 10000ms ,如果在使用时发现报了超时的错(ETIMEOUT)可以把这个数据设置的大一点

前往博客根目录,执行如下命令

npm install hexo-douban --save

在站点配置文件_config.yml配置如下

douban:
  user: 163733687
  builtin: false
  book:
    title: '腹有诗书气自华'
    quote: 'One who is filled with knowledge always behaves with elegance.'
  movie:
    title: '梦想与现实的碰撞'
    quote: 'The collision between dream and reality.'
  game:
    title: '诅咒中闪烁泪光，倾诉霜之哀伤。'
    quote: 'Tears flicker in the curse and pour out the sorrow of frost.'
  timeout: 10000

user: 你的豆瓣ID。打开豆瓣，登入账户，然后在右上角点击 ”个人主页“，这时候地址栏的URL大概是这样：https://www.douban.com/people/xxxxxx/ ，其中的”xxxxxx”就是你的个人ID了。
builtin: 是否将生成页面的功能嵌入hexo s和hexo g中，默认是false,另一可选项为true(1.x.x版本新增配置项)。
如果配置了builtin参数为true，那么除了可以使用hexo douban命令之外，hexo g或hexo s也内嵌了生成页面的功能。
title: 该页面的标题.
quote: 写在页面开头的一段话,支持html语法.
timeout: 爬取数据的超时时间，默认是 10000ms ,如果在使用时发现报了超时的错(ETIMEOUT)可以把这个数据设置的大一点。
注意：如果只想显示某一个页面(比如movie)，那就把其他的配置项注释掉即可。

在主题配置文件_config.butterfly.yml中配置如下

# 导航目录配置
menu: 
  首页: / || fas fa-home
  导航||fas fa-list: 
    标签: /tags/ || fas fa-tags
    归档: /archives/ || fas fa-archive
    分类: /categories/ || fas fa-folder-open
  娱乐||fas fa-gamepad:
    Music: /music/ || fas fa-music
    Movie: /movies/ || fas fa-video
    Books: /books/ || fas fa-book
    # Games: /games/ || fas fa-gamepad
  # List||fas fa-anchor:
  友链: /link/ || fa fa-link
  关于: /about/ || fas fa-heart

# 如果你有使用hexo-douban，可配置這個
douban:
   meta: true
   movies_img: https://fastly.jsdelivr.net/gh/jerryc127/butterfly_cdn@2.1.0/top_img/movie.jpg
   books_img: https://fastly.jsdelivr.net/npm/blog-gallery@1.0.0/1/20200206161657.webp
#   games_img:

如果在站点配置文件配置了builtin:true那么就执行如下命令

hexo douban

等待命令执行完毕，出现下图所示内容即为成功
执行成功图片

音乐插件的插入

参考链接:Butterfly添加全局吸底Aplayer教程

1 如果只想放页面不用插件

点击查看不用插件详情

muiscIdImg

1.1首先生成music的md文件

hexo new page music

1.2然后修改主题文件夹_config.butterfly.yml

# Inject the css and script (aplayer/meting) 申请注入
aplayerInject:
  enable: true
  per_page: true

1.3在生成的music.md文件中写下如下代码

<!-- data-id:改成自己的音乐列表id-->
<div class="aplayer" data-id="7752613799" data-server="tencent" data-type="artist" data-mutex="true" data-preload="auto" data-theme="#3F51B5"></div>

1.4怎么查看自己本地id查看[2 如果只想放页面用插件]

2 如果只想放页面用插件

点击查看用插件详情

muiscIdImg

2.1 在根目录下,执行如下命令

npm i hexo-tag-aplayer --save

2.2 在站点配置文件_config.yml配置如下,为了防止插入重复的资源，需要把 asset_inject 设为false

aplayer:
  meting: true
  asset_inject: false

2.3 然后修改主题文件夹_config.butterfly.yml

# 修改的第一部分
# Inject the css and script (aplayer/meting) 申请注入
aplayerInject:
  enable: true
  per_page: true

# 修改的第二部分
inject:
  head:
  bottom:
    - <div class="aplayer no-destroy" data-id="7752613799" data-server="netease" data-type="playlist" data-fixed="true" data-mini="true" data-listFolded="false" data-order="random" data-lrctype="1" data-preload="none" data-autoplay="true" muted></div>
# data-id改成自己的

2.4 怎么查看自己本地id查看,我这里只是简单举例网易云音乐

先打开浏览器搜索网易云,进入官网然后登录(没有的自己注册一个)
找到自己的歌单打开控制台可以按F12,或者快捷键ctrl+shift+I
用鼠标左键点击元素选择器快捷键ctrl+shift+C效果图如下
将鼠标移动到对应音乐列表效果图如下,马斯克部分的数字就是你要填入的meting(注意:一定不要选择 $\color{red}{我的喜欢歌单}$ 否则无法展示)

3 吸附在左下角用插件

点击查看用插件详情

muiscIdImg

3.1 在根目录下,执行如下命令

npm i hexo-tag-aplayer --save

3.2 生成music的md文件

hexo new page music

3.3然后修改主题文件夹_config.butterfly.yml

# Inject the css and script (aplayer/meting) 申请注入
aplayerInject:
  enable: true
  per_page: true

3.4 怎么查看自己本地id查看,我这里只是简单举例网易云音乐

先打开浏览器搜索网易云,进入官网然后登录(没有的自己注册一个)
找到自己的歌单打开控制台可以按F12,或者快捷键ctrl+shift+I
用鼠标左键点击元素选择器快捷键ctrl+shift+C效果图如下
将鼠标移动到对应音乐列表效果图如下,马斯克部分的数字就是你要填入的meting。(注意:一定不要选择 $\color{red}{我的喜欢歌单}$ 否则无法展示)

option	defalut	description
data-id	require	song id / playlist id / album id / search keyword
data-server	require	music platform: netease, tencent, kugou, xiami, baidu
data-type	require	song, playlist, album, search, artist
data-fixed	false	enable fixed mode
data-mini	false	enable mini mode
data-autoplay	false	audio autoplay
data-theme	#2980b9	main color
data-loop	all	player loop play, values: ‘all’, ‘one’, ‘none’
data-order	list	player play order, values: ‘list’, ‘random’
data-preload	auto	values: ‘none’, ‘metadata’, ‘auto’
data-volume	0.7	default volume, notice that player will remember user setting, default volume will not work after user set volume themselves
data-mutex	true	prevent to play multiple player at the same time, pause other players when this player start play
data-lrctype	0	lyric type
data-listfolded	false	indicate whether list should folded at first
data-listmaxheight	340px	list max height
data-storagename	metingjs	localStorage key that store player setting

require 代表着這些參數是必須要使用的，其它的參數則可以根據自己需要配置。
配置全局吸底，data-fixed 和 data-mini 也必須配置，配置為 true
如果使用 Pjax，則在 class 裏需添加 no-destroy，這樣防止切換頁面時 Aplayer 被銷毀
最後，如果你想切換頁面時，音樂不會中斷。請把主題配置文件的 pjax 設為 true

点击查看效果

footer♥跳img

点击查看详情

修改根目录/themes/butterfly/layout/includes/footer.pug文件,内容如下

// 第一部分需要修改的原来的代码
&copy;${theme.footer.owner.since} - ${nowYear} By ${config.author}
// 改成
&copy;${theme.footer.owner.since} - ${nowYear + ' '} <i id="heartbeat" class="fa fas fa-heartbeat"></i> ${config.author}
// 第二部分需要修改的原来的代码
&copy;${nowYear} By ${config.author} 
//改成
&copy;${nowYear + ' '} <i id="heartbeat" class="fa fas fa-heartbeat"></i> ${config.author}

然后在这个文件的最后添加如下代码 (其实就是在html的head中引入一个样式文件)

<link rel="stylesheet" href="https://fastly.jsdelivr.net/gh/HCLonely/images@master/others/heartbeat.min.css">

参考教程

hexo主题美化-参考唐志远の博客

更新记录

添加哔哩哔哩番剧页面插件

侧边栏增加Pivix日榜Top50框

添加豆瓣插件 (老版本了)

音乐插件的插入

1 如果只想放页面不用插件

2 如果只想放页面用插件

3 吸附在左下角用插件

页面底部footer跳动的心

参考教程