При разработване на модул в Orchard, може да добавим някои стилове или скриптове, специфични за този модул. От гледна точка на оптимизация на уеб страници, често трябва да добавяме стилове в началото на страницата (<head>на етикета), докато скриптовете искат да бъдат добавени в долната част на страницата (близо</body> до етикета). Въпреки това, файлът с изглед, съответстващ на разработения от нас модул, всъщност е PartialView, и ако добавим стил или скриптови референтни тагове директно към изгледа, няма да постигнем желания ефект. Как се управлява тази функция в Orchard?
Класът WebViewPage на MVC view engine е пренаписан в рамката Orchard, а атрибутите scrip{filter}t и Style са добавени за въвеждане на стилове и скриптове. Това ни позволява да използваме тези две свойства директно в изгледа, за да извикаме съответния метод.
Използвайте вътрешни стилове и скриптове в вашите виждания
Ако трябва да напишем дефиниция на стил или скрипт директно на страницата. След това можем да пишем стилове и скрипти в конкретни области, дефинирани от темата на Orchard. Например, можете да напишете скрипт в долната част на страницата, използвайки следния метод:
@using (scrip{filter}t.Foot())
{
<scrip{filter}t type="text/javascrip{filter}t">
функция JsSub() {
Тук могат да се пишат сценарии
}
</scrip{filter}t>
}
В Orchard атрибутът Style няма метод на Главата, може би Orchard не иска да използваме вътрешни стилове. Нека сложим стила във външен стилов файл за справка.
Използвай външни стилове и скриптове според теб
Ако искаме да извикваме стилове и скриптове в модули. След това мога да използвам метода Включи на атрибутите scrip{filter}t и Style, като например:
@{
Style.Include("xxx.css");
scrip{filter}t.Include("xxx.js");
}
По този начин, при рендериране на страница, orchard автоматично ще търси съответния файл със стилове в директорията Styles в този модул и ще генерира референтен таг за стил, който да напише в началото на страницата. Той също така ще търси съответния скриптов файл в директорията scrip{filter}ts и ще генерира референтен таг за скрипт, написан в долната част на страницата.
Използване на ресурсни файлове
Освен двата описани по-горе метода, Orchard предоставя и функция за манифест на ресурсен файл. Просто трябва да създам ResourceManifest.cs файл в кореновата директория на модула и да реализирам интерфейса IResourceManifestProvider. В този resource manifest файл можем да имаме по-богати функции за позоваване на стилове и скриптове файлове.
Например, дефинирането на препратка към скриптов файл може да се използва с:
public void BuildManifests(ResourceManifestBuilder builder) {
Строител. Add(). Definescrip{filter}t("jQuery"). SetUrl("jquery-1.5.2.min.js")
}
По този начин, при препращане към даден изглед, можете да използвате:
@{
scrip{filter}t.Require("jQuery");
}
Освен това, след дефиниране, други модули също могат да използват този ресурс, и когато на страницата има множество файлове с изгледи, които се позовават на този ресурс, няма да има дублирани препратки, а Orchard ще генерира само таг, който препраща към този скрипт.
Същото важи и за дефинирането на стиловете:
Строител. Add(). DefineStyle("jQueryUI_Orchard"). SetUrl ("jquery-ui-1.8.11.custom.css");
При употреба:
@{
стил. Изискване ("jQueryUI_Orchard ");
}
Списъкът с файлове с ресурси има и функция за настройка на зависимости. Когато ресурс на скрипт трябва да зависи от други ресурси на скрипта, може да се използва следното определение:
Строител. Add(). Definescrip{filter}t("jQueryUI_Core"). SetUrl("jquery.ui.core.min.js"). SetDependencies("jQuery");
По този начин използваме само скрипта jQueryUI_Core в изгледа и автоматично ще импортира jquery скрипта, от който зависи.
Ако разчитате на няколко скрипта едновременно като скриптове, можете да използвате запетаи, за да разделите множество зависими ресурси, като например:
Строител. Add(). Definescrip{filter}t("jQueryUI_Draggable"). SetUrl("jquery.ui.draggable.min.js")SetDependencies("jQueryUI_Core", "jQueryUI_Widget", "jQueryUI_Mouse");
Въпреки това, Orchard все още не поддържа функцията на скриптовите ресурси, разчитащи на стилови ресурси, което е малко жалко, всъщност някои js файлове трябва да се използват едновременно със стилови файлове, като например плъгина jQueryUI.
Освен това, файлът за инвентар на ресурси може да задава различни скриптови файлове за debug mode и release mode, както и да дефинира съответната версия, като например:
Строител. Add(). Definescrip{filter}t("jQuery"). SetUrl ("jquery-1.5.2.min.js", "jquery-1.5.2.js"). SetVersion("1.5.2");
Модулът Orchard.jQuery, който идва с Orchard, е такъв модул, който дефинира плъгина jQueryUI. Ако трябва да използваме този плъгин, можем да разгледаме js плъгина, дефиниран в този manifest файл, и да го реферираме в нашия собствен модул. Въпреки това, струва си да се отбележи, че ако трябва да реферираме съдържанието в модула Orchard.jQuery, трябва да зададем модула зависимост Orchard.jQuery в манифеста на модула, така че когато модулът ни е активиран, модулът Orchard.jQuery да бъде активиран синхронно, за да се гарантира, че ресурсите, към които се позоваваме, могат да бъдат извикани нормално.
jquery се реферира чрез scrip{filter}t.Require("jQuery"). AtHead();
|
Публикувано в 28.07.2016 г. 16:21:53 ч.
|
|
|
