哪吒面板default主题小鸡底部增加购买同款按钮
内容提要
本文介绍了如何在哪吒面板中添加JavaScript代码，以展示VPS产品的分类和购买链接。用户需将机器放入相应分类，并填写不同平台的邀请链接，代码还动态展示产品价格和到期信息。
延伸解读
分类与邀请链接的配置要点
代码依赖哪吒面板中的分类名称来匹配邀请链接。用户必须先将机器放入对应分类，并在affLinks对象中填写各平台的邀请链接。分类名称需与affLinks的键一致，否则按钮链接会错误。此外，新版本要求机器名称中包含“-pid”以便跳转到特定产品页，否则pid为0时仅跳转基础链接。
动态价格与到期信息的实现逻辑
代码通过extraData对象为每台机器存储价格和到期信息，并动态插入到卡片描述中。extraData的键是机器卡片的id属性，需与面板中机器id对应。价格和到期信息会以图标加文字形式展示，若未提供则对应字段不显示。这要求用户手动维护extraData，机器增减时需同步更新。
按钮样式与位置的自定义方法
默认按钮样式为蓝色背景、白色文字、圆角矩形，并绝对定位在卡片右下角。文章提供了演示站按钮的替代样式代码，可改为绿色背景、胶囊形状并调整位置。用户可根据需要修改aLinkBox和aLink的style属性，但需注意绝对定位可能受卡片布局影响，需测试不同屏幕下的显示效果。
Q&A
如何在哪吒面板中添加JavaScript代码？
在哪吒面板的设置界面中，进入自定义代码部分，添加指定的JavaScript代码并刷新即可。
在哪吒面板中如何分类VPS产品？
用户需要将机器放入相应的分类，并在affLinks中填写不同平台的邀请链接地址。
代码中如何动态展示产品价格和到期信息？
代码通过extraData对象存储产品的价格和到期信息，并在页面中动态插入这些信息。
如何确保机器名称中包含pid？
在机器名称中需要增加特定格式的pid，以便代码能够正确识别和处理。
添加的JavaScript代码有什么特殊说明？
代码需要确保所有附加信息以单独变量存储，并且必须增加分类以便正确显示。
如何在哪吒面板中实现购买链接的展示？
通过在代码中创建购买链接的元素，并将其与相应的VPS产品关联，可以实现购买链接的展示。
