Laravel по-русски

Русское сообщество разработки на PHP-фреймворке Laravel.

• Форум
• » Laravel 6/7/8/9/10
• » Как подключить стили при переходе на Laravel 8?

Страницы 1

#1 19.12.2021 18:01:55

RsbAstana Сообщений: 12

Как подключить стили при переходе на Laravel 8?

Добрый день!
Перевожу свой проект Laravel с 7 на 8.
У меня в проекте на 7 были стили. Это файл public/css/app.css.
В новом проекте на Laravel 8 этого файла нет в структуре папок.
Зато есть resources/css/app.css. Сюда я и скопировал свои стили.

На 7-ке я подключал файл стилей:

>" rel="stylesheet">

На 8-ке установил Laravel Mix и подключаю:

>" rel="stylesheet">

В рез-те таблица стилей не подключена.
Предпросмотр таблицы показывает:

Содержимое файла webpack.mix.js:

mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css') .sourceMaps();

Файлы которые были сгенерированы в public/css удалил (там было не то, что нужно) , заново не генерируются.

Как подключить стили при переходе на Laravel 8?

Содержание file.HTML

Я содержание HTML файла!

И в результате в брайзере выведется
Вот что находится в РНР файле.
Я содержание HTML файла!
Опять РНР фаил.

Примерно так если в коротко и чтоб понятно.
Ну или вместо инклуда используй include_once»путь/имя.расширение»;

автор: ZКатя (01.08.2014 в 21:02) письмо автору

что-то не получается. это первый мой сайт, видимо я не так все делаю((

автор: berson (01.08.2014 в 21:16) письмо автору

Только что все перепроверил на денвере и все работает ну прям сто пудов и не одной ошибки все как надо. Попробуй не чего от себя не писать (кроме правильных имен файлов) а так пере копировать Ctr+C Ctr+V в два файла.

автор: ZКатя (01.08.2014 в 23:34) письмо автору

Вот это я вставила в файл index.php в нужное место в шаблоне

> echo «Вот что находится в РНР файле.» ; > include ‘googlemap.html’ ; > echo «Опять РНР файл.» ; > ?>

А вот в это я обернула мой html файл с картой google

>

Я содержание HTML файла!

>

автор: lightning.say (02.08.2014 в 05:02) письмо автору

похоже что-то с шаблоном покажите файл шаблона с вставляемым кодом.

автор: ZКатя (04.08.2014 в 15:52) письмо автору
автор: ZКатя (04.08.2014 в 15:53) письмо автору
автор: lightning.say (04.08.2014 в 16:43) письмо автору

зачем вы в каждой строчке вставляемого кода пишете знак «>» ?
он не нужен.

автор: ZКатя (04.08.2014 в 17:10) письмо автору

Не знаю) это уже с шаблоном было)

автор: confirm (04.08.2014 в 17:39) письмо автору

Ваш шаблон, это полная страница, а вы ее пытаетесь втулить не к месту. А если к примеру вставить ее в iframe, то будет работать (только мусор выкинуть нужно).

А вообще же, нужно выбросить из этого шаблона все лишнее, то что в head вставить в секцию head index.php, а тег карты в нужное ее место.

автор: lightning.say (04.08.2014 в 17:50) письмо автору

>Ваш шаблон, это полная страница
тут вы под шаблоном говорите об html-файле я правильно понимаю? изначально шаблоном она называет php файл в который вставляется html, это я для уточнения спрашиваю, чтобы не было путаницы.

автор: confirm (04.08.2014 в 18:34) письмо автору

Посмотрите что за шаблон, что из себя представляет, и нужно ли его подключать, а не проще прописать нужное в индексном файле?
Я вообще сомневаюсь, что это некий шаблон, скорее это взятый пример подключения на страницу карты, который «с чистой совестью» пытаются использовать как есть.

автор: ZКатя (05.08.2014 в 02:00) письмо автору

Прописывать пробовала, ничего не получилось. Я просто не знаю даже что делаю) но все перепробовала))

автор: moonfox (05.08.2014 в 03:46) письмо автору

вставка html напрямую тоже не работает?)

автор: confirm (05.08.2014 в 06:27) письмо автору

PS. А вот как надо вставить то, что в примере:

marker = new google.maps.Marker( <
position: new google.maps.LatLng(55.86344,37.701832),
icon: <
path: google.maps.SymbolPath.CIRCLE,
scale: 10
>,
draggable: true,
map: map
>);

