Вопросы Теги

.css игнорируется при добавлении в веб-приложение с структурой шаблона [duplicate]

Все значения считаются «правдивыми», за исключением следующих: «falsy»:

  • None
  • False
  • 0
  • 0.0
  • 0j
  • [] - пустая list
  • {} - пустая dict
  • () - пустая tuple
  • '' - пустая str
  • b'' - empty bytes
  • set() - пустые объекты set
  • , для которых obj.__bool__() возвращает False obj.__len__(), возвращают 0

Значение «правдивое» будет удовлетворять проверке, выполняемой операторами if или while. Мы используем «правдивые» и «ложные», чтобы отличать значения bool True и False.

42
задан BalusC 29 May 2015 в 05:57
поделиться

3 ответа

Введение

Правильный способ JSF 2.x использует <h:outputStylesheet> , <h:outputScript> и <h:graphicImage> с name, ссылающимся на путь относительно папки webapp /resources. Таким образом, вам не нужно беспокоиться о контексте, как это было бы в JSF 1.x. См. Также . Как включить CSS относительно пути к контексту в JSF 1.x?

Структура папки

Отбросить файлы CSS / JS / image в /resources в папке открытого webcontent, как показано ниже (просто создайте один, если он еще не существует на уровне /WEB-INF и /META-INF). 

WebContent
 |-- META-INF
 |-- WEB-INF
 |-- resources
 |    |-- css
 |    |    |-- other.css
 |    |    `-- style.css
 |    |-- js
 |    |    `-- script.js
 |    `-- images
 |         |-- background.png
 |         |-- favicon.ico
 |         `-- logo.png
 |-- page.xhtml
 :

В случае Maven это должно быть в /main/webapp/resources и, таким образом, не /main/resources (это для ресурсов Java (свойства / xml / text / config files), которые должны быть в runtime classpath, а не в webcontent). См. Также структуру Webapp Maven и JSF, где именно для размещения ресурсов JSF .

Ссылка в Facelets

В конечном итоге эти ресурсы доступны, как показано ниже, везде без нужно fiddle с относительными путями: 

<h:head>
    ...
    <h:outputStylesheet name="css/style.css" />
    <h:outputScript name="js/script.js" />
</h:head>
<h:body>
    ...
    <h:graphicImage name="images/logo.png" />
    ...
</h:body>

Атрибут name должен представлять полный путь относительно папки /resources. Его не нужно начинать с /. Вам не нужен атрибут library, если вы не разрабатываете библиотеку компонентов, такую ​​как PrimeFaces или общий JAR-файл модуля, который совместно используется несколькими webapps.

Вы можете ссылаться на <h:outputStylesheet> в любом месте , также в <ui:define> шаблонных клиентов без необходимости в дополнительном <h:head>. Он будет через компонент <h:head> основного шаблона автоматически заканчиваться в сгенерированном <head>. 

<ui:define name="...">
    <h:outputStylesheet name="css/style.css" />
    ...
</ui:define>

Вы можете ссылаться на <h:outputScript> также в любом месте, но по умолчанию это будет в HTML точно там, где вы его объявили. Если вы хотите, чтобы он оказался в <head> через <h:head>, добавьте атрибут target="head". 

<ui:define name="...">
    <h:outputScript name="js/script.js" target="head" />
    ...
</ui:define>

Или, если вы хотите, чтобы оно закончилось в конце <body> (прямо перед </body>, так что, например, window.onload и $(document).ready() и т. д. не требуется) через <h:body>, затем добавьте атрибут target="body". 

<ui:define name="...">
    <h:outputScript name="js/script.js" target="body" />
    ...
</ui:define>

PrimeFaces HeadRenderer

Если вы используете PrimeFaces, его HeadRenderer испортит значение по умолчанию <h:head> ], как описано выше. Вы в основном вынуждены форсировать заказ с помощью функции PrimeFaces <f:facet name="first|middle|last">, которая может закончиться беспорядочным и «неуправляемым» кодом. Вы можете отключить его, как описано в этом ответе .

Упаковка в JAR

Вы даже можете упаковать ресурсы в JAR-файле. См. Также Структура для нескольких проектов JSF с общим кодом .

