为博客添加立牌小组件

博客里没有看板娘的博主不是合格的二次元!

前言: 看到很多人的博客都有个live2d的看板娘, 我当然也要整个活。Fluid 主题的官方文档里也有提到 Live2D Widget ^[1]的插件, 虽然但是, 对于我来说, live2d模型占的地方太大了, 且过于花哨。个人还是更喜欢偏简洁一点的界面的! 所以暂时把微博客添加看板娘的计划搁置了……
but, 最近碰巧看到了github上的一个项目 sakana-widget^[2]深得我心! 致敬传奇特工锦木千束!

安装与配置

官方文档中写的相当详细了:

1. 首先使用 CDN 直接引入或者通过 NPM 包的形式安装, 我选择了 CDN 引入的方式。
2. 由于为了博客在手机浏览器上不被立牌组件影响, 为组件的加载添加了一个是否为移动端的判断, 若为移动端则取消加载组件。
3. 文档中有提到挂载前可以创建角色并进行配置, 那么我们可以在挂载前先随机选择一个角色(takina 或 chisato)并创建,配置然后挂载到 id 为 sakana-widget 的元素上。最后对元素样式进行修改, 将其放到网页右下角。
   具体编码如下 sakana.html:

   <script>
     // 检查是否为移动设备
     function isMobileDevice() {
       return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
     }
   
     // 初始化 Sakana Widget
     function initSakanaWidget() {
       if (isMobileDevice()) {
         // 如果是手机端，退出函数不加载 Widget
         return;
       }
       
       // 获取角色
       const takina = SakanaWidget.getCharacter('takina');
       takina.initialState = {
         ...takina.initialState,
         i: 0.001,
       };
   
       const chisato = SakanaWidget.getCharacter('chisato');
       chisato.initialState = {
         ...chisato.initialState,
         i: 0.001
       };
       
       // 随机选择角色
       const selectedCharacter = Math.floor(Math.random() * 2) === 0 ? takina : chisato;
       SakanaWidget.registerCharacter('custom', selectedCharacter);
       
       // 使用构造函数初始化 SakanaWidget
       new SakanaWidget({
         character: 'custom',
         controls: false
       }).mount('#sakana-widget');
     }
   </script>
   
   <!-- 仅在非手机端加载样式和脚本 -->
   <script>
     if (!isMobileDevice()) {
       document.write(`
         <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/sakana-widget@2.7.0/lib/sakana.min.css" />
         <div id="sakana-widget" style="position: fixed; bottom: 20px; right: 20px; z-index: 1000;"></div>
         <script async onload="initSakanaWidget()" src="https://fastly.jsdelivr.net/npm/sakana-widget@2.7.0/lib/sakana.min.js"><\/script>
       `);
     }
   </script>

   

参考资料

1. Live2D Widget ↩
2. sakana-widget ↩