Внешний CSS для JSF

StackOverflow https://stackoverflow.com/questions/1815869

  •  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...'.Если приложение запущено в корневом контексте, URL-адрес CSS начинается с // и браузеры не смогли найти CSS, так как он интерпретируется как http://css/style.css.

Другие советы

Я никогда не использовал первое, но второе синтаксически допустимо и должно технически работать.Если это не сработает, то относительный URL-адрес в href атрибут просто неправильный.

В относительных URL-адресах начальная косая черта / указывает на корневой каталог домена.Так что, если страница JSF, например, запрошена http://example.com/context/page.jsf, URL - адрес CSS будет абсолютно указывать на http://example.com/styles/decoration.css.Чтобы узнать действительный относительный URL-адрес, вам нужно знать абсолютный URL как страницы JSF, так и CSS-файла и извлечь один из другого.

Давайте предположим, что ваш 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. Где ресурсы находятся на том же уровне, что и WEB-INF.

Я думаю, что проблема Серджионни двоякая.

Во-первых, верно, что так называемый корневой относительный, как сказал Балуск, на самом деле является относительным к домену, поэтому в примере он относится к http://example.com/ и не для того , чтобы http://example.com/context/.

Поэтому вы должны указать 

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

Кстати, БалусК, поздравляю, я впервые вижу, чтобы это было правильно объяснено!Я довольно много боролся, чтобы обнаружить это.

Но, если вы хотите упростить и предложить:

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

предполагая, что каталог стилей является дублированием вашей текущей страницы, тогда у вас может возникнуть вторая проблема:

Затем вы переходите к методу относительного URL, и, если вы попали на эту страницу с помощью переадресации, а не редиректа, ваш браузер может быть введен в заблуждение и не сможет следовать относительному пути.

Чтобы решить эту вторую проблему, вы должны добавить это:

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

Базовый элемент должен предшествовать любой ссылке.

С помощью базовой команды вы сообщаете своему браузеру, где вы находитесь на самом деле.

Надеюсь, это поможет.

И, кстати, еще одна странная вещь в этом чудесном мире jsf:

для ссылки со страницы на ее шаблон facelet корневая относительная ссылка на этот раз включает контекст, поэтому:

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

это действительно связано с http://example.com/context/layouts/layout.xhtml

и не для того , чтобы http://example.com/layouts/layout.xhtml например, для <a> или <link>.

Жан-Мари Галио

Попробуйте приведенный ниже код для импорта css на вашу страницу jsf.Это наверняка сработает.

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

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

</style>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top