ขั้นตอนที่ 14: ใช้สไตล์ที่กำหนดเองเมื่อองค์ประกอบแสดงอยู่ในเฟรมแบบอินไลน์

องค์ประกอบที่แสดงในเฟรมแบบอินไลน์ไม่มีสิทธิ์เข้าใช้โดยตรงไปยังไฟล์ design.css อย่างไรก็ตาม ยังมีขั้นตอนอื่นในการเรียก URL สำหรับ design.css ในองค์ประกอบของคุณ และเพิ่มองค์ประกอบในเพจ ดังนั้น คุณจึงต้องอัปเดตองค์ประกอบของคุณเพื่อให้แสดงสไตล์ที่ผู้ใช้เลือก

ในการรวมและใช้ไฟล์ design.css ไว้ในองค์ประกอบของคุณ จำเป็นต้องมีการเปลี่ยนแปลงในไฟล์ render.html ดังนี้

ค้นหาและรวม URL ไว้ในไฟล์ design.css
เรียกค่าของ 'เลือกคลาสของสไตล์' เมื่อค่าดังกล่าวเปลี่ยนแปลงไป
อัปเดตเทมเพลทเพื่อแสดง styleClass ที่เลือก
แสดงการเปลี่ยนแปลงในคลาสของสไตล์ที่เลือกในองค์ประกอบของคุณ
ตรวจสอบให้แน่ใจว่าเฟรมแบบอินไลน์ปรับขนาดเมื่อสไตล์เปลี่ยนแปลงไป

นี่คือคำแนะนำโดยละเอียดเกี่ยวกับการแก้ไขไฟล์ render.html

ค้นหาและรวม URL ไว้ในไฟล์ design.css

เพิ่มไฟล์ design.css แบบไดนามิคไปยังส่วน <head> ของเพจ หลังจากที่โหลดไฟล์แล้ว ให้ตั้งค่าความสูงของเฟรมแบบอินไลน์ เนื่องจากอาจมีการแก้ไขโดยการใช้สไตล์ต่างๆ

เพิ่มรหัสต่อไปนี้ลงในออบเจกต์ viewModel

// Dynamically add any theme design URL to the <head> of the page
self.loadStyleSheet = function (url) {
    var $style,
        styleSheetDeferred = new $.Deferred(),
        attempts = 100,
        numAttempts = 0,
        interval = 50,
        pollFunction = function () {
            // try to locate the style sheet
            for (var i = 0; i < document.styleSheets.length; i++) {
                try {
                    // locate the @import sheet that has an href based on our expected URL
                    var sheet = document.styleSheets[i],
                        rules = sheet && sheet.cssRules,
                        rule = rules && rules[0];
                    // check whether style sheet has been loaded
                    if (rule && (rule.href === url)) {
                        styleSheetDeferred.resolve();
                        return;
                    }
                } catch (e) {}
            }
            if (numAttempts < attempts) {
                numAttempts++;
                setTimeout(pollFunction, interval);
            } else {
                // didn't find style sheet so complete anyway
                styleSheetDeferred.resolve();
            }
        };
 
    // add the themeDesign stylesheet to <head>
    // use @import to avoid cross domain security issues when determining when the stylesheet is loaded
    $style = $('<style type="text/css">@import url("' + url + '")</style>');
    $style.appendTo('head');
 
    // kickoff the polling
    pollFunction();
 
    // return the promise
    return styleSheetDeferred.promise();
};
 
// update with the design.css from the Sites Page
SitesSDK.getSiteProperty('themeDesign', function (data) {
    if (data && data.themeDesign && typeof data.themeDesign === 'string') {
        // load the style sheet and then set the height
        self.loadStyleSheet(data.themeDesign).done(self.setHeight);
    }
});

เรียกค่าของ 'เลือกคลาสของสไตล์' เมื่อค่าดังกล่าวเปลี่ยนแปลงไป

