哪吒面板default主题小鸡底部增加购买同款按钮
内容提要
本文介绍了如何在哪吒面板中添加JavaScript代码，以展示VPS橱窗效果。用户需对机器进行分类，并填写不同平台的邀请链接。示例代码动态展示价格和到期信息，方便用户购买VPS服务。
延伸解读
代码实现的关键机制
这段JavaScript通过遍历页面中的分类和卡片元素，动态为每个VPS实例添加购买按钮和价格、到期信息。它依赖extraData对象中的id来匹配数据，因此必须确保机器id与extraData中的键一致。同时，affLinks根据分类名称提供对应的邀请链接，所以分类名称必须与affLinks中的键完全匹配，否则按钮链接将无效。
配置时的注意事项
使用前需在面板中为机器设置分类，并将机器放入对应分类，否则代码不会生效。对于需要跳转到特定pid的机器，必须在机器名称中添加“-pid”后缀，代码会解析该后缀并附加到购买链接中。此外，新版本将附加信息存储在单独变量中，修改时需同步更新extraData对象。
自定义与兼容性
代码提供了基本的按钮样式，但用户可以根据演示站代码调整按钮的样式，如位置、颜色和圆角。需要注意的是，代码依赖于特定的HTML结构（如.ui.accordion和.ui.card），如果面板主题或版本更新导致结构变化，可能需要调整选择器。建议在测试环境中先行验证。
Q&A
如何在哪吒面板中添加JavaScript代码？
在哪吒面板的设置界面中，进入自定义代码部分，添加相应的JavaScript代码并刷新即可看到效果。
VPS橱窗效果的主要功能是什么？
VPS橱窗效果主要用于动态展示VPS的价格和到期信息，方便用户进行购买。
在affLinks中需要填写什么内容？
在affLinks中需要填写不同平台的邀请链接地址，以便用户购买相应的VPS服务。
如何分类机器以便展示在VPS橱窗中？
用户需要将机器放在对应的分类中，以确保在VPS橱窗中正确展示。
示例代码中如何处理价格和到期信息？
示例代码中通过创建变量存储价格和到期信息，并在展示时动态插入到相应位置。
新版本中附加信息是如何存储的？
新版本中所有附加信息被单独存储为变量，以便于管理和展示。
