自定义 JavaScript
为文档站点添加自定义 JavaScript,用于聊天小组件、分析、第三方集成及其他客户端功能。
Jamdesk 允许你添加在文档站点每个页面上运行的自定义 JavaScript。你可以将其用于聊天小组件、分析,或所需的任何其他客户端脚本。
添加自定义 JavaScript
在文档目录中创建 JavaScript 文件,并在 docs.json 中引用:
docs.json
{
"styling": {
"js": "/script.js"
}
}script.js
// Your custom JavaScript runs on every page
console.log('Hello from custom JS!');你的脚本会直接内联到页面 HTML 中,因此会在页面加载时执行。
自动检测
如果你没有配置 styling.js,Jamdesk 会自动检测项目根目录中的 .js 文件。只需在 docs.json 旁边放置一个 script.js 文件,该文件就会被包含。
my-docs/
├── docs.json
├── script.js ← auto-detected
├── introduction.mdx
└── getting-started.mdx
在 docs.json 中配置了 styling.js 后,自动检测将被禁用,并且只会使用指定的文件。
自动检测会包含项目根目录中的所有
.js 文件。如果文档目录中还有 eslint.config.js 或 postcss.config.js 等实用脚本,请在 docs.json 中使用 styling.js,以准确指定要包含的文件。多个文件
通过传入数组来包含多个脚本:
docs.json
{
"styling": {
"js": ["/chat.js", "/analytics.js"]
}
}使用自动检测时,根目录中的所有 .js 文件都会按字母顺序包含。如果同时存在 analytics.js 和 chat.js,它们会按此顺序加载。
示例
聊天小组件(Crisp)
script.js
window.$crisp = [];
window.CRISP_WEBSITE_ID = "your-website-id";
(function () {
var d = document;
var s = d.createElement("script");
s.src = "https://client.crisp.chat/l.js";
s.async = 1;
d.getElementsByTagName("head")[0].appendChild(s);
})();自定义分析
script.js
// Track outbound link clicks
document.addEventListener('click', function (e) {
var link = e.target.closest('a[href^="http"]');
if (link && !link.href.includes(window.location.hostname)) {
console.log('Outbound click:', link.href);
// Send to your analytics service
}
});反馈小组件
script.js
// Load a feedback widget after the page is ready
window.addEventListener('load', function () {
var s = document.createElement('script');
s.src = 'https://your-feedback-tool.com/widget.js';
s.setAttribute('data-project', 'your-project-id');
document.body.appendChild(s);
});工作原理
你的 JavaScript 文件会在构建过程中读取,并直接嵌入每个页面的 HTML 中。脚本标签会放置在 <body> 末尾,因此代码运行时 DOM 已可用。
在本地开发中(jamdesk dev),脚本会自动加载,并在浏览器刷新时热重载。
限制
- 脚本会在每个页面上运行——无法指定仅针对特定页面
- 更改需要重新构建才能生效(本地开发时刷新浏览器即可)
- 脚本会内联到 HTML 中,而不会作为独立文件提供
- 对于分析功能,建议改用内置的 集成,它会自动处理同意管理和性能优化
