Question

我的方案如下：

我有一个XPages应用程序，我添加了两个主题 - 称为'红色'和'蓝色'。相同的模板部署在两个不同的服务器上，即“红色”和“蓝色”服务器。自定义控件中已经定义了一些css定义，我想在自定义控件中添加最后一个（覆盖一个）：

    <xp:styleSheet href="/custom.css"></xp:styleSheet>
    <xp:styleSheet href="/bootstrap.min.css"></xp:styleSheet>
    <xp:styleSheet href="/docs.css"></xp:styleSheet>
    <xp:styleSheet href="TRYING TO GET VALUE FROM THEME "   ></xp:styleSheet>

我在两个主题中添加了以下控件：

<control>
    <name>ThemeSpecificCss</name>
    <property>
        <name>value</name>
        <value>red.css</value>
    </property>
</control>

我想做的是

<xp:styleSheet themeId="ThemeSpecificCSS"></xp:styleSheet>

但那不起作用。

我没有将css文件包含为这样的资源：

    <resource> <content-type>text/css</content-type>
    <href>mystylesheet.css</href> </resource>

因为自定义控件csses会覆盖它。

我错过了一些明显的东西吗？

Answer 1

要回答您的问题，您只需使用SSJS：

var themeName = context.getSessionProperty("xsp.theme");

或使用Java：

FacesContext facesContext = FacesContext.getCurrentInstance();
XSPContext context = (XSPContext) facesContext.getApplication().getVariableResolver().resolveVariable(facesContext, "context");
String themeName = context.getSessionProperty("xsp.theme");

这将为您提供主题的名称。但是，您可能需要重新考虑主题结构。您可以在主题中定义特定于主题的css资源。这将允许您根据所选主题具有不同的css文件。由于主题可以从其他主题继承，因此您应该能够构建一个可以实现目标的依赖结构。例如：

baseTheme（包含所有主题需要的css和属性）
red-theme（扩展baseTheme）
red-ccTheme（扩展红色主题）
blue-theme（扩展baseTheme）
blue-ccTheme（扩展蓝色主题）

有关主题继承的一个很好的例子，请查看Tim Tripcony's HowyaBean project获取灵感。

设置一个取决于主题的css源，它会覆盖所有其他的

1 个答案: