在 Kentico 10 网站的上下文中防止 FOUC

Question

Zurb Foundation 建议 adding class="no-js" to the page html tag 防止 Flash of Unstyled Content (FOUC)。

我们正在使用 Kentico CMS。我正在寻找将 class 添加到母版页中的 html 元素标记的 "Kentico way"。我们正在使用 CMS 门户引擎。

我们要做什么 <html class="no-js"

如果没有更平易近人的方式使用 Kentico 宏或其 API，愿意退回到 ASP.NET。

Answer 1

我知道的最快方法是修改 CMSPages\PortalTemplate.aspx 以在其中添加您的 class。

<%@ Page Language="C#" AutoEventWireup="true" Inherits="CMSPages_PortalTemplate" ValidateRequest="false" MaintainScrollPositionOnPostback="true" EnableEventValidation="false" Codebehind="PortalTemplate.aspx.cs" %>

<%=DocType%>
<html <%=XHtmlNameSpace%> <%=XmlNamespace%> class="no-js">
<head id="head" runat="server" enableviewstate="false">
...

Answer 2

在您的母版页门户模板上，您可以添加一些这样的代码来进行修改：

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
    if (CurrentDocument != null)
    {          
        CMS.UIControls.ContentPage page= this.Page as CMS.UIControls.ContentPage;
        if (page != null)
        {
            page.XmlNamespace += " class='no-js'";
        }
    }
}
</script>

您也可以修改 \CMSPages\PortalTemplate.aspx 页面，但 Kentico 不支持或不推荐这样做，因为它通常会破坏升级路径。

Answer 3

“no-js”是默认值。如果您的浏览器确实支持 JavaScript，“不支持”class 将被 Modernizr 引擎删除。

Modernizr 是一个 JavaScript 库，它将检查浏览器功能并更新 html class="" 提及。

例如，如果您的浏览器支持 flexbox 技术，则 flexbox class 将被添加到 html class 列表中。否则，将添加 no-flexbox class。

稍后，在使用 CSS 框架（Bootstrap 或 Foundation）时，可以使用一些策略来模拟缺失的功能。

在 Kentico 10 网站的上下文中防止 FOUC

Prevent FOUC in context of a Kentico 10 website

kentico

zurb-foundation