在安和鱼（Anheyu）博客中添加网页悬浮立牌

声明

本教程由DeepSeekV3.1生成，基于博主部署时思路整理而成，仅供学习参考。

此教程仅限于 anheyu-app（安和鱼）此项目为 sakana-widget 开源项目此教程不需要修改源码即可实现

效果

在博客页面右下角添加一个可爱的可交互卡通角色立牌，该立牌具有物理效果，可以拖拽、弹跳，并支持自走模式。

立牌默认固定在页面右下角
鼠标按住可拖拽，松开后会向反方向弹跳
支持开启自走模式，立牌会随机移动
可切换不同角色，调整大小等参数

功能

注册并使用你自己的角色 - 支持多种预设角色，也可自定义
自动缩放适应，最小 120px - 响应式设计，适应不同屏幕
按住立牌拖拽，松手后立牌会向反方向弹跳 - 模拟物理弹跳效果
底座控制栏切换角色和其他功能 - 底部控制栏方便操作
自走模式 - 以随机间隔施加一个大小随机的力，让立牌自主移动
CDN/NPM 引入，自定义参数，链式调用 - 灵活配置方式

教程

第一步：登录安和鱼主题后台

访问你的博客后台管理页面（通常为 你的域名/admin）
使用管理员账号登录

第二步：找到自定义代码设置

在后台侧边栏找到并点击 "系统设置" 再点击 "页面配置"
向下滚动找到 自定义底部 HTML 代码区域

第三步：添加立牌代码

在 自定义底部 HTML 代码区域 添加以下完整代码：

html

<!-- 在安和鱼主题中添加悬浮立牌 -->
<!-- 引入立牌样式文件 -->
<!-- 引入立牌样式文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sakana-widget@2.7.0/lib/sakana.min.css" />

<!-- 立牌核心脚本 -->
<script>
// 创建立牌容器并设置样式
const sakanaWidget = document.createElement("div");
sakanaWidget.id = "sakana-widget";
sakanaWidget.style.position = "fixed";
sakanaWidget.style.bottom = "12px";
sakanaWidget.style.right = "0";
sakanaWidget.style.zIndex = "999";
document.body.appendChild(sakanaWidget);

// 初始化立牌函数
function initSakanaWidget() {
  // 实例化立牌并挂载到容器
  new SakanaWidget().mount('#sakana-widget');
  // 可选：自定义立牌参数（示例，可根据需要修改）
  // new SakanaWidget({
  //   character: 'chisato', // 默认角色：chisato/lycoris/nishikigi/nijika（可自行扩展）
  //   autoWalk: true, // 开启自走模式
  //   scale: 1.0, // 缩放比例
  //   minWidth: 120 // 最小宽度
  // }).mount('#sakana-widget');
}
</script>

<!-- 异步加载立牌核心JS并初始化 -->
<script
  async
  onload="initSakanaWidget()"
  src="https://cdn.jsdelivr.net/npm/sakana-widget@2.7.0/lib/sakana.min.js">
</script>

第四步：保存并查看效果

点击 "保存设置" 按钮
刷新你的博客首页
查看页面右下角是否出现立牌角色

自定义配置选项

角色列表

javascript

// 可用的预设角色
character: 'chisato'     // 千岁（默认）
character: 'lycoris'     // 莉可丽丝
character: 'nishikigi'   // 锦
character: 'nijika'      // 虹夏

高级参数调整

javascript

// 更多可调整参数示例
new SakanaWidget({
  character: 'chisato',
  autoWalk: true,
  scale: 1.0,
  minWidth: 120,
  
  // 物理引擎参数
  decay: 0.99,           // 阻力系数 (0.95-0.999)
  r: 10,                 // 相互作用力半径
  gravity: 0.2,          // 重力大小
  inertia: 0.99,         // 惯性系数
  
  // 自走模式参数
  autoWalkInterval: 1000, // 自走施加力的间隔(ms)
  autoWalkForce: 0.1,     // 自走施加力的大小
  
  // 控制栏显示
  controls: true,         // 是否显示控制栏
  style: {
    width: '200px',       // 立牌宽度
    height: '300px'       // 立牌高度
  }
}).mount('#sakana-widget');

故障排除

常见问题

立牌不显示
- 检查浏览器控制台是否有错误提示
- 确认CDN链接是否可以正常访问
- 检查z-index是否被其他元素覆盖
无法拖拽
- 确认 draggable: true 已设置
- 检查是否有其他JavaScript冲突
移动端不显示
- 立牌默认在移动端可能隐藏
- 可添加媒体查询强制显示

移动端优化

html

<style>
/* 确保在移动端也能显示 */
@media screen and (max-width: 768px) {
  #sakana-widget {
    display: block !important;
    bottom: 60px !important; /* 避免被移动端浏览器工具栏遮挡 */
    transform: scale(0.8); /* 在移动端稍微缩小 */
  }
}
</style>

注意事项

本功能基于Sakana Widget 2.7.0版本，如后续有更新请调整版本号
立牌可能会稍微影响页面性能，如遇到卡顿可关闭自走模式
如需添加自定义角色，请参考Sakana Widget官方文档
建议在桌面端浏览器使用，移动端体验可能受限

更新日志

v1.0 (2024) - 初始版本，支持基础立牌功能
基于Sakana Widget 2.7.0开发
适配安和鱼博客系统的配置系统

温馨提示：立牌为趣味性功能，如不需要可随时移除代码。如遇到任何问题，可检查浏览器控制台错误信息或尝试更新CDN链接版本号。

在安和鱼（Anheyu）博客中添加网页悬浮立牌

在安和鱼（Anheyu）博客中添加网页悬浮立牌

评论区