สร้างรายการที่สังเกตเห็นได้เพื่อติดตามเมื่อค่าของคุณสมบัติ styleClass เปลี่ยนแปลงไป ดังนี้
```
self.selectedStyleClass = ko.observable();
```
โปรดทราบว่าเราไม่สามารถแสดงผลได้จนกว่าจะมีคลาสของสไตล์ เปลี่ยนรหัสนี้:
```
self.customSettingsDataInitialized = ko.observable(false);
self.initialized = ko.computed(function () {
    return self.customSettingsDataInitialized();
}, self);
```
ใช้รหัสนี้แทน:
```
self.customSettingsDataInitialized = ko.observable(false);
self.styleClassInitialized = ko.observable(false);
self.initialized = ko.computed(function () {
    return self.customSettingsDataInitialized() && self.styleClassInitialized();
}, self);
```
เรียกค่าเริ่มต้นสำหรับคลาสของสไตล์ที่เลือกโดยการเพิ่ม:
```
self.updateStyleClass = function (styleClass) {
    self.selectedStyleClass((typeof styleClass === 'string') ? styleClass : 'hello-world-default-style'); // note that this 'hello-world' prefix is based on the app name
    self.styleClassInitialized(true);
};
SitesSDK.getProperty('styleClass', self.updateStyleClass);
```
อัปเดตเทมเพลทเพื่อแสดง styleClass เปลี่ยนรหัสนี้:
```
<p data-bind="attr: {id: 'titleId'}, text: titleText"></p>
```
ใช้รหัสนี้แทน:
```
<p data-bind="attr: {id: 'titleId'}, text: titleText, css: selectedStyleClass"></p>
```

แสดงการเปลี่ยนแปลงในคลาสของสไตล์ที่เลือกในองค์ประกอบของคุณ เปลี่ยนรหัสนี้:

if (settings.property === 'customSettingsData') {
    self.updateCustomSettingsData(settings.value);
}

ใช้รหัสนี้แทน:

if (settings.property === 'customSettingsData') {
    self.updateCustomSettingsData(settings.value);
}
if (settings.property === 'styleClass') {
    self.updateStyleClass(settings.value);
}

ตรวจสอบให้แน่ใจว่าเฟรมแบบอินไลน์ปรับขนาดเมื่อสไตล์เปลี่ยนแปลงไป เปลี่ยนรหัสนี้:

// create dependencies on any observables so this handler is called whenever it changes
var imageWidth = viewModel.imageWidth(),
      imageUrl = viewModel.imageUrl(),
      titleText = viewModel.titleText(),
      userText = viewModel.userText();

ใช้รหัสนี้แทน:

// create dependencies on any observables so this handler is called whenever it changes
var imageWidth = viewModel.imageWidth(),
      imageUrl = viewModel.imageUrl(),
      titleText = viewModel.titleText(),
      userText = viewModel.userText(),
      selectedStyleClass = viewModel.selectedStyleClass();

บันทึกและซิงโครไนซ์ไฟล์ของคุณในเซิร์ฟเวอร์อินสแตนซ์ Oracle Content Management

ตรวจสอบผลลัพธ์สำหรับขั้นตอนที่ 14

รีเฟรชเพจของคุณในไซต์ของคุณเพื่อให้ตัวสร้างไซต์สามารถนำการเปลี่ยนแปลงไปใช้กับองค์ประกอบได้
กำหนดให้เพจอยู่ในโหมดแก้ไข
ลากและวางองค์ประกอบของคุณลงในเพจ
เปิดแผงการตั้งค่ากับองค์ประกอบของคุณ
ไปที่แท็บสไตล์
สลับระหว่างสไตล์ กอทิก และ ธรรมดา ที่กำหนดไว้ในไฟล์ design.json ของคุณ

คุณจะสังเกตเห็นว่าขนาดของตัวอักษรภายในองค์ประกอบของคุณปรับเปลี่ยนไปตามการเปลี่ยนแปลง เมื่อสลับระหว่างคลาส CSS ที่ใช้สำหรับการเลือกแต่ละครั้ง

ดำเนินการต่อไปยัง ขั้นตอนที่ 15: การทำงานร่วมกับการยกเลิกและทำซ้ำของเพจ