Использование CSS в представлениях Laravel?

76

Я только начал изучать Laravel и могу делать основы контроллера и маршрутизации.

Моя ОС - Mac OS X Lion, и она на сервере MAMP.

Мой код из routes.php:

Route::get('/', function() {
    return View::make('home.index');
});

Route::get('businesses', function() {
    return View::make('businesses.index');
});

Route::get('testing', function() {
    return View::make('testing.index');
});        

Route::get('hello', function() {
    return "<h3>Hello world!</H3>";
});

Это работает, представления отлично отображаются, но "тем не менее", что я хочу попробовать, это включить CSS в представлениях, я попытался добавить ссылку на таблицу стилей внутри каталога, но страница отображала ее как значение по умолчанию шрифт браузера, хотя css был в HTML!

Это index.php от предприятий в папке представлений:

<head>
   <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

<p>Business is a varied term. My content here.

Я попытался использовать механизм шаблонов Blade в моей другой папке представлений (тестирование) для отображения CSS, но снова CSS не показывался, несмотря на то, что он находится в папке тестирования!

Как я могу преодолеть эту проблему и стать лучше - поскольку я медленно изучаю эту структуру.

  • 0
    Какую версию Laravel вы используете?
  • 3
    {{ URL::asset('css/css.css') }}
Теги:
frameworks

15 ответов

128

Поместите свои ресурсы в общую папку

public/css
public/images
public/fonts
public/js

И их называли это с помощью Laravel

{{ HTML::script('js/scrollTo.js'); }}

{{ HTML::style('css/css.css'); }}
  • 4
    То же 404 Не найдено
  • 0
    Вы уверены, что файлы существуют?
Показать ещё 7 комментариев
44

Поместите свои ресурсы в общую папку

public/css
public/images
public/fonts
public/js

И затем вызвал его с помощью Laravel

{{ URL::asset('js/scrollTo.js'); }} // Generates the path to public directory public/js/scrollTo.js

{{ URL::asset('css/css.css'); }}   // Generates the  path to public directory public/css/css.css

(ИЛИ)

{{ HTML::script('js/scrollTo.js'); }} // Generates the  path to public directory public/js/scrollTo.js

{{ HTML::style('css/css.css'); }} // Generates the path to public directory public/css/css.css
  • 4
    Спасибо, URL :: asset () работал на меня
  • 0
    URL работает с Laravel Framework версии 5.2.39
Показать ещё 3 комментария
37

ваш файл css принадлежит к общей папке или вложенной папке.

f.e, если вы поместите свой css в

public/css/common.css

вы бы использовали

HTML::style('css/common.css');

В вашем обзоре...

Или вы также можете использовать класс Asset http://laravel.com/docs/views/assets...

  • 0
    Нет, это не имеет значения. Я не могу получить доступ к чему-либо через браузер, содержащийся в этих каталогах ...
  • 0
    @dcolumbus Если получаемый вами 404 сгенерирован Laravel (т.е. не по умолчанию на сервере), то в вашем .htaccess (если вы используете Apache) может отсутствовать следующая строка: «RewriteCond% {REQUEST_FILENAME}! -f». Эта строка должна идти выше строки с index.php и предотвращать обработку запросов к путям, существующим в файловой системе, системой маршрутизации Laravel. Если полученное 404 не сгенерировано Laravel, вам необходимо добавить «AllowOverride All» в конфигурацию Apache для обработки .htaccess (см. Документацию Apache для получения дополнительной информации).
Показать ещё 1 комментарий
19

Вы также можете написать простой тег ссылки, как обычно, и затем использовать href attr:

<link rel="stylesheet" href="<?php echo asset('css/common.css')?>" type="text/css"> 

конечно, вам нужно поставить файл css под public/css

  • 0
    @dcolumbus 404 возможно, потому что, давая неправильный путь, попробуйте добавить префикс / public /, по умолчанию для laravel есть префикс / public / /public/css/common.css
16

Мы можем сделать это следующим образом.

<link href="{{ asset('/css/style.css') }}" rel="stylesheet">

{{ HTML::style('css/style.css', array('media' => 'print')) }}

Он будет искать файл стиля в общей папке Laravel и затем отобразит его.

  • 1
    Круто, Ахмад, все будет хорошо, если вы будете ссылаться на таблицу стилей через http <link href = "{{{asset ('/ css / style.css')}}}" rel = "stylesheet">, но если вы используете https тогда запрос будет заблокирован и появится ошибка со смешанным содержимым, чтобы использовать его через https, необходимо использовать secure_asset например <link href = "{{{secure_asset ('/ css / style.css')}}}" rel = " таблица стилей"> laravel.com/docs/5.1/helpers#method-secure-asset
  • 0
    Нужны только 2 скобки, а не 3.
Показать ещё 1 комментарий
10

Как упоминал Ахмад Шариф, вы можете связать таблицу стилей над http

<link href="{{ asset('/css/style.css') }}" rel="stylesheet"> 

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

<link href="{{ secure_asset('/css/style.css') }}" rel="stylesheet">

