Při vývoji modulu v Orchard můžeme přidat některé styly nebo skripty specifické pro tento modul. Z pohledu optimalizace webových stránek často potřebujeme přidávat styly do hlavy stránky (<head>u štítku), zatímco skripty chtějí být přidány na spodní část stránky (blízko</body> štítku). Nicméně soubor pohledu odpovídající modulu, který jsme vyvinuli, je ve skutečnosti PartialView, a pokud do pohledu přidáme přímo značky pro styl nebo skript, nedosáhneme požadovaného efektu. Jak se tedy tato funkce řeší v Orchard?
Třída WebViewPage v MVC view engine byla přepsána v rámci Orchard a atributy scrip{filter}t a Style byly přidány pro zavedení stylů a skriptů. To nám umožňuje použít tyto dvě vlastnosti přímo v zobrazení k volání odpovídající metody.
Používejte interní styly a skripty ve svých pohledech
Pokud potřebujeme napsat definici stylu nebo skriptu přímo na stránku. Pak můžeme psát styly a scénáře do konkrétních oblastí definovaných tématem sadu. Například můžete napsat skript do spodní části stránky pomocí následující metody:
@using (scrip{filter}t.Foot())
{
<scrip{filter}t type="text/javascrip{filter}t">
funkce JsSub() {
Scénáře lze psát zde
}
</scrip{filter}t>
}
V Orchard nemá atribut Style metodu Head, možná Orchard nechce, abychom používali vnitřní styly. Takže uložme styl do externího stylového souboru jako referenci.
Používejte externí styly a skripty ve svém pohledu
Pokud chceme nazývat styly a skripty v modulech. Poté mohu použít metodu Include pro atributy scrip{filter}t a Style, například:
@{
Style.Include("xxx.css");
scrip{filter}t.Include("xxx.js");
}
Tímto způsobem při vykreslování stránky orchard automaticky vyhledá odpovídající stylový soubor v adresáři Styles v tomto modulu a vygeneruje stylový referenční tag, který se zapisuje na začátku stránky. Také vyhledá odpovídající skriptový soubor v adresáři scrip{filter}ts a vygeneruje script reference tag napsaný na spodní části stránky.
Používejte soubory zdrojů
Kromě dvou výše popsaných metod Orchard také poskytuje manifestní funkci resource file. Stačí vytvořit ResourceManifest.cs soubor v kořenovém adresáři modulu a implementovat rozhraní IResourceManifestProvider. V tomto souboru manifestu zdrojů můžeme mít bohatší funkce pro odkazování na styly a skriptové soubory.
Například definice odkazu na skriptový soubor může být použita s:
public void BuildManifests(ResourceManifestBuilder builder) {
stavitel. add(). Definescrip{filter}t("jQuery"). SetUrl("jquery-1.5.2.min.js")
}
Tímto způsobem můžete při odkazování na pohled použít:
@{
scrip{filter}t.Require("jQuery");
}
Navíc po definování mohou tento zdroj využívat i další moduly, a když je na stránce více souborů s pohledy odkazujícími na tento zdroj, nebudou žádné duplicitní odkazy a Orchard vygeneruje pouze tag, který odkazuje na tento skript.
Totéž platí pro definování stylů:
stavitel. add(). DefineStyle("jQueryUI_Orchard"). SetUrl("jquery-ui-1.8.11.custom.css");
Při používání:
@{
Styl.Požadavek ("jQueryUI_Orchard ");
}
Seznam zdrojových souborů má také funkci nastavení závislostí. Když musí být skriptní zdroj závislý na jiných skriptových zdrojích, lze použít následující definici:
stavitel. add(). Definescrip{filter}t("jQueryUI_Core"). SetUrl("jquery.ui.core.min.js"). SetDependencies("jQuery");
Tímto způsobem používáme pouze jQueryUI_Core skript v zobrazení a automaticky se importuje i jquery skript, na kterém záleží.
Pokud spoléháte na více skriptů současně jako na skripty, můžete použít čárky k oddělení více závislých zdrojů, například:
stavitel. add(). Definescrip{filter}t("jQueryUI_Draggable"). SetUrl("jquery.ui.draggable.min.js")SetDependencies("jQueryUI_Core", "jQueryUI_Widget", "jQueryUI_Mouse");
Orchard však zatím nepodporuje funkci skriptových zdrojů závislých na style zdrojích, což je trochu škoda, ve skutečnosti některé js musí být používány současně se stylovými soubory, například plugin jQueryUI.
Kromě toho může soubor inventáře zdrojů nastavit různé skriptové soubory pro ladicí režim a režim uvolnění a také definovat odpovídající verzi zdroje, například:
stavitel. add(). Definescrip{filter}t("jQuery"). SetUrl("jquery-1.5.2.min.js", "jquery-1.5.2.js"). SetVersion("1.5.2");
Modul Orchard.jQuery, který je součástí Orchard, je jedním z těchto modulů, které definují plugin jQueryUI. Pokud potřebujeme tento plugin použít, můžeme se podívat na js plugin definovaný v tomto manifestu a odkazovat na něj v našem vlastním modulu. Stojí však za zmínku, že pokud potřebujeme odkazovat na obsah v modulu Orchard.jQuery, musíme nastavit závislostní modul Orchard.jQuery v souboru manifestu modulu, aby při povolení modulu byl modul Orchard.jQuery synchronně aktivován a zajistil, že zdroje, na které odkazujeme, lze volat normálně.
Jquery je odkazován pomocí scrip{filter}t.Require("jQuery"). AtHead();
|
Zveřejněno 28.07.2016 16:21:53
|
|
|
