Тема: Как назначить текстовой странице доп. css и js?

Есть страница с текстом нестандартного оформления, которое требует дополнительных CSS-правил, актуальных только для этой страницы (поэтому в общий CSS их вставлять не хочется). Эти правила сложены в отдельный файл.

Подобная ситуация и с javascript: странице нужен специальный код лично для нее.

Как такую страницу сделать?

Я пока вижу единственный вариант: делать под неё специальный модуль, который будет отвечать на соотв. маршрут.

Есть ли какой-то более простой способ? Или действительно без модуля не обойтись?

Повысить оценку Понизить оценку

Re: Как назначить текстовой странице доп. css и js?

Самый простой способ - в режиме просмотра html текста это страницы добавить CSS правила.

3 Отредактировано Закусило Александр (24.09.2019 19:42:56)

Re: Как назначить текстовой странице доп. css и js?

Что это за страница? Скорее всего Вам нужно просто проверить идентификатор внутренней сущности.

4

Re: Как назначить текстовой странице доп. css и js?

Ярослав пишет:

Самый простой способ - в режиме просмотра html текста это страницы добавить CSS правила.

Это не очень удобно. Там их много, хочется держать их в отдельном файле, а не инлайн. Есть риск их попортить при редактировании, если кто-нибудь включит визульный редактор.
Ну и этот способ точно не сработает для javascript-кода. Редактор его не пропускает, насколько я понял.

Повысить оценку Понизить оценку

5

Re: Как назначить текстовой странице доп. css и js?

Закусило Александр пишет:

Что это за страница? Скорее всего Вам нужно просто проверить идентификатор внутренней сущности.

Например, страница с контактной информацией. Пусть это обычная текстовая страница с адресом вида /text-/что-то/.

Я не совсем понял про идентификатор сущности.

Повысить оценку Понизить оценку

Re: Как назначить текстовой странице доп. css и js?

Александр отвечает как программист, я же с точки зрения обычного пользователя пытаюсь решить Вашу проблему.
Создайте пункт меню с вашей страницей, добавьте эту страницу в конструкторе сайта.
Создайте *.tpl файл с css и js. (обрамить в {literal} {/literal} не забудьте) и на странице добавьте блок "Произвольный шаблон", где укажите шаблоном этот tpl файл.

Если конструктор сайта тема не поддерживает, то придется уже писать свой модуль.

7 Отредактировано Закусило Александр (25.09.2019 11:40:25)

Re: Как назначить текстовой странице доп. css и js?

Ну я думаю, что лучше все для конкретно этого варианта страницы проверить id пункта меню. Если он у Вас с указан типом пункт меню.

{if $menu_item.id == 1} {* Где 1 это индентификатор пункта меню в разделе Веб-сайт->меню *}
    {addjs file="my.js"}
    {addcss file="my.css"}
{/if}

Если у этой страницы тип будет шаблон, то там сразу можно делать всё что угодно, хоть свою JS или CSS подключить через addjs и addcss соответственно. Я обычно в теме оформления, для контактов, т.к. они обычно требуют своей верстки и свои стилей указываю именно этот тип, указываю нужный шаблон и делаю всё что душе угодно.

8 Отредактировано Михаил (25.09.2019 18:11:51)

Re: Как назначить текстовой странице доп. css и js?

Ярослав, Александр, спасибо за советы.

В итоге я написал свой модуль (возможно, изобрел велосипед), который позволяет делать такие страницы, просто создав для неё каталог с нужными файлами.

Например, хочу страницу /custom/contact/.

Для этого создаю каталог $THEME_DIR/custom_pages/contact, в него кладу файлы:

  • content.tpl - будет обработан как шаблон и вставлен в качестве содержимого страницы

  • *.css - все файлы, находящиеся в каталоге, будут подключены на странице после общих стилей темы; если файл подключать не нужно, надо дать ему имя, начинающееся с _ (знак подчеркивания)

  • *.js - любые javascript файлы, аналогично css; будут подключены в футере

Повысить оценку Понизить оценку

Re: Как назначить текстовой странице доп. css и js?

А чем мой способ плох? Зачем целый модуль?

10

Re: Как назначить текстовой странице доп. css и js?

Михаил пишет:

Ярослав, Александр, спасибо за советы.

В итоге я написал свой модуль (возможно, изобрел велосипед), который позволяет делать такие страницы, просто создав для неё каталог с нужными файлами.

Например, хочу страницу /custom/contact/.

Для этого создаю каталог $THEME_DIR/custom_pages/contact, в него кладу файлы:

  • content.tpl - будет обработан как шаблон и вставлен в качестве содержимого страницы

  • *.css - все файлы, находящиеся в каталоге, будут подключены на странице после общих стилей темы; если файл подключать не нужно, надо дать ему имя, начинающееся с _ (знак подчеркивания)

  • *.js - любые javascript файлы, аналогично css; будут подключены в футере

