# 首页轮播图更换图源

部署完后会发现博客里的图片都无法正常显示,那么就需要更换图床/图源

# 图床的创建

平台:
可选GithubGitee作为图床,推荐使用Gitee(国内)
Github:使用Github+picGo搭建图床,保姆级教程来了 - 知乎 (zhihu.com)
Gitee:直接创建一个Public仓库即可
工具:
使用PicGo工具进行管理(图片推荐使用webp格式)

嫌麻烦直接打开仓库上传也可以喔,就是得一个个复制图片名称 😢

不了解PicGO?

PicGo 下载 | PicGo (github.com)

Picgo上传Gitee

  1. 插件设置中搜索Gitee,选择并下载gitee-uploader
  2. 在Gitee账号设置中选择私人令牌并生成
  3. 在图床设置中选择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.ymllanguage改为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 #安装更新后的插件