https://laravel.com/docs/5.1/helpers#method-secure-asset

  • 2
    Нужны только 2 скобки, а не 3.
  • 0
    Правильно, спасибо за указание на опечатку.
Показать ещё 1 комментарий
6

Так как Laravel 5 класс HTML больше не включен по умолчанию.

Если вы используете помощники формы или HTML, вы увидите сообщение об ошибке, в котором не указан класс "Форма" или не найден класс "Html". Помощники формы и HTML устарели в Laravel 5.0; однако существуют замены, связанные с сообществом, такие как те, которые поддерживаются коллективом Laravel.

Вы можете использовать следующую строку, чтобы включить ваши файлы CSS или JS:

<link href="{{ URL::asset('css/base.css') }}" rel="stylesheet">
<link href="{{ URL::asset('js/project.js') }}" rel="script">
  • 2
    Я думаю, что этот ответ должен быть выше, потому что это кажется предпочтительным способом, так как класс HTML устарел.
4

поместите свой файл css в общую папку. (Публичный/CSS/самозагрузка-responsive.css) и <link href="./css/bootstrap-responsive.css" rel="stylesheet">

  • 0
    Круто, это работает! Но есть ли какая-то разница между <link href="./css/bootstrap-responsive.css" rel="stylesheet"> и <link href="{{ url('/') }}./css/bootstrap-responsive.css" rel="stylesheet">
4

Это невозможно, Laravel предполагает, что все находится в общей папке.

Итак, мое предложение:

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

или

Если вы действительно настаиваете на том, чтобы поместить css внутри папки представлений, вы можете попробовать создать Symlink (вы - mac, так что это нормально, но для Windows это будет работать только для Vista, Server 2008 или выше) из каталога css-папки в общую папку, и вы можете использовать {{HTML::style('your_view_folder/myStyle.css')}} внутри ваших файлов просмотра, вот код для вашего удобства в отправленном вами коде, поместите их перед return View::make():

$css_file = 'myStyle.css';
$folder_name = 'your_view_folder';
$view_path = app_path() . '/views/' . $folder_name . '/' . $css_file;
$public_css_path = public_path() . '/' . $folder_name;
if(file_exists($public_css_path)) exec('rm -rf ' . $public_css_path);
exec('mkdir ' . $public_css_path);
exec('ln -s ' . $view_path .' ' . $public_css_path . '/' . $css_file);

Если вы действительно хотите попробовать свои идеи, попробуйте следующее:

<link rel="stylesheet" href="<?php echo app_path() . 'views/your_view_folder/myStyle.css'?>" type="text/css">

Но это не сработает, даже если каталог файлов верен, потому что Laravel не сделает этого в целях безопасности, Laravel очень вас любит.

  • 2
    "Laravel любит тебя так сильно." -> Хорошо! (лол)
3

Обновление для laravel 5.4 ----

Все ответы использовали класс HTML для laravel, но я предполагаю, что он теперь обесценился в laravel 5.4, поэтому Поместите свои файлы css и js в public- > css/js И ссылайтесь на них в своем html, используя

<link href="css/css.common.css" rel="stylesheet" >
  • 0
    Это хорошо работает в Laravel <link href = "css / common.css" rel = "stylesheet"> css.common.css не обязательно
3

Скопируйте файл css или js, который вы хотите включить, в общую папку или вы можете захотеть сохранить их в папках public/css или public/js.

Eg. вы используете файл style.css из папки css в общедоступном каталоге, тогда вы можете использовать

<link rel="stylesheet" href="{{ url() }}./css/style.css" type="text/css"/>

Но в Laravel 5.2 вам нужно будет использовать

<link rel="stylesheet" href="{{ url('/') }}./css/style.css" type="text/css"/>

и если вы хотите включить файлы javascript из общедоступной/js-папки, это тоже довольно просто.

<script src="{{ url() }}./js/jquery.min.js"></script>

и в Laravel 5.2 вам нужно будет использовать

<script src="{{ url('/') }}./js/jquery.min.js"></script>

функция url() является вспомогательной функцией laravel, которая генерирует полный URL-адрес для заданного пути.

1

Для Laravel 5.4 и если вы используете помощник микса, используйте

    <link href="{{ mix('/css/app.css') }}" rel="stylesheet">
    <script src="{{ mix('/js/app.js') }}"></script>
0

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

<link rel="stylesheet" type="text/css" href="{{ URL::to('route/to/css') }}">

Итак, если у вас есть css файл с именем main.css внутри папки css в общей папке, он должен быть следующим:

<link rel="stylesheet" type="text/css" href="{{ URL::to('css/main.css') }}">
0

поместите ваш css в общую папку, затем

добавьте это в свой файл клика

<link rel="stylesheet" type="text/css" href="{{ asset('mystyle.css') }}">
0

Поместите их в папку public и вызовите его в представлении с чем-то вроде href="{{ asset('public/css/style.css') }}". Обратите внимание, что public должен быть включен при вызове активов.

  • 0
    Не нужно указывать «публичную» папку. Например, это сработало для меня. <link href = "{{asset ('css / bootstrap.min.css')}}" rel = "stylesheet">. Ваш пример не сработал.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню