•  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>
도움이 되었습니까?

해결책

발룩이 당신의 대답을 할 수 있다고 생각합니다.

그러나 몇 가지 추가 점을 추가하고 싶습니다.

웹 응용 프로그램의 하위 디렉토리에서 실행 중이라고 가정하십시오. 내 경험으로서, 당신은 이것을 시도하고 싶을 수도 있습니다.<link href="${facesContext.externalContext.requestContextPath}/css/style.css" rel="stylesheet" type="text/css"/>

그만큼 '${facesContext.externalContext.requestContextPath}/' 링크를 사용하면 컨텍스트의 근본으로 즉시 돌아 오는 데 도움이됩니다.

편집하다: 시작했습니다 / ~에서 'href="/${facesContext.ex...'. 응용 프로그램이 루트 컨텍스트에서 실행중인 경우 CSS URL이 시작합니다. // 브라우저는 CSS가 http://css/style.css.

다른 팁

나는 첫 번째를 사용한 적이 없지만 두 번째는 구문 적으로 유효하며 기술적으로 작동해야합니다. 작동하지 않으면 상대 URL이 href 속성은 단순히 잘못된 것입니다.

상대 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, 그런 다음 선행 슬래시를 제거하여 현재의 컨텍스트 (중 하나 page.jsp):

<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. 여기서 리소스는 웹 -INF와 같은 수준입니다.

Sergionni 문제는 두 가지라고 생각합니다.

첫째, 소위 뿌리 친척이 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" />

스타일 딥이 현재 페이지의 시끄럽다 고 가정하면 두 번째 문제가 발생할 수 있습니다.

그런 다음 상대 URL 방법에 들어가고,이 페이지에 앞으로 리디렉션이 아닌 앞으로 나왔습니다. 브라우저는 속이고 상대 경로를 따라갈 수 없을 수 있습니다.

이 두 번째 문제를 해결하려면 다음을 추가해야합니다.

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

기본 요소는 링크보다 우선해야합니다.

기본 명령에 의해, 당신은 당신의 브라우저에 당신이 실제로 어디에 있는지 알려줍니다.

도움이되기를 바랍니다.

그리고이 놀라운 JSF 세계에서 또 다른 기괴한 일 :

페이지에서 직책 템플릿에 링크하려면 루트 상대 링크는 다음과 같은 컨텍스트를 포함하여 다음과 같습니다.

<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