阅读 1958
我在掘金不仅撸猫还上手纸片人小姐姐?

我在掘金不仅撸猫还上手纸片人小姐姐?

一起用代码吸猫!本文正在参与【喵星人征文活动】

  最近一个月一直比较忙,本来活动刚出的当天,我就完成了在掘金养猫的成就。但作为一个有这强迫症的人,没有一堆花里胡哨的功能是不可能发出来的,没想到就TM隔了一天,其他同学也想到了这个,并发了文章。???我。。。只能哭泣。不过也不怎么打紧,毕竟也不是啥大事,我不是那么肤浅的人。热度对我这种小透明来说根本没啥,体验啊,花里胡哨啊,这才适合我。

cat.gif

功能

先来说说现在已有的功能吧,内置两只猫猫白猫山药泥黑猫羊栖菜

  • 支持拖拽
  • 支持配置大小、拖拽
  • 支持自定义模型
  • 支持和微软小冰对话
  • 支持一些奇奇怪怪的的功能:一言、诗词
  • 支持一些问候
  • 支持掘金相关功能:自动签到并抽奖、查看用户相关的统计信息、查看掘金相关活动卡片、程序员日历
  • 其他功能待探索

使用到的工具

凑凑字数,来讲讲这个脚本用到的工具和三方库

  • 使用rollup打包
  • 使用sass编写样式
  • 使用pixi-live2d-display来展示live2d
  • 使用petite-vue来交互配置

Rollup打包这种脚本是真的好使,配置简单,打包体积小。我们编写完脚本和样式,直接梭哈成一个iife脚本,直接在油猴 @require 引入即可。petite-vue 这个尤大的小玩意儿用在这种场景真的完美搭配,告别了一丢丢的dom操作,非常的完美。各位同学一定要亲自尝试一下,真的好使。

展示时间

  • 展示统计信息

image.png

  • 展示配置信息

image.png

  • 展示签到

image.png

  • 换个靓妹

demo.gif

GIF录制帧数和像素有点糊,实际效果还是不错的。猛男喜欢的纸片人,YYDS

使用

我没有放 Greasy Fork ,因为对打包的太不友好了。毕竟手写兼容ES5还是比较难的

方式一(推荐方式)

  • 打开油猴管理面板,切换到 实用工具 菜单
  • 从URL安装 表单输入下面地址,点击 安装 安装按钮即可

https://raw.githubusercontent.com/iota9star/juejin-live2d-plugin/master/.tampermonkeymeta?v=0.2.0
PS: 如果上述地址无法安装,则尝试使用下面地址
https://cdn.jsdelivr.net/gh/iota9star/juejin-live2d-plugin@master/.tampermonkeymeta?v=0.2.0

方式二

直接打开油猴,选择添加脚本,把下面的内容贴进去就OK了

// ==UserScript==
// @name         掘金live2d插件
// @namespace    https://github.com/iota9star/juejin-live2d-plugin
// @description  为掘金页面添加live2d形象,辅助实现一些功能
// @author       iota9star
// @match        juejin.cn/*
// @version      0.2.0
// @icon         https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/6bdafd801c878b10edb5fed5d00969e9.svg
// @require      https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js
// @require      https://cdn.jsdelivr.net/gh/dylanNew/live2d/webgl/Live2D/lib/live2d.min.js
// @require      https://cdn.jsdelivr.net/gh/iota9star/juejin-live2d-plugin@master/public/bundle.0.2.0.min.js
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_xmlhttpRequest
// @run-at       document-idle
// @connect      juejin.cn
// @connect      juejin.im
// @connect      juejin.org
// @connect      jsdelivr.net
// @connect      github.com
// @connect      hitokoto.cn
// @connect      jinrishici.com
// @connect      weibo.com
// @connect      weibo.cn
// @connect      bing.com
// @connect      shadiao.app
// @connect      yduanzi.com
// ==/UserScript==
复制代码

总结

  • 忙起来太累人了,回家啥都不想做,只想躺平。。。这文章我也没有精力给大家讲技术贴代码了,我也没心情去看文章内容通不通顺,废话的不要,晚安。
  • 大家在自己弄live2d的时候需要注意一下,live2d库和模型是有版权的,我们是不能直接放github之类的第二次分发,小心警告邮件哦。
  • 插件支持自定义的模型地址,模型支持2.0+。这里我劝大家耗子尾汁,别直接添加带声音的小黄油模型,这个声音是支持的哈,小心外放社死。
  • 说是养猫,也得多提两句,不管黑猫白猫,都很治愈。完全满足在掘金撸猫的需求,很nice
  • 油猴脚本开发是非常麻瓜的,有兴趣的小伙伴可以看看我的仓库 juejin-live2d-plugin 简单改改,就可以得到一个开发的模板,轻轻松松实现自己的油猴脚本

如果文章对您有帮助的话,欢迎 点赞评论关注收藏分享 ,您的支持是我码字的动力,万分感谢!!!🌈

如果文章内容出现错误的地方,欢迎指正,交流,谢谢😘

最后,大家可以 点击这儿 加入QQ群 FlutterCandies🍭 和各路大佬们进行交流哦,这里大家说话都超好听的

参考资料

文章分类
前端
文章标签