開源電商平臺nopCommerce主題創(chuàng)建介紹

1、如何創(chuàng)建nopCommerce主題1月02 口（星期） 2012年在這篇文章中，我要談nopCommercs以及nopCommercs模板和我們如何可以 創(chuàng)建個主題清注意，在這個博客帖了的內容將從.NETMVCnopComm敏ce 開發(fā)的角度來看問題。但前端開發(fā)人員也可以從中受益，并學習如何創(chuàng)建個 nopCommerce 主題模板什么是nopCommerce主題？個nopCommerce主題儀僅是鮑文件用來定義個nopCommerce網站的外 觀，它的布局和外觀，以及如何個網站的行為.其功能如何集合。重要的是要明 白，不是每個功能，可以通過nopCommerce主題實現(xiàn) nopCommerce

2、插件就 是用來填補了這些The!旭無法實現(xiàn)的空白功能的。因此，這是并不少.見的個意思 通過開發(fā)nopCommerce插件，專門為某個主題，以達到某些更高級的功能，伴 隨看nopCommerce主題。然而nopCommerce插件是另 篇博客的話題，在本文中，我們將主要討論和處理nopCommerce主題寸為什么你需要創(chuàng)建-,個nopCommercs主題？ 首先要能夠創(chuàng)造出 個nopCommerce主題，您將需要：1 c nopCommerce 源代碼或安裝個 nopCommerce 網站a 從 nopCommarce CodePlex itirfri,您可以下我源代碼。能調試的源代碼并不是強制

3、性的，你也可以 直接安裝個nopCommerce網站。要安裝沒有源代碼的nopCommerce,請到 nopCommerce頁而下載2，Visual Studio或任何文本編輯器。3=良好的HTML和CSS知識。4。對ASP.NET MVC的了解不是強制性的，但憧MVC將是個巨大的好處。中的主題文件夾中的主題創(chuàng)建nopCommerce主題棋板之前您需要了解的個nopCommerce主題的文 件結構。主題包含，K -個內容文件夾。所有的樣式表和主題圖像（cgtemAlmages文件夾的內容） 都設在這里。2。View文件夾。所有主題的MVC Razor（如果不知道，建議先了解下Razor）都設

4、在這里。前端開發(fā)人員可以認為MVC razor視圖為般網頁,其中包含HTML標 記和些服務器端代碼。幾乎類似于個PHP文件。所以如果你是個前端開發(fā) 人員，你應該至少可以編輯HTML標記的各方面的Vie磯網頁的主題。3 theme.config文件。theme.corrfig文件包含主題名稱和描述等信息 此信息 供nopCommerce讀取使用，例如，當填充嘀店的主題嚇拉列表配置設置 a 常規(guī)，雜項設置頁而，在管理咐板或填充的主題選擇的控制，例如用戶瀏覽時候提 供下拉框選項，允許nopCommerce客戶選擇一個主題如何安裝nopCommerce主題?個nopCommerce主題或模板定義網站的

5、布局，外觀以及某些nopCommerce 網站的功能。我們可以認為，nopCommerce主題模板獨立的軟件模塊，從 nopCommerce網站，通過簡單麻將它們復制到或從nopCommerce Themes文件 夾刪除就可以完成安裝或卸載。nopCommerce主地是日安裝，您可以切換 nopCommerce管理而板，并打開配置-設置，常規(guī)，雜項設置項面。存儲的 主題”下拉列表中包含所有當前已安裝的主題，顯示了當前活動/可用的主題。如何開始nopCommerce主題？ 最簡單的方式開始您的nopCommerce主題操作就是從nopCommerce Themes目 京復制默認的深橙Cdarko

6、range）的主題文件夾，將其復葡在同主題的目錄：將 它重新命名為任何您想要的主題名，這通常是您的網站的名稱，例如 NopTemplates編輯在theme.config文件中的信息，至少反映你的主題名稱?？谝蛔龅竭@點，你可以去配置設置，常規(guī)，柴項設置管理頁而，選擇你的主題, 作為目前活躍的Theme之、在這樣的主題文件中所做的任何更改將立即生效，您 將能夠在網站的公共頁面部分預覽他們。修改哪里的HTML標記.以及如何在nopCommerce主題中改支它？您剛才創(chuàng)建的mpCommece主題口現(xiàn)在，為了能夠做些有意義的修改，我們 將詳細多點，在你的主艇上點擊，文件夾中的主題。Views文件夾你

7、nopCommerce 題模板是個反啪如果你是宜接點擊文件夾，如果你是 nopCommerce源代碼，或在您的網站的根日錄的I：作，這是在演示、Nop.Web目 錄位于安裝個nopCommerce網站。這nopCommerce點擊“文件夾中布含MVC 的行動后，所謂的不同命名的目錄，例如目京博客，結帳.等MVC的行動（Action）只是服務器端代碼（方法），服務器不同的V2叭網頁在這些行動的 文件夾。CShtml文件的皿河頁而本身o這些view、網頁包含razor代碼和HTML 標記.Kazor View本文討論范圍之外的話題=需要知道的個重要的思想姑，當，個nopCommerce訪問請求要求

8、頁訪問發(fā)生時，它是從各自的時紋 動作文 件夾中的服務。此外，nopCommerce將首先考慮當前活動的主題文件夾，如果它 不能找到它對成的主題，然后它會尋找到自己的vi對文件夾。因此，在這種方式 下，在你的主題您可以覆蓋默認的nopCommerce頁。例如，如果您想改變您 的nopCommerce網站最近查看過的產品頁1肌 只需在你的主題查看目京創(chuàng)建 個目索文件夾，復制 nopCommercs 點擊目錄 RecentlyViewedProducts.cshtml 查 看和編輯您的要求?，F(xiàn)在，當個網站的訪問者請求返回最近瀏覽過的產品頁，從 你的主題RecentlyViewedProducts.c

9、shtml視圖。在大多數(shù)情況下，發(fā)展 nopCommerce主題機 你會不會需要覆蓋所有nopCommerce意見網頁所以 最好的力法，以創(chuàng)建nopCommerce主邀模板是采取漸進的方式，,個接個） 當簡單的CSS變化無法滿足業(yè)務要求的時候。對于部分view,這是特別真實的。很可能，你會需要覆蓋默認nopCommerce所 有部分意見。部分意見只是像普通的謳制，但他們不允許被視為送達頁面，決|為 它們是被認為不完整的（部分）。相屆 他們是在正常的意見，包括他們進入正常 的意見，通過服務器端代碼標記。例如RecentlyViewedProducts.cshtml視圖包拈 _ProductBox

10、.cshtmb 使用這行代碼二 Html.Partial _ProduGtBox尸 Q項）。 這段代碼的意思基本文的范圍之外，但最重要的是，你是知道的部分意見，并在主 要意見及其用法。當局部視圖包括個主視圖，局部視圖的標記是投入包括呼叫的 地方你可以逋過在其名稱中的前導下劃線的部分意見；這不是強制性的，局部視 圖名稱可能不以下劃線開頭。然而，它是個很好的接受，并建議的公約。但是請 注意，nopCommerce 采用 ASP.NET MVC 的概念作為 childonly view,另個知 道。這些意虬是非常局部視圖和同，他們不能擔任網站的網頁，但它們是通過個 不同的服務器代碼的止常意見包括。例

11、如： Html.ActionCategoryNavigation, “目錄”，新的currentcategoryId = currentCategoryld currentProductld = currentProductld）。我提這個因為childonly view不以下劃線開頭，你可能會被 誤導，認childonly作為普通視圖。如何識別childonly View呢？不看在 nopCommerce項目中的C#代碼，您將無法做個血對的把握。但是個好的經 驗法則是，如果視圖沒有布局視圖，不以下劃線開頭很可能是個childonly view. 稍后給出布局視圖解樣。如何通過使用個nopCo

12、mmerce主題改變個nopCommerce網站的布局?現(xiàn)在您了解如何nopCommerce I：作機制4 nopCommerce主題相結合，你淮備 好開始對nopCommerce網站的HTML進行修改=最大的可能是你將要開始布局 的Vi對修改，網站或由于大多數(shù)ASP.NET開發(fā)的網頁，了解他們的母版頁，布 局視圖允許您定義個共同的風格，您的網站結構以及網頁的繼承性。nopCommerce點擊文件夾以及您的主題點擊文件夾包含個文件夾Shared命名 的。這姑可以找到共同的View （不綁定到 個特定的動作） 這也姑所有 nopCommerce布局視圖駐留的地方。請注意布局的意見，可以在，個分層

