CSS in Laravel-Ansichten verwenden?
Ich habe gerade angefangen, Laravel zu lernen, und kann die Grundlagen eines Controllers und Routings beherrschen.
Mein Betriebssystem ist Mac OS X Lion und es ist auf einem MAMP-Server.
Mein Code von 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>";
});
Das funktioniert, die Ansichten zeigen perfekt an, '' jedoch '', was ich versuchen und tun möchte, ist CSS in den Ansichten. Ich habe versucht, einen Link zu einem Stylesheet innerhalb des Verzeichnisses hinzuzufügen, aber die Seite zeigte sie sogar als Standardbrowser-Schriftart an obwohl die css im HTML war!
Dies ist index.php von Unternehmen im Ordner "views":
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<p>Business is a varied term. My content here.
Ich habe versucht, die Blade-Vorlagen-Engine in meinem anderen Ansichtenordner (Testing) zu verwenden, um CSS anzuzeigen, aber erneut wurde CSS nicht angezeigt, obwohl es sich im Testordner befand!
Wie kann ich dieses Problem überwinden und besser werden? Ich lerne langsam diesen Rahmen.
Legen Sie Ihre Assets in den öffentlichen Ordner
public/css
public/images
public/fonts
public/js
Und sie nannten es Laravel
{{ HTML::script('js/scrollTo.js'); }}
{{ HTML::style('css/css.css'); }}
Legen Sie Ihre Assets in den öffentlichen Ordner
public/css
public/images
public/fonts
public/js
Und dann mit Laravel angerufen
{{ 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
(ODER)
{{ 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
ihre CSS-Datei gehört in den öffentlichen Ordner oder einen Unterordner davon.
f.e wenn du deine css reinlegst
public/css/common.css
du würdest verwenden
HTML::style('css/common.css');
In deiner Klingenansicht ...
Sie können auch die Asset-Klasse http://laravel.com/docs/views/assets ... verwenden.
Sie können auch wie gewohnt einen einfachen Link-Tag schreiben und dann auf dem href attr verwenden:
<link rel="stylesheet" href="<?php echo asset('css/common.css')?>" type="text/css">
natürlich müssen sie ihre css-datei unter public/css ablegen
Wir können dies auf folgende Weise tun.
<link href="{{ asset('/css/style.css') }}" rel="stylesheet">
{{ HTML::style('css/style.css', array('media' => 'print')) }}
Es durchsucht die Style-Datei im öffentlichen Ordner von Laravel und rendert sie dann.
Wie Ahmad Sharif erwähnt, können Sie das Stylesheet über http verlinken.
<link href="{{ asset('/css/style.css') }}" rel="stylesheet">
wenn Sie jedoch https verwenden, wird die Anforderung blockiert und es wird ein gemischter Inhaltsfehler angezeigt. Verwenden Sie secure_asset-ähnliches über https
<link href="{{ secure_asset('/css/style.css') }}" rel="stylesheet">
Seit Laravel 5 ist die HTML-Klasse nicht mehr standardmäßig enthalten.
Wenn Sie Formular- oder HTML-Helfer verwenden, wird eine Fehlermeldung angezeigt, dass die Klasse 'Form' nicht gefunden wurde oder die Klasse 'Html' nicht gefunden wurde. Die Formular- und HTML-Helfer wurden in Laravel 5.0 nicht mehr unterstützt. Es gibt jedoch von der Gemeinschaft betriebene Vertretungen, z. B. solche, die vom Laravel-Kollektiv verwaltet werden.
Sie können die folgende Zeile verwenden, um Ihre CSS- oder JS-Dateien einzuschließen:
<link href="{{ URL::asset('css/base.css') }}" rel="stylesheet">
<link href="{{ URL::asset('js/project.js') }}" rel="script">
Update für Laravel 5.4 ----
Alle Antworten haben die HTML-Klasse für laravel verwendet, aber ich denke, sie wurde jetzt in laravel 5.4 abgeschrieben
<link href="css/css.common.css" rel="stylesheet" >
Das ist nicht möglich, Bro, Laravel geht davon aus, dass sich alles in einem öffentlichen Ordner befindet.
Mein Vorschlag ist also:
- Wechseln Sie in den Ordner public .
- Erstellen Sie einen Ordner mit dem Namen css .
- Erstellen Sie den Ordner für die jeweiligen Ansichten, um die Dinge zu organisieren.
- Legen Sie die entsprechende CSS in diese Ordner, das wäre für Sie einfacher.
Oder
Wenn Sie wirklich darauf bestehen, css in den views-Ordner zu legen, können Sie Symlink erstellen (Sie sind mac, also ist es in Ordnung, aber unter Windows funktioniert dies nur für Vista, Server 2008 oder höher) aus Ihrem css-Ordner Wenn Sie das Verzeichnis im öffentlichen Ordner ablegen, können Sie {{HTML::style('your_view_folder/myStyle.css')}} in Ihren Ansichtsdateien verwenden. Hier ist ein Code für Ihre Bequemlichkeit. Fügen Sie diesen Code in den von Ihnen geposteten Code ein und fügen Sie diesen vor return View::make() ein:
$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);
Wenn Sie wirklich versuchen möchten, Ihre Idee auszuführen, versuchen Sie Folgendes:
<link rel="stylesheet" href="<?php echo app_path() . 'views/your_view_folder/myStyle.css'?>" type="text/css">
Aber es funktioniert nicht, auch wenn das Dateiverzeichnis korrekt ist, da Laravel dies aus Sicherheitsgründen nicht tut. Laravel liebt Sie so sehr.
legen Sie Ihre CSS-Datei im öffentlichen Ordner ab. (public/css/bootstrap-responsive.css) und <link href="./css/bootstrap-responsive.css" rel="stylesheet">
Kopieren Sie die CSS- oder JS-Datei, die Sie einschließen möchten, in einen öffentlichen Ordner, oder speichern Sie sie möglicherweise in den Ordnern public/css oder public/js.
Z.B. Sie verwenden die Datei style.css aus dem Ordner css im öffentlichen Verzeichnis und können sie dann verwenden
<link rel="stylesheet" href="{{ url() }}./css/style.css" type="text/css"/>
Aber in Laravel 5.2 müssen Sie verwenden
<link rel="stylesheet" href="{{ url('/') }}./css/style.css" type="text/css"/>
und wenn Sie Javascript-Dateien aus dem öffentlichen/js-Ordner einbinden möchten, ist es auch ziemlich einfach
<script src="{{ url() }}./js/jquery.min.js"></script>
und in Laravel 5.2 müssen Sie verwenden
<script src="{{ url('/') }}./js/jquery.min.js"></script>
die Funktion url() ist eine laravel Helferfunktion, die eine vollqualifizierte URL für den angegebenen Pfad generiert.
dann legen Sie Ihre CSS in den öffentlichen Ordner
fügen Sie dies in Ihrer Blade-Datei hinzu
<link rel="stylesheet" type="text/css" href="{{ asset('mystyle.css') }}">
Meiner Meinung nach wird für die Weiterleitung an css & js der folgende Code verwendet:
<link rel="stylesheet" type="text/css" href="{{ URL::to('route/to/css') }}">
Wenn Sie also eine css-Datei namens main.css im css-Ordner im öffentlichen Ordner haben, sollte dies Folgendes sein:
<link rel="stylesheet" type="text/css" href="{{ URL::to('css/main.css') }}">
Sie können einfach alle Dateien in dem angegebenen Ordner öffentlich ablegen
public/css
public/js
public/images
Dann rufen Sie einfach die Dateien wie in normaler HTML-Datei auf<link href="css/file.css" rel="stylesheet" type="text/css">
Es funktioniert gut in jeder Version von Laravel
Benutzen {!! in neuer Laravel
{!! asset('js/app.min.js') !!}
<script type="text/javascript" src="{!! asset('js/app.min.js') !!}"></script>
Verwenden Sie für Laravel 5.4 und wenn Sie Mixhelper verwenden
<link href="{{ mix('/css/app.css') }}" rel="stylesheet">
<script src="{{ mix('/js/app.js') }}"></script>
Legen Sie sie im Ordner public ab und rufen Sie sie in der Ansicht mit etwas wie href="{{ asset('public/css/style.css') }}" auf. Beachten Sie, dass beim Aufruf der Assets die Variable public enthalten sein sollte.
Für diejenigen, die js/css aus irgendwelchen Gründen aus dem öffentlichen Ordner heraushalten müssen, können Sie im modernen Laravel Unteransichten verwenden. Sagen Sie, Ihre Ansichtenstruktur ist
views
view1.blade.php
view1-css.blade.php
view1-js1.blade.php
view1-js2.blade.php
in view1 add
@include('view1-css')
@include('view1-js1')
@include('view1-js2')
in views-js.blade.php-Dateien verpacken Sie Ihren js-Code in <script>-Tag
umbinden Sie Ihre Stile in views-css.blade.php in <style>-Tag
Das wird Laravel und Ihrem Code-Editor mitteilen, dass es sich tatsächlich um js- und css-Dateien handelt. Sie können dasselbe mit zusätzlichem HTML, SVGs und anderen Elementen tun, die vom Browser gerendert werden können