在Wix / Squarespace / 其他平台上发布
在WordPress上？ 使用专用的 Naviplus Menu Builder插件 而不是下面的手动嵌入 — 无需编辑主题，通过短代码或Gutenberg块放置Mega Menu。
在Shopify上？ 安装专用的 Shopify应用程序 — 它针对该平台进行了优化，具有内置的发布选项。
本页面涵盖手动脚本嵌入方法，这是Wix、Squarespace、Webflow、Magento和使用PHP、Node.js或纯HTML构建的自定义网站的正确路径。您有以下实施方法：
1. 在您的网站上嵌入Navi+
此实施方法适用于Navi+当前支持的所有菜单类型，包括：Tabbar、Mega menu、Slide menu、FAB和Grid menu。此代码只需使用一次即可适用于所有菜单。
<!-- 将此代码插入到网站的<head>中。 (c) naviplus.io -->
<script>(window._navi_setting ||= []).push({
token: "NAVI123456"
});</script>
<script src="https://live.naviplus.app/start.js" async></script>
<!-- 将此代码插入到网站的<head>中 -->
常见问题解答（FAQ）
什么是token？
每个Navi+账户都有一个唯一的token。您可以直接从应用程序头部查看和复制此token。该token用于安全地发布您的菜单。
什么是https://live.naviplus.app/start.js？
这是Navi+的固定URL，包含应用程序的初始化逻辑。该脚本非常轻量（约4KB），可以在大多数设备和网络条件下快速加载。它通过Cloudflare和BunnyCDN提供，以提供稳定的全球性能和与现代浏览器的可靠兼容性。
使用异步加载方法也意味着它不会影响网站的加载过程。
此嵌入代码会减慢我的网站速度吗？
下面的代码极其轻量，可以插入到您的网站中而不会影响速度（首次加载大约需要100-200毫秒，后续加载为0毫秒）、客户体验或SEO评分
插入此代码片段的最佳位置是什么？
在
部分（或尽可能早）。为什么？网站将按顺序加载资源以呈现界面。将Navi+尽早放入HTML代码中将有助于您的菜单尽快准备好显示，等待条件满足后，菜单将立即出现。这改善了用户体验。</p>
</details>
我如何判断此代码是否已成功嵌入我的网站？
有两种方法：
方法1（适用于所有人）：
打开您的网站，后缀为#navidebug-on，例如：https://domain.com#navidebug-on。如果网站切换到调试模式，则嵌入正常工作。调试模式帮助您轻松识别CSS选择器。使用#navidebug-off关闭它。
方法2（适用于开发者）：
打开浏览器的检查工具，转到控制台选项卡，查找绿色消息：“使用Navi+..”。此消息表示代码已成功嵌入。
选项1：插入之前
在所选元素之前立即插入Navi+菜单。
示例： CSS选择器 main → 菜单出现在页面的主要内容区域上方。
此选项的常见CSS选择器：
main — 适用于大多数平台（Webflow、Magento、自定义网站）#main — 一些平台和自定义主题.main-content — 各种平台
不在此列表中？您可以与Navi+支持人员聊天以获得即时帮助，或使用 调试模式 或 浏览器开发者工具 自行查找。
选项2：插入之后
在所选元素之后立即插入Navi+菜单。
示例： CSS选择器 header → 菜单出现在标题下方。
这是桌面Mega Menu的最常见设置。
此选项的常见CSS选择器：
header — 适用于大多数平台.header-wrapper — 一些平台.site-header — 各种平台
不在此列表中？您可以与Navi+支持人员聊天以获得即时帮助，或使用 调试模式 或 浏览器开发者工具 自行查找。
选项3：替换
完全用Navi+菜单替换所选元素。原始元素被隐藏，Navi+取而代之。
示例： CSS选择器 .main-nav → 网站的默认导航被隐藏并被您的Navi+ Mega Menu替换。
此选项的常见CSS选择器：
nav — 通用导航元素.main-nav — 各种平台.site-navigation — 各种平台
注意： 使用替换模式时，原始菜单可能会短暂闪现，直到Navi+加载完成。请参见I.4以防止这种情况。
不在此列表中？您可以与Navi+支持人员聊天以获得即时帮助，或使用 调试模式 或 浏览器开发者工具 自行查找。