Komponenter, der gengives i en inline-ramme, har ikke direkte adgang til filen design.css. I stedet findes der et yderligere trin til hentning af URL'en for filen design.css i din komponent og tilføjelse af den på siden. Du skal i så fald opdatere komponenten, så den afspejler den brugervalgte typografi.
design.css i din komponent kræver, at filen render.html ændres:
Find og inkluder URL'en for filen design.css
Hent værdien for den valgte typografiklasse, når den ændres
Opdater skabelonen, så den afspejler den valgte styleClass
Afspejl ændringer af den valgte typografiklasse i din komponent
Sørg for, at størrelsen på inline-rammen tilpasses, når typografien ændres
Her er de detaljerede instruktioner til redigering af filen render.html:
Find og inkluder URL'en for filen design.css
Tilføj filen design.css dynamisk i sektionen <head> på siden. Når inline-rammen er indlæst, skal du angive dens højde, fordi den kan være blevet ændret i forbindelse med anvendelsen af typografierne.
Tilføj følgende kode i objektet 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);
}
});Hent værdien for den valgte typografiklasse, når den ændres
Opret et observerbart objekt til registrering af ændringer af værdien for egenskaben styleClass:
self.selectedStyleClass = ko.observable();
Bemærk, at gengivelse ikke kan udføres, før typografiklassen findes. Ændr denne kode:
self.customSettingsDataInitialized = ko.observable(false);
self.initialized = ko.computed(function () {
return self.customSettingsDataInitialized();
}, self);
Brug denne kode i stedet:
self.customSettingsDataInitialized = ko.observable(false);
self.styleClassInitialized = ko.observable(false);
self.initialized = ko.computed(function () {
return self.customSettingsDataInitialized() && self.styleClassInitialized();
}, self);
Hent startværdien for den valgte typografiklasse ved at tilføje følgende:
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);Opdater skabelonen, så den afspejler styleClass. Ændr denne kode:
<p data-bind="attr: {id: 'titleId'}, text: titleText"></p>
Brug denne kode i stedet:
<p data-bind="attr: {id: 'titleId'}, text: titleText, css: selectedStyleClass"></p>Afspejl ændringer af den valgte typografiklasse i din komponent Ændr denne kode:
if (settings.property === 'customSettingsData') {
self.updateCustomSettingsData(settings.value);
}
Brug denne kode i stedet:
if (settings.property === 'customSettingsData') {
self.updateCustomSettingsData(settings.value);
}
if (settings.property === 'styleClass') {
self.updateStyleClass(settings.value);
}Sørg for, at størrelsen på inline-rammen tilpasses, når typografien ændres Ændr denne kode:
// 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();
Brug denne kode i stedet:
// 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(); Gem og synkroniser dine filer til Oracle Content Management-instansserveren.
Kontroller resultaterne for trin 14
Opfrisk din side på sitet, så Site Builder kan hente ændringer af komponenten.
Skift til redigeringstilstand for siden.
Træk komponenten til siden, og slip den.
Åbn panelet Indstillinger for komponenten.
Gå til fanen Typografi.
Skift mellem typografierne Gotisk og Almindelig, der er defineret i din design.json-fil.
Du vil kunne se, at skriftstørrelsen i din komponent reguleres for at afspejle ændringerne, når den skifter mellem de anvendte CSS-klasser for hvert valg.
Fortsæt til Trin 15: Integration med funktionsmåden for Fortryd og Annuller Fortryd for siden.