DotNetNuke 7 蒙皮教程 [关闭]答案

【问题标题】：DotNetNuke 7 skinning tutorial [closed]DotNetNuke 7 蒙皮教程 [关闭]
【发布时间】：2013-04-30 01:36:33
【问题描述】：

我正在寻找一个关于为 DotNetNuke 7 创建皮肤的不错的教程。我无法找到最新版本的 dnn 的任何内容，虽然我在修改现有皮肤方面取得了一些成功，但它会从头开始构建它们会容易得多。

有什么建议吗？

【问题讨论】：

不幸的是，对于 DNN 皮肤，教程很难获得
这是一个非常适合初学者的分步教程：dotnetnuke.com/Resources/Blogs/EntryId/2671/…
我不确定您需要多长时间才能使用它，但我会尝试写一篇关于它的博客。
嘿..你有什么帮助吗..我还需要从头设计皮肤

【解决方案1】：

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

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

【讨论】：

我认为这是要走的路。不过，您需要熟悉 DNN 的基本模块创建。

【解决方案2】：

我不会详细介绍，但我会定义一些关于DotNetNuke Skinning 的关键要素以及您可能遇到的一些潜在问题。

可以用html 或ascx 两种方式之一编写皮肤。最常见的方式是通过ascx。

html ：当您使用此方法时，您在皮肤中所做的任何更改都不会应用，直到DotNetNuke 解析皮肤。当DotNetNuke 进行此解析时，它将引用您的清单以正确解析所有值以便显示。
ascx ：这种方式不需要解析，你所做的更改会立即生效。这使得操作更容易。但是，这仍将包含一个清单来定义您的内容。

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

但是我该如何设计皮肤呢？

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

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

徽标
搜索
登录
菜单
横幅
三个内容的分组。
四个内容的分组。
另一个内容。
页脚也按四个分组。

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

现在您遇到了一个稍微复杂的问题。好吧，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界面就可以自动在位置输入logo了。

哇，你把我弄丢了——如果这只是一个参考，我们如何指定位置？

<%@ 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获取更多信息

希望这为您提供了入门的基础知识。剩下的就是包装和清单。

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

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

【讨论】：

您也可以查看 DotNetNuke 视频库。
主要是因为我不记得是否添加了它，但 DotNetNuke 需要在 skin 中定义 ContentPane。

【解决方案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 的介绍，该网站的信息非常丰富。

【讨论】：