npm 接入
在 React、Vue 或任意前端项目中使用 @geo/sdk 核心包。
npm i @geo/sdk初始化
import { geo } from '@geo/sdk';
geo.init({
site: 'pk_live_xxxxxxxx',
locale: 'auto',
mode: 'fill',
spa: true,
events: true,
});核心 API
| 方法 | 说明 |
|---|---|
geo.init(options) | 初始化并拉取当前路径的配置 |
geo.set(variables) | 注册页面变量，触发重新渲染 head |
geo.page(path?, locale?) | 手动通知路由变化（关闭 spa 时使用） |
geo.on(event, handler) | 订阅 ready / rulematch / error |
geo.destroy() | 移除监听并恢复原始 head |
React 适配
import { GeoProvider, useGeoVariables } from '@geo/sdk-react';
export function App() {
return (
<GeoProvider site="pk_live_xxxxxxxx">
<Article />
</GeoProvider>
);
}
function Article({ post }) {
useGeoVariables({ title: post.title, summary: post.summary, author: post.author });
return <article>…</article>;
}服务端渲染（通用 Node）
import { renderHead, fetchConfig } from '@geo/sdk/server';
const config = await fetchConfig({ site: 'pk_live_xxxxxxxx', path: req.path, locale: 'en' });
const headHtml = renderHead(config, { title: post.title, summary: post.summary });
// 把 headHtml 插入模板的 <head>renderHead() 是纯函数，浏览器端与服务端共用同一套渲染逻辑，保证水合一致。