Pri vývoji modulu v Orchard môžeme pridať niektoré štýly alebo skripty špecifické pre tento modul. Z pohľadu optimalizácie webovej stránky často potrebujeme pridať štýly do hlavy stránky (<head>pri štítku), zatiaľ čo skripty chcú byť pridané na spodok stránky (blízko</body> štítku). Avšak view súbor zodpovedajúci modulu, ktorý sme vyvinuli, je v skutočnosti PartialView, a ak pridáme štýlové alebo skriptové referenčné tagy priamo do view, nedosiahneme požadovaný efekt. Ako sa táto funkcia rieši v Orchard?
Trieda WebViewPage v MVC view engine bola prepísaná v rámci Orchard a atribúty scrip{filter}t a Style boli pridané na zavedenie štýlov a skriptov. To nám umožňuje použiť tieto dve vlastnosti priamo v zobrazení na volanie zodpovedajúcej metódy.
Používajte interné štýly a skripty vo svojich pohľadoch
Ak potrebujeme napísať definíciu štýlu alebo skriptu priamo na stránku. Potom môžeme písať štýly a scenáre do konkrétnych oblastí definovaných témou sadu. Napríklad môžete napísať skript do spodnej časti stránky pomocou nasledujúcej metódy:
@using (scrip{filter}t.Foot())
{
<scrip{filter}t type="text/javascrip{filter}t">
funkcia JsSub() {
Scenáre sa dajú písať tu
}
</scrip{filter}t>
}
V Orchard atribút Style nemá metódu Head, možno Orchard nechce, aby sme používali vnútorné štýly. Takže uložme štýl do externého štýlového súboru ako referencia.
Používajte externé štýly a skripty vo svojom pohľade
Ak chceme nazývať štýly a skripty v moduloch. Potom môžem použiť metódu Include pre atribúty scrip{filter}t a Style, napríklad:
@{
Štýl.Include("xxx.css");
scrip{filter}t.Include("xxx.js");
}
Týmto spôsobom pri vykresľovaní stránky orchard automaticky vyhľadá príslušný štýlový súbor v adresári Styles v tomto module a vygeneruje štýlový referenčný tag, ktorý sa zapisuje na začiatok stránky. Tiež vyhľadá príslušný skriptový súbor v adresári scrip{filter}ts a vygeneruje script reference tag napísaný na spodku stránky.
Použite resource files
Okrem dvoch vyššie opísaných metód Orchard poskytuje aj manifestovaciu funkciu súboru zdrojov. Stačí vytvoriť ResourceManifest.cs súbor v koreňovom adresári modulu a implementovať rozhranie IResourceManifestProvider. V tomto súbore manifestu zdrojov môžeme mať bohatšie funkcie na odkazovanie na štýly a skriptové súbory.
Napríklad definovanie odkazu na skriptový súbor môže byť použité s:
public void BuildManifests(ResourceManifestBuilder builder) {
staviteľ. add(). Definescrip{filter}t("jQuery"). SetUrl("jquery-1.5.2.min.js")
}
Týmto spôsobom môžete pri referencovaní v pohľade použiť:
@{
scrip{filter}t.Require("jQuery");
}
Navyše, po definovaní môžu tento zdroj používať aj iné moduly, a keď je na stránke viacero zobrazení odkazujúcich na tento zdroj, nebudú žiadne duplicitné referencie a Orchard vygeneruje iba tag, ktorý odkazuje na tento skript.
To isté platí pre definovanie štýlov:
staviteľ. add(). DefineStyle("jQueryUI_Orchard"). SetUrl("jquery-ui-1.8.11.custom.css");
Pri používaní:
@{
Štýl.Require("jQueryUI_Orchard ");
}
Zoznam zdrojových súborov má tiež funkciu nastavenia závislostí. Keď musí byť skriptový zdroj závislý od iných skriptových zdrojov, možno použiť nasledujúcu definíciu:
staviteľ. add(). Definescrip{filter}t("jQueryUI_Core"). SetUrl("jquery.ui.core.min.js"). SetDependencies("jQuery");
Týmto spôsobom používame len jQueryUI_Core skript v zobrazení a automaticky sa importuje aj jquery skript, na ktorom závisí.
Ak sa spoliehate na viacero skriptov súčasne ako na skripty, môžete použiť čiarky na oddelenie viacerých závislých zdrojov, napríklad:
staviteľ. add(). Definescrip{filter}t("jQueryUI_Draggable"). SetUrl("jquery.ui.draggable.min.js")SetDependencies("jQueryUI_Core", "jQueryUI_Widget", "jQueryUI_Mouse");
Orchard však zatiaľ nepodporuje funkciu skriptových zdrojov závislých od style zdrojov, čo je trochu škoda, v skutočnosti niektoré js musia byť použité súčasne so štýlovými súbormi, napríklad plugin jQueryUI.
Okrem toho súbor inventára zdrojov môže nastaviť rôzne skriptové súbory pre ladiaci režim a režim uvoľnenia a môže definovať zodpovedajúcu verziu zdroja, napríklad:
staviteľ. add(). Definescrip{filter}t("jQuery"). SetUrl("jquery-1.5.2.min.js", "jquery-1.5.2.js"). SetVersion("1.5.2");
Modul Orchard.jQuery, ktorý je súčasťou Orchard, je jedným z modulov, ktorý definuje plugin jQueryUI. Ak potrebujeme použiť tento plugin, môžeme sa pozrieť na js plugin definovaný v tomto manifestovom súbore a odkazovať naň v našom vlastnom module. Avšak stojí za zmienku, že ak potrebujeme odkazovať na obsah v module Orchard.jQuery, musíme nastaviť závislostný modul Orchard.jQuery v súbore manifestu modulu, aby keď je náš modul povolený, modul Orchard.jQuery bol synchronizovaný a zabezpečil, že zdroje, na ktoré odkazujeme, môžu byť volané normálne.
Na jquery sa odkazuje pomocou scrip{filter}t.Require("jQuery"). AtHead();
|
Zverejnené 28. 7. 2016 16:21:53
|
|
|
