板娘脚本

本文详细介绍了一种使用HTML、CSS和JavaScript实现Live2D虚拟助手的方法,包括模型初始化、界面布局及交互功能,如聊天、查看信息等,为网站增添生动元素。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Live2D</title>
     
    <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/hulean/waifu.css"/>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/hulean/waifu.css">
    <div class="waifu" id="waifu">
        <div class="waifu-tips" style="opacity: 1;"></div>
        <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
        <div class="waifu-tool">
            <span class="fui-home"></span>
            <span class="fui-chat"></span>
            <span class="fui-eye"></span>
            <span class="fui-user"></span>
            <span class="fui-photo"></span>
            <span class="fui-info-circle"></span>
            <span class="fui-cross"></span>
        </div>
    </div>
    <script src="https://files.cnblogs.com/files/hulean/live2d.js"></script>
    <script src="https://files.cnblogs.com/files/hulean/waifu-tips.js"></script>
    <script type="text/javascript">initModel()</script>
</body>
</html>
<link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/yjlblog/flat-ui.min.css"/>

转载于:https://www.cnblogs.com/hulean/p/11110942.html

<think>好的,我需要帮助用户在Hexo博客中添加看功能。首先,我得回忆一下相关的步骤和可能的资源。用户提到的引用[1]和引用[2]提到了使用Fork看项目,修改Next主题配置等。 首先,我应该确认用户使用的主题是否是Next,因为不同的主题可能有不同的配置方法。不过通常看插件是通用的,可能需要添加第三方脚本或使用插件。 根据引用[2],步骤大致是Fork看项目,比如可能指的是live2d-widget项目,然后将其添加到Hexo的目录中,比如在source目录下创建文件夹,放置相关文件。然后修改主题的布局文件,比如在footer.swig或layout文件中引入对应的JavaScript和CSS。 接下来,我需要考虑具体的操作步骤。例如,用户需要克隆看的项目到本地,然后复制相关文件到Hexo的source目录下。之后,在主题的配置文件中添加启用选项,或者在模文件中插入脚本标签。 另外,可能需要配置一些参数,比如模型选择、大小、位置等。用户可能还需要自定义样式,这需要修改CSS文件。同时,要注意路径是否正确,避免资源加载失败的问题。 还需要考虑可能的常见问题,比如插件与当前主题的兼容性,如何更新或更换模型,以及如何调试JavaScript错误。用户可能遇到浏览器缓存问题,需要提示清除缓存或检查控制台日志。 最后,应该建议用户参考具体的项目文档,比如GitHub上的live2d-widget或hexo-helper-live2d插件的说明,确保步骤准确。同时,提醒备份配置文件,避免出错后难以恢复。</think>### Hexo博客添加看功能分步指南 #### 1. **选择看插件** 推荐使用两种主流方案: - **独立部署方案**:基于`live2d-widget`项目,适合需要高度自定义的用户[^2] - **插件方案**:通过`hexo-helper-live2d`插件实现,适合快速集成 #### 2. **插件方案实现步骤** ```bash # 安装插件 npm install --save hexo-helper-live2d ``` 在站点配置文件`_config.yml`中添加: ```yaml live2d: enable: true pluginModelPath: assets/ model: use: live2d-widget-model-shizuku # 默认模型 display: position: right width: 150 height: 300 ``` #### 3. **独立部署方案实现步骤 1. 克隆看项目到本地: ```bash git clone https://github.com/stevenjoezhang/live2d-widget.git themes/next/source/live2d-widget ``` 2. 修改主题布局文件(以Next主题为例): ```html themes/next/layout/_layout.swig <!-- 在<head>标签内添加 --> <script src="/live2d-widget/autoload.js"></script> ``` 3. 配置模型参数(在`autoload.js`中修改): ```javascript const live2d_path = "/live2d-widget/"; loadWidget({ waifuPath: live2d_path + "waifu-tips.json", cdnPath: "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/" }); ``` #### 4. **自定义配置项 - **模型更换**:在npm搜索`live2d-widget-model-*`选择其他模型 - **交互设置**:修改`waifu-tips.json`调整对话内容和触发条件 - **样式调整**:通过CSS修改看位置、大小和动画效果 #### 5. **常见问题处理 1. **模型不显示**: - 检查控制台网络请求是否加载失败 - 确认资源路径配置正确 - 清除浏览器缓存`Ctrl+F5` 2. **移动端适配**: ```css @media (max-width: 768px) { #waifu { display: none !important; } } ``` 3. **性能优化**: - 使用CDN加载资源 - 启用延迟加载 ```yaml live2d: scriptFrom: jsdelivr lazy: true ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值