如何在自定义网站展示并预览Storyblok内容？附PHP调用示例

一、使用JavaScript展示Storyblok故事内容 #

方案1：前端直接调用Content Delivery API #

通过Storyblok JavaScript SDK（或原生fetch）直接获取并渲染内容：

// 初始化SDK
const storyblok = new StoryblokClient({
  accessToken: '你的公开访问令牌',
  cache: { type: 'memory', clear: 'auto' }
});

// 获取指定slug的故事
storyblok.get('cdn/stories/tomandjerry')
  .then(res => {
    const story = res.data.story;
    renderStory(story.content);
  })
  .catch(err => console.error('获取内容失败:', err));

// 自定义渲染函数，根据你的内容结构调整
function renderStory(content) {
  const container = document.getElementById('story-container');
  // 示例：假设内容包含title和body字段
  container.innerHTML = `
    <h1>${content.title}</h1>
    <div class="story-body">${content.body}</div>
  `;
}

方案2：后端PHP传递数据到前端渲染 #

如果已经通过PHP获取到故事数据，可以直接将数据注入页面，前端直接使用：

// PHP代码：将故事数据转为JSON输出到页面
echo '<script>window.storyData = ' . json_encode($data['story']) . ';</script>';

前端JavaScript：

// 直接使用后端传递的数据
const story = window.storyData;
renderStory(story.content);

function renderStory(content) {
  // 同方案1的渲染逻辑
}

二、在自定义网站中启用Storyblok可视化预览 #

要实现编辑器内的实时预览和编辑，需完成以下步骤：

1. 引入Storyblok Bridge脚本 #

在页面的<head>或<body>中添加：

<script src="https://app.storyblok.com/f/storyblok-v2-latest.js"></script>

2. 初始化Bridge并监听编辑器事件 #

document.addEventListener('DOMContentLoaded', () => {
  const sbBridge = new StoryblokBridge({
    accessToken: '你的公开访问令牌'
  });

  // 监听编辑器内容变更，实时更新页面
  sbBridge.on(['input', 'published'], (event) => {
    if (event.action === 'input') {
      // 预览模式下加载草稿版本
      storyblok.get('cdn/stories/tomandjerry', { version: 'draft' })
        .then(res => renderStory(res.data.story.content));
    } else {
      // 发布后刷新页面
      window.location.reload();
    }
  });

  // 检测是否处于编辑器环境，加载对应版本内容
  sbBridge.isInEditor().then(isInEditor => {
    const params = isInEditor ? { version: 'draft' } : {};
    storyblok.get('cdn/stories/tomandjerry', params)
      .then(res => renderStory(res.data.story.content));
  });
});

3. 为组件添加可编辑标记 #

要让编辑器识别页面上的可编辑区域，需在渲染的元素上添加Storyblok返回的组件标识：

function renderStory(content) {
  const container = document.getElementById('story-container');
  // 为根组件添加data-blok属性
  const html = `
    <div data-blok-c="${JSON.stringify(content._uid)}" data-blok-uid="${content._uid}">
      <h1>${content.title}</h1>
      <div>${content.body}</div>
    </div>
  `;
  container.innerHTML = html;
  // 通知Bridge刷新可编辑区域
  sbBridge?.refreshEvents();
}

4. 配置后台预览URL #

在Storyblok空间设置中，将「预览URL」设置为你的自定义网站对应页面的地址（如http://your-domain.com/tomandjerry），确保编辑器能跳转至你的网站加载预览内容。

内容的提问来源于stack exchange，提问作者tee