将布局内容设为可编辑

您可以在布局中配置特定文本或图像内容,以将其设为可由处理基于该布局的页的用户对其进行编辑。

可以在任何主题(包括 Bootstrap 主题)中使用此功能。修改会自动采用原始页的样式。

可以在布局中向以下 HTML 标记 (tag) 添加简单的标记 (markup):<p><h1><h6><div><img>

文本和图像格式设置选项包括:

  • 文本:允许用户指定粗体、斜体、下划线和链接。

  • 图像:允许用户指定指向图像文件的链接。更改标题的属性(用户将光标悬停在图像上时看到的内容),以及添加用于可访问性的替代文本。

要修改文本或图像元素以便用户可以对其进行编辑,有两个条件:

  1. scs-editable 添加到 class

  2. 添加唯一的 id 属性。

修改了布局后,该功能可用于基于该布局的所有页(即使是新页也是如此)。

如果复制并粘贴页,则修改将会复制到新页。

修改标题标记

下面是有关如何在布局中修改标题标记以便用户可以对其进行编辑的示例。
  1. 将布局文件同步到本地桌面,或编辑 <h1> 标题对应的 HTML 源文件。

  2. 在标题对应的代码行中,将 scs-editable 添加到 class,并添加属性 id="test-heading",以使其允许为其附加编辑器。例如:

    <h1 class="brand-heading scs-editable" id="test-heading">Sample Heading Value</h1>
  3. 保存文件。

  4. Oracle Content Management 同步并重新加载浏览器。

    当用户将光标悬停在标题上时,标题周围应显示黑色边框,这表示内容可以编辑。当用户单击标题时,边框将变为绿色,这表示用户现在可以编辑标题内容。

  5. 如果还未发布主题,请发布。如果已发布主题,则当您刷新浏览器时,将会显示更改。

    发布主题后,站点用户可以单击标题并在站点构建器中对其进行编辑。

    系统会为 scs-editable 元素创建伪组件,以便您可以在站点构建器中对其进行更改,并将其与页数据一起存储。运行时,在呈现页之前,控制器会将 scs-editable 标记替换为您在站点构建器中设置的值。

修改图像标记

在布局中修改图像标记以便用户可以对其进行编辑的过程与文本相似。

  1. scs-editable 添加到 class

  2. 添加唯一的图像 id

用户可以单击图像,然后更改属性以使用其他图像。

下面是用户可以编辑的图像的示例代码:

<img class="scs-editable" id="test-image" src="_scs_theme_root_/assets/img/downloads-bg-small.jpg"/>