Question

我正在尝试为用户实现一个选项，以便在前端设置自己的CSS。

我创建了一个像这样的XPage：

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" rendered="false">
<xp:this.afterRenderResponse><![CDATA[#{javascript:

var externalContext = facesContext.getExternalContext();
var writer = facesContext.getResponseWriter();
var response = externalContext.getResponse();


response.setContentType("text/css");

response.setHeader("Cache-Control", "no-cache");
var param = context.getUrlParameter("myParam");
//HERE I WILL READ THE USER FIELD
writer.write("body{font-size:100pt;}");
writer.endDocument();

}]]>
  </xp:this.afterRenderResponse>
</xp:view>

如果我尝试像这样实现CSS（XPage）

<xp:styleSheet href="/myCssXPages.xsp"></xp:styleSheet>

一切正常，直到我将属性xsp.resources.aggregate设置为true。如果我尝试实现这样的文件：

<xp:linkResource type="text/css" loaded="true" href="./myCssXPages.xsp">
<xp:this.attrs>
<xp:attr name="rel" value="stylesheet" loaded="true"></xp:attr>
</xp:this.attrs>
</xp:linkResource>

它可以工作，因为现在每个CSS文件都将聚合，除了这个文件，但顺序错误。在加载聚合文件之前总是加载此文件，但我需要在最后一个位置使用此文件。

是否有任何解决方案来设置资源的顺序或为什么我不能将XPage用作CSS资源且聚合为true？或者是否有其他解决方案来实现这样的功能？

更新

用户创建了一个设置文档，他获得了一个文本字段。所以他会将他的css保存为文档中的字符串。

我还创建了一些默认的css文件资源。但是当用户设置自己的css配置时，此关闭会覆盖默认文件资源中的内容。

我无法使用主题，因为主题也是为实现的聚合css文件实现的。

Answer 1

我不太确定我是否真的了解你的用例。但我首先想到的是使用Xpages主题，您可以在资源节点中加载特定的css文件，可能正确设置了渲染属性。

作为参考，我们来看看标准讨论模板如何使用各种主题，每个主题都使用自己的一组样式表资源。

如果这不是您的想法，您必须告诉我们更多关于hwo以及您的用户何时应该能够选择自己的css，以及应该创建和存储这些特定css文件的位置

Answer 2

您可以使用CSJS脚本加载CSS并将其附加到HTML头：

<xp:scriptBlock id="scriptBlockCss">
   <xp:this.value><![CDATA[
      function loadCss(url) {
         var link = document.createElement("link");
         link.type = "text/css";
         link.rel = "stylesheet";
         link.href = url;
         document.getElementsByTagName("head")[0].appendChild(link);
      }
      loadCss( '/yourDB.nsf/myCssXPages.xsp' );
    ]]></xp:this.value>
</xp:scriptBlock>

代码从http://requirejs.org/docs/faq-advanced.html#css

无耻地复制

带有计算CSS文件的XPage

2 个答案: