Ao desenvolver um módulo no Orchard, podemos adicionar alguns estilos ou scripts específicos para esse módulo. Do ponto de vista da otimização de páginas web, muitas vezes precisamos adicionar estilos ao cabeçalho da página (<head>no rótulo), enquanto os scripts querem ser adicionados no final da página (próximo</body> ao rótulo). No entanto, o arquivo de visualização correspondente ao módulo que desenvolvemos é na verdade um PartialView, e se adicionarmos etiquetas de referência de estilo ou script diretamente à visualização, não alcançaremos o efeito desejado. Então, como esse recurso é tratado em Orchard?
A classe WebViewPage do motor de visualização MVC foi reescrita no framework Orchard, e os atributos scrip{filter}t e Style foram adicionados para introduzir estilos e scripts. Isso nos permite usar essas duas propriedades diretamente na visualização para chamar o método correspondente.
Use estilos internos e scripts nas suas visualizações
Se precisarmos escrever uma definição de estilo ou de script diretamente na página. Depois, podemos escrever estilos e scripts em áreas específicas definidas pelo tema do Pomar. Por exemplo, você pode escrever um script na área inferior da página usando o seguinte método:
@using (scrip{filter}t.Foot())
{
<scrip{filter}t type="text/javascrip{filter}t">
função JsSub() {
Scripts podem ser escritos aqui
}
</scrip{filter}t>
}
Em Orchard, o atributo Estilo não tem um método de Cabeça, talvez Orchard não queira que usemos estilos internos. Então vamos colocar o estilo em um arquivo de estilo externo para referência.
Use estilos e scripts externos na sua visualização
Se quisermos chamar estilos e scripts em módulos. Então posso usar o método Include dos atributos scrip{filter}t e Style, como:
@{
Estilo. Incluir("xxx.css");
scrip{filter}t.Include("xxx.js");
}
Dessa forma, ao renderizar uma página, o Orchard automaticamente procura o arquivo de estilo correspondente no diretório Styles deste módulo e gera uma tag de referência de estilo para escrever no início da página. Ele também procurará o arquivo de script correspondente no diretório scrip{filter}ts e gerará uma tag de referência de script escrita no final da página.
Uso de arquivos de recursos
Além dos dois métodos descritos acima, o Orchard também fornece uma função de manifesto de arquivo de recursos. Só preciso criar um arquivo ResourceManifest.cs no diretório raiz do módulo e implementar a interface IResourceManifestProvider. Neste arquivo de manifesto de recursos, podemos ter funções mais avançadas para referenciar estilos e arquivos de script.
Por exemplo, definir uma referência a um arquivo de script pode ser usado com:
empty público BuildManifests(ResourceManifestBuilder builder) {
construtor. Add(). Definescrip{filter}t("jQuery"). SetUrl("jquery-1.5.2.min.js")
}
Dessa forma, ao referenciar em uma visualização, você pode usar:
@{
scrip{filter}t.Require("jQuery");
}
Além disso, após definir, outros módulos também podem usar esse recurso, e quando há múltiplos arquivos de visualização referenciando esse recurso em uma página, não haverá referências duplicadas, e o Orchard gerará apenas uma tag que referencia esse script.
O mesmo vale para estilos definidores:
construtor. Add(). DefineStyle("jQueryUI_Orchard"). SetUrl("jquery-ui-1.8.11.custom.css");
Ao usar:
@{
Style.Require("jQueryUI_Orchard ");
}
A lista de arquivos de recursos também possui uma função de configuração de dependência. Quando um recurso de script precisa depender de outros recursos de script, a seguinte definição pode ser usada:
construtor. Add(). Definescrip{filter}t("jQueryUI_Core"). SetUrl("jquery.ui.core.min.js"). SetDependencies("jQuery");
Dessa forma, usamos apenas jQueryUI_Core script na visualização, e ele também vai importar automaticamente o script jquery do qual depende.
Se você depende de múltiplos scripts ao mesmo tempo que scripts, pode usar vírgulas para separar múltiplos recursos dependentes, como:
construtor. Add(). Definescrip{filter}t("jQueryUI_Draggable"). SetUrl("jquery.ui.draggable.min.js")SetDependencies("jQueryUI_Core", "jQueryUI_Widget", "jQueryUI_Mouse");
No entanto, o Orchard ainda não suporta a função de recursos de script dependendo de recursos de estilo, o que é um pouco lamentável, na verdade, alguns js precisam ser usados ao mesmo tempo que arquivos de estilo, como o plugin jQueryUI.
Além disso, o arquivo de inventário de recursos também pode definir diferentes arquivos de script para o modo de depuração e o modo de liberação, e pode definir a versão correspondente do recurso, tais como:
construtor. Add(). Definescrip{filter}t("jQuery"). SetUrl("jquery-1.5.2.min.js", "jquery-1.5.2.js"). SetVersion("1.5.2");
O módulo Orchard.jQuery que vem com o Orchard é um desses módulos que define o plugin jQueryUI. Se precisarmos usar esse plugin, podemos olhar para o plugin js definido nesse arquivo manifest e referencia-lo em nosso próprio módulo. No entanto, vale notar que, se precisarmos referenciar o conteúdo do módulo Orchard.jQuery, precisamos definir a dependência do módulo Orchard.jQuery no arquivo manifesto do módulo, para que, quando nosso módulo for habilitado, o módulo Orchard.jQuery seja ativado de forma síncrona para garantir que os recursos que referenciamos possam ser chamados normalmente.
O jquery é referenciado usando scrip{filter}t.Require("jQuery"). AtHead();
|
Publicado em 28/07/2016 16:21:53
|
|
|
