Saat mengembangkan modul di Orchard, kita dapat menambahkan beberapa gaya atau skrip yang khusus untuk modul ini. Dari perspektif pengoptimalan halaman web, kita sering perlu menambahkan gaya ke kepala halaman (<head>di label), sedangkan skrip ingin ditambahkan ke bagian bawah halaman (di dekat</body> label). Namun, file tampilan yang sesuai dengan modul yang kami kembangkan sebenarnya adalah PartialView, dan jika kami menambahkan tag referensi gaya atau skrip langsung ke tampilan, kami tidak akan mencapai efek yang diinginkan. Jadi bagaimana fitur ini ditangani di Orchard?
Kelas WebViewPage dari mesin tampilan MVC telah ditulis ulang dalam kerangka kerja Orchard, dan atribut scrip{filter}t dan Style telah ditambahkan untuk memperkenalkan gaya dan skrip. Ini memungkinkan kita untuk menggunakan kedua properti ini secara langsung dalam tampilan untuk memanggil metode yang sesuai.
Gunakan gaya dan skrip internal dalam tampilan Anda
Jika kita perlu menulis definisi gaya atau definisi skrip langsung ke halaman. Kemudian kita dapat menulis gaya dan skrip ke area tertentu yang ditentukan oleh tema Orchard. Misalnya, Anda dapat menulis skrip ke area bawah halaman menggunakan metode berikut:
@using (scrip{filter}t.Foot())
{
<scrip{filter}t type="text/javascrip{filter}t">
fungsi JsSub() {
Naskah dapat ditulis di sini
}
</scrip{filter}t>
}
Di Orchard, atribut Style tidak memiliki metode Kepala, mungkin Orchard tidak ingin kita menggunakan gaya internal. Jadi mari kita masukkan gaya ke dalam file gaya eksternal untuk direferensikan.
Gunakan gaya dan skrip eksternal dalam tampilan Anda
Jika kita ingin memanggil gaya dan skrip dalam modul. Kemudian saya dapat menggunakan metode Include dari atribut scrip{filter}t dan Style, seperti:
@{
Style.Include("xxx.css");
scrip{filter}t.Include("xxx.js");
}
Dengan cara ini, saat merender halaman, orchard akan secara otomatis mencari file gaya yang sesuai di direktori Styles dalam modul ini dan menghasilkan tag referensi gaya untuk ditulis di kepala halaman. Ini juga akan mencari file skrip yang sesuai di direktori scrip{filter}ts dan menghasilkan tag referensi skrip yang ditulis di bagian bawah halaman.
Menggunakan file sumber daya
Selain dua metode yang dijelaskan di atas, Orchard juga menyediakan fungsi manifes file sumber daya. Saya hanya perlu membuat file ResourceManifest.cs di direktori root modul dan mengimplementasikan antarmuka IResourceManifestProvider. Dalam file manifes sumber daya ini, kita dapat memiliki fungsi yang lebih kaya untuk mereferensikan gaya dan file skrip.
Misalnya, mendefinisikan referensi ke file skrip dapat digunakan dengan:
public void BuildManifests(ResourceManifestBuilder builder) {
pembangun. Tambahkan(). Definescrip{filter}t("jQuery"). SetUrl("jquery-1.5.2.min.js")
}
Dengan cara ini, saat mereferensikan pada tampilan, Anda dapat menggunakan:
@{
scrip{filter}t.Require("jQuery");
}
Selain itu, setelah mendefinisikan, modul lain juga dapat menggunakan sumber daya ini, dan ketika ada beberapa file tampilan yang mereferensikan sumber daya ini pada halaman, tidak akan ada referensi duplikat, dan Orchard hanya akan menghasilkan tag yang mereferensikan skrip ini.
Hal yang sama berlaku untuk gaya yang mendefinisikan:
pembangun. Tambahkan(). DefineStyle("jQueryUI_Orchard"). SetUrl("jquery-ui-1.8.11.custom.css");
Saat menggunakan:
@{
Gaya.Membutuhkan ("jQueryUI_Orchard ");
}
Daftar file sumber daya juga memiliki fungsi pengaturan dependensi. Ketika sumber daya skrip perlu bergantung pada sumber daya skrip lain, definisi berikut dapat digunakan:
pembangun. Tambahkan(). Definescrip{filter}t("jQueryUI_Core"). SetUrl("jquery.ui.core.min.js"). SetDependencies("jQuery");
Dengan cara ini kita hanya menggunakan skrip jQueryUI_Core pada tampilan, dan itu akan secara otomatis mengimpor skrip jquery yang bergantung padanya juga.
Jika Anda mengandalkan beberapa skrip secara bersamaan sebagai skrip, Anda dapat menggunakan koma untuk memisahkan beberapa sumber daya dependen, seperti:
pembangun. Tambahkan(). Definescrip{filter}t("jQueryUI_Draggable"). SetUrl("jquery.ui.draggable.min.js")SetDependencies("jQueryUI_Core", "jQueryUI_Widget", "jQueryUI_Mouse");
Namun, Orchard belum mendukung fungsi sumber daya skrip yang mengandalkan sumber daya gaya, yang agak disayangkan, nyatanya beberapa js perlu digunakan bersamaan dengan file gaya, seperti plugin jQueryUI.
Selain itu, file inventaris sumber daya juga dapat mengatur file skrip yang berbeda untuk mode debug dan mode rilis, dan juga dapat menentukan versi sumber daya yang sesuai, seperti:
pembangun. Tambahkan(). Definescrip{filter}t("jQuery"). SetUrl("jquery-1.5.2.min.js", "jquery-1.5.2.js"). SetVersion("1.5.2");
Modul Orchard.jQuery yang disertakan dengan Orchard adalah salah satu modul yang mendefinisikan plugin jQueryUI. Jika kita perlu menggunakan plugin ini, kita dapat melihat plugin js yang didefinisikan dalam file manifes ini dan mereferensikannya di modul kita sendiri. Namun, perlu dicatat bahwa jika kita perlu mereferensikan konten dalam modul Orchard.jQuery, kita perlu mengatur modul dependensi Orchard.jQuery dalam file manifes modul, sehingga ketika modul kita diaktifkan, modul Orchard.jQuery akan diaktifkan secara sinkron untuk memastikan bahwa sumber daya yang kita referensikan dapat dipanggil secara normal.
jquery direferensikan menggunakan scrip{filter}t.Require("jQuery"). AtHead();
|
Diposting pada 28/07/2016 16.21.53
|
|
|
