开源电商平台nopCommerce主题创建介绍

1、如何创建nopCommerce主题1月02 口（星期） 2012年在这篇文章中，我要谈nopCommercs以及nopCommercs模板和我们如何可以 创建个主题清注意，在这个博客帖了的内容将从.NETMVCnopComm敏ce 开发的角度来看问题。但前端开发人员也可以从中受益，并学习如何创建个 nopCommerce 主题模板什么是nopCommerce主题？个nopCommerce主题仪仅是鲍文件用来定义个nopCommerce网站的外 观，它的布局和外观，以及如何个网站的行为.其功能如何集合。重要的是要明 白，不是每个功能，可以通过nopCommerce主题实现 nopCommerce

2、插件就 是用来填补了这些The!旭无法实现的空白功能的。因此，这是并不少.见的个意思 通过开发nopCommerce插件，专门为某个主题，以达到某些更高级的功能，伴 随看nopCommerce主题。然而nopCommerce插件是另 篇博客的话题，在本文中，我们将主要讨论和处理nopCommerce主题寸为什么你需要创建-,个nopCommercs主题？ 首先要能够创造出 个nopCommerce主题，您将需要：1 c nopCommerce 源代码或安装个 nopCommerce 网站a 从 nopCommarce CodePlex itirfri,您可以下我源代码。能调试的源代码并不是强制

3、性的，你也可以 直接安装个nopCommerce网站。要安装没有源代码的nopCommerce,请到 nopCommerce页而下载2，Visual Studio或任何文本编辑器。3=良好的HTML和CSS知识。4。对ASP.NET MVC的了解不是强制性的，但憧MVC将是个巨大的好处。中的主题文件夹中的主题创建nopCommerce主题棋板之前您需要了解的个nopCommerce主题的文 件结构。主题包含，K -个内容文件夹。所有的样式表和主题图像（cgtemAlmages文件夹的内容） 都设在这里。2。View文件夹。所有主题的MVC Razor（如果不知道，建议先了解下Razor）都设

4、在这里。前端开发人员可以认为MVC razor视图为般网页,其中包含HTML标 记和些服务器端代码。几乎类似于个PHP文件。所以如果你是个前端开发 人员，你应该至少可以编辑HTML标记的各方面的Vie矶网页的主题。3 theme.config文件。theme.corrfig文件包含主题名称和描述等信息 此信息 供nopCommerce读取使用，例如，当填充嘀店的主题吓拉列表配置设置 a 常规，杂项设置页而，在管理咐板或填充的主题选择的控制，例如用户浏览时候提 供下拉框选项，允许nopCommerce客户选择一个主题如何安装nopCommerce主题?个nopCommerce主题或模板定义网站的

5、布局，外观以及某些nopCommerce 网站的功能。我们可以认为，nopCommerce主题模板独立的软件模块，从 nopCommerce网站，通过简单麻将它们复制到或从nopCommerce Themes文件 夹删除就可以完成安装或卸载。nopCommerce主地是日安装，您可以切换 nopCommerce管理而板，并打开配置-设置，常规，杂项设置项面。存储的 主题”下拉列表中包含所有当前已安装的主题，显示了当前活动/可用的主题。如何开始nopCommerce主题？ 最简单的方式开始您的nopCommerce主题操作就是从nopCommerce Themes目 京复制默认的深橙Cdarko

6、range）的主题文件夹，将其复葡在同主题的目录：将 它重新命名为任何您想要的主题名，这通常是您的网站的名称，例如 NopTemplates编辑在theme.config文件中的信息，至少反映你的主题名称。口一做到这点，你可以去配置设置，常规，柴项设置管理页而，选择你的主题, 作为目前活跃的Theme之、在这样的主题文件中所做的任何更改将立即生效，您 将能够在网站的公共页面部分预览他们。修改哪里的HTML标记.以及如何在nopCommerce主题中改支它？您刚才创建的mpCommece主题口现在，为了能够做些有意义的修改，我们 将详细多点，在你的主艇上点击，文件夹中的主题。Views文件夹你

7、nopCommerce 题模板是个反啪如果你是宜接点击文件夹，如果你是 nopCommerce源代码，或在您的网站的根日录的I：作，这是在演示、Nop.Web目 录位于安装个nopCommerce网站。这nopCommerce点击“文件夹中布含MVC 的行动后，所谓的不同命名的目录，例如目京博客，结帐.等MVC的行动（Action）只是服务器端代码（方法），服务器不同的V2叭网页在这些行动的 文件夹。CShtml文件的皿河页而本身o这些view、网页包含razor代码和HTML 标记.Kazor View本文讨论范围之外的话题=需要知道的个重要的思想姑，当，个nopCommerce访问请求要求

