【原创】给博客加个看板娘

给博客加个看板娘

无脑水平

首先hexo官方是支持看板娘的,但是只有模型

无脑开始

安装模块

npm install --save hexo-helper-live2d

**注意:命令要在当前主目录执行

在主配置文件写下内容

# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:
  enable: true
  # enable: false
  scriptFrom: 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 # 你的自定义 url
  tagMode: 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 # 你的自定义 url
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true # 手机中是否展示

进阶

继续下载各种动画:https://github.com/xiazeyu/live2d-widget-models.git

》》》模型预览《《《

下载完成后解压在node_modules目录里

然后在配置文件里引用就行了

进阶2

也可以使用别的大神的项目,也就是我现在用的

使用前执行下面命令:卸载官方的live2d

npm uninstall hexo-helper-live2d

并把配置文件里的代码删除

Butterfly主题

首先下载并解压在\themes\butterfly\source把文件夹名改为live2d-widget

修改当前文件夹内的autoload.js文件把:

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

改为:

const live2d_path = "/live2d-widget/";

最后来到Butterfly主题配置文件进行引用

打开配置文件搜索inject: 把下列代码插入bottom

- 

配置一下来看看效果

修位置及文本内容

  1. 位置:打开waifu.css文件找到#waifu修改位置参数,,,,
    本页面位置参考:

    #waifu {
    bottom: -1000px;
    right: 1%;
    line-height: 0;
    position: fixed;
    transform: translateY(3px);
    transition: transform .3s ease-in-out, bottom 3s ease-in-out;
    z-index: 1;
    }

    图标位置:#waifu-tool
    参考:

    #waifu-tool {
    color: #aaa;
    opacity: 0;
    position: absolute;
    right: 10%;
    top: 70px;
    transition: opacity 1s;
    }
  2. 文本内容修改json文件即可

好啦快去嘿嘿嘿老婆吧

next主题

首先下载并解压在\themes\butterfly\source把文件夹名改为live2d-widget

修改当前文件夹内的autoload.js文件把:

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

改为:

const live2d_path = "/live2d-widget/";

/themes/next/layout/_layout.swing中,新增如下内容:

在主配置文件增加如下内容:

live2d:
 enable: true

(完)

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