0

我正在尝试为用户实现一个选项，以便在前端设置自己的 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 用作具有聚合 true 的 CSS 资源？还是有另一种解决方案来实现这样的功能？

更新

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

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

我不能使用主题，因为在实现聚合 css 文件之前也实现了主题。

4

2 回答 2

1

我不太确定我是否真的了解您的用例。但我的第一个想法是使用 Xpages 主题，您可以在资源节点中加载特定的 css 文件，可能使用适当的渲染属性设置。

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

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

于 2013-04-08T10:55:43.017 回答
1

您可以使用 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无耻地复制代码

于 2013-04-10T14:06:24.080 回答