13、的萬式 繼承日而這正是nopCommerce出T定義其網站的姑構和布局，通過層次的繼承方 式。在布局層次的頂部是_RootCshtml Viewn在您nopCommerce的網站督頁多會 繼承這個_root. cshtml的razg代碼和HTML標記，怎么會這樣呢？在布局層次 _Root.Gshtml 下面包含了以下幾個 View； _ColumnsOne.cshtml,_ColumnsTwo.cshtml, ColumnsThree.cshtml, _ColumnsFIuid.cshtml這意 味看所有這些View,繼承_RooLcshtml布局。周為每個nopCommerce查看頁面 繼承

14、這些意見，他們也繼_Root.cshtmL所以，如果你想改處_Root.cshtml查看 或任何其他它下面的布局層歡布局意見的東西，你需要先復制林共享文件夾在你 的主題點擊各自的Viewo你很少會改變在_Root.cshtml視圖中的標記，因為這種觀點以及其他布局的意見 后，部分和childonly意見，這些意見內置你很可能會與個。例如_Root.cshtml 視圖包括 Header.cshtml 和 HeaderMenu.cshtml Partial viewso_ColumnThree.cshtml View,這是在 nopCommerce 的默認布局，包拈 Category Navi g

15、 ati on .cshtml, ManufacturerNavigation.cshtml,PopularProductTags.cshtml 和許多其他部分和 childonly View,它定義個 nopCommerce網頁的左邊和右邊的列的內容網站。但是，清注意，這是默認情況 下。如果你需要改變笙頁的布局，它繼承_ColumnThreacshtml查看或任何其 他的版式視圖，你將W_ColumnThree.cshtml查看或任何其他你打算使用布局視 圖復制到您nopCommerce的主題點擊共享文件夾，并有改變的看法c我想再次 重申，在布局視圖中的奩化，將影響到每,頁，因為它們繼承了.

16、root, cshtml視 圖繼乳Views Shared w folderINameEditorTmphtej 鴦 _Column sFluid _Column$Ohe 鴦 ColumnjThret _ColumnsTwo勺 _&eate OrUpd ateAddress窩 Installation駕-Print 也一Root勺 _RootPopup躅 Error 鴦 Footer 嬲 Head罷）Header均 HemderlMmu公 LanguageAttributes用Razor代碼的布局部分 如果你想保留默認情況下的布局；只是想改變單個頁而的布局，nopCommerce團 隊通過Ra

17、zor節(jié)塊為您提供很好的鉤子。Razor部分可以被看作是布局部分。razor部分超出了本文的范用,但你可以閱讀更多關于他們在這Scott的優(yōu)秀博客 文章 HYPERLINK /scottgu/archive/2010/12/30/asp-net-mvc-3-layouts-and-s%c2%abctions-with.-razor /scottgu/archive/2010/12/30/asp-net-mvc-3- layouts-and-sctions-with.-razor. aspxa 所有你需要了解 nopCommerce 布局 視圖定義的razor部分的姑，你可以ft_ColumnT

18、wo.cshtml視圖中的“左邊”修改 Razor*代碼，在_Co山mnThree.cshtml視圖右邊修改Razor節(jié)=所以說，例如 在 nopCommerce 主題 BlogPost.cshtml 查看頁面繼承_ColumnTwo.cshtml 布局 視圖你想擺脫產品類別和制造商在博客頁|Hi左側列遍塊，因為這些都不是非常 相關的博客頁血 相反，你想在博客頁而左側列中使用自定義的內容，并把博客按 月的標簽導航。as捷套雀的味?；陬Ｂ?lián)系我倔博客為了做到這，在您BlogPost.cshtml看來你必須定義個tfLeftw 節(jié)（section left）,并把您的自定義內容放入其中?，F(xiàn)在您的Bl

