開(kāi)源電商平臺(tái)nopCommerce主題創(chuàng)建介紹

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

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

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

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

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

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

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

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

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

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

11、如： Html.ActionCategoryNavigation, “目錄”，新的currentcategoryId = currentCategoryld currentProductld = currentProductld）。我提這個(gè)因?yàn)閏hildonly view不以下劃線開(kāi)頭，你可能會(huì)被 誤導(dǎo)，認(rèn)childonly作為普通視圖。如何識(shí)別childonly View呢？不看在 nopCommerce項(xiàng)目中的C#代碼，您將無(wú)法做個(gè)血對(duì)的把握。但是個(gè)好的經(jīng) 驗(yàn)法則是，如果視圖沒(méi)有布局視圖，不以下劃線開(kāi)頭很可能是個(gè)childonly view. 稍后給出布局視圖解樣。如何通過(guò)使用個(gè)nopCo

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

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

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

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

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代碼的布局部分 如果你想保留默認(rèn)情況下的布局；只是想改變單個(gè)頁(yè)而的布局，nopCommerce團(tuán) 隊(duì)通過(guò)Ra

17、zor節(jié)塊為您提供很好的鉤子。Razor部分可以被看作是布局部分。razor部分超出了本文的范用,但你可以閱讀更多關(guān)于他們?cè)谶@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é)=所以說(shuō)，例如 在 nopCommerce 主題 BlogPost.cshtml 查看頁(yè)面繼承_ColumnTwo.cshtml 布局 視圖你想擺脫產(chǎn)品類(lèi)別和制造商在博客頁(yè)|Hi左側(cè)列遍塊，因?yàn)檫@些都不是非常 相關(guān)的博客頁(yè)血 相反，你想在博客頁(yè)而左側(cè)列中使用自定義的內(nèi)容，并把博客按 月的標(biāo)簽導(dǎo)航。as捷套雀的味?；陬Ｂ?lián)系我倔博客為了做到這，在您BlogPost.cshtml看來(lái)你必須定義個(gè)tfLeftw 節(jié)（section left）,并把您的自定義內(nèi)容放入其中。現(xiàn)在您的Bl

19、ogPost.cshtml看法頁(yè)Ifri左側(cè) 列中的默認(rèn)內(nèi)容將您的自定義內(nèi)容覆蓋。我給你這個(gè)例子，因?yàn)檫@足 nopCommerce團(tuán)微如何實(shí)施BlogPost.cshtml Vie的。所以，你可以打開(kāi)（點(diǎn)擊 博客A BlogPost.cshtml）查看有，個(gè)細(xì)節(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,我說(shuō)，你很少會(huì)有這種觀點(diǎn)。似乎有必要這樣做的唯個(gè)案例是，當(dāng)你想添加自己的CSS樣式表或JavaScript文件。在_Root.cshtml 你可以看到.nopCommerce是默認(rèn)情況下加入了 堆JavaScript鏈接。你可能 想添加自己的腳本的鏈接或CSS鏈接在同個(gè)地方。但這樣做你就錯(cuò)了。請(qǐng)注意

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

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

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