Orchard模組中使用css和js

2021-07-06 00:21:12 字數 1993 閱讀 8038

詳細的介紹:

在orchard中開發模組我們可能會新增一些這個模組特有的樣式或指令碼。從web頁面優化的角度來看,我們通常需要將樣式新增到頁面的頭部(標籤處),而指令碼則希望新增到頁面地底部(靠近標籤)。然而我們開發模組所對應的視**件其實乙個部分檢視(partialview),如果直接在檢視中新增樣式或指令碼引用標籤就無法達到我們希望的效果。那麼在orchard中是如何處理這一功能的呢?

在orchard框架中重寫了mvc檢視引擎的webviewpage類,新增了script和style屬性用於引入樣式和指令碼。這樣我們就可以在檢視中直接使用這個兩屬性,來呼叫相應的方法了。

如果我們需要將樣式定義或指令碼定義直接寫到頁面中。那麼我們可以通過把樣式和指令碼寫入orchard主題所定義的特定區域中。例如使用以下方法就可以把指令碼寫入頁面的底部區域:

@using (script.foot())

在orchard中style屬性並沒有head方法,也許是orchard不希望我們使用內部樣式吧。所以我們還是把樣式放在乙個外部樣式檔案中來引用好了。

如果我們想在模組中的呼叫樣式和指令碼。那麼我就可以通過script和style屬性的include方法,如: @

這樣在呈現頁面的時候的,orchard會自動調查找此模組中styles目錄下相應的樣式檔案並生成樣式引用標籤寫在頁面的頭部。也會查詢scripts目錄下相應的指令碼檔案並生成指令碼引用標籤寫在頁面的底部。

除了以上介紹的兩種方法以外,orchard還提供了乙個資源檔案清單的功能。我只需要在模組根目錄中建立乙個resourcemanifest.cs檔案,並實現iresourcemanifestprovider介面即可。在這個資源清單檔案中,我們可以對樣式和指令碼檔案的引用有更豐富的功能。

public void buildmanifests(resourcemanifestbuilder builder)

這樣在檢視上引用的時候可以用: @

而且定義好後其他模組也可以使用這一資源,並且在乙個頁面中有多個視**件引用此資源時,也不會出現重複引用,orchard只會生成乙個引用此指令碼的標籤。

定義樣式也一樣:

builder.add().definestyle("jqueryui_orchard").seturl("jquery-ui-1.8.11.custom.css");

使用時: @

同時資源檔案清單還有乙個依賴設定的功能。就是當乙個指令碼資源需要依賴其他的指令碼資源時,就可以使用以下定義:

builder.add().definescript("jqueryui_core").seturl("jquery.ui.core.min.js").setdependencies("jquery");

這樣我們只用在檢視上使用jqueryui_core指令碼,他會自動把它所依賴的jquery指令碼也同時引入進來。

如果以指令碼同時依賴多指令碼,可以用逗號分隔多個依賴的資源,如:

builder.add().definescript("jqueryui_draggable").seturl("jquery.ui.draggable.min.js")setdependencies("jqueryui_core", "jqueryui_widget", "jqueryui_mouse");

不過目前orchard還不支援指令碼資源依賴樣式資源的功能,這有點可惜,其實有些js需要和樣式檔案同時使用的,如:jqueryui外掛程式。

builder.add().definescript("jquery").seturl("jquery-1.5.2.min.js", "jquery-1.5.2.js").setversion("1.5.2");

orchard中自帶的orchard.jquery模組就是這樣乙個定義jqueryui外掛程式的模組。如果我們有需要用到這個外掛程式的地方,就可以檢視這個清單檔案中所定義的js外掛程式,並在我們自己的模組中引用他。不過值得注意的是:如果我們需要引用orchard.jquery模組中的內容,就需要在模組清單檔案中設定依賴orchard.jquery模組,這樣在啟用我們的模組的時候就會同步啟用orchard.jquery模組,確保我們所引用的資源都能正常呼叫。

Orchard模組建立

詳細的中文翻譯請參考 1.orchard建立模組有兩種方式 使用命令列建立,需要注意,如果要用命令,先到管理後台啟用 code generation,只有啟用了 生成,才能在cmd視窗中輸入的命令有效 如 codegen theme mytheme basedon thethememachine c...

Orchard 建立模組

2種方法 第一種 執行orchard程式,登入到後台管理頁面 單擊左邊選單的modules 在filter輸入框中輸入code 啟用code generation 在目錄orchard.source.1.7.2 src orchard.web bin下雙擊orchard.exe 彈出的cmd視窗,顯...

Orchard 打包和共享模組

前幾篇文章我向大家介紹了幾篇 orchard module開發基礎技術知識 如何新建模組的文章,等你照著做完了,你可能會想著把你做的模組分享給大家orchard提供乙個模組打包的功能,你可以生成乙個這個模組的打包檔案。你可以通過 後台去開啟這個功能,或者在命令列輸入orchard feature e...