google.maps.event.addDomListener(window, ‘load’, initialize);

автор: ZКатя (05.08.2014 в 12:40) письмо автору

не знаю. опять не получилось))

автор: confirm (05.08.2014 в 12:49) письмо автору

Ну так надо внимательнее читать. Вот что вы делаете опять:

displayBodyTag (); ?> >

А где инициализация, о которой я писал?

displayBodyTag () ?> >

И еще, ваш код с пустыми «дырами» так будет и выплюнут на страницу, а нужны ли на ней эти никчемные \r\n, \t . ?

автор: ZКатя (05.08.2014 в 13:04) письмо автору

пустые дыры надо потом убрать. сейчас то что я не так сделала? опять нет карты((

автор: confirm (05.08.2014 в 13:23) письмо автору

HTML-код у вас, это нечто. С чего это закрывающий тег DIV следует после закрывающего тега BODY.

Не работает сейчас, значит вы не все сделали что требовалось.

Вот тоже самое, просто без вашего кода:

marker = new google.maps.Marker( <
position: new google.maps.LatLng(55.86344,37.701832),
icon: <
path: google.maps.SymbolPath.CIRCLE,
scale: 10
>,
draggable: true,
map: map
>);

google.maps.event.addDomListener(window, ‘load’, initialize);

Сохраните это как html файл и запустите. Есть карта?

автор: ZКатя (05.08.2014 в 13:42) письмо автору

этот файл открывается отдельно

автор: confirm (05.08.2014 в 13:46) письмо автору
автор: ZКатя (05.08.2014 в 13:49) письмо автору
автор: confirm (05.08.2014 в 13:59) письмо автору

Ну так проблема вставить этот код в ваш так, как я показывал? Стиль объекта map_canvas, его высоту 100% вы указали в стилях? Выводя свой код вы проверяете его на ошибки? Ведь у вас html-результат содержит непростительные ошибки.

Вот тоже самое со вставкой РНР и разбивкой на две колонки:

marker = new google.maps.Marker( <
position: new google.maps.LatLng(55.86344,37.701832),
icon: <
path: google.maps.SymbolPath.CIRCLE,
scale: 10
>,
draggable: true,
map: map
>);

google.maps.event.addDomListener(window, ‘load’, initialize);

//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set(‘map_style’, styledMap);
map.setMapTypeId(‘map_style’);
>

Map

$s = ‘

Google Maps is a desktop and mobile web mapping service application and technology provided by Google, offering satellite imagery,
street maps, and Street View perspectives, as well as functions such as a route planner for traveling by foot, car, bicycle (beta test),
or with public transportation. Also supported are maps embedded on third-party websites via the Google Maps API,[1] and a locator for
urban businesses and other organizations in numerous countries around the world. Google Maps satellite images are not updated in real
time; however, Google adds data to their Primary Database on a regular basis, and most of the images are no more than 3 years old.

The opt-in redesigned version of the desktop application has been available since 2013, alongside the «classic» (pre-2013) version.
The redesigned version was met by user criticism regarding hiding some common functions, removing a scale bar, and lack of other features
that include My Places and sharable customized links to parametrized split Street View and Map views.

Google Maps uses a close variant of the Mercator projection, and therefore cannot accurately show areas around the poles. A related
product is Google Earth, a stand-alone program which offers more globe-viewing features, including showing polar areas.

Google Maps for mobile is the world\’s most popular app for smartphones, with over 54% of global smartphone owners using it at least
once during the month of August 2013.

‘ ;

А если вставлять ваш РНР-код, но и следя за html-структурой, думаете что откажется работать? Ну проверьте еще раз что вы делаете, явно же либо вы не все прописали, либо допускаете ошибки в структуре.

автор: ZКатя (11.08.2014 в 10:20) письмо автору

html код у меня не может содержать ошибок. я его взяла с developers.google.com. в index php тоже ошибок нет никак. это шаблон rockettheme, своего я ничего не придумывала

автор: confirm (11.08.2014 в 12:49) письмо автору

Вот «хвост» вашего индексного файла:

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

автор: ZКатя (12.08.2014 в 14:06) письмо автору

странно. вроде с официального сайта скачала. а чем опасны эти ошибки?)

автор: confirm (12.08.2014 в 14:27) письмо автору

Опасности они не представляют, а вот попортить крови вполне могут. Некорректные вложения тегов могут быть причиной неверного отображения элементов на странице или даже их отсутствия. Это может зависеть не только от самих некорректных html-элементов, но так же их стилей.
Кроме этого, некорректная верстка может служить причиной некорректной работы клиентских скриптов.

Форум

Страницы сайта состоят из модулей и компонентов.
Нужно подключить определённый CSS файл, к определённой странице.

Классы к которым будут применяться css свойства, используются и на других страницах, поэтому важно, чтобы css отрабатывал только на одной странице.
Изменить классы нет возможности, как и нет возможности подключить css файл в header.php

1) Как можно реализовать эту задачу?

