# 首页轮播图更换图源
部署完后会发现博客里的图片都无法正常显示,那么就需要更换图床/图源
# 图床的创建
平台:
可选Github和Gitee作为图床,推荐使用Gitee(国内)
Github:使用Github+picGo搭建图床,保姆级教程来了 - 知乎 (zhihu.com)
Gitee:直接创建一个Public仓库即可
工具:
使用PicGo工具进行管理(图片推荐使用webp格式)
嫌麻烦直接打开仓库上传也可以喔,就是得一个个复制图片名称 😢
不了解PicGO?
Picgo上传Gitee
- 插件设置中搜索Gitee,选择并下载gitee-uploader
- 在Gitee账号设置中选择私人令牌并生成
- 在图床设置中选择Gitee设置
参数 | |
---|---|
repo | 用户名/仓库名 |
token | 私人令牌 |
path | 相对位置 |
# Shokax图源更换
在source/_data/assets/目录下新建文件 images.yml后在里面填写图片链接即可
✔️success 十分简单
我的图床链接:
https://gitee.com/fufan1025/blog_img/raw/master/background/wallhaven-zp8o3j.webp
https://gitee.com/fufan1025/blog_img/raw/master/background/wallhaven-rqd55w.webp
https://gitee.com/fufan1025/blog_img/raw/master/background/wallhaven-pok5v9.webp
https://gitee.com/fufan1025/blog_img/raw/master/background/wallhaven-5y7wz1.webp
https://gitee.com/fufan1025/blog_img/raw/master/background/plane_sky_art_129149_1920x1080.webp
https://gitee.com/fufan1025/blog_img/raw/master/background/girl_walk_anime_153292_2560x1080.webp
https://gitee.com/fufan1025/blog_img/raw/master/background/girl_terrace_art_146601_2560x1080.webp
https://gitee.com/fufan1025/blog_img/raw/master/background/girl_smile_umbrella_963266_1920x1200.webp
https://gitee.com/fufan1025/blog_img/raw/master/background/girl_smile_stars_975800_2560x1080.webp
https://gitee.com/fufan1025/blog_img/raw/master/background/girl_smile_flower_1035552_1920x1200.webp
https://gitee.com/fufan1025/blog_img/raw/master/background/girl_sea_summer_941681_2560x1080.webp
https://gitee.com/fufan1025/blog_img/raw/master/background/girl_river_sunset_1067581_2560x1080.webp
https://gitee.com/fufan1025/blog_img/raw/master/background/girl_pose_smile_1011693_2560x1080.webp
https://gitee.com/fufan1025/blog_img/raw/master/background/girl_platform_railway_140282_2560x1080.webp
https://gitee.com/fufan1025/blog_img/raw/master/background/girl_headphones_anime_1079499_1920x1200.webp
https://gitee.com/fufan1025/blog_img/raw/master/background/girl_halo_butterflies_923017_2560x1080.webp
https://gitee.com/fufan1025/blog_img/raw/master/background/girl_guitar_anime_141048_1920x1200.webp
https://gitee.com/fufan1025/blog_img/raw/master/background/girl_grass_city_213102_1920x1080.webp
https://gitee.com/fufan1025/blog_img/raw/master/background/girl_glow_magic_165898_2560x1080.webp
https://gitee.com/fufan1025/blog_img/raw/master/background/girl_gesture_kimono_925253_2560x1080.webp
https://gitee.com/fufan1025/blog_img/raw/master/background/girl_eyes_sunflowers_1013575_2560x1080.webp
https://gitee.com/fufan1025/blog_img/raw/master/background/girl_eyes_dress_1122598_2560x1080.webp
https://gitee.com/fufan1025/blog_img/raw/master/background/girl_ears_sky_994513_1920x1200.webp
https://gitee.com/fufan1025/blog_img/raw/master/background/girl_chair_window_866827_2560x1080.webp
https://gitee.com/fufan1025/blog_img/raw/master/background/girl_buildings_city_1060155_1920x1200.webp
https://gitee.com/fufan1025/blog_img/raw/master/background/girl_blonde_pose_1002941_2560x1080.webp
https://gitee.com/fufan1025/blog_img/raw/master/background/girl_bag_bus_917489_1920x1200.webp
https://gitee.com/fufan1025/blog_img/raw/master/background/girl_backpack_road_1160862_1920x1080.webp
https://gitee.com/fufan1025/blog_img/raw/master/background/girl_angel_halo_991517_2560x1080.webp
https://gitee.com/fufan1025/blog_img/raw/master/background/fulilian.webp
https://gitee.com/fufan1025/blog_img/raw/master/background/child_river_dreams_127495_1920x1080.webp
https://gitee.com/fufan1025/blog_img/raw/master/background/anime_girl_sky_162368_1920x1200.webp
# shoka更换图源(备用)
shoka用户可能会遇到无法生效的问题,遇到请选择下面方式
在 <root>\themes\shoka\scripts\helpers\engine.js
打开找到代码
var parseImage = function(img, size) {
if (img.startsWith('//') || img.startsWith('http')) {
return img
} else {
return'https://tva'+randomServer+'.sinaimg.cn/'+size+'/'+img
}
}
将代码中https://tva'+randomServer+'.sinaimg.cn/'+size+'/'+img更换为自己的图片前置链接
在链接前面可以加上图缓存链接
让图片快速加载(非Gitee)
图缓存链接:https://images.weserv.nl/?url=
以本站链接举例: 链接:https://images.weserv.nl/?url=https://gitee.com/fufan1025/blog_img/raw/master/
更改后完整如下:
var parseImage = function(img, size) {
if (img.startsWith('//') || img.startsWith('http')) {
return img
} else {
return 'https://images.weserv.nl/?url=https://gitee.com/fufan1025/blog_img/raw/master/'+img
}
}
最后在<root>\themes\shoka_images.yml`中填入图片名称即可,例如:
- Konachan.webp
- fulilian.webp
大功告成!
# 基本配置
# 设置博客主页语言为中文
在<root>/source/中新建_data文件夹在里面新建languages.yml,复制下面内容黏贴进去
# language
zh-CN:
# items
menu:
links: 链接
travellings: 开往
webstack: 网址
friends: 友达
anime: 动漫
favicon:
show: 你来啦!OvO
hide: 快回来吧T_T
zh-TW:
favicon:
show: 你来啦!OvO
hide: 你干嘛,嗨嗨哟T_T
en:
favicon:
show: 你来啦!OvO
hide: 你干嘛,嗨嗨哟T_T
ja:
favicon:
show: 你来啦!OvO
hide: 你干嘛,嗨嗨哟T_T
最后打开根目录的配置文件<root>/_config.yml将language改为zh-CN
# 新建文章/笔记
hexo new "文章标题" #新建文章
hexo new page '页面名称' #新建页面
# 设置Live 2d 虚拟人物
Live 2d会占用带宽资源拖慢网页加载速度!
npm install --save hexo-helper-live2d #安装Live 2d插件
npm install live2d-widget-model-haru #安装Live 2d模型
预览Live 2d 模型:https://blog.csdn.net/wang_123_zy/article/details/87181892
在<root>/_config.yml中添加以下代码
# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:
enable: false
scriptFrom: local # 默认
pluginRootPath: live2dw/ # 插件在站点上的根目录 (相对路径)
pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
pluginModelPath: assets/ # 模型文件相对与插件根目录路径
#scriptFrom: xxx/lib/L2Dwidget.min.js # 你的自定义 url
tagMode: false # 标签模式,是否仅替换 live2d tag 标签而非插入到所有页面中
debug: false # 调试,是否在控制台输出日志
model:
use: live2d-widget-model-haru # 使用的 Live2d 模型名称
# use: xxx/assets/koharu.model.json # 你的自定义 url
display:
position: right #显示位置
width: 150
height: 300
mobile:
show: true # 手机中是否展示
# 版本更新
主题版本未更新而更新插件可能出现插件不兼容问题!
npm install -g npm-check-updates
ncu #检测更新
ncu -u #更新插件
npm install #安装更新后的插件