Bloomreach Vue SDK 软件

Bloomreach Vue SDK 提供了简化的无头集成 Bloomreach 内容 用于基于 Vue 的应用程序。 此库与 页面模型 API 财务报告和审定财务报表 Bloomreach SPA SDK 软件 财务报告和审定财务报表 在Page Model上曝光了简化的Vue.js接口.

先决条件

要使用Vue SDK,需要安装Vue 3.

特征

• Bloomreach Page Vue 组件;
• Bloomreach 组件 Vue 组件;
• 管理内容按钮;
• 管理菜单按钮;

开始

安装

让SDK进入你的项目 国家预防机制数字 :

npm install @bloomreach/vue-sdk

还有 雅伦数字 :

yarn add @bloomreach/vue-sdk

使用量

以下代码片段使一个简单的页面带有 横幅 组件.

src/main.ts

在应用程序的条目文件中,它需要导入和 安装 页:1 BrSdk 使 SDK 组件在全球开放的插件 .

import { createApp } from 'vue'
import { BrSdk } from '@bloomreach/vue-sdk';

const app = createApp(/*... */);
app.use(BrSdk);

/*... */

src/App.vue

在那个 App 组件,它需要通过配置和 Bloomreach 内容组件 绘制 br-page 构成部分投入.

<template>
  <br-page :configuration="configuration" :mapping="mapping">
    <template v-slot="props">
      <header>
        <a :href="props.page.getUrl('/')">Home</a>
        <br-component component="menu" />
      </header>
      <section>
        <br-component component="main" />
      </section>
      <footer>
        <br-component component="footer" />
      </footer>
    </template>
  </br-page>
</template>

<script lang="ts" setup>
  import Banner from './components/Banner.vue';
  
  const configuration = {
    /* ... */
  };
  const mapping = { Banner };
</script>

src/components/Banner.vue

最后,在 Banner 组件,它可以通过 component 道具 (英语).

<template>
  <div>Banner: {{ component.getName() }}</div>
</template>

<script lang="ts" setup>
  import { toRefs } from 'vue';
  
  const props = defineProps<{ component: Component }>();
  const { component } = toRefs(props);
</script>

非阻塞渲染模式( NBRMODE)

非屏蔽渲染模式可用于减少应用程序在客户端完全加载的时间. 以 默认 NBRMODE 配置为 false 以避免打破现有设置。 设为 true 将启用 非阻塞渲染模式。 当模式激活时, BrPage 组件的子将开始安装, 同时 正在获取页面模型 。 这些孩子可能包含逻辑本身,可以查询一些外部API并使用 非屏蔽渲染模式将允许在请求页面模型的同时执行.

<!-- MyComponent.vue -->
<template>
  Hello
</template>

<script lang="ts" setup>
  import { onMounted } from 'vue';
  
  onMounted(async () => {
    // This will run in parallel to fetching the Page Model from the Delivery API
    await fetch('https://yourapi.com');
  });
</script>

<template>
  <br-page :configuration="configuration" :mapping="mapping">
    <my-component></my-component>
    <template v-slot:default="props">
      ...
  </br-page>
</template>

<script lang="ts" setup>
  const configuration = {
    NBRMode: true,
    /* ... */
  };
  const mapping = {/* ... */};
</script>

重要使用说明

每页/路特单页

只用一个 br-page 每个页面或路由的组件. 这个 br-page 组成部分旨在:

• 从 Page 模型 API 获取特定路径的页面模型
• 为内容更新设置 CMS 预览听众
• 为所有子组件提供页面上下文
• 管理完整页面状态

使用多个 br-page 同页上的组件将引发冲突,不支持。 如果您需要制作不同的页面段落, 请使用 br-component 单人之内 br-page 换句话说.

配置

这个 br-page 组件支持您可用于自定义页面的多个选项 初始化。 这些选项将转交给 initialize 函数从 @bloomreach/spa-sdk。见 这里 联 合 国 sPA SDK Typedocs中的完整配置文档.

绘图

这个 br-page 组件提供了一个将 Vue 组件与 Bloomreach 内容链接的方法 这些。 它需要通过 mapping 属性,用于映射组件类型 及其代表.

这个 集装箱物品 可能会是 他们的标签.

<template>
  <br-page :configuration="configuration" :mapping="mapping" />
</template>

<script lang="ts" setup>
  import NewsList from './components/NewsList.vue';
  
  const configuration = {
    /* ... */
  };
  const mapping = { 'News List': NewsList };
</script>

这个 集装箱 只能用他们的 类型, (中文(简体) ), 因此,你需要使用 常数 从 @bloomreach/spa-sdk默认情况下, vue SDK 提供了所有集装箱类型的实施 定义 文档。 。 。 .

<template>
  <br-page :configuration="configuration" :mapping="mapping" />
</template>

<script lang="ts" setup>
  import { TYPE_CONTAINER_INLINE } from '@bloomreach/spa-sdk';
  import InlineContainer from './components/InlineContainer.vue';
  
  const configuration = {
    /* ... */
  };
  const mapping = { [TYPE_CONTAINER_INLINE]: InlineContainer };
</script>

在集装箱部分内,集装箱物品可通过 getChildren 方法。 这可用于重排或包装子元素.

<template>
  <div>
    <span v-for="(child, key) in component.getChildren()" :key="key">
      <br-component :component="child" />
    </span>
  </div>
</template>

<script lang="ts" setup>
  import { toRefs } from 'vue';
  
  const props = defineProps<{ component: Component }>();
  const { component } = toRefs(props);
</script>

这个 构成部分 可以用他们的名字绘制地图。 对菜单组件映射很有用.

<template>
  <br-page :configuration="configuration" :mapping="mapping" />
</template>

<script lang="ts" setup>
  import Menu from './components/Menu.vue';

  const configuration = {
    /* ... */
  };
  const mapping = { menu: Menu };
</script>

默认情况下,未绘制地图的集装箱项目将用作警告 语句。 有一种选择可以推翻倒计时.

<template>
  <br-page :configuration="configuration" :mapping="mapping" />
</template>

<script lang="ts" setup>
  import { TYPE_CONTAINER_ITEM_UNDEFINED } from '@bloomreach/spa-sdk';
  import Fallback from './components/Fallback.vue';

  const configuration = {
    /* ... */
  };
  const mapping = { [TYPE_CONTAINER_ITEM_UNDEFINED]: Fallback };
</script>

内置映射

还有另一种方式可以构成一个组成部分。 如果你需要显示 静态组件或抽象页面中的组件,可以使用内线 组件映射.

<template>
  <br-page :configuration="configuration" :mapping="mapping">
    <template>
      <br-component component="menu">
        <template v-slot:default="{ component, page }">
          <Menu :component="component" :page="page" />
        </template>
      </br-component>
    </template>
  </br-page>
</template>

<script>
  import Menu from './components/Menu.vue';
  
  const configuration = {
    /* ... */
  };
  const mapping = {
    /* ... */
  };
</script>

在一个组成部分中,也可以指出该组成部分的儿童在哪里 将会被安置.

<template>
  <div>
    @copy; Bloomreach
    <br-component/>
  </div>
</template>

<script lang="ts" setup>
  import { Component } from '@bloomreach/spa-sdk';
  import { toRefs } from 'vue';
  
  const props = defineProps < { component: Component } > ();
  const { component } = toRefs(props);
</script>

内部映射的组件数据可通过模板访问 上下文.

<template>
  <br-page :configuration="configuration" :mapping="mapping">
    <template>
      <br-component component="menu">
        <template v-slot:default="{ component, page }">
          <ul>
            <li><a :href="page.getUrl('/')">Home</a></li>
            <li v-for="(item, key) in component.getModels()" :key="key">...</li>
          </ul>
        </template>
      </br-component>
    </template>
  </br-page>
</template>

<script lang="ts" setup>
  const configuration = {
    /* ... */
  };
  const mapping = {
    /* ... */
  };
</script>

按钮

建议添加 Css 风格 position: relative 切入按钮 因此,他们将正确定位在母容器组件内.

管理菜单按钮可使用 br-manage-menu-button 组件.

<template>
  <ul v-if="menu" :class="{ 'has-edit-button': page.isPreview() }">
    <!-- ... -->

    <br-manage-menu-button :menu="menu" />
  </ul>
</template>

<script lang="ts" setup>
  import { toRefs, computed } from 'vue';
  import { Menu, Reference, Component, Page } from '@bloomreach/spa-sdk';

  interface MenuModels {
    menu: Reference;
  }
  
  const props = defineProps<{ component: Component; page: Page }>();
  const { component, page } = toRefs(props);
  const menu = computed(() => {
    const { menu: menuRef } = component.value.getModels<MenuModels>();
    return menuRef && page.value.getContent<Menu>(menuRef);
  });
</script>

管理内容按钮可使用 br-manage-content-button 非空组件 content 属性.

<template>
  <div v-if="document" :class="{ 'has-edit-button': page.isPreview() }">
    <!-- ... -->

    <br-manage-content-button
      :content="document"
      document-template-query="new-banner-document"
      folder-template-query="new-banner-folder"
      parameter="document"
      root="banners"
      :relative="true"
    />
  </div>
</template>

<script>
  import { toRefs, computed } from 'vue';
  import { Document, Reference, Page, Component } from '@bloomreach/spa-sdk';

  interface BannerModels {
    document: Reference;
  }
  
  const props = defineProps<{ component: Component; page: Page }>();
  const { component, page } = toRefs(props);
  
  const document = computed(() => {
    const { document: documentRef } = component.value.getModels<BannerModels>();
    return documentRef && page.value.getContent<Document>(documentRef);
  });
</script>

添加新内容按钮可使用 br-manage-content-button 指令,但不传递内容实体.

<template>
  <div :class="{ 'has-edit-button': page.isPreview() }">
    <!-- ... -->

    <br-manage-content-button
      document-template-query="new-news-document"
      folder-template-query="new-news-folder"
      root="news"
    />
  </div>
</template>

<script lang="ts" setup>
  import { Component, Page } from '@bloomreach/spa-sdk';
  
  const props = defineProps<{ component: Component, page: Page }>();
  const { component, page } = toRefs(props);
</script>

许可证

原载 Apache 2.0 (英语) 执照.

参考文献

Vue SDK 正在使用 Bloomreach SPA SDK 软件 要交互 与 Bloomreach 内容.

br 页面

这是页面模型的切入点 。 本构成部分要求和 初始化页面模型,然后使页面根组件 递相取取.

此组件还支持默认插槽转录. <template> 从 组件内容将在根组件上下文中提供.

b 组件

本部分指出儿童或某些部分应放在何处. br-component 可在内部使用 br-page 或只绘制组件。 如果是 包含 <template> 在内容中,然后模板将在 上下文。 否则,它将试图使所有 儿童成分递归.

模板上下文包含当前组件和当前 页面实例.

br- 管理内容- 按钮

此组件在打开链接内容的页面上设置按钮 文档编辑器或打开文档编辑器以创建新的编辑器。 按钮会 仅以预览模式显示.

br- 管理- 菜单- 按钮

此指令在打开链接菜单的页面上设置按钮 菜单编辑器。 按钮仅以预览模式显示 .