2) Как можно для конкретной страницы подключить другой header.php в котором уже будет подключён этот файл?

3) Как прописать условие, на php? Если страница такая, подгружается такой-то css файл, иначе всё как обычно.

Сообщений: 407 Баллов: 61 Регистрация: 08.10.2014
26.04.2018 15:05:08

Ну так добавьте стиль именно на нужную вам страницу

Заглянувший
Сообщений: 16 Регистрация: 10.03.2018
26.04.2018 15:29:16
тест меседж
Заглянувший
Сообщений: 16 Регистрация: 10.03.2018
26.04.2018 16:47:01

Посмотрел, но не понял, где это нужно прописать? Можно подробнее?
Как задать страницу то?

Шаблон для всех страниц общий.
Если я там пропишу:

SetAdditionalCSS("/bitrix/templates/demo/additional.css"); ?>

то вероятно он будет использоваться для всех страниц

Заглянувший
Сообщений: 17 Баллов: 2 Регистрация: 11.09.2017
26.04.2018 17:21:30
А что мешает даже в общий шаблон поставить условие конкретного адреса? Если совпало, то выводить
Заглянувший
Сообщений: 16 Регистрация: 10.03.2018
26.04.2018 20:06:26

Цитата
Максим Власов написал: А что мешает даже в общий шаблон поставить условие конкретного адреса? Если совпало, то выводить

И для кого я всё расписываю..
Заглянувший
Сообщений: 17 Баллов: 2 Регистрация: 11.09.2017
26.04.2018 22:13:43

Цитата
Максим Власов написал: А что мешает даже в общий шаблон поставить условие конкретного адреса? Если совпало, то выводить

Не вижу противоречий. Даже если шаблон общий, то в хедере можно поставить условие. что если адрес совпадает с нужным, то подключить нужный стиль. В чем проблема-то? Проблематично составить условие?

if($APPLICATION->GetCurPage() == 'path/to/need/page') $APPLICATION->SetAdditionalCSS("/bitrix/templates/demo/additional.css");

Заглянувший
Сообщений: 16 Регистрация: 10.03.2018
26.04.2018 22:29:11

Цитата
Максим Власов написал: А что мешает даже в общий шаблон поставить условие конкретного адреса? Если совпало, то выводить

Не вижу противоречий. Даже если шаблон общий, то в хедере можно поставить условие. что если адрес совпадает с нужным, то подключить нужный стиль. В чем проблема-то? Проблематично составить условие?

if ( $APPLICATION ->GetCurPage() == 'path/to/need/page' ) $APPLICATION ->SetAdditionalCSS( "/bitrix/templates/demo/additional.css" );

Во-первых — да
Во-вторых — спасибо!)))

Только видимо условие дописано не до конца, как правильно закончить будет?

Типа если стр такая, то подгрузит этот css, иначе подгружаем обычный.
А то он опять на всех страницах отрабатывает почему-то.

Заглянувший
Сообщений: 16 Регистрация: 10.03.2018
26.04.2018 23:19:31
Я в битриксе 0, так что буду описывать всё что сделал. В head вставил строки

GetCurPage() == 'http://site.ru/salut_speceffecti/nazemnye-feyerverki/'); $APPLICATION->SetAdditionalCSS("/bitrix/css/rscss/rsnazemfeerverk.css"); ?>

Файл css подгрузился
Но и работает для всех страниц..

Постоянный посетитель
Сообщений: 93 Баллов: 19 Регистрация: 20.09.2016
26.04.2018 23:29:32

GetCurPage() == '/salut_speceffecti/nazemnye-feyerverki/') < $APPLICATION->SetAdditionalCSS("/bitrix/css/rscss/rsnazemfeerverk.css"); > ?>

Страницы: 1 2 След.

Центр поддержки

Продукты

Управление сайтом

Битрикс24

Интернет-магазин + CRM

Решения

Для интернет-магазинов

Каталог готовых решений

Внедрение

Выбрать партнера

Проверить партнера

Стать партнером

1С-Битрикс http://www.1c-bitrix.ru Общие вопросы info@1c-bitrix.ru Приобретение и лицензирование продуктов : sales@1c-bitrix.ru Маркетинг/мероприятия/PR marketing@1c-bitrix.ru Партнерская программа partners@1c-bitrix.ru Мы работаем с 10:00 до 19:00 по московскому времени. Офис в Москве 127287 Россия Московская область Москва 2-я Хуторская улица дом 38А строение 9 Офис в Калининграде +7 (4012) 51-05-64 Офис в Калининграде 236001 Россия Калининградская область Калининград Московский проспект 261 Офис в Киеве ukraine@1c-bitrix.ru Телефон в Киеве +3 (8044)221-55-33 Офис в Киеве 01033 Украина Калининградская область Киев улица Шота Руставели 39/41 офис 1507

© 2001-2023 «Битрикс», «1С-Битрикс». Работает на 1С-Битрикс: Управление сайтом. Политика конфиденциальности

wp_enqueue_style() │ WP 2.6.0

Правильно добавляет файл CSS стилей. Регистрирует файл стилей, если он еще не был зарегистрирован. Если файл стилей был предварительно зарегистрирован через wp_register_style(), то его можно добавить в очередь, указав название (идентификатор) в первом параметре $handle . Если файл не был предварительно зарегистрирован, то эта функция зарегистрирует файл и добавит его в очередь. Добавленный в очередь файл стилей выводится в части документа. С версии 3.3 можно вызывать в середине документа. В этом случае файл будет выведен в подвале, перед тегом (где вызывается wp_footer() ).

• wp_enqueue_scripts — для внешней части сайта.
• admin_enqueue_scripts — для админ-панели.
• login_enqueue_scripts — для страницы входа (wp-login.php).

• Используйте wp_style_add_data(), чтобы добавить условия подключения стилей.
• Используйте wp_add_inline_style(), чтобы вставить в документ сами CSS стили, а не файл стилей.

Ошибка начинающих разработчиков. Функция ничего не выведет, если в теме не используется wp_head() или wp_footer(). Именно в момент вызова этих функций срабатывает хук, который добавляет стили.

Работает на основе: WP_Dependencies::add() , WP_Dependencies::enqueue()
Основа для: wp_enqueue_code_editor()

Возвращает

null . Ничего не возвращает.

Использование

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

$handle(строка) (обязательный) Название файла стилей (идентификатор). Строка в нижнем регистре. Если строка содержит знак вопроса (?): styleaculous?v=1.2 , то предшествующая часть будет названием стиля, а все что после будет добавлено в УРЛ как параметры запроса. Так можно указывать версию подключаемого стиля. $src(строка) УРЛ к файлу стилей. Например, http://example.com/css/style.css . Не нужно указывать путь жестко, используйте функции: plugins_url() (для плагинов) и get_template_directory_uri() (для тем). Внешние домены можно указывать с неявным протоколом //example.com/css/style.css .
По умолчанию: » $deps(массив) Массив идентификаторов других стилей, от которых зависит подключаемый файл стилей. Указанные тут стили, будут подключены до текущего.
По умолчанию: array() $ver(строка/логический) Строка определяющая версию стилей. Версия будет добавлена в конец ссылки на файл: ?ver=3.5.1 . Если не указать (установлено false), будет использована версия WordPress. Если установить null, то никакая версия не будет установлена.
По умолчанию: false $media(строка/логический) Устанавливается значение атрибута media. media указывает тип устройства для которого будет работать текущий стиль. Может быть: all , screen , handheld , print или all (max-width:480px) . Полный список смотрите здесь.
По умолчанию: ‘all’

Примеры

#1 Подключение через событие

В этом примере, мы зарегистрируем и подключим стили и скрипты, используя событие ‘ wp_enqueue_scripts ‘.

