Використання CSS у представленнях Laravel?

108

Я тільки почав вивчати Laravel і вмію робити основи контролера та маршрутизації.

Моя ОС Mac OS X Lion, і вона знаходиться на сервері MAMP.

Мій код від route.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 не показав, незважаючи на те, що він знаходиться в тестовій папці!

Як я можу подолати цю проблему і стати кращим - коли я повільно вивчаю цю рамку.

php frameworks laravel

— avenas8808
джерело

Яку версію laravel ви навіть використовуєте?

— Чорний

5

{{ URL::asset('css/css.css') }}

— vishalknishad

156

Зберігайте свої активи в загальнодоступній папці

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

І називали його за допомогою Laravel

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

{{ HTML::style('css/css.css'); }}

— Фернандо Монтоя
джерело

2

Не дзвоніть CSS всередині @section чи нічого, якщо ви використовуєте лезо, працювали на мене!

— star18bit

3

Для роботи цього синтаксису ви повинні використовувати лезо. Якщо ви не використовуєте лезо, то вам доведеться піти з: <? Php echo HTML :: style ('css / common.css');?>

— Ніколас Крейдберг

6

Це зараз відрізняється для Laravel 5.0, де пакет освітлення / html більше не включений за замовчуванням laracasts.com/series/laravel-5-fundamentals/episodes/10 для деталей

— dangel

1

Якщо це не працює для вас, ось що для мене спрацювало: stackoverflow.com/questions/15232600/…

— Dan Klos

1

Не працює і для мене. Фатальна помилка: Клас "HTML" не знайдено

— геодезичний

56

Зберігайте свої активи в загальнодоступній папці

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

— Провідний розробник
джерело

URL: актив () вбудований, тоді як для HTML :: style () потрібен пакет

— omarjebari

Чи можете ви, будь ласка, додати до своєї відповіді, куди дзвонити цей код {{ URL::asset('js/scrollTo.js'); }}? ви можете навести приклад?

— Рамеш Парік

43

ваш файл css належить до загальнодоступної папки або його підпапки.

fe, якщо ви помістите ваш css

public/css/common.css

ви б використали

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

На ваш погляд леза ...

Або ви також можете використовувати клас Asset http://laravel.com/docs/views/assets ...

— Андре Келлер
джерело

Ні, це не має значення. Я не можу отримати доступ до нічого через браузер, що міститься в цих каталогах ...

— dcolumbus

@dcolumbus Якщо 404, який ви отримуєте, генерується Laravel (тобто не сервер за замовчуванням), можливо, у вашому .htaccess (припускаючи, що ви використовуєте Apache) може бути пропущено наступний рядок: "RewriteCond% {REQUEST_FILENAME}! -f ". Цей рядок повинен виходити за межі того, у якому є index.php, і запобігає обробці запитів до шляхів, які існують у файловій системі, системою маршрутизації Laravel. Якщо отриманий 404 не генерується Laravel, вам потрібно додати "AllowOverride All" у свій конфігурацію Apache, щоб обробляти .htaccess (докладнішу інформацію див. У документах Apache).

— tjbp

Він сказав, що хоче помістити файли css всередину папки перегляду, а не у загальнодоступну папку, актив () та HTML :: style / HTML :: скрипт, що вказує на загальний каталог, a laravel не дозволяє нічого в папці програми до нього звертаються сторонні питання з метою безпеки. Тож навіть якщо є index.php чи ні, не має значення в тому, що він хоче.

— Браян P

26

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

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

звичайно, вам потрібно помістити свій файл css під public / css

— Дієго Кастаньо
джерело

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

— david valentino

23

Ми можемо це зробити наступним чином.

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

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

Він буде шукати файл стилю в загальнодоступній папці Laravel, а потім відтворить його.

— Ахмад Шаріф
джерело

1

Прохолодний Ахмад, він буде добре працювати, якщо u-посилання стилю аркуша над http <link href = "{{{актив ('/ css / style.css')}}}" rel = " стиль таблиці"> але якщо ви використовуєте, httpsто запит буде заблоковано, і з’явиться помилка змішаного вмісту, для його використання через https ви повинні використовувати secure_assetяк <link href = "{{{secure_asset ('/ css / style.css')}}}}" rel = "таблиця стилів" > laravel.com/docs/5.1/helpers#method-secure-asset

— Sambhav Pandey

Потрібно лише 2 дужки - не 3.

— Олег Абражаєв

Якщо ви використовуєте це рішення для laravel 5, вам потрібно встановити постачальника LaravelCollective Forms & HTML. Дивіться: laravelcollective.com/docs/5.4/html інструкції. Не забудьте запустити "оновлення композитора" після оновлення composer.json.

— Асимов

15

Як згадував Ахмад Шаріф, ви можете пов’язати таблицю стилів http

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

але якщо ви використовуєте, httpsтоді запит буде заблоковано, і з’явиться помилка змішаного вмісту, щоб використовувати його через https use secure_assetlike

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

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

— Самбхав Пандей
джерело

2

Потрібно лише 2 дужки - не 3.

— Радіація

Де я розміщую файл css, js? або на public/cssабоresources/assets/css

— NaveenDA

10

Оскільки 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.

— Асимов

7

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

У всіх відповідях використовується клас HTML для laravel, але, мабуть, його тепер знецінено у laravel 5.4, тому покладіть свої файли css та js у public-> css / js та посилайте їх у своєму html за допомогою

<link href="css/css.common.css" rel="stylesheet" >

— Eminem347
джерело

Це добре працює в Laravel <link href = "css / common.css" rel = "stylesheet"> css.common.css не потрібно

— Udhav Sarvaiya

5

Це неможливо брате, Ларавель припускає, що все знаходиться в загальнодоступній папці.

Тому моя пропозиція:

Перейдіть до загальнодоступної папки.
Створіть папку, бажано з назвою 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 так любить вас.

— Брайан П
джерело

5

На мою думку, найкращим варіантом маршруту до css & js є наступний код:

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

Отже, якщо у вас є файл css main.css main.css у папці css у загальній папці, він повинен бути таким:

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

— kqcreations
джерело

4

помістіть свій файл css у загальну папку. (public / css / bootstrap-response.css) та<link href="./css/bootstrap-responsive.css" rel="stylesheet">

— huuthang
джерело

Дивовижно, це працює! Але, чи є різниця між <link href="./css/bootstrap-responsive.css" rel="stylesheet">і<link href="{{ url('/') }}./css/bootstrap-responsive.css" rel="stylesheet">

— Грегорді

4

Ви можете просто помістити всі файли у вказану папку у загальнодоступному вигляді

public / css
public / js
public / images

Тоді просто зателефонуйте у файли, як у звичайному HTML-форматі
<link href="css/file.css" rel="stylesheet" type="text/css">

Він працює чудово у будь-якій версії Laravel

— Сюзан
джерело

3

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

Напр. ви використовуєте файл 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 з папки public / js, це теж досить просто

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

і в Laravel 5.2 вам доведеться користуватися

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

функція url()- це допоміжна функція laravel, яка генерує повністю кваліфіковану URL-адресу для заданого шляху.

— Акшай Хале
джерело

3

помістіть ваш css у загальнодоступну папку

додайте це у файл вашого леза

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

— Saengdaet
джерело

3

Використовуйте {!! у новому laravel

{!! asset('js/app.min.js') !!}

<script type="text/javascript" src="{!! asset('js/app.min.js') !!}"></script>

— ТАРУН ШАРМА
джерело

2

Для Laravel 5.4 і якщо ви використовуєте мікс-помічник, використовуйте

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

— Gsub
джерело

2

Помістіть їх у publicпапку та зателефонуйте у вигляд чимось подібним href="{{ asset('public/css/style.css') }}". Зауважте, що це publicпотрібно включити під час виклику активів.

— Abaij
джерело

Не потрібно вказувати папку "public". Наприклад, це працювало для мене. <link href = "{{актив ('css / bootstrap.min.css')}}" rel = "таблиця стилів">. Ваш приклад не спрацював.

— Ісуру

2

Для тих, хто потребує збереження js / css з публічної папки з будь-яких причин, у сучасному Laravel ви можете використовувати підпрограми . Скажіть, структура ваших поглядів така

views
    view1.blade.php
    view1-css.blade.php
    view1-js1.blade.php
    view1-js2.blade.php

в view1дод

@include('view1-css')
@include('view1-js1')
@include('view1-js2')

у views-js.blade.phpфайлах загортайте ваш js-код у <script>тег

в views-css.blade.phpобернути стилі в <style>тезі

Це скаже Ларавелю та вашому редактору коду, що це насправді jsі cssфайли. Ви можете зробити те ж саме з додатковими HTML, SVG та іншими речами, які переглядаються браузером

— Артур Тарасов
джерело