Question

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

有什么建议吗？

Answer 1

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

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

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

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

但我该如何设计皮肤？

需要注意的一点是，DotNetNuke您倾向于不为该页面设计一个网站 - 您可以创建更复杂的结构，可以在更一般的意义上使用。例如：

Image of Web-Site

因此，使用上面的图像，您会看到一些关键元素，例如：

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

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

Social Profile

现在你有一个稍微复杂的问题。好吧，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界面自动在该位置输入徽标。

哇，你输了我 - 如果这只是一个参考，我们如何指定位置？

<%@ 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模块位于{{1}}之内。

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

您可以从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，该网站确实提供了丰富的信息。

DotNetNuke 7皮肤教程

3 个答案: