hexo+sakura主题美化合集

文章目录

一.简介
二.主题基本修改
三.添加通讯以及美化背景
四.添加2D板娘
- 1.通过core-js安装
- 2.直接修改文件安装
五.设置代码块高亮
六.搜索功能无法使用
七.总结

一.简介

我们搭建了自己的博客后，肯定需要美化，打造属于自己的个性博客，但是百度上面好多大神发的教程比较散，我尝试了以后汇总了一下分享给大家

主题基本修改
添加通讯以及美化背景
添加2d板娘

二.主题基本修改

主题基本的修改我给大家推荐的是 yremp大神的这篇文章

包含的修改项

顶部站点名字
顶部导航栏
头像
社交栏
顶部图片和效果
通知栏
startdash
Discovery
文章封面和内容
归档子页面
清单子页面
友情链接相关配置
左下角播放器
切换背景
评论不在白名单问题

大家可以根据自己的需求简单的修改

三.添加通讯以及美化背景

这块我给大家推荐的是 cungudafa大神的这篇文章

包含的修改项

背景样式的修改(花瓣飘落、文字，爱心，连线，飘动的彩带，鼠标点击爆炸等等)
背景图片的切换，不蒜子网页计数
在线通讯,绑定微信实时提醒

当然如果这满足不了你美化的需求，还可以看看这篇文章，TRHX大神有背景的雪花飘落，背景的代码雨等等

四.添加2D板娘

2d板娘，就是下面图片的效果，下面我给大家两种方法

1.通过core-js安装

这种方式也是最普通的方法，因为我们在搭建博客的时间基本的环境(node.js和hexo)已经搭建好了，所以直接安装 live2d 的插件就好了

开始教程
1.我们执行下面命令安装 live2d 模块，

npm install --save hexo-helper-live2d

案例

但是在我安装的时候，直接就报错了，原因是core-js的版本太低了，无法安装liv2d，所以得升级

我们输入下面命令查看core-js 的版本
npm ls core-js
因为core-js（是专门管理插件的，也就是我们node_modules 的文件夹）它在升级后之前的版本就不能用了

我的之前版本是 core-js@2 所以安装不了，我们可以先卸载，然后在安装新版本
npm uninstall --save core-js@^2 //卸载
npm install --save core-js@^3 //安装

然后我们就可以安装 hexo-helper-live2d 模块了

安装成功后是这样子的

特别注意core-js的使用
如何我们不用这个模块了，不要直接去文件夹自己手动删除，这里会让整个文件系统出错，所有我们需要输入命令

//例如
npm install --save + 模块名称    //安装了该模块
npm uninstall --save + 模块名称  //卸载该模块

2.下载我们的版娘
我们可以使用一下命令

npm install live2d-widget-model-wanko

注意：live2d-widget-model-wanko 为板娘主题的名字，我们可以按照自己的喜好选择

live2d模型仓库
live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16

大家可以在 github下载，但是我建议大家使用命令去安装
模型预览大家可以进入此文章预览对应的板娘

3.在站点配置文件或主题配置文件(_config.yml) 的末尾添加如下内容

# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:enable: true# enable: falsescriptFrom: 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 # 你的自定义 urltagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中debug: false # 调试, 是否在控制台输出日志model:use: live2d-widget-model-wanko # 修改项 npm-module package name # use: wanko # 博客根目录/live2d_models/ 下的目录名# use: ./wives/wanko # 相对于博客根目录的路径# use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定义 urldisplay:position: rightwidth: 150height: 300mobile:show: true # 手机中是否展示

注意
我们需要改的就是use 这个地方，我们下载的那个主题，我们就修改成什么名字，当然在 display 项中也可以修改显示的位置已经大小

2.直接修改文件安装

我们先下载主题包

1.然后解压 live2d-widget文件解压到本地博客目录的themes/sakura/source 下

2.修改项目中的 autoload.js 文件，如下：
将

const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/";

改为

const live2d_path = "/live2d-widget/";

3.在 /themes/sakura/layout/_layout.ejs 代码的尾部,新增如下内容：

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

4.主题配置文件_congig.yml 代码末尾,新增如下内容

live2d:enable: true

5.想修改看板娘大小、位置、格式、文本内容等，可查看并修改 waifu-tips.js 、 waifu-tips.json 和 waifu.css

注意：大神的项目需要 jQuery 和 font-awesome 支持

五.设置代码块高亮

1.首先我们需要安装代码块高亮的插件，通过下面命令安装

npm i -S hexo-prism-plugin

2.我们需要修改博客的配置文件_config.yml, 关闭自带的高亮
在配置文件中找看有没有highlight，有的话用下面代码将其替换，没有的话自行添加，可以添加在代码的最末尾处

highlight:enable: false
prism_plugin:mode: 'preprocess'    theme: 'default'line_number: false    # default falsecustom_css: 'path/to/your/custom.css'     # optional

下面就是效果图，还是挺不错的

六.搜索功能无法使用

只需要执行下面命令就可以了

npm install hexo-generator-json-content --save

七.总结

我修改的博客主题是sakura 这个主题，当然修改其他主题也是大同小异，大家可以跟着去修改