Hexo主题(Next)美化、配置、优化这一篇就够了

前言

最近一段时间把我的博客重新美化了一番,今天就对这些工作做一个总结,并把方法归纳出来分享给大家,希望大家也能把自己的博客做成自己想要的样子,大概工作如下:

  • 实时更新Next主题
  • 添加可爱的小猫挂件
  • 添加Chat聊天挂件
  • 添加分享挂件
  • 添加音乐界面
  • 添加Valine评论邮件通知
  • 添加相册界面

这些美化功能大部分只需要你花费半个小时左右就可以搞定了,我们马上开始吧!

开始工作

实时更新Next主题

我们的博客工程的themes目录下往往是另一个小工程(主题),所以这个要使用到git的子模块了,这样就可以实时从Next主题的仓库拉取最新代码了。

将Hexo仓库变为子模块clone到工程

1
git submodule add git@github.com:theme-next/hexo-theme-next.git hexo

现在你就可以在themes目录下看到hexo工程,执行git status可以看到:

1
2
3
4
5
6
7
$ git status
# On branch master
# Changes to be committed:
# (use "git reset HEAD <file>..." to unstage)
#
# new file: .gitmodules
# new file: hexo

然后你会注意到工程中多了一个.gitmodules文件,这是一个配置文件,保存了项目 URL 和你拉取到的本地子目录。

1
2
3
4
$ cat .gitmodules
[submodule "next"]
path = next
url = git@github.com:theme-next/hexo-theme-next.git

添加可爱的小猫挂件

这个是使用了一个live2d的开源hexo插件库,查看项目

安装方法很简单:

第一步:安装模块

1
npm install --save hexo-helper-live2d

第二步:配置hext主题的_config.yml文件

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
live2d:
enable: true
scriptFrom: local #注意:我这里使用的是local
pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
pluginModelPath: assets/ # 模型文件相对与插件根目录路径
# scriptFrom: jsdelivr # jsdelivr CDN
# scriptFrom: unpkg # unpkg CDN
# scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url
tagMode: true # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
debug: false # 调试, 是否在控制台输出日志
model:
use: hijiki # npm-module package name
# use: hijiki # 博客根目录/live2d_models/ 下的目录名
# use: ./wives/hijiki # 相对于博客根目录的路径
# use: https://cdn.jsdelivr.net/npm/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json # 你的自定义 url
scale: 1
hHeadPos: 0.5
vHeadPos: 0.5
display:
superSample: 2
width: 100
height: 100
position: left
hOffset: 30
vOffset: 20
mobile:
show: false
scale: 0.05
react:
opacityDefault: 0.6
opacityOnHover: 0.2

第三步:安装模型

在您博客根目录下创建一个 live2d_models 文件夹,在此文件夹内新建一个子文件夹hijiki,在此文件夹内放入Live2D模型。

模型下载地址,点这里跳转

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
live2d_models
└─hijiki
│ .gitignore
│ package-lock.json
│ package.json

└─assets
│ hijiki.model.json
│ hijiki.pose.json

├─moc
│ │ hijiki.moc
│ │
│ └─hijiki.2048
│ texture_00.png

└─mtn
00_idle.mtn
01.mtn
02.mtn
03.mtn
04.mtn
05.mtn
06.mtn
07.mtn
08.mtn

第四步:配置live2d标签

这一步如果你上面配置的tagMode: false则可以跳过和忽略,如果将设置为tagMode: true则需要在主题目录themes\next\layout_custom\header.swig中添加自定义判断,代码如下:

1
2
3
{% if is_home() || page.live2d %}
{{ live2d() }}
{% endif %}

配置后你就可以在需要显示的页面上添加live2d:true标签:

1
2
3
4
5
---
title:
date: 2017-11-10 17:54:02
live2d: true
---

添加Chat聊天挂件

在最新版Next v7.1.0版本中有支持chatratidio两个实时聊天插件,本博客使用的是后者。

去tidio注册一个账号,然后获取key即可,接下来要做的就是设置显示样式了

1
2
3
tidio:
enable: true
key: 10xxxrze18xnnn9khduyyyym5xmjddss

tidio设置界面

添加分享挂件

分享挂件比较好用的就两个,刚开始我使用的是needmoreshare2,它支持国内的各大平台(例如微信、QQ、微博、印象笔记等),样子扁平化,配置也很简单,但是为了适应国际范,我决定将分享挂件换成更酷的likely,个人认为分享挂件只不过是一个装饰品而已,没有几个人会分享你的博客,既然这样当然选择漂亮好看的了。