Оригинально. чем то на битрикс похоже

11 Отредактировано Михаил (25.09.2019 22:07:38)

Re: Как назначить текстовой странице доп. css и js?

Закусило Александр пишет:

А чем мой способ плох? Зачем целый модуль?

Не всегда странице соответствует какой-то пункт меню, поэтому опираться на $menu_item.id я не могу.
Ну и, к тому же, мне показалось более удобным управлять всем, просто формируя нужную структуру на файловой системе, чем делать то же самое и вдобавок редактировать дополнительный шаблон. Файлы ведь все равно придется класть куда надо.

Если честно, все это мысли задним числом. На момент разработки своего решения про способ, описанный в вашем, я не знал.
Я пока плохо знаю ReadyScript, так что, возможно, выбрал не самый лучший вариант.

Повысить оценку Понизить оценку

12

Re: Как назначить текстовой странице доп. css и js?

Ярослав пишет:

Оригинально. чем то на битрикс похоже

Чур! Чур меня! )))

Повысить оценку Понизить оценку

13 Отредактировано Денис (26.09.2019 16:43:06)

Re: Как назначить текстовой странице доп. css и js?

Тема похожа на мой вопрос, задам его здесь.
На codepen нашел интересное (оформление) решение. Решил реализовать у себя и получилось это:
https://i.imgur.com/YzMPeXC.png
Как и что делал:
Создал файл scripts.tpl в папке темы. В нём это:

{addcss file='boston.css'}
{addcss file='libs/codepen.css'}

{addjs file='libs/codepen.js'}

Создал файл uslugi-servisa.tpl (в нём html код) и прикрепил его сюда:
Настройка меню.
https://i.imgur.com/p9Bbv6z.png
Результат на первой картинке.
ЧЯДНТ?

Повысить оценку Понизить оценку

Re: Как назначить текстовой странице доп. css и js?

Михаил пишет:
Закусило Александр пишет:

А чем мой способ плох? Зачем целый модуль?

Не всегда странице соответствует какой-то пункт меню, поэтому опираться на $menu_item.id я не могу.
Ну и, к тому же, мне показалось более удобным управлять всем, просто формируя нужную структуру на файловой системе, чем делать то же самое и вдобавок редактировать дополнительный шаблон. Файлы ведь все равно придется класть куда надо.

Если честно, все это мысли задним числом. На момент разработки своего решения про способ, описанный в вашем, я не знал.
Я пока плохо знаю ReadyScript, так что, возможно, выбрал не самый лучший вариант.

Я бы всё таки выбрал бы свой шаблон.

15 Отредактировано Закусило Александр (26.09.2019 19:20:58)

Re: Как назначить текстовой странице доп. css и js?

Денис пишет:

Тема похожа на мой вопрос, задам его здесь.
На codepen нашел интересное (оформление) решение. Решил реализовать у себя и получилось это:
https://i.imgur.com/YzMPeXC.png
Как и что делал:
Создал файл scripts.tpl в папке темы. В нём это:

{addcss file='boston.css'}
{addcss file='libs/codepen.css'}

{addjs file='libs/codepen.js'}

Создал файл uslugi-servisa.tpl (в нём html код) и прикрепил его сюда:
Настройка меню.
https://i.imgur.com/p9Bbv6z.png
Результат на первой картинке.
ЧЯДНТ?

Откройте через F12 вкладу консоль в хроме и посмотрите, подключился ли Ваш CSS и JS. Я надеюсь указанные Вами файлы лежат у Вас в теме оформления по указанным Вами путям.

16

Re: Как назначить текстовой странице доп. css и js?

Закусило Александр пишет:

Откройте через F12 вкладу консоль в хроме и посмотрите, подключился ли Ваш CSS и JS. Я надеюсь указанные Вами файлы лежат у Вас в теме оформления по указанным Вами путям.

Проверю через f12 отпишусь, сейчас не могу.
Я надеюсь указанные Вами файлы лежат у Вас в теме оформления по указанным Вами путям. - да.

Повысить оценку Понизить оценку

17

Re: Как назначить текстовой странице доп. css и js?

Вообщем протестировал различные решения с codepen (чужим кодом). Что то отображается корректно а что то нет. Обратил внимание что в предложенных решениях есть участки кода которые меняют дизайн у body и прочих элементах страницы. Поэтому всё съезжало. А в целом всё подключается всё работает.

Повысить оценку Понизить оценку

Re: Как назначить текстовой странице доп. css и js?

Ну добавить класс body тоже не проблема.

19

Re: Как назначить текстовой странице доп. css и js?

Да так и сделал. Добавил к css классам свои маркеры чтобы, классы были уникальными и не пересекались с имеющимися.

Повысить оценку Понизить оценку