hexo主题美化

hexo美化之添加live2d动画

1.hexo博客文件目录下安装live2D插件

bashnpm install --save hexo-helper-live2d

2.下载live2D动画模型

动画选项及对应效果展示

live2d-widget-model-chitose
live2d-widget-model-z16
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01
live2d-widget-model-haru/02
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

安装示例

npm install live2d-widget-model-tororo

3. 修改配置文件_config.yml

# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:
  enable: true #隐藏/显示
  pluginRootPath: live2dw/    #插件在站点上的根路径(相对)
  pluginJsPath: lib/          #与插件根目录相关的JavaScript路径(相对)
  pluginModelPath: assets/    #与插件根(相对)相关的模型路径
  scriptFrom: local # Default
  # scriptFrom: jsdelivr # jsdelivr CDN
  # scriptFrom: unpkg # unpkg CDN
  # scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # Your custom url
  tagMode: false  #是否只替换live2d标签而不是注入到所有页面
  log: false #是否在控制台显示日志
  model:
    use: live2d-widget-model-wanko #安装的模型包名称
  display:  #设置位置和宽高（设置的宽高*2为实际像素，如：50=100px）
    position: right
    width: 200
    height: 400
  mobile:
    show: false #是否在移动端上显示

参考资料：

https://www.guoxh.com/blog/2019/03/15/hexo%E9%9B%86%E6%88%90live2D%E5%8A%A8%E7%94%BB/

hexo美化之右上角添加fork me on github入口

1.首先到GitHub Corners或者GitHub Ribbons选择自己喜欢的图标，然后copy相应的代码

2.然后将刚才复制的代码粘贴到themes/next/layout/_layout.swig文件中<div class="headband"></div>

下面一行

3.把代码中的href后面的值替换成你要跳转的地址，比如你的GitHub主页

参考资料：

https://blog.csdn.net/mqdxiaoxiao/article/details/93796367

hexo美化之添加侧边社交链接

在配置文件theme文件夹中的_config.yaml中添加

social:
  GitHub: https://github.com/Po***** || github
  E-Mail: mailto:113***@qq.com || envelope

social_icons:
  enable: true
  icons_only: false
  transition: false

参考资料：

https://benpaodewoniu.github.io/2020/03/08/hexo21/

https://cloud.tencent.com/developer/article/1577027（较为全面）