likely分享挂件

1
2
3
4
5
6
7
8
9
10
11
12
13
likely:
enable: true
look: normal # available values: normal, light, small, big
networks:
twitter: Tweet
facebook: Share
linkedin: Link
gplus: Plus
vkontakte: Share
odnoklassniki: Class
telegram: Send
whatsapp: Send
pinterest: Pin

这个挂件在hexo内支持四种,分别是:浅色底中号、浅色底小号、浅色底大号、深色底中号。

添加音乐界面

我的音乐界面使用的是由mePlayer提供的一个开源音乐插件,我略微修改了一下在hexo中的展示样式,另外添加了一个歌曲列表,循环播放,顺序播放,随机播放功能。

请参考并下载源码修改,点击查看源码

音乐播放器

这个音乐列表,我将音乐相关资源配置到了一个json文件中,然后通过javascript加载json文件内容显示到页面上。

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
var lastIndex;
var musicJsons;
$.getJSON("../demo/music/music.json", function (data) {
musicJsons = data;
for(var i = 0; i < musicJsons.length; i++){
musicJsons[i].loop = false;
var $li = $('<li><span>' + musicJsons[i].title + '</span> ---- [' + musicJsons[i].author + ']</li>')
$li.attr('id', i);
$li.css('list-style-type', 'none');
$li.css('height', '40px');
$li.css('color', '#888888');
$li.click(function(event){
playMusic(musicJsons[this.id]);
$('#musiclist #' +lastIndex).css('color', '#888888');
$(this).css('color','#FF6932');
lastIndex = this.id;
mePlayerMethod.play();
});
var $musiclist = $('#musiclist');
$musiclist.append($li);
}
var $loopbutton = $('#musicarea #music-loop');
$loopbutton.text('列表循环')
$loopbutton.click(function(){
if(window.Notification && Notification.permission !== "denied" && Notification.permission !== "granted") {
Notification.requestPermission(function(status) { });
}
if('单曲循环' == $(this).text()){
$(this).text('列表循环')
for(var j = 0; j < musicJsons.length; j++){
musicJsons[j].loop = true;
}
}else{
if('列表循环' == $(this).text()){
$(this).text('随机播放');
}else{
$(this).text('单曲循环');
}
for(var j = 0; j < musicJsons.length; j++){
musicJsons[j].loop = false;
}
}
})
var index = Math.floor(Math.random()*musicJsons.length);
$('#musiclist #' + index).css('color','#FF6932');
lastIndex = index;
playMusic(musicJsons[index]);
//document.querySelector('button').addEventListener('click', function() {
// mePlayerMethod.toggleTheme()
//})
});

function playMusic(data, playendcallback){
document.title = data.title + '--' + data.author;
mePlayer({
theme: 'default',
music: data,
target: '.music',
autoplay: false
}, function(){
if('单曲循环' == $('#musicarea #loop').text()){
playMusic(musicJsons[lastIndex]);
} else {
var index;
if('列表循环' == $('#musicarea #loop').text()){
index = lastIndex+1;
if(index >= musicJsons.length){
index = 0;
}
}else{
index = Math.floor(Math.random()*musicJsons.length);
}
playMusic(musicJsons[index]);
$('#musiclist #' +lastIndex).css('color', '#888888');
$('#musiclist #' +index).css('color','#FF6932');
lastIndex = index;
}
mePlayerMethod.play();
});
//$('#musiclrc').html($(lyricArea).html());
//window.setTimeout(mePlayerMethod.play, 500);
}

添加Valine邮件通知

项目地址:https://github.com/zhaojun1998/Valine-Admin

请参考文章:《Hexo 优化 — 支持邮件通知的评论 Valine 增强版》

简要步骤:

第一步:点击 云引擎 -> 设置 填写代码库地址(https://github.com/zhaojun1998/Valine-Admin)并保存。
第二步:切换到部署标签页,分支使用 master,点击部署即可。
第三步:点击云引擎的设置页,设置如下信息。

环境变量说明
SITE_NAME网站名称
SITE_URL网站地址, 最后不要加 /
SMTP_USERSMTP 服务用户名,一般为邮箱地址
SMTP_PASSSMTP 密码,一般为授权码,而不是邮箱的登陆密码,请自行查询对应邮件服务商的获取方式
SMTP_SERVICE邮件服务提供商,支持 QQ、163、126、Gmail、”Yahoo”、…… ,全部支持请参考 : Nodemailer Supported services
SENDER_NAME寄件人名称

我使用的是我的163邮箱,在 设置->常规设置->客户端授权密码 中设置开启授权密码(也就是上面的SMTP_PASS)

开启163邮箱授权密码

添加相册界面

相册功能是这几个里面最最简单的,你只需要如下配置即可:

1
2
3
4
5
6
7
---
layout: post
date: 2019-02-01 09:05:00
photos:
- /images/photo/thumb/image1.jpg
- /images/photo/thumb/image2.jpg
- /images/photo/thumb/image3.jpg

这个时候最后打开_config.yml中的fancybox: truelazyload: true,这样你就可以愉快的浏览相册了,其实这个相册界面展示的并不是很完美,但是目前对于我来说已经够用了,也就不折腾了,你可以尝试对相册分类并做成很多相册集。

评论

Ajax Android AndroidStudio Animation Anroid Studio AppBarLayout Babel Banner Buffer Bulma ByteBuffer C++ C11 C89 C99 CDN CMYK COM1 COM2 CSS Camera Raw, 直方图 Chrome Class ContentProvider CoordinatorLayout C语言 DML DOM Dagger Dagger2 Darktable Demo Document DownloadManage ES2015 ESLint Element Error Exception Extensions File FileProvider Flow Fresco GCC Git GitHub GitLab Gradle Groovy HTML5 Handler HandlerThread Hexo Hybrid I/O IDEA IO ImageMagick IntelliJ Intellij Interpolator JCenter JNI JS Java JavaScript JsBridge Kotlin Lab Lambda Lifecycle Lint Linux Looper MQTT MVC MVP Maven MessageQueue Modbus Momentum MySQL NDK NIO NexT Next Nodejs ObjectAnimator Oracle VM Permission PhotoShop Physics Python RGB RS-232 RTU Remote-SSH Retrofit Runnable RxAndroid RxJava SE0 SSH Spring SpringBoot Statubar Style Task Theme Thread Tkinter UI UIKit UML VM virtualBox VS Code VUE ValueAnimator ViewPropertyAnimator Vue Vue.js Web Web前端 Workbench api apk bookmark by关键字 cli compileOnly computed css c语言 databases demo hexo hotfix html iOS icarus implementation init jQuery javascript launchModel logo merge methods mvp offset photos pug query rxjava2 scss servlet shell svg tkinter tomcat transition unicode utf-8 vector virtual box vscode watch webpack 七牛 下载 中介者模式 串口 临潼石榴 主题 书签 事件 享元模式 仓库 代理模式 位运算 依赖注入 修改,tables 光和色 内存 内核 内部分享 函数 函数式编程 分支 分析 创建 删除 动画 单例模式 压缩图片 发布 可空性 合并 同向性 后期 启动模式 命令 命令模式 响应式 响应式编程 图层 图床 图片压缩 图片处理 图片轮播 地球 域名 基础 增加 备忘录模式 外观模式 多线程 大爆炸 天气APP 太白山 头文件 奇点 字符串 字符集 存储引擎 宇宙 宏定义 实践 属性 属性动画 岐山擀面皮 岐山肉臊子 岐山香醋 工具 工厂模式 年终总结 开发技巧 异常 弱引用 恒星 打包 技巧 指令 指针 插件 插值 摄影 操作系统 攻略 故事 数据库 数据类型 数组 文件 新功能 旅行 旋转木马 时序图 时空 时间简史 曲线 杂谈 权限 枚举 架构 查询 标准库 标签选择器 样式 核心 框架 案例 桥接模式 检测工具 模块化 模板 模板引擎 模板方法模式 油泼辣子 泛型 洛川苹果 浅色状态栏 渲染 源码 源码分析 瀑布流 热修复 版本 版本控制 状态栏 状态模式 生活 留言板 相册 相对论 眉县猕猴桃 知识点 码云 磁盘 科学 笔记 策略模式 类图 系统,发行版, GNU 索引 组件 组合模式 绑定 结构 结构体 编码 网易云信 网格布局 网站广播 网站通知 网络 美化 联合 脚手架 膨胀的宇宙 自定义 自定义View 自定义插件 蒙版 虚拟 虚拟机 补码 补齐 表单 表达式 装饰模式 西安 观察者模式 规范 视图 视频 解耦器模式 设计 设计原则 设计模式 访问者模式 语法 责任链模式 贪吃蛇 转换 软件工程 软引用 运算符 迭代子模式 适配器模式 选择器 通信 通道 配置 链表 锐化 错误 键盘 闭包 降噪 陕西地方特产 面向对象 项目优化 项目构建 黑洞
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×