DNN 9特定页面BODY标签类设置与模板取值技术问询

Hey there! Since you're new to DNN 9, let's walk through this step by step—this is a common customization, and totally doable with a couple straightforward approaches.

Part 1: Adding a Custom Class to the <body> Tag for Specific Pages #

You’ve got a few options here, depending on whether you want to set classes per-page or apply them to groups of pages using templates.

Option 1: Use Page Custom Properties (Per-Page Control) #

This is the most flexible way to set unique body classes for individual pages:

1. Go to the page you want to customize, click Settings > Advanced Settings (or just Page Settings in some DNN UI versions).
2. Scroll to the Custom Properties section.
3. Add a new property:
   • Key: BodyClass (you can name this anything, but stick to a consistent key for easy access)
   • Value: Your desired class name(s) (e.g., special-menu-style dark-header)
4. Save the page settings.

Next, update your skin template (the .ascx file for your skin) to render this class in the <body> tag:

<body class='<%# 
    DotNetNuke.Entities.Tabs.TabController.CurrentPage.CustomProperties.ContainsKey("BodyClass") 
        ? DotNetNuke.Entities.Tabs.TabController.CurrentPage.CustomProperties["BodyClass"].ToString() 
        : "" 
%>'>

Or if you prefer cleaner code with a code-behind file for your skin:

// In your skin's code-behind (e.g., MySkin.ascx.cs)
protected string GetBodyClass()
{
    var currentPage = DotNetNuke.Entities.Tabs.TabController.CurrentPage;
    var bodyClasses = new List<string>();

    // Add custom property class if it exists
    if (currentPage.CustomProperties.ContainsKey("BodyClass"))
    {
        bodyClasses.Add(currentPage.CustomProperties["BodyClass"].ToString());
    }

    // Optional: Add conditional classes based on page ID/name
    if (currentPage.TabID == 456) // Replace with your target page ID
    {
        bodyClasses.Add("promo-page");
    }

    return string.Join(" ", bodyClasses);
}

Then update the <body> tag in your skin:

<body class="<%= GetBodyClass() %>">

Option 2: Apply Classes to All Pages Using a Specific Template #

If you want all pages using a certain skin template to have the same body class, you can hardcode it directly in the skin’s <body> tag, or add a conditional check for the template:

<body class='default-body-class <%# 
    DotNetNuke.Entities.Tabs.TabController.CurrentPage.SkinPath.Contains("MySpecialTemplate") 
        ? "special-template-menu" 
        : "" 
%>'>

Part 2: Accessing the Body Class Value in Specific Templates #

Whether you’re working in a skin template, module template, or code-behind, you can retrieve the body class value using DNN’s API.

In a Skin or Module ASCX Template #

You can read the custom property directly in the markup:

<% 
var currentPage = DotNetNuke.Entities.Tabs.TabController.CurrentPage;
string bodyClass = currentPage.CustomProperties.ContainsKey("BodyClass") 
    ? currentPage.CustomProperties["BodyClass"].ToString() 
    : "default-body-class";
%>

<!-- Example usage in the template -->
<div class="module-wrapper <%= bodyClass %>-custom">
    <!-- Module content here -->
</div>

In a Module Code-Behind File #

If you need to use the body class value in server-side logic, grab it from the current page object:

using DotNetNuke.Entities.Tabs;

public partial class MyCustomModule : PortalModuleBase
{
    protected void Page_Load(object sender, EventArgs e)
    {
        var currentPage = TabController.CurrentPage;
        string bodyClass = string.Empty;

        if (currentPage.CustomProperties.ContainsKey("BodyClass"))
        {
            bodyClass = currentPage.CustomProperties["BodyClass"].ToString();
        }

        // Use the class value in your logic (e.g., load specific styles)
        if (bodyClass.Contains("dark-theme"))
        {
            // Add dark theme stylesheet
            Page.Header.Controls.Add(new LiteralControl("<link rel='stylesheet' href='/portals/_default/css/dark-theme.css'>"));
        }
    }
}

Quick Tips #

• Cache Clearing: After making changes to skin templates or page settings, clear DNN’s cache (Host > Host Settings > Performance > Clear Cache) to see your updates immediately.
• Consistent Naming: Stick to lowercase, hyphen-separated class names (standard CSS practice) to avoid issues.
• Multiple Classes: You can add multiple classes in the custom property value by separating them with spaces (e.g., menu-style-2 sidebar-expanded).

内容的提问来源于stack exchange，提问作者Naveed Ahmed