•  08-07-2019
  •  | 
  •  

質問

外部CSSファイルをjsfに追加する構文は何ですか？

両方の方法で試してみましたが、助けにはなりませんでした。

1。

<head>
<style type="text/css">
    @import url("/styles/decoration.css");
</style>
</head>

2。

<head>
    <link rel="stylesheet" type="text/css" href="/styles/decoration.css" />
</head>
役に立ちましたか？

解決

BalusCがあなたの答えを持っていると思います。

ただし、追加のポイントをいくつか追加します。

Webアプリケーションのサブディレクトリで実行しているとします。 私の経験として、あなたはこれを試してみたいかもしれません： <link href="${facesContext.externalContext.requestContextPath}/css/style.css" rel="stylesheet" type="text/css"/>

'${facesContext.externalContext.requestContextPath}/'リンクは、コンテキストのルートにすぐに戻るのに役立ちます。

編集：/から'href="/${facesContext.ex...'を削除しました。アプリケーションがルートコンテキストで実行されている場合、CSS URLは//で始まり、ブラウザーはhttp://css/style.cssとして解釈されるため、CSSを見つけることができませんでした。

他のヒント

前者を使用したことはありませんが、後者は構文的に有効であり、技術的に機能するはずです。動作しない場合は、href属性の相対URLが間違っています。

相対URLでは、先頭のスラッシュ/はドメインルートを指します。そのため、たとえばJSFページがhttp://example.com/context/page.jsfによって要求された場合、CSS URLは絶対にhttp://example.com/styles/decoration.cssを指します。有効な相対URLを知るには、JSFページとCSSファイルの両方の絶対URLを知り、一方を他方から抽出する必要があります。

CSSファイルが実際にhttp://example.com/context/styles/decoration.cssにあると推測してから、先頭のスラッシュを削除して、 current コンテキスト（page.jspの1つ）に関連するようにします：

<link rel="stylesheet" type="text/css" href="styles/decoration.css" />

更新されたJSF 2.0メソッドは少し整然としています。代わりに：

<link rel="stylesheet" type="text/css" href="#{request.contextPath}/css/compass.css"/>

これを行う：

<h:outputStylesheet library="css" name="compass.css"/>

およびスタイルシートリソースはresources\css.に配置する必要があります。リソースはWEB-INFと同じレベルにあります。

セルギオーニの問題は2つあると思います。

まず、BalusCが言ったように、いわゆるルート相対は実際にはドメイン相対であるため、例ではhttp://example.com/ではなくhttp://example.com/context/に相対的であることは事実です。

したがって、指定する必要があります

<link rel="stylesheet" type="text/css" href="${request.contextPath}/styles/decoration.css" />

BTW BalusC、おめでとう、これは私がこれが正しく説明されているのを見るのは初めてです！これを見つけるのにかなり苦労しました。

ただし、単純化して提案する場合：

<link rel="stylesheet" type="text/css" href="styles/decoration.css" />

スタイルdirが現在のページの兄弟であると仮定すると、2番目の問題が発生する可能性があります：

その後、相対URLメソッドに入りますが、リダイレクトではなく転送でこのページにアクセスした場合、ブラウザがだまされて相対パスをたどることができません。

この2番目の問題を解決するには、これを追加する必要があります：

<head>
    <base href="http://${request.serverName}:${request.serverPort}${request.contextPath}${request.servletPath}" />

ベース要素は、すべてのリンクの前にある必要があります。

baseコマンドにより、ブラウザに実際の場所を伝えます。

お役に立てば幸いです。

そして、このすばらしいjsfの世界でのもう1つの奇妙なことです：

ページからそのfaceletテンプレート、今度はコンテキストを含むルート相対リンクISにリンクします：

<ui:composition template="/layouts/layout.xhtml">

これは本当にhttp://example.com/context/layouts/layout.xhtml

にリンクしています http://example.com/layouts/layout.xhtmlまたは<a>のように、<link>ではなく<=>に。

ジャンマリーガリオット

jsfページにcssをインポートするには、以下のコードを試してください。確実に動作します。

<style media="screen" type="text/css">

  @import "#{facesContext.externalContext.request.contextPath}/css/Ebreez.css"

</style>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top