在Wix / Squarespace / 其他平台上发布
在WordPress上？ 使用专用的 Naviplus Menu Builder插件 而不是下面的手动嵌入 — 无需编辑主题，通过短代码或Gutenberg块放置网格。
在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 → 网格菜单出现在页面的主要内容区域上方，显示为完整部分。
这是在非Shopify平台上设置网格菜单的最常见方式。
此选项的常见CSS选择器：
main— 适用于大多数平台（Webflow、Magento、自定义网站）#main— 一些平台和自定义主题.main-content— 各种平台
选项2：插入之后
在所选元素之后立即插入Navi+菜单。
示例： CSS选择器 header → 网格菜单出现在标题下方。
此选项的常见CSS选择器：
header— 适用于大多数平台.header-wrapper— 一些平台.site-header— 各种平台