Під час розробки модуля в Orchard ми можемо додати стилі або скрипти, специфічні для цього модуля. З точки зору оптимізації веб-сторінки, часто потрібно додавати стилі на початку сторінки (<head>біля мітки), тоді як скрипти прагнуть додати внизу сторінки (поруч</body> із міткою). Однак файл перегляду, який відповідає розробленому нами модулю, насправді є PartialView, і якщо ми додамо теги стилю або скриптів безпосередньо до перегляду, ми не досягнемо бажаного ефекту. Отже, як ця функція реалізована в Orchard?
Клас WebViewPage движка MVC view був переписаний у фреймворку 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 не хоче, щоб ми використовували внутрішні стилі. Тож давайте помістимо стиль у зовнішній файл стилів для посилання.
Використовуйте зовнішні стилі та скрипти у вашому погляді
Якщо ми хочемо викликати стилі та скрипти у модулях, Потім я можу використовувати метод Include атрибутів scrip{filter}t та Style, наприклад:
@{
Style.Include("xxx.css");
scrip{filter}t.Include("xxx.js");
}
Таким чином, під час рендерингу сторінки orchard автоматично шукатиме відповідний файл стилю в каталозі Styles у цьому модулі та генерує тег посилання на стиль для запису на початку сторінки. Він також шукатиме відповідний файл script у каталозі scrip{filter}ts і генерує тег посилання на скрипт, написаний внизу сторінки.
Використовуйте ресурсні файли
Окрім двох описаних вище методів, Orchard також надає функцію маніфесту файлу ресурсів. Мені просто потрібно створити ResourceManifest.cs файл у кореневій каталозі модуля та реалізувати інтерфейс IResourceManifestProvider. У цьому файлі маніфесту ресурсів ми можемо мати більш багаті функції для посилання на стилі та скрипт-файли.
Наприклад, визначення посилання на файл скрипту можна використовувати за прикладом:
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 скрипт у view, і він автоматично імпортує скрипт jquery, від якого він залежить.
Якщо ви використовуєте кілька скриптів одночасно як скрипти, можна використовувати коми для розділення кількох залежних ресурсів, наприклад:
Будівельник. Add(). Definescrip{filter}t("jQueryUI_Draggable"). SetUrl("jquery.ui.draggable.min.js")SetDependencies("jQueryUI_Core", "jQueryUI_Widget", "jQueryUI_Mouse");
Однак Orchard поки що не підтримує функцію скриптових ресурсів, які покладаються на ресурси стилю, що трохи прикро, адже деякі j потрібно використовувати одночасно зі стилевими файлами, наприклад, плагін jQueryURI.
Крім того, файл інвентарю ресурсів може встановлювати різні файли скриптів для режиму налагодження та режиму випуску, а також визначати відповідну версію ресурсу, наприклад:
Будівельник. Add(). Definescrip{filter}t("jQuery"). SetUrl ("jquery-1.5.2.min.js", "jquery-1.5.2.js"). SetVersion("1.5.2");
Модуль Orchard.jQuery, що йде в комплекті з Orchard, є одним із таких модулів, що визначає плагін jQueryI. Якщо нам потрібно використати цей плагін, ми можемо подивитися на js-плагін, визначений у цьому файлі маніфесту, і посилатися на нього у власному модулі. Однак варто зазначити, що якщо потрібно посилатися на вміст у модулі Orchard.jQuery, потрібно встановити модуль залежності Orchard.jQuery у файлі маніфесту модуля, щоб коли наш модуль увімкнено, модуль Orchard.jQuery був синхронно активний, щоб ресурси, на які ми посилаємося, можна було викликати нормально.
j-запит посилається за допомогою scrip{filter}t.Require("jQuery"). AtHead();
|
Опубліковано 28.07.2016 16:21:53
|
|
|