8、页访问发生时，它是从各自的时纹 动作文 件夹中的服务。此外，nopCommerce将首先考虑当前活动的主题文件夹，如果它 不能找到它对成的主题，然后它会寻找到自己的vi对文件夹。因此，在这种方式 下，在你的主题您可以覆盖默认的nopCommerce页。例如，如果您想改变您 的nopCommerce网站最近查看过的产品页1肌 只需在你的主题查看目京创建 个目索文件夹，复制 nopCommercs 点击目录 RecentlyViewedProducts.cshtml 查 看和编辑您的要求。现在，当个网站的访问者请求返回最近浏览过的产品页，从 你的主题RecentlyViewedProducts.c

9、shtml视图。在大多数情况下，发展 nopCommerce主题机 你会不会需要覆盖所有nopCommerce意见网页所以 最好的力法，以创建nopCommerce主邀模板是采取渐进的方式，,个接个） 当简单的CSS变化无法满足业务要求的时候。对于部分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网站的布局?现在您了解如何nopCommerce I：作机制4 nopCommerce主题相结合，你淮备 好开始对nopCommerce网站的HTML进行修改=最大的可能是你将要开始布局 的Vi对修改，网站或由于大多数ASP.NET开发的网页，了解他们的母版页，布 局视图允许您定义个共同的风格，您的网站结构以及网页的继承性。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节块为您提供很好的钩子。Razor部分可以被看作是布局部分。razor部分超出了本文的范用,但你可以阅读更多关于他们在这Scott的优秀博客 文章 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节=所以说，例如 在 nopCommerce 主题 BlogPost.cshtml 查看页面继承_ColumnTwo.cshtml 布局 视图你想摆脱产品类别和制造商在博客页|Hi左侧列遍块，因为这些都不是非常 相关的博客页血 相反，你想在博客页而左侧列中使用自定义的内容，并把博客按 月的标签导航。as捷套雀的味。悔睿联系我倔博客为了做到这，在您BlogPost.cshtml看来你必须定义个tfLeftw 节（section left）,并把您的自定义内容放入其中。现在您的Bl

19、ogPost.cshtml看法页Ifri左侧 列中的默认内容将您的自定义内容覆盖。我给你这个例子，因为这足 nopCommerce团微如何实施BlogPost.cshtml Vie的。所以，你可以打开（点击 博客A BlogPost.cshtml）查看有，个细节。_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链接。你会发现，_Root.cshtml包括命名Head.cshtml 个局部视图，你可以找到演示 文稿中的这部分的看法 Nop.Web 次数共亨文件

24、夹的意见或nopCommerce源代 码共享文件夹，您nopCommerce M站。Head.cshtml视图是圣的=然而，如果 你在Views深橙主题的共享文件夹，例如，你会发现它包含个主题的style.css 的链接8从您nopCommerceHead.cshtml的看法，将覆盖默认Head.cshtml视图，这是你应该使用，以包括您自定义的CSS样式右和JavaScript文件。因此，为了您自定义的CSS样式表和JavaScript文件，你没有改变_Root.cshtml 查看，您可能已经在开始以为您需要在噫Head.cshtml视图 nopCommerce 主题，并在此视图中，您需要包

25、括您的文件共享文件夹。CSS样式在哪里的，以及如何改变它们在nopCommerce主题？nopCommerce主题内容的文件夹应位于 个nopCommerce主题的CSS样式表 正如你在上 节中了解到，CSS样式表德接通过Head.cshtml查看，可以发现在 Views共享文件夹个nopCommerce主题.所以基本上你可以找到你的CSS文 件，只要你想，只要你同步Head.cshtml查看链接的位置。但它是个好主意付 Content文件夹为统起见，特别是如果你打算分发nopCommerce主题。默 认nopCommerce主题来个默认的style.css文件。这可能是个好主意，复制 nopCommerce主题内容文件夹中的深橙或经典主题的style.css文件，并使用它 然而，这在很大程度上取决于很务nopCommerce主题，以及如何不同，它从默 认nopCommerce主题。如果你的主题是完全不同的标记和风格几乎什么都没有 做默认的的，那么它可能是个好主意