Ссылка в EL

Вы можете в EL использовать отображение #{resource}, чтобы позволить JSF в основном распечатывать URL ресурса, например /context/javax.faces.resource/folder/file.ext.xhtml?ln=library, чтобы вы могли использовать его, например, CSS-фоновое изображение или значок. Единственным требованием является то, что сам файл CSS также должен служить ресурсом JSF, иначе EL-выражения не будут оцениваться. См. Также Как ссылаться на ресурс изображений JSF в качестве URL-адреса фонового изображения CSS . 

.some {
    background-image: url("#{resource['images/background.png']}");
}

Вот пример @import. 

@import url("#{resource['css/other.css']}");

Вот пример favicon. См. Также Добавить favicon в проект JSF и указать его в & lt; link & gt; . 

<link rel="shortcut icon" href="#{resource['images/favicon.ico']}" />

Ссылка на сторонние файлы CSS

Файлы сторонних CSS загруженный через <h:outputStylesheet>, который, в свою очередь, может потребоваться изменить ссылочные шрифты и / или изображения, чтобы использовать выражения #{resource}, как описано в предыдущем разделе, в противном случае необходимо установить UnmappedResourceHandler, чтобы иметь возможность обслуживать тех, кто использует JSF , См. Также a.o. Страница Bootsfaces отображается в браузере без какого-либо стиля и Как использовать файл Font Awesome 4.x CSS с JSF? Браузер не может найти файлы шрифтов .

Скрытие in / WEB-INF

Если вы намерены скрыть ресурсы из открытого доступа, перемещая всю папку /resources в /WEB-INF, то вы можете с тех пор, как JSF 2.2 необязательно изменит путь, связанный с webcontent, с помощью нового контекстного параметра web.xml следующим образом: 

<context-param>
    <param-name>javax.faces.WEBAPP_RESOURCES_DIRECTORY</param-name>
    <param-value>/WEB-INF/resources</param-value>
</context-param>

В более старых версиях JSF это невозможно.

См. также:

88
ответ дан Community 22 August 2018 в 16:24
поделиться
  • 1
    У меня это работает в CSS, но если я хочу ссылаться на файл в JavaScript, то как? Обозначение url("#{resource['otbofaces:date-entry/calendar.gif']}") отлично работает в CSS-файле, но мне еще нужно найти что-нибудь, что я могу использовать в файле javascript, чтобы получить правильное расположение ресурсов. – mrswadge 21 January 2016 в 19:25
  • 2
    @mrswadge: stackoverflow.com/q/30130657 – BalusC 21 January 2016 в 23:05
  • 3
    Спасибо @BalusC. Я решил пойти совершенно другим путем и вместо этого использовал Font Awesome . :) – mrswadge 22 January 2016 в 12:19
  • 4
    Мне не хватает того, что я ожидал, что «template.xhtml» также является ресурсом. Поэтому я полностью ожидал сделать что-то вроде <ui:composition template="/templates/report.xhtml"> с моим шаблоном, проживающим в web/resources/templates/report.xhtml, даже используя то, как ресурсы структурируются в библиотеках. Это не работает. – YoYo 25 February 2017 в 23:13
  • 5
    Благодаря полезной документации – Vision Mkhabela 12 September 2017 в 16:14

Предположим, что вы работаете в подкаталогах веб-приложения. Вы можете попробовать следующее: 

 <link href="${facesContext.externalContext.requestContextPath}/css/style.css" rel="stylesheet" type="text/css"/>

Ссылка '${facesContext.externalContext.requestContextPath}/' поможет вам немедленно вернуться в корень контекста.

В относительном 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" />
7
ответ дан Abimaran Kugathasan 22 August 2018 в 16:24
поделиться

Эти ответы помогли мне решить ту же проблему. Хотя моя проблема была более сложной, так как я использовал SASS и GULP.

Мне пришлось изменить (обратите внимание на «\» перед #. Вероятно, побочный эффект от gulp: 

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

 background: $blue url("\#{resource['my_theme/images/background-homepage-h1.png']}");
1
ответ дан Mircea Stanciu 22 August 2018 в 16:24
поделиться