19、ogPost.cshtml看法頁Ifri左側 列中的默認內容將您的自定義內容覆蓋。我給你這個例子，因為這足 nopCommerce團微如何實施BlogPost.cshtml Vie的。所以，你可以打開（點擊 博客A BlogPost.cshtml）查看有，個細節(jié)。_CQlumn，TV。枷podFile Edit Format View Help1f (url .Requesrcont ext* RouieDaT a. values controller .Tostr 1 ng(). Equals (car a&Url.Requestcontext RoureDat a.valuesact 1o

20、nTost rnng() Equa1s(productcurrentProduct Id = Convert.Tornt32(url.Requestcont ext RouteData. valuesCprdv class= er-vzrpper-sftenderseocl(issect!onDefInedC1!efT*)elseHtml. Act*?onCwidgetsByzone t Vidget t new widgetzone = Nop.Core.Domair div classclear、 Html Act lonCwdshopplngcart ”, ”5hcppTnqcart ”

21、div cliss-clear看下代碼，如果定義有 Left Section (fssectiondefined(l6ftw)，這不BloqPost.cshtml/list.cshtml 多定義了sectiQn left.model nop.web.Models.Blogs.BlcgPostLlstModel using nop.web;using Nop.wb.Extenslons;Layout /views/shared/_columnsTwo.cshtmlM;/titleHvml, AddTiTlePartsCrCPageTntle. Blog).Texx);/too? Display

22、blog pss feed link in the browser address bar| section lefx ntm 1.A1 on(MB1 ogMonthsM, “Blog)ntml.ACTlon(MBlogTagsM, MBlogM)K* 4 修改_Root.cshtml View,我說，你很少會有這種觀點。似乎有必要這樣做的唯個案例是，當你想添加自己的CSS樣式表或JavaScript文件。在_Root.cshtml 你可以看到.nopCommerce是默認情況下加入了 堆JavaScript鏈接。你可能 想添加自己的腳本的鏈接或CSS鏈接在同個地方。但這樣做你就錯了。請注意

23、其實Root.cshtml的頭標記沒有CSS鏈接的。為什么會這樣呢？因為只有核心 nopCommerce文件應當有掛鉤，而這些是絕對何nopCommerce查看頁而無論 使用的文件，如果它是個布局視圖頁，個正常的觀點，個局部個或 childonly最重要的是，這些文件沒有具體到nopCommerce主題有沒有樣式表 可以作為共同所有，而不是具體到 4- nopCommerce主題分類。這就是為什么 你會看不到頭標記的_Rootqshtml的CSS鏈接。你會發(fā)現(xiàn)，_Root.cshtml包括命名Head.cshtml 個局部視圖，你可以找到演示 文稿中的這部分的看法 Nop.Web 次數(shù)共亨文件

24、夾的意見或nopCommerce源代 碼共享文件夾，您nopCommerce M站。Head.cshtml視圖是圣的=然而，如果 你在Views深橙主題的共享文件夾，例如，你會發(fā)現(xiàn)它包含個主題的style.css 的鏈接8從您nopCommerceHead.cshtml的看法，將覆蓋默認Head.cshtml視圖，這是你應該使用，以包括您自定義的CSS樣式右和JavaScript文件。因此，為了您自定義的CSS樣式表和JavaScript文件，你沒有改變_Root.cshtml 查看，您可能已經在開始以為您需要在噫Head.cshtml視圖 nopCommerce 主題，并在此視圖中，您需要包

25、括您的文件共享文件夾。CSS樣式在哪里的，以及如何改變它們在nopCommerce主題？nopCommerce主題內容的文件夾應位于 個nopCommerce主題的CSS樣式表 正如你在上 節(jié)中了解到，CSS樣式表德接通過Head.cshtml查看，可以發(fā)現(xiàn)在 Views共享文件夾個nopCommerce主題.所以基本上你可以找到你的CSS文 件，只要你想，只要你同步Head.cshtml查看鏈接的位置。但它是個好主意付 Content文件夾為統(tǒng)起見，特別是如果你打算分發(fā)nopCommerce主題。默 認nopCommerce主題來個默認的style.css文件。這可能是個好主意，復制 nopCommerce主題內容文件夾中的深橙或經典主題的style.css文件，并使用它 然而，這在很大程度上取決于很務nopCommerce主題，以及如何不同，它從默 認nopCommerce主題。如果你的主題是完全不同的標記和風格幾乎什么都沒有 做默認的的，那么它可能是個好主意