DotNetNuke 7蒙皮教程

Question

我正在寻找一个为DotNetNuke 7创建皮肤的不错的教程。我还没有找到任何最新版本的dnn的东西，虽然我已经成功地修改了一些现有的皮肤，但能够从头开始构建它们会容易得多。

有什么建议吗？

Answer 1

我不打算深入讨论太多细节，但我将定义一些关于DotNetNuke Skinning的关键元素以及您可能会遇到的一些潜在问题。

外观可以通过以下两种方式之一编写：html或ascx。最常见的方法是通过ascx。

• html：当您使用此方法时，在DotNetNuke解析皮肤之前，您在皮肤中所做的任何更改都不会应用。当DotNetNuke执行此解析时，它将引用您的清单来正确解析所有值，因此它是displays.
• ascx的:这种方式不需要解析，您所做的更改将立即生效。这使得操作变得更容易。但是，它仍将包含一个清单来定义您的内容。

现在，想象DotNetNuke结构的最简单方法是通过Panes和Containers。从本质上讲，Pane将始终包装在Container中。

但是如何设计外观呢？

需要注意的几点是，使用DotNetNuke时，您往往不会为该页面设计站点-您创建了更精细的结构，可以在更一般的意义上使用这些结构。例如：

​

​

因此，在上图中，您可以看到一些关键元素，例如：

1. 标志
2. 搜索
3. 登录名
4. 菜单
5. 横幅
6. 三个内容的分组。
7. 四个内容的分组。
8. 另一个内容。
9. 页脚也按四个分组。

所以本质上我们有一个相当简单的数据结构。这通常包括一些相当基本的组织。但我的问题是，你如何考虑或移动设备或不同的页面布局，如：

​

​

现在您有了一个稍微复杂一些的问题。嗯，DotNetNuke确实保留了一些考虑因素--让开发人员作为开发人员，让设计师作为设计师。这允许大型团队在不破坏彼此工作的情况下灵活地与站点一起工作。

在每个DotNetNuke皮肤中，您将看到以下内容：

<%@ Control language="C#" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %>
<%@ Register TagPrefix="dnn" TagName="LOGO" Src="~/Admin/Skins/Logo.ascx" %>

那些是什么?首先是定义我们的ascx。重要的是第二件事。本质上，DotNetNuke有可用的令牌，这些令牌将允许皮肤在其界面中反映在DotNetNuke中所做的更改。

因此，当我们引用核心位置，而不是静态对象时。这允许DotNetNuke界面在该位置自动输入徽标。

哇，你把我搞糊涂了--如果这只是一个参考，我们该如何指定位置呢？

<%@ Register TagPrefix="dnn" TagName="LOGO" Src="~/Admin/Skins/Logo.ascx" %>

将引用我们的对象。要在我们的站点中指定位置，请执行以下操作：

<div class = "example_logo">
    <dnn:LOGO runat="server" id="dnnLOGO" BorderWidth="0" />
</div>

因此，我们实际上是将令牌对象包装在一个div元素中。那么我们实际上是在调用我们的令牌。这将把来自DotNetNuke界面的徽标物理地放入您的站点中。

这基本上消除了静态方法，并允许它成为动态的。

这些都很重要，但是我该如何创建这个结构呢？

<div id="Origin">
    <div class="Wrapper">
         <div id="Origin-Header">
            <div class="origin-header clearfix">

                 <!-- Header Elements -->
                 <div class=origin-logo>
                      <dnn:LOGO runat=server" id="dnnLOGO" BorderWidth="0" />
                 </div>
                 <div class="origin-login">
                       <dnn:LANGUAGE runat="server" id="dnnLANGUAGE" showMenu="false" showLinks="true" />
                       <dnn:LOGIN runat="server" id="dnnLOGIN" CssClass="login" /> |                      <dnn:USER runat="server" id="dnnUSER" CssClass="user" />
                       <dnn:SEARCH runat="server" id="dnnSEARCH" UseDropDownList="true" ShowSite="false" ShowWeb="false" />
                  </div>
            </div>
       </div>

        !-- Banner -->
        <div id = "Origin-Banner">
              <div class = "origin-banner-pane" id="origin-banner-pane" runat="server" />
        </div>

因此，上面的例子可以帮助你入门。正如你所看到的，你正在使用你的基本知识来构建网站结构。您只是将DotNetNuke Tokens填充到您的设计中。然后，您希望DotNetNuke模块从DotNetNuke接口填充站点数据的位置是在这些Panes中。

现在下一个重要的方面是皮肤的基本包装。这实际上将确保它在安装后能够正常工作。

您可以从http://www.dotnetnuclear.com和http://www.dnnchat.com获取更多信息

希望这篇文章能为你提供入门的基础。剩下的是包装和载货单。

希望这能为您指明正确的方向，并对您有所帮助。

请随时提问或关注这些网站，尝试获取有关该主题的更多信息。

Answer 2

您最好的选择可能是从查看DotNetNuke附带的现有皮肤开始。要创建新皮肤，只需转到/Portals/_default/skins区域，复制其中一个目录，粘贴并将其重命名为某个唯一的目录。这现在应该会显示在您的皮肤选择器中。90%的.ascx皮肤文件仅仅是HTML/CSS。然后，可以根据需要修改skin.css文件和ASCX文件，以获得所需的外观。要创建新的皮肤选项，只需创建一个新的.ascx文件。

您也可以购买一两个皮肤，看看它们是如何开发出来的。

Answer 3

正如Chris Hammond在第一条评论中指出的那样，这些教程很难获得。@Chris -感谢您编写模块模板。社区和我都很感激。

我自己一直在努力学习DNN皮肤，偶然发现了DNN Hero网站，上面有一个很好的基本视频教程，教你如何为网站创建皮肤。

它可以在这里找到：http://www.dnnhero.com/Premium/Tutorial/tabid/259/ArticleID/80/1-How-to-create-my-first-skin-in-DotNetNuke-Part-1-6.aspx

我认为这个系列不在免费的视频集中，所以你可能需要订阅才能获得它。我是一个订阅者，并没有感到失望。如果你需要皮肤或其他DNN的介绍，这个网站真的很有用。