Bloomreach SPA SDK 软件
Bloomreach SPA SDK 提供简化的无头集成 与 Bloomreach 内容 用于基于 JavaScript 的应用程序。 此库与 页:1 页面模型 API 并曝光页面模型上的简化和框架不可知界面.
特征
- 页面模型 API 客户端
- Page 模式 Javascript 执行
- URL 生成器
- 与 Bloomreach 体验管理器集成预览
开始
安装
让SDK进入你的项目 国家预防机制数字 :
npm install @bloomreach/spa-sdk
还有 雅伦数字 :
yarn add @bloomreach/spa-sdk
使用量
以下代码片段请求相关页面模式并显示该页面的标题.
import axios from "axios";
import { initialize } from "@bloomreach/spa-sdk";
async function showPage(path) {
const page = await initialize({
// The path to request from the Page Model API, should include query
// parameters if those are present in the url
path,
// The location of the Page Model API of the brX channel
endpoint: "http://localhost:8080/delivery/site/v1/channels/brxsaas/pages",
// The httpClient used to make requests
httpClient: axios,
});
document.querySelector("#title").innerText = page.getTitle();
}
showPage(`${window.location.pathname}${window.location.search}`);
或者,使用当地人 fetch API(由于 fetch 无法直接兼容 HttpClient 签名 :
import { initialize } from "@bloomreach/spa-sdk";
const httpClient = async ({ method, url, headers, data }) => {
const response = await fetch(url, {
method,
headers: headers,
body: data !== undefined ? JSON.stringify(data) : undefined,
});
return { data: await response.json() };
};
async function showPage(path) {
const page = await initialize({
path,
endpoint: "http://localhost:8080/delivery/site/v1/channels/brxsaas/pages",
httpClient,
});
document.querySelector("#title").innerText = page.getTitle();
}
showPage(`${window.location.pathname}${window.location.search}`);
相关性 整合
(不适用于 SaaS 内容)
SDK提供基础 快递 中间软件 用于无缝 融合 与 相关性模块。 。 。 .
import express from "express";
import { relevance } from "@bloomreach/spa-sdk/dist/express";
const app = express();
app.use(relevance);
中间软件可以使用 withOptions 方法.
app.use(relevance.withOptions({ name: "_visitor", maxAge: 24 * 60 * 60 }));
安全渲染 HTML 内容
为了安全起见,您应该/必须将页面模型中返回的HTML内容进行消毒。 撤走之前
消毒方法,我们使用 sanitize-html 用于此目的的 SDK 软件包。 你现在可以用你喜欢的
根据您的项目要求进行消毒的图书馆或技术。 确保保存 data-type 属性
当SDK确定哪些链接是外部链接和哪些链接是外部链接时,在丰富的内容字段中的链接
使用时的内部 rewriteLinks 方法.
例如,在反应的例子中,您可以将来自后端的 HTML 内容像 实例如下:
import sanitize from 'sanitize-html';
function sanitizeRichContent(content: string): string {
return sanitize(content, {
allowedAttributes: {
a: ['href', 'name', 'target', 'title', 'data-type', 'rel'],
img: ['src', 'srcset', 'alt', 'title', 'width', 'height', 'loading'],
},
allowedTags: sanitizeHTML.defaults.allowedTags.concat(['img']),
});
}
/* ... */
/* Suppose the content.value below contains HTML markups string. */
<div>
{content && <div dangerouslySetInnerHTML={{ __html: page.rewriteLinks(sanitizeRichContent(content.value)) }} />}
</div>
同一原则可适用于其他框架。 例如, v-html 在 Vue.js 中或 [innerHTML] 在角质.
没有 SDK 实例的页面的持续预览数据
如果您在某些页面上选择性地使用 SPA SDK, 您需要坚持预览相关数据 浏览有和没有SDK实例的页面. 实现这一结果的最简单方法是 如下文所示,使用饼干储存.
代码的以下片段显示了构建配置对象到
传入 initialize 从 SPA SDK 函数或直接到 a BrPage 组件.
它从查询字符串中读取预览数据并将其保存到 cookie, 如果无法在
查询字符串。 用来管理饼干 cookie 图书馆或任何其他图书馆.
重要说明
- 预览站点应该与现场站点相比在单独的域上服务,以避免保存预览相关内容 现场的饼干.
- 如果在预览中加载的首页不使用 SPA SDK, 您应该解析查询参数和 将预览相关数据保存到 cookie 中.
这是一个通用的例子,你应该根据你的具体框架进行调整.
import axios from 'axios';
import cookie from 'cookie';
import { Configuration } from '@bloomreach/spa-sdk';
export default function buildConfiguration(): Configuration {
const PREVIEW_TOKEN_KEY = 'token';
const PREVIEW_SERVER_ID_KEY = 'server-id';
// Read a token and server id from the query string
const searchParams = new URLSearchParams(window.location.search);
const queryToken = searchParams.get(PREVIEW_TOKEN_KEY);
const queryServerId = searchParams.get(PREVIEW_SERVER_ID_KEY);
const cookies = cookie.parse(document.cookie);
// Prioritize values from the query string because cookies might be outdated.
const authorizationToken = queryToken ?? cookies[PREVIEW_TOKEN_KEY];
const serverId = queryServerId ?? cookies[PREVIEW_SERVER_ID_KEY];
// Save the values from the query string to have ability to restore them when switch back from legacy page to the SPA-SDK rendered page.
if (queryToken) {
document.cookie = cookie.serialize(PREVIEW_TOKEN_KEY, queryToken);
}
if (queryServerId) {
document.cookie = cookie.serialize(PREVIEW_SERVER_ID_KEY, queryServerId);
}
const configuration = {
endpoint: 'your-pda-endpoint',
httpClient: axios,
path: `${location.pathname}${location.search}`,
// Provide authorization token and server id if they exist to the SPA-SDK initialization method.
...(authorizationToken ? { authorizationToken } : {}),
...(serverId ? { serverId } : {}),
};
return configuration;
};
或者,使用当地人 fetch API : (英语)
import cookie from 'cookie';
import { Configuration, HttpClient } from '@bloomreach/spa-sdk';
const httpClient: HttpClient<any> = async ({ method, url, headers, data }) => {
const response = await fetch(url, {
method,
headers: headers as Record<string, string>,
body: data !== undefined ? JSON.stringify(data) : undefined,
});
return { data: await response.json() };
};
export default function buildConfiguration(): Configuration {
const PREVIEW_TOKEN_KEY = 'token';
const PREVIEW_SERVER_ID_KEY = 'server-id';
const searchParams = new URLSearchParams(window.location.search);
const queryToken = searchParams.get(PREVIEW_TOKEN_KEY);
const queryServerId = searchParams.get(PREVIEW_SERVER_ID_KEY);
const cookies = cookie.parse(document.cookie);
const authorizationToken = queryToken ?? cookies[PREVIEW_TOKEN_KEY];
const serverId = queryServerId ?? cookies[PREVIEW_SERVER_ID_KEY];
if (queryToken) {
document.cookie = cookie.serialize(PREVIEW_TOKEN_KEY, queryToken);
}
if (queryServerId) {
document.cookie = cookie.serialize(PREVIEW_SERVER_ID_KEY, queryServerId);
}
const configuration = {
endpoint: 'your-pda-endpoint',
httpClient,
path: `${location.pathname}${location.search}`,
...(authorizationToken ? { authorizationToken } : {}),
...(serverId ? { serverId } : {}),
};
return configuration;
};
许可证
原载 Apache 2.0 (英语) 执照.
参考文献
用于 SPA SDK 的 Typedoc 自动生成并发布 改为 https://bloomreach.github.io/spa-sdk/modules/index.html 页面存档备份,存于互联网档案馆