// правильный способ подключить стили и скрипты add_action( 'wp_enqueue_scripts', 'theme_name_scripts' ); // add_action('wp_print_styles', 'theme_name_scripts'); // можно использовать этот хук он более поздний function theme_name_scripts() < wp_enqueue_style( 'style-name', get_stylesheet_uri() ); wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true ); >

Вставляем этот код в файл темы functions.php или в плагин. В любое место, но до функции wp_head() которая вызывается в header.php

#2 Загрузка стилей на странице настроек плагина

add_action( 'admin_menu', 'my_plugin_admin_menu' ); function my_plugin_admin_menu() < // регистрируем страницу плагина $page = add_submenu_page( 'edit.php', __( 'My Plugin', 'myPlugin' ), __( 'My Plugin', 'myPlugin' ), 'administrator', __FILE__, 'my_plugin_manage_menu' ); // используя идентификатор страницы плагина подключаемся к нужному событию add_action( 'load-'. $page, 'my_plugin_admin_styles' ); >// Эта функция будет вызвана только на странице настроек плагина, function my_plugin_admin_styles() < wp_enqueue_style( 'myPluginStylesheet', plugins_url( 'stylesheet.css', __FILE__ ) ); >// Страница настроек function my_plugin_manage_menu() < // код страницы настроек >

Добавить свой пример

Заметки

Использует глобальную переменную $wp_styles , которая содержит экземпляр класса WP_Styles. Использует методы WP_Styles::add(), WP_Styles::enqueue() .

Заметки

• Смотрите: WP_Dependencies::add()
• Смотрите: WP_Dependencies::enqueue()

Список изменений

С версии 2.6.0

Введена.

Код wp_enqueue_style() wp enqueue style WP 6.4.1

function wp_enqueue_style( $handle, $src = '', $deps = array(), $ver = false, $media = 'all' ) < _wp_scripts_maybe_doing_it_wrong( __FUNCTION__, $handle ); $wp_styles = wp_styles(); if ( $src ) < $_handle = explode( '?', $handle ); $wp_styles->add( $_handle[0], $src, $deps, $ver, $media ); > $wp_styles->enqueue( $handle ); >

Cвязанные функции

styles (стили include files)

• wp_add_inline_style()
• wp_dequeue_style()
• wp_deregister_style()
• wp_get_custom_css()
• wp_register_style()
• wp_style_add_data()
• wp_style_is()

Регистрация script и style

• add_editor_style()
• wp_add_inline_script()
• wp_dequeue_script()
• wp_deregister_script()
• wp_enqueue_code_editor()
• wp_enqueue_editor()
• wp_enqueue_media()
• wp_enqueue_script()
• wp_localize_jquery_ui_datepicker()
• wp_localize_script()
• wp_register_script()
• wp_resource_hints()
• wp_script_add_data()
• wp_script_is()

Основные

• bloginfo()
• calendar_week_mod()
• get_archives_link()
• get_bloginfo()
• get_calendar()
• get_current_blog_id()
• get_footer()
• get_header()
• get_search_form()
• get_sidebar()
• get_template_part()
• is_404()
• is_active_sidebar()
• is_admin()
• is_archive()
• is_attachment()
• is_author()
• is_category()
• is_comment_feed()
• is_date()
• is_day()
• is_dynamic_sidebar()
• is_embed()
• is_feed()
• is_front_page()
• is_home()
• is_month()
• is_page_template()
• is_paged()
• is_post_type_archive()
• is_preview()
• is_search()
• is_single()
• is_singular()
• is_ssl()
• is_sticky()
• is_tag()
• is_tax()
• is_year()
• language_attributes()
• post_type_archive_title()
• register_sidebar()
• setup_postdata()
• the_archive_description()
• the_archive_title()
• wp_footer()
• wp_get_archives()
• wp_get_document_title()
• wp_head()
• wp_login_form()
• wp_login_url()
• wp_loginout()
• wp_logout_url()
• wp_lostpassword_url()
• wp_register()
• wp_title()

26 комментариев
Полезные 3 Все
Нужно подключить css-файл, не находящийся в папке темы. Пробовал и условный путь и абсолютный:

wp_enqueue_style ('advent', get_stylesheet_directory_uri (). '//сайт.ru/Adventure/css/advent.css');

Но в итоге все равно идет обращение к папке тем:

https://сайт.ru/wp-content/themes/baddim-blank//сайт.ru/Adventure/css/advent.css?ver=6.3.1