Podczas tworzenia modułu w Orchard możemy dodać niektóre style lub skrypty specyficzne dla tego modułu. Z perspektywy optymalizacji stron internetowych często musimy dodawać style do nagłówka strony (<head>przy etykiecie), podczas gdy skrypty powinny być dodawane na dole strony (blisko</body> etykiety). Jednak plik widoku odpowiadający modułowi, który opracowaliśmy, to w rzeczywistości PartialView, i jeśli dodamy tagi stylowe lub skryptowe bezpośrednio do widoku, nie osiągniemy oczekiwanego efektu. Jak więc ta funkcja jest obsługiwana w Orchard?
Klasa WebViewPage silnika widoku MVC została przepisana w frameworku Orchard, a atrybuty scrip{filter}t i Style zostały dodane, aby wprowadzać style i skrypty. Pozwala to wykorzystać te dwie właściwości bezpośrednio w widoku, aby wywołać odpowiadającą metodę.
Używaj wewnętrznych stylów i skryptów w swoich widokach
Jeśli musimy wpisać definicję stylu lub skryptu bezpośrednio na stronę. Następnie możemy zapisywać style i skrypty w określonych obszarach określonych przez motyw Orchard. Na przykład możesz napisać skrypt na dolnym obszarze strony w następującą metodę:
@using (scrip{filter}t.Foot())
{
<scrip{filter}t type="text/javascrip{filter}t">
funkcja JsSub() {
Scenariusze można napisać tutaj
}
</scrip{filter}t>
}
W Orchard atrybut Style nie ma metody Head, być może Orchard nie chce, żebyśmy używali stylów wewnętrznych. Więc umieścimy styl w zewnętrznym pliku stylu, aby się do niego odwoływać.
Używaj zewnętrznych stylów i skryptów w swoim widoku
Jeśli chcemy nazywać style i skrypty w modułach. Następnie mogę użyć metody Include dla atrybutów scrip{filter}t i Style, takich jak:
@{
Style.include("xxx.css");
scrip{filter}t.Include("xxx.js");
}
W ten sposób, podczas renderowania strony, orchard automatycznie wyszukuje odpowiadający mu plik stylu w katalogu Styles w tym module i generuje tag style reference do zapisu na początku strony. Wyszuka także odpowiadający mu plik skryptu w katalogu scrip{filter}ts i wygeneruje tag script reference zapisany na dole strony.
Użyj plików zasobów
Oprócz dwóch opisanych powyżej metod, Orchard oferuje także funkcję manifestu pliku zasobów. Muszę tylko utworzyć plik ResourceManifest.cs w katalogu root modułu i zaimplementować interfejs IResourceManifestProvider. W tym pliku manifestu zasobów możemy mieć bogatsze funkcje do odwoływania się do stylów i plików skryptów.
Na przykład zdefiniowanie odwołania do pliku skryptu może być użyte z:
public void BuildManifests(ResourceManifestBuilder builder) {
Budowniczcie. add(). Definescrip{filter}t("jQuery"). SetUrl("jquery-1.5.2.min.js")
}
W ten sposób, podczas odniesienia w widoku, możesz użyć:
@{
scrip{filter}t.Require("jQuery");
}
Co więcej, po zdefiniowaniu innych modułów również mogą korzystać z tego zasobu, a gdy na stronie pojawi się wiele plików widokowych odwołujących się do tego zasobu, nie będzie duplikatów odniesień, a Orchard wygeneruje jedynie tag odwołujący się do tego skryptu.
To samo dotyczy definiowania stylów:
Budowniczcie. add(). DefineStyle("jQueryUI_Orchard"). SetUrl("jquery-ui-1.8.11.custom.css");
Podczas stosowania:
@{
Styl.Wymaganie("jQueryUI_Orchard ");
}
Lista plików zasobów posiada także funkcję ustawienia zależności. Gdy zasób skryptowy musi zależać od innych zasobów skryptowych, można zastosować następującą definicję:
Budowniczcie. add(). Definescrip{filter}t("jQueryUI_Core"). SetUrl("jquery.ui.core.min.js"). SetDependencies("jQuery");
W ten sposób używamy tylko jQueryUI_Core skryptu w widoku, a on automatycznie zaimportuje skrypt jquery, od którego zależy.
Jeśli polegasz na wielu skryptach jednocześnie co skryptach, możesz użyć przecinków do rozdzielania wielu zależnych zasobów, takich jak:
Budowniczcie. add(). Definescrip{filter}t("jQueryUI_Draggable"). SetUrl("jquery.ui.draggable.min.js")SetDependencies("jQueryUI_Core", "jQueryUI_Widget", "jQueryUI_Mouse");
Jednak Orchard nie obsługuje jeszcze funkcji zasobów skryptowych opartych na zasobach stylowych, co jest trochę szkoda, bo w rzeczywistości niektóre js muszą być używane jednocześnie z plikami stylu, jak wtyczka jQueryUI.
Ponadto plik inwentarza zasobów może ustawić różne pliki skryptowe dla trybu debugowania i trybu release, a także definiować odpowiadającą im wersję zasobu, na przykład:
Budowniczcie. add(). Definescrip{filter}t("jQuery"). SetUrl("jquery-1.5.2.min.js", "jquery-1.5.2.js"). SetVersion("1.5.2");
Moduł Orchard.jQuery dołączony do Orchard jest jednym z takich modułów definiujących wtyczkę jQueryUI. Jeśli musimy użyć tej wtyczki, możemy spojrzeć na wtyczkę js zdefiniowaną w tym pliku manifestu i odwołać się do niej w naszym własnym module. Warto jednak zauważyć, że jeśli musimy odwołać się do zawartości modułu Orchard.jQuery, musimy ustawić moduł zależności Orchard.jQuery w pliku manifestu modułu, tak aby po włączeniu modułu moduł Orchard.jQuery był włączony synchronicznie, aby zapewnić, że zasoby, do których się odwołujemy, mogą być wywoływane normalnie.
Do jquery odwołuje się za pomocą scrip{filter}t.Require("jQuery"). AtHead();
|
Opublikowano 28.07.2016 16:21:53
|
|
|
