คุณสามารถสร้างลิสต์ของสไตล์ที่กำหนด ซึ่งผู้ใช้สามารถนำมาใช้กับองค์ประกอบของคุณ
การมีลิสต์ของสไตล์ที่กำหนดไว้ล่วงหน้าสำหรับองค์ประกอบของคุณนั้น เป็นรูปแบบที่เหมือนกับการกำหนดคลาสของสไตล์สำหรับองค์ประกอบที่มาพร้อมกับ Oracle Content Management ในไฟล์การออกแบบของธีม คุณจะกำหนดชื่อคลาสของสไตล์ที่กำหนดเองในไฟล์ appinfo.json
สำหรับองค์ประกอบนี้
คุณจะกำหนดสไตล์เพิ่มเติมในไฟล์ design.css
และ design.json
ไฟล์ json
จะมีการแมปชื่อซึ่งจะปรากฏในอินเตอร์เฟซผู้ใช้กับชื่อคลาส css
ที่ใช้งานตามจริง และไฟล์ css
จะมีรายละเอียดสำหรับแต่ละคลาสของสไตล์
ไฟล์ design.json
มีโครงสร้างต่อไปนี้สำหรับองค์ประกอบ:
{ "componentStyles": { "scs-image": { "styles": [] }, "scs-map": { "styles": [] }, "scs-title": { "styles": [] }, "scs-paragraph": { "styles": [] }, "scs-txt": { "styles": [] }, "scs-divider": { "styles": [] }, "scs-button": { "styles": [] }, "scs-app": { "styles": [] }, "scs-spacer": { }, "scs-gallery": { "styles": [] }, "scs-youtube": { "styles": [] }, "scs-socialbar": { "styles": [] }, "scs-document": { "styles": [] } } }
"styles":[]
แต่ละรายการสามารถมีลิสต์ของสไตล์สำหรับองค์ประกอบนั้นโดยเฉพาะ "name"
อาจเป็นการอ้างอิงสตริงที่โลคัลไลซ์แบบมาพร้อมกับระบบ หรือเป็นค่าที่ระบุสำหรับใช้งาน ตัวอย่างเช่น องค์ประกอบชื่อจะมีสไตล์ดีฟอลต์ต่อไปนี้
{ "styles": [{ "name": "COMP_STYLE_FLAT", "class": "scs-title-default-style" }, { "name": "COMP_STYLE_HIGHLIGHT", "class": "scs-title-style-2" }, { "name": "COMP_STYLE_DIVIDER", "class": "scs-title-style-3" } ] }
ค่าของชื่อจะแมปกับข้อความจริงที่ปรากฏในอินเตอร์เฟซผู้ใช้ ดังนี้
"COMP_STYLE_FLAT": "Flat", "COMP_STYLE_HIGHLIGHT": "Highlight", "COMP_STYLE_DIVIDER": "Divider",
ไฟล์ css
จะมีการกำหนดสำหรับค่าของคลาสนี้
.scs-title-default-style { color: #333333; display: block; font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-size: 24px; font-weight: normal; }
ตัวอย่างเช่น ในไฟล์ design.json
ของธีม คุณสามารถเพิ่มรายการสำหรับองค์ประกอบของคุณตามค่า initialData.compomentId
ที่คุณกำหนดในไฟล์ components.json
:
"componentId": "news-article"
รายการที่ตรงกันในไฟล์ design.json
มีดังต่อไปนี้
"componentStyles": {
"news-article": {
"styles": [{
"name": "News Article 1",
"class": "news-article-default-style"
},
{
"name": "News Article 2",
"class": "news-article-style-1"
}]
},
รายการที่ตรงกันในไฟล์ design.css
มีดังต่อไปนี้
.news-article-default-style .scs-image {…} .news-article-style-1 .scs-image {…}