Al desarrollar un módulo en Orchard, podemos añadir algunos estilos o scripts específicos de este módulo. Desde la perspectiva de la optimización de páginas web, a menudo necesitamos añadir estilos al encabezado de la página (<head>en la etiqueta), mientras que los scripts quieren añadirse al final de la página (cerca</body> de la etiqueta). Sin embargo, el archivo de vista correspondiente al módulo que desarrollamos es en realidad un PartialView, y si añadimos etiquetas de estilo o referencia de script directamente a la vista, no lograremos el efecto deseado. ¿Cómo se gestiona esta función en Orchard?
La clase WebViewPage del motor de vistas MVC ha sido reescrita en el framework Orchard, y se han añadido los atributos scrip{filter}t y Style para introducir estilos y scripts. Esto nos permite usar estas dos propiedades directamente en la vista para llamar al método correspondiente.
Usa estilos y scripts internos en tus vistas
Si necesitamos escribir una definición de estilo o de script directamente en la página. Luego podemos escribir estilos y escrituras en áreas específicas definidas por el tema del Huerto. Por ejemplo, puedes escribir un script en la parte inferior de la página usando el siguiente método:
@using (scrip{filter}t.Foot())
{
<scrip{filter}t type="text/javascrip{filter}t">
función JsSub() {
Los guiones pueden escribirse aquí
}
</scrip{filter}t>
}
En Orchard, el atributo Estilo no tiene un método de Cabeza, quizá Orchard no quiere que usemos estilos internos. Así que pongamos el estilo en un archivo de estilo externo para que lo haga referencia.
Utiliza estilos y scripts externos en tu vista
Si queremos llamar estilos y scripts en módulos. Luego puedo usar el método Include de los atributos scrip{filter}t y Style, como:
@{
Estilo. Incluye("xxx.css");
scrip{filter}t.Include("xxx.js");
}
De este modo, al renderizar una página, Orchard buscará automáticamente el archivo de estilo correspondiente en el directorio Styles de este módulo y generará una etiqueta de referencia de estilo para escribir al principio de la página. También buscará el archivo de script correspondiente en el directorio scrip{filter}ts y generará una etiqueta de referencia de script escrita en la parte inferior de la página.
Utilizar archivos de recursos
Además de los dos métodos descritos anteriormente, Orchard también proporciona una función de manifiesto de archivo de recursos. Solo necesito crear un archivo ResourceManifest.cs en el directorio raíz del módulo e implementar la interfaz IResourceManifestProvider. En este archivo manifiesto de recursos, podemos tener funciones más ricas para referenciar estilos y archivos de script.
Por ejemplo, definir una referencia a un archivo de script puede usarse con:
empty público BuildManifests(ResourceManifestBuilder builder) {
Constructor. Add(). Definescrip{filter}t("jQuery"). SetUrl("jquery-1.5.2.min.js")
}
De este modo, al referenciar una vista, puedes usar:
@{
scrip{filter}t.Require("jQuery");
}
Además, tras definirlo, otros módulos también pueden usar este recurso, y cuando hay varios archivos de vista que hacen referencia a este recurso en una página, no habrá referencias duplicadas, y Orchard solo generará una etiqueta que haga referencia a este script.
Lo mismo ocurre con los estilos definidos:
Constructor. Add(). DefineStyle("jQueryUI_Orchard"). SetUrl("jquery-ui-1.8.11.custom.css");
Al usar:
@{
Style.Require("jQueryUI_Orchard ");
}
La lista de archivos de recursos también tiene una función de configuración de dependencias. Cuando un recurso de script necesita depender de otros recursos de script, se puede usar la siguiente definición:
Constructor. Add(). Definescrip{filter}t("jQueryUI_Core"). SetUrl("jquery.ui.core.min.js"). SetDependencies("jQuery");
De esta manera solo usamos jQueryUI_Core script en la vista, y también importará automáticamente el script jquery del que depende.
Si dependes de varios scripts al mismo tiempo que scripts, puedes usar comas para separar múltiples recursos dependientes, como:
Constructor. Add(). Definescrip{filter}t("jQueryUI_Draggable"). SetUrl("jquery.ui.draggable.min.js")SetDependencies("jQueryUI_Core", "jQueryUI_Widget", "jQueryUI_Mouse");
Sin embargo, Orchard aún no soporta la función de recursos de script que dependen de recursos de estilo, lo cual es una pena, de hecho, algunos js necesitan usarse al mismo tiempo que los archivos de estilo, como el plugin jQueryUI.
Además, el archivo de inventario de recursos puede establecer diferentes archivos de script para el modo de depuración y el modo de liberación, y puede definir la versión correspondiente del recurso, tales como:
Constructor. Add(). Definescrip{filter}t("jQuery"). SetUrl("jquery-1.5.2.min.js", "jquery-1.5.2.js"). SetVersion("1.5.2");
El módulo Orchard.jQuery que viene con Orchard es uno de esos módulos que define el plugin jQueryUI. Si necesitamos usar este plugin, podemos mirar el plugin js definido en este archivo manifiesto y referenciarlo en nuestro propio módulo. Sin embargo, vale la pena señalar que si necesitamos referenciar el contenido del módulo Orchard.jQuery, debemos establecer la dependencia del módulo Orchard.jQuery en el archivo manifiesto del módulo, de modo que cuando nuestro módulo esté habilitado, el módulo Orchard.jQuery se habilite de forma sincrónica para asegurar que los recursos que referenciamos puedan llamarse normalmente.
La jquery se referencia usando scrip{filter}t.Require("jQuery"). EnCabeza();
|
Publicado en 28/7/2016 16:21:53
|
|
|
