Wicket 页面和模板中的小 CSS 替换

Question

多年来，我以这种方式开发 Wicket 页面：当新的小页面标记 (html) 包含小的 CSS 片段时。 <wicket:head> local css </wicket:head> 当设计有动态变化时，方法很舒服，是一体的。

当页面增长时，css 块被提取以分离 Wicket 资源。可以更好地缓存在浏览器中（以受控方式）等

现在我需要有可选的颜色，例如 Button（link 也与 Button CSS 一起制作），一个非活动按钮。 Wicket 文档已准备好替换资源（class 旨在替换）`

.button 
{ color: ${forecolor} 
font-size: ${font} } ...
}`

我想在页面标记中对年轻的 CSS 片段进行类似的替换，主要的 Wicket 传统将其用作常量。假设拦截标记和替换时，没有人会批评。

适用于公司内部网的工作人员，与大型媒体门户网站没有竞争力。我想建立 "skin" 概念，但只是在小范围内。只有很少的基本颜色，3 个地方的字体大小，仅此而已。颜色不伤眼，工作舒适。

我想（将来）拥有 2-3 个，不超过 4 个 color/font 套皮肤。没有人会测试 "what to to, when all fonts we give 3x bigger"，字体范围只有 +/-20%。函数"reset to fabricate setting"是基础

问题：在两个位置 (html & css) 内替换在 Wicket 中是否政治正确？一些技术想法？可能存在现成的库来保存会话参数（对于用户）或全局参数。

自定义将移动小 "gadget" 面板（像 portlet 但更轻）左边距/右边距或隐藏，仅此而已

顺便说一句。我从来都不是一名平面设计师，但是通过很少的 Myers 书籍，我在 CSS 方面的技能正在增长。

Answer 1

只需在页面或页面中的 Component/Behavior 中使用：

@Override public void renderHead(IHeaderResponse response) {
    super.renderHead(response);
    response.render(CssHeaderItem.forCss(yourDynamicCssAsString, "some-unique-id"));
}

Answer 2

如果您的应用程序是 SPA，那么我会将不同的 class 提取到单独的 CSS 文件中，然后有条件地将它们加载到 renderHead() 中的 Page

例如，我们这样做是为了根据浏览器有条件地加载 js：

   public static JavaScriptHeaderItem getJqueryNumericJsHeaderItem() {
      ClientProperties browser = WebSession.get().getClientInfo().getProperties();
      if (browser.isBrowserInternetExplorer() && browser.getBrowserVersionMajor() <= 9) {
         return JavaScriptHeaderItem.forReference(jqNumericReference("numeric.ie8.js"));
      }
      if (browser.isBrowserInternetExplorer() && browser.getBrowserVersionMajor() >= 10) {
         return JavaScriptHeaderItem.forReference(jqNumericReference("numeric.ie11.js"));
      }
      return JavaScriptHeaderItem.forReference(jqNumericReference("numeric.js"));
   }

我们使用的另一种方法是将 CSS class 附加到 <body> 标签，然后在 CSS 中依赖此 class。代码：

  WebMarkupContainer body = new WebMarkupContainer("bodyElement") {
     @Override
     protected void onConfigure() {
        super.onConfigure();
        add(AttributeModifier.replace("class", getSkinBasedOnCondition()));
     }
  };

然后在 CSS:

.skinA .button{
 color: red;
 font-size: 20px;
}

.skinB .button{
 color: blue;
 font-size: 30px;
}

那么你没有条件 CSS 加载。只是有条件地向 <body> 添加一个 CSS class。

Wicket 页面和模板中的小 CSS 替换

Small CSS substitutions in Wicket pages and templates

css

templates

wicket

wicket-1.6

wicket-6