本站维护日志

生成图片路径错误 - 20250424

按理来说hexo g命令是hexo generate命令的缩写，但是不知道为什么在_post文件夹下笔记的同名目录中添加图片后，使用hexo g命令重新生成，结果图片路径一直显示为某个固定路径下而不是希望的年/月/日/笔记名/图片名.jpg

解决：可能是安装的某个命令和hexo g命令冲突了，使用hexo generate命令就可以成功显示了。

20250426更新：使用hexo generate仍不能生成正确路径，需要先hexo clean再hexo generate

HexoPro博客管理端插件 - 20250422

参考：https://github.com/wuzheng228/hexo-pro

可以在localhost:40000/pro方便进行微博编辑

20250426更新：感觉不如直接在本地markdown编写方便(

说说日期格式 - 20250422

在hexo generate时报错信息如下：

由于source/_data/esssays.yml中时间date使传递的日期格式不符合 RFC 2822 或 ISO 8601 标准格式，导致 moment.js 回退到使用原生 JavaScript 的 Date 构造函数来解析日期。

解决：date使用ISO 8601 格式2025-04-21T20:03:00而非2025/04/21 20:03:00

修改完后发现日期解析错误，2025-04-21 20:03:00在页面上显示为2025-04-21 04:03:00，查看node_modules/hexo-theme-redefine/layout/pages/shuoshuo/essays.ejs时发现是因为时间设置为UTC时间，源码如下所示

<div class="w-full border-border-color rounded-xl rounded-tl-none shadow-redefine-flat overflow-hidden">
    <!-- Pass the raw date here in a data attribute -->
    <div class="essay-date px-4 py-1.5 text-sm border-b border-border-color bg-zinc-50 dark:bg-zinc-800 text-third-text-color" data-date="<%= moment(e.date).tz(timezone).utc().format() %>">Loading Date...</div>
    <div id="shuoshuo-content" class="px-4 py-2"><%- markdown(e.content) %></div>
</div>

解决：可以在写日期的时候手动添加+8:00

最终修改如下所示：

1
2
3

- content: |
    好开心呀
  date: 2025-04-21T20:03:00+8:00

添加Live2D模型 - 20250419

在Hexo博客中引入Live2D模型可以通过以下两种主流插件实现，分别支持不同格式的模型（.moc或.moc3），具体步骤如下：

1. 使用 `hexo-helper-live2d`（仅支持 `.moc` 格式）

安装插件
在Hexo博客根目录下运行命令：
1
npm install --save hexo-helper-live2d

配置 _config.yml
在Hexo的全局配置文件中添加以下内容（或修改现有配置）：

# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:
  enable: true #开关插件版看板娘
  scriptFrom: local # 默认
  pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
  pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
  pluginModelPath: assets/ # 模型文件相对与插件根目录路径
  # scriptFrom: jsdelivr # jsdelivr CDN
  # scriptFrom: unpkg # unpkg CDN
  # scriptFrom: https://npm.elemecdn.com/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url
  tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
  debug: false # 调试, 是否在控制台输出日志
  model:
    use: live2d-widget-model-shizuku 
    # 效果参考：https://blog.csdn.net/weixin_43347550/article/details/119920986
    # use: wanko # 博客根目录/live2d_models/ 下的目录名
    # use: ./wives/wanko # 相对于博客根目录的路径
    # use: https://npm.elemecdn.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json # 你的自定义 url
  display:
    position: left #控制看板娘位置
    width: 150 #控制看板娘大小
    height: 300 #控制看板娘大小
    hOffset: 20 # 水平偏移：+右，-左
    vOffset: -20 # 垂直偏移
    superSample: 2
  mobile:
    show: true # 手机中是否展示
    model: live2d-widget-model-shizuku
    scale: 0.5
    hHeadPos: 0.5
    vHeadPos: 0.618
  react:
    opacityDefault: 0.7
    opacityOnHover: 0.2
  # dialog:  # 是否开启对话
  #   enable: true
  #   hitokoto: true

安装模型
通过npm安装预置模型（例如 koharu）：
1
npm install live2d-widget-model-koharu
然后在配置中修改 model.use 为对应的模型名称。
部署与清理缓存
运行以下命令重新生成页面
1
hexo clean && hexo g && hexo s

2. 使用 `hexo-oh-my-live2d`（支持 `.moc` 和 `.moc3` 格式）

安装插件
1
npm install hexo-oh-my-live2d

配置 _config.yml
示例配置（支持本地模型路径）：

OhMyLive2d:
  enable: true
  CDN: https://unpkg.com/oh-my-live2d
  option:
    dockedPosition: 'right'
  models:
    - path: /live2d-models/Miss/Miss.model3.json  # 本地模型路径
  mobileDisplay: false

注意：若使用本地模型，需将模型文件放置在博客的 source 目录下（如 /source/live2d-models/）。

部署
同样执行 hexo clean && hexo g && hexo s 查看效果。

3. 注意事项

兼容性问题：
- hexo-helper-live2d 仅支持旧版 .moc 模型，且已停止维护。
- hexo-oh-my-live2d 支持新版 .moc3，推荐优先使用。
移动端适配：通过配置项 mobile.show 控制是否在手机端显示。
路径问题：若模型未显示，检查路径是否正确，或通过浏览器控制台查看加载错误。

图片JPEG和WebP区别 - 20250417

压缩技术
- JPEG：有损压缩，适合照片类图像，压缩过渡产生块状伪影（马赛克）
- WebP：有损/无损压缩。有损模式下比JPEG更高效，相同质量下文件更小；无损模式下比PNG体积小约26%。
文件大小
- 相同视觉质量下，WebP有损压缩的文件大小比JPEG小**25%~35%**，显著提升网页加载速度
兼容性
- JPEG：全平台兼容
- WebP：现代浏览器（Chrome、Firefox、Edge、Safari 14+）

适用场景

场景	推荐格式	理由
网页图片（需快速加载）	WebP	体积小，加速页面渲染
照片存储/打印	JPEG	兼容性广，编辑软件支持完善
透明背景图像	WebP/PNG	JPEG不支持透明
旧设备或系统	JPEG	确保所有用户能正常查看