超级无敌大牛福博客看板娘导入完美教程

神临

雷迪斯安德宅特们
今天我将为大家带来超级无敌牛福的极品model3.json看板娘如何进入我们一心一意搭建的hexo博客里(注意是hexo呦) hexo

首先让看板娘成功加载到博客

需要的准备

第一步

我们需要去官方sdk下载Cubism SDK for Web
然后解压随便放到个文件夹里从里面搜live2dcubismcore.js找到了就给它复制下来
然后在我们的博客目录里(不是主题的)找到source创建一个肥美的文件夹就叫live2d吧(名字随便起)然后再整个文件夹core把live2dcubismcore.js放里头

这个live2d的教程中不需要任何live2d的插件不然就会在最后显示出那些插件的默认看板娘很难受

第二步

我们要找到我们放代码的地方 一般来说我放的都是博客根目录下\themes\主题\layout_partial\footer.ejs里 这里能在你html页面生成后显示你加的东西(后半句为个人理解)
反正你放那应该就没啥问题 有点话问问GPT吧

第三步(正文开始)

1、

你在footer里需要引用一些外部的库帮助你生成出看板娘 就像这个 他要放到第一行(一定要访问看看是不是有东西)
然后引用你在Cubism SDK for Web里下载解压完后找到的live2dcubismcore.js文件 用本地路径就好这个就放到第二行
再就是引用这个库

<!-- Live2D 看板娘 -->
<script src="https://cdn.jsdelivr.net/npm/pixi.js@6.5.8/dist/browser/pixi.min.js"></script>
<!-- 本地 Live2D Cubism Core -->
<script src="/live2d/Core/live2dcubismcore.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pixi-live2d-display/dist/cubism4.min.js"></script>

像这样就可以了 顺序要对 不然加载不出来

2、

我建议是把我们下载的或者别人仓库里的model3那个整个的文件(包括动作贴纸moc3等文件)整到我们自己的github上 然后再引用到博客里
然后用的路径最好是raw的路径就像https://raw.githubusercontent.com/你的github仓库路径/模型名字.model3.json (因为model3是模型的主体现文件 它是主人)
还有就是要打开这个model3文件看看里面 在你没做更改前内容肯定是 文件夹/文件 但是我们是引用不是本地所以需要把它们全部换成raw的浏览器访问路径这个你可以放心全复制给ai让它帮你整然后你再给它复制粘贴回来

3、

你还可以在你的模型仓库里整一个叫waifu.js的文件内容也可以找ai随便简单生成一下就可以 这个其实等你全整好了也就没啥用了

然后的话我们的第一步也就是让看板娘加载到博客就完成了

这时候我真得吐槽一下GPT了(仅吐槽可跳过不看)(GPT升级版的不用看)

那个GPT是真气人 可能是因为我用的免费版 毕竟绑不了银行卡(同时没钱)
然后呢我那那时候就天天找它问怎么整这种model3的看板娘 它给我的回复真是天花乱坠都是什么”我给你整个一定能行一键导入成的代码”什么”这个代码肯定行你只要复制粘贴然后就能看见看板娘”啥的 真是坑飞我了 我那时候老信它了 说啥我都满怀期待的说 行 好 ok 然后没有一次成功了 每次给他看报错的时候都说你这个什么路径不对那个引入库的顺序不对我再给你生成一个 我靠我现在想起来感觉我是沙子啊 你们千万不要无脑复制粘贴ai的东西 不然等到它生成对的时候你都自己学会了 特别是在我自己想把我的模型放到本地的时候更是不知道在说什么 最牛福的是它甚至会说它眼花了我一个代码后面有逗号它说没有要不是我又问了一遍都不知道我这块是对的 太猎奇了

然后让看板娘变到能看的大小

这个也是十分的难搞啊 而且这个ai好像跟咱看到的不一样导致全权给ai一般都会失败 但它还是有点用的

第一步

这里我比较推荐deepseek 我在用它写代码的时候我去那叫一个666啊 把全部添加的代码复给它然后说一些要求比如大小要多少px啥的它嗷嗷就是一顿写给你 一下就是近百行的代码

第二步

就是这个ai的眼神跟咱不一样 因为我用的是碧蓝航线的这模型 从Live2D Cubism Viewer上看的时候发现它真的巨大有着整整10000x8000px的画布大小要是在咱那浏览器加800x600px的容器里根本显示不全 只会有一个小角落咱看不见但是问那劳seek说它能看见

第三步

手动调大小和位置 这种时候ai就没什么大用了 我们打开他各种修改后的代码然后问它哪方面是关于画布大小 模型偏移 模型大小比例在哪
一般这在在给你生成的代码里了不然就让它给你生成这种的代码然后慢慢改就可以了 改完确定了这个东西的位置大小后就可以自己再向这个ai提要求加东西了
我的代码也可以做些参考

<footer id="footer">
  <% if (theme.sidebar === 'bottom'){ %>
    <%- partial('_partial/sidebar') %>
  <% } %>

  <div class="outer">
    <div id="footer-info" class="inner">
      <% if (theme.copyright){ %>
        <%- render(theme.copyright, 'pug'); %>
      <% } %>

      &copy; <%= date(new Date(), 'YYYY') %> <%= config.author || config.title %><br>
      <%= __('powered_by') %> 
      <a href="https://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>

<!-- Live2D 看板娘 -->
<script src="https://cdn.jsdelivr.net/npm/pixi.js@6.5.8/dist/browser/pixi.min.js"></script>
<!-- 本地 Live2D Cubism Core -->
<script src="/live2d/Core/live2dcubismcore.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pixi-live2d-display/dist/cubism4.min.js"></script>

<style>
    /* 看板娘容器 */
    #waifu-container {
        position: fixed;
        right: 20px;
        bottom: 20px;
        width: 400px;
        height: 200px;
        z-index: 9999;
        pointer-events: auto;
        overflow: hidden;
        border-radius: 12px;
        background: transparent;
        cursor: move;
        box-shadow: 0 4px 20px rgba(0,0,0,0.15);
        image-rendering: crisp-edges;
        image-rendering: -webkit-optimize-contrast;
    }
    
    /* 台词气泡样式 */
.speech-bubble {
    position: fixed;
    right: 420px;       /* 调整气泡水平位置，靠人物右上 */
    bottom: 260px;      /* 调整气泡垂直位置，靠人物右上 */
    max-width: 250px;
    min-width: 120px;
    background: #ffffff;  /* 背景白色 */
    border-radius: 18px;  /* 保持原椭圆形状 */
    padding: 10px 15px;
    font-size: 14px;
    color: #ff69b4;       /* 文字粉色 */
    font-family: system-ui, -apple-system, sans-serif;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    z-index: 10001;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    border: 1px solid #e0e0e0;
}

/* 尾巴保持不变 */
.speech-bubble::before {
    content: '';
    position: absolute;
    right: -8px;
    bottom: 15px;
    width: 0;
    height: 0;
    border-left: 8px solid white;  /* 尾巴颜色不变 */
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}
    
    /* 移动端调整 */
    @media (max-width: 768px) {
        .speech-bubble {
            right: 350px;
            bottom: 180px;
            max-width: 180px;
            font-size: 12px;
            padding: 8px 12px;
        }
    }
</style>

<div id="speech-bubble" class="speech-bubble"></div>

<script>
(function() {
    // ========== 台词库 ==========
    const speechList = [
        // 欢迎语
        "欢迎来到我的博客！✨",
        "你好呀！很高兴见到你~",
        "今天过得怎么样？",
        "要常来看看我哦！",
        "辛苦啦，休息一下吧~",
        
        // 问候语
        "早上好！☀️",
        "下午好呀~",
        "晚上好，要注意休息哦！🌙",
        "周末愉快！🎉",
        
        // 互动语
        "喜欢我的新衣服吗？",
        "拖拽我可以移动到任何位置~",
        "要不要一起玩游戏？",
        "今天想聊点什么呢？",
        
        // 可爱语
        "嘿嘿~ 😊",
        "加油！你是最棒的！💪",
        "要开心每一天！",
        "注意保暖哦~",
        "记得按时吃饭！🍚",
        
        // 随机语
        "悄悄告诉你，这里有很多有趣的内容~",
        "有什么问题可以随时问我！",
        "我正在看着你哦 👀",
        "要经常来陪我玩呀！",
        "今天的天气真不错~"
    ];
    
    // 防止重复说话的标志
    let isSpeaking = false;
    let hoverTimeout = null;
    
    // 获取随机台词
    function getRandomSpeech() {
        const randomIndex = Math.floor(Math.random() * speechList.length);
        return speechList[randomIndex];
    }
    
    // 显示台词气泡
    let speechTimeout = null;
    const bubble = document.getElementById('speech-bubble');
    
    function showSpeech(text, duration = 4000) {
        if (!bubble) return;
        
        // 清除之前的定时器
        if (speechTimeout) clearTimeout(speechTimeout);
        
        // 设置文字并显示
        bubble.textContent = text;
        bubble.style.opacity = '1';
        
        // 自动隐藏
        speechTimeout = setTimeout(() => {
            bubble.style.opacity = '0';
        }, duration);
    }
    
    // 鼠标悬停时说话（带防抖，避免频繁触发）
    function onMouseEnter() {
        if (hoverTimeout) clearTimeout(hoverTimeout);
        
        hoverTimeout = setTimeout(() => {
            const text = getRandomSpeech();
            showSpeech(text, 3500);
        }, 300); // 悬停300ms后说话，避免误触发
    }
    
    // 鼠标离开时清除待执行的说话
    function onMouseLeave() {
        if (hoverTimeout) {
            clearTimeout(hoverTimeout);
            hoverTimeout = null;
        }
    }
    
    window.addEventListener('load', async function() {
        try {
            console.log('🚀 开始加载看板娘...');
            
            // 固定容器尺寸
            const containerWidth = 400;
            const containerHeight = 200;
            
            // 创建容器
            let container = document.getElementById('waifu-container');
            if (!container) {
                container = document.createElement('div');
                container.id = 'waifu-container';
                document.body.appendChild(container);
            }
            container.innerHTML = '';
            container.style.width = containerWidth + 'px';
            container.style.height = containerHeight + 'px';
            container.style.right = '20px';
            container.style.bottom = '20px';
            container.style.left = 'auto';
            container.style.top = 'auto';
            
            // 创建 canvas
            const canvas = document.createElement('canvas');
            canvas.style.width = '100%';
            canvas.style.height = '100%';
            canvas.style.display = 'block';
            canvas.style.position = 'absolute';
            canvas.style.top = '0';
            canvas.style.left = '0';
            canvas.style.pointerEvents = 'auto';
            container.appendChild(canvas);
            
            // 获取设备像素比
            const pixelRatio = Math.min(window.devicePixelRatio || 1, 2.5);
            console.log(`📱 设备像素比: ${pixelRatio}`);
            
            // 创建 PIXI 应用
            const app = new PIXI.Application({
                view: canvas,
                width: containerWidth,
                height: containerHeight,
                transparent: true,
                backgroundColor: 0x000000,
                backgroundAlpha: 0,
                antialias: true,
                resolution: pixelRatio,
                autoDensity: true,
                clearBeforeRender: true,
                preserveDrawingBuffer: false
            });
            
            console.log('✅ PIXI 应用创建成功');
            
            // 加载模型
            console.log('📥 加载模型中...');
            const model = await PIXI.live2d.Live2DModel.from(
                'https://raw.githubusercontent.com/12-qwaszx-12/xinnong/main/xinnong_6.model3.json',
                {
                    autoInteract: true,
                    focusOffsetX: 0,
                    focusOffsetY: 0
                }
            );
            
            app.stage.addChild(model);
            console.log('✅ 模型加载成功');
            
            // 等待模型尺寸获取
            await new Promise((resolve) => {
                let attempts = 0;
                const checkSize = () => {
                    if (model.width && model.height && model.width > 0) {
                        console.log(`📏 模型原始尺寸: ${model.width} x ${model.height}`);
                        resolve();
                    } else if (attempts < 50) {
                        attempts++;
                        setTimeout(checkSize, 100);
                    } else {
                        console.warn('模型尺寸获取超时');
                        resolve();
                    }
                };
                checkSize();
            });
            
            // 设置缩放和位置
            let scale = Math.min(
                (containerWidth * 0.7) / model.width,
                (containerHeight * 0.7) / model.height,
                0.1
            );
            scale = Math.max(scale, 0.078);
            
            model.scale.set(scale);
            
            const scaledWidth = model.width * scale;
            const scaledHeight = model.height * scale;
            
            // 向左上角偏移
            const offsetX = -scaledWidth * 3;
            const offsetY = -scaledHeight * 2.8;
            
            model.x = offsetX;
            model.y = offsetY;
            
            console.log(`📐 缩放比例: ${(scale * 100).toFixed(1)}%`);
            
            // ========== 播放入场动作 ==========
            setTimeout(async () => {
                try {
                    if (model.internalModel && model.internalModel.motionManager) {
                        const motionNames = model.internalModel.motionManager.getMotionNames();
                        if (motionNames && motionNames.length > 0) {
                            await model.motion(motionNames[0]);
                            console.log('✅ 入场动作已播放');
                        }
                    }
                } catch (e) {
                    console.log('动作播放失败:', e.message);
                }
            }, 500);
            
            // 延迟2秒后显示欢迎语
            setTimeout(() => {
                showSpeech("欢迎来到我的博客！✨", 4000);
            }, 2000);
            
            // ========== 鼠标悬停事件（鼠标移到容器上说话）==========
            container.addEventListener('mouseenter', onMouseEnter);
            container.addEventListener('mouseleave', onMouseLeave);
            
            // ========== 容器拖拽 ==========
            let isDragging = false;
            let dragStartX = 0, dragStartY = 0;
            let containerStartLeft = 0, containerStartTop = 0;
            
            function getContainerPos() {
                const rect = container.getBoundingClientRect();
                return { left: rect.left, top: rect.top };
            }
            
            function setContainerPos(left, top) {
                container.style.right = 'auto';
                container.style.bottom = 'auto';
                container.style.left = left + 'px';
                container.style.top = top + 'px';
                // 拖拽时同步调整气泡位置
                updateBubblePosition();
            }
            
            function updateBubblePosition() {
                const rect = container.getBoundingClientRect();
                bubble.style.right = (window.innerWidth - rect.left + 20) + 'px';
                bubble.style.bottom = (window.innerHeight - rect.top + 30) + 'px';
            }
            
            container.addEventListener('mousedown', (e) => {
                isDragging = true;
                dragStartX = e.clientX;
                dragStartY = e.clientY;
                const pos = getContainerPos();
                containerStartLeft = pos.left;
                containerStartTop = pos.top;
                container.style.cursor = 'grabbing';
                e.preventDefault();
            });
            
            window.addEventListener('mousemove', (e) => {
                if (!isDragging) return;
                const dx = e.clientX - dragStartX;
                const dy = e.clientY - dragStartY;
                let newLeft = containerStartLeft + dx;
                let newTop = containerStartTop + dy;
                const maxLeft = window.innerWidth - container.offsetWidth;
                const maxTop = window.innerHeight - container.offsetHeight;
                newLeft = Math.min(Math.max(newLeft, 0), maxLeft);
                newTop = Math.min(Math.max(newTop, 0), maxTop);
                setContainerPos(newLeft, newTop);
            });
            
            window.addEventListener('mouseup', () => {
                if (isDragging) {
                    isDragging = false;
                    container.style.cursor = 'move';
                }
            });
            
            container.style.cursor = 'move';
            
// 点击模型时随机播放一个 idle 动作 + 微小跳跃动画
model.on('click', async () => {
    try {
        if (model.internalModel && model.internalModel.motionManager) {
            const motionManager = model.internalModel.motionManager;
            const motionGroups = motionManager.definitions;

            const idleList = [];

            // 找所有 idle 动作
            for (const group in motionGroups) {
                if (group.toLowerCase().includes("idle")) {
                    const motions = motionGroups[group];
                    motions.forEach((m, i) => {
                        idleList.push({ group: group, index: i });
                    });
                }
            }

            // 随机选择一个 idle 播放
            if (idleList.length > 0) {
                const random = idleList[Math.floor(Math.random() * idleList.length)];
                // 播放动作，不改变模型位置或缩放
                model.motion(random.group, random.index, { priority: 1, interruptible: true });
            }
        }
    } catch (e) {
        console.log("idle 播放失败:", e);
    }

    // 小跳跃动画，保留原来的互动效果
    const origY = model.y;
    model.y -= 10;
    setTimeout(() => {
        model.y = origY;
    }, 120);
});
            
            // 初始化气泡位置
            setTimeout(updateBubblePosition, 100);
            
            console.log('✨ 看板娘加载完成！');
            console.log('💬 鼠标移到看板娘上就会说话~');
            
        } catch (err) {
            console.error('❌ 看板娘加载失败:', err);
            const errorDiv = document.createElement('div');
            errorDiv.style.position = 'fixed';
            errorDiv.style.bottom = '100px';
            errorDiv.style.right = '20px';
            errorDiv.style.backgroundColor = 'rgba(220,53,69,0.9)';
            errorDiv.style.color = 'white';
            errorDiv.style.padding = '12px 16px';
            errorDiv.style.borderRadius = '12px';
            errorDiv.style.zIndex = '10002';
            errorDiv.style.fontSize = '12px';
            errorDiv.innerHTML = '❌ 加载失败<br><small>' + err.message + '</small>';
            document.body.appendChild(errorDiv);
            setTimeout(() => errorDiv.remove(), 5000);
        }
    });
})();
</script>

我能保证的是这个你拿去用了把路径改成你github上的raw路径的话在博客上肯定是没问题的可能前面我有点忘了但是应该没题

注意事项

关于这个ai

一开始的时候它给你生成的引用什么库的链接啥的都记得访问一次访问的到才行ai只是负责嗷嗷给你甩链接 当然要是你发现访问不了了倒是可以问问ai它才会给你换新的
同理所有的链接能去访问就都访问一遍 最浪费时间和最容易出错的就是这些
然后是在博客上调完大小位置后最好找ai给你加上个idle动作的那个东西很好看的

我整成这样也算是看板娘了吧 极限最好只能整成这样了