对于您创建的组件,将像用于站点的主题中 design.json
和 design.css
文件中的任何其他组件那样进行处理。
要为定制组件添加您自己的样式,请确认您注册组件时使用的 id
值。在 appinfo.json
文件中,此项是 "id": "hello-world"
。
使用该值,编辑主题的 design.json
文件,并针对该 id
添加要支持的新样式。例如,编辑主题中的 /designs/default/design.json
文件并添加以下代码:
"hello-world": { "styles": [{ "name": "Plain", "class": "hello-world-default-style" }, { "name": "Gothic", "class": "hello-world-gothic-style" }] },
如果您针对组件打开“设置”面板,现在应看到 Plain(默认值)和 Gothic 作为“样式”选项卡中列出的两个选项。不过,在这些选项之间切换将不执行任何操作,直到您实际定义 design.css
文件中列出的样式类。
编辑主题的 design.css
文件,并添加样式的级联样式表 (cascading style sheet, CSS) 类。例如,编辑主题中的 /designs/default/design.css
文件并添加以下代码:
.hello-world-default-style .scs-component-content { font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-size: 24px; font-weight: normal; } .hello-world-gothic-style .scs-component-content { font-family: "Century Gothic","CenturyGothic","AppleGothic",sans-serif; font-size: 32px; font-weight: bold; }
将文件保存并同步到 Oracle Content Management 实例服务器。
检查步骤 12 的结果
刷新站点中的页,以便站点构建器能够获取对组件的更改。
让页进入编辑模式。
将组件拖放到页上。
针对组件打开“设置”面板。
转到“样式”选项卡。
在 design.json
文件中定义的 Gothic 和 Plain 样式之间切换。
您将注意到,在每个选择的已应用 CSS 类之间切换时,组件内的字体大小将进行调整以反映更改。
继续执行步骤 13:在内嵌框架中呈现组件。