Laravel görünümlerinde CSS mi kullanıyorsunuz?


109

Laravel'i yeni öğrenmeye başladım ve bir denetleyici ve yönlendirmenin temellerini yapabilirim.

İşletim sistemim Mac OS X Lion ve bir MAMP sunucusunda.

Route.php kodum:

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>";
});

Bu işe yarıyor, görünümler mükemmel görüntüleniyor, '' ancak '' denemek ve yapmak istediğim şey görünümlerin içine CSS eklemek, dizindeki bir stil sayfasına bir bağlantı eklemeyi denedim, ancak sayfa varsayılan tarayıcı yazı tipi olarak görüntülüyordu. css HTML içindeydi!

Bu, görünümler klasöründeki işletmelerden index.php'dir:

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

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

CSS'yi görüntülemek için diğer görünümler klasörümde (test) Blade şablon motorunu kullanmayı denedim, ancak yine de CSS, test klasöründe olmasına rağmen gösterilmedi!

Bu çerçeveyi yavaş yavaş öğrenirken, bu sorunun üstesinden nasıl gelebilirim ve daha iyi hale gelebilirim.


Hangi laravel versiyonunu kullanıyorsun?
Black

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

Yanıtlar:


157

Varlıklarınızı ortak klasöre koyun

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

Ve Laravel kullanarak çağırdılar

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

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

2
@Section içinde CSS'yi veya herhangi bir şeyi çağırmayın, eğer blade kullanıyorsanız, benim için çalıştı!
star18bit

3
Bu sözdiziminin çalışması için blade kullanıyor olmalısın. Blade kullanmıyorsanız, şunu kullanmanız gerekir: <? Php echo HTML :: style ('css / common.css');?>
Nicholas Kreidberg

6
Bu durum, illuminate / html paketinin artık varsayılan olarak dahil edilmediği Laravel 5.0 için farklıdır . Ayrıntılar için
laracasts.com/series/laravel-5-fundamentals/episodes/10

1
Bu sizin için işe yaramazsa, işte benim için işe
yarayan

1
Benim için de çalışmıyor. Önemli Hata: 'HTML' sınıfı bulunamadı
geoidesic

56

Varlıklarınızı ortak klasöre koyun

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

Ve sonra Laravel kullanarak çağırdı

{{ 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

(VEYA)

{{ 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 :: asset () yerleşiktir, HTML :: style () ise bir paket gerektirir
omarjebari

Lütfen cevabınıza bu kodu nerede arayacağınızı ekleyebilir misiniz {{ URL::asset('js/scrollTo.js'); }}? bir örnek verebilir misin?
Ramesh Pareek

43

css dosyanız genel klasöre veya onun bir alt klasörüne aittir.

fe eğer css'ini koyarsan

public/css/common.css

kullanırdın

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

Bıçak görünümünüzde ...

Ya da Asset sınıfını http://laravel.com/docs/views/assets ...


Hayır, bu bir fark yaratmaz. Bu dizinlerde bulunan tarayıcı aracılığıyla hiçbir şeye erişemiyorum ...
dcolumbus

@dcolumbus Eğer aldığınız 404 Laravel tarafından oluşturulmuşsa (yani, sunucu varsayılanı değil), o zaman .htaccess'inizde şu satırı kaçırıyor olabilirsiniz (Apache kullandığınızı varsayarak): "RewriteCond% {REQUEST_FILENAME}! -f". Bu satır, içinde index.php bulunan satırın üzerine çıkmalı ve dosya sisteminde var olan yollara yapılan isteklerin Laravel'in yönlendirme sistemi tarafından işlenmesini engelleyecektir. Alınan 404 Laravel tarafından oluşturulmadıysa, .htaccess'in işlenmesi için Apache yapılandırmanıza "AllowOverride All" eklemeniz gerekir (daha fazla bilgi için Apache belgelerine bakın).
tjbp

Css dosyalarını public klasörün, asset () ve HTML :: style / HTML :: script'in tümü public dizini işaret etmek yerine view klasörünün içine koymak istediğini, laravel'in App klasörünün içindeki hiçbir şeyin olmasına izin vermediğini söyledi. güvenlik amacıyla dış konular tarafından erişilir. Yani index.php olsa bile ne istediği önemli değil.
Bryan P

26

Normalde yaptığınız gibi basit bir bağlantı etiketi de yazabilir ve ardından href attr kullanımında:

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

tabii ki css dosyanızı public / css altına koymanız gerekir


@dcolumbus 404 belki yanlış yol verdiğinden, önek / genel / eklemeyi deneyin, laravel varsayılan öneki / public / /public/css/common.css
david valentino

23

Bunu şu şekilde yapabiliriz.

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

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

Laravel'in ortak klasöründeki stil dosyasını arayacak ve sonra onu oluşturacaktır.


1
U stil üzerinde bağlarsanız Ahmad Soğuk, bu cezayı çalışacak http <link href = "{{{varlık ( '/ css / style.css')}}}" rel = "stil"> ancak kullanıyorsanız httpso zaman istek engellenecek ve secure_asset<link href = "{{secure_asset ('/ css / style.css')}}}" rel = "stylesheet" gibi kullanmanız gereken https üzerinden kullanmak için karışık bir içerik hatası gelecek > laravel.com/docs/5.1/helpers#method-secure-asset
Sambhav Pandey

Sadece 2 parantez gerekli - 3 değil
Oleg Abrazhaev

Bu çözümü laravel 5 için kullanıyorsanız, LaravelCollective Forms & HTML sağlayıcısını yüklemeniz gerekir. Talimatlar için bkz: laravelcollective.com/docs/5.4/html . Composer.json'u güncelledikten sonra "composer update" çalıştırmayı unutmayın.
Asimov

15

Ahmad Sharif'in bahsettiği gibi, stil sayfasını bağlayabilirsiniz. http

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

ancak kullanıyorsanız https, istek engellenecek ve karışık bir içerik hatası gelecek, https üzerinden kullanmak secure_assetgibi

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

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


2
Yalnızca 2 parantez gereklidir - 3 değil.
Radmation

Css, js dosyamı nereye yerleştiririm? ya açık public/cssya daresources/assets/css
NaveenDA

10

Laravel 5'ten bu yana, HTMLsınıf artık varsayılan olarak dahil edilmemiştir.

Form veya HTML yardımcıları kullanıyorsanız, 'Form' sınıfının bulunamadı veya 'Html' sınıfının bulunamadığını belirten bir hata görürsünüz. Form ve HTML yardımcıları Laravel 5.0'da kullanımdan kaldırıldı; ancak, Laravel Collective tarafından sürdürülenler gibi topluluk tarafından yönlendirilen değiştirmeler vardır.

CSS veya JS dosyalarınızı eklemek için aşağıdaki satırı kullanabilirsiniz:

<link href="{{ URL::asset('css/base.css') }}" rel="stylesheet">
<link href="{{ URL::asset('js/project.js') }}" rel="script">

2
Bu cevabın daha yüksek olması gerektiğini düşünüyorum çünkü HTML sınıfı kullanımdan kaldırıldığı için bu tercih edilen yol gibi görünüyor.
Asimov

7

Laravel 5.4 güncellemesi ----

Tüm cevaplar, laravel için HTML sınıfını kullandı, ancak sanırım şimdi laravel 5.4'te amortismana tabi tutuldu, bu yüzden css ve js dosyalarınızı public-> css / js'ye koyun ve html'nizde bunları kullanarak referans alın

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

Bu, Laravel'de iyi çalışıyor <link href = "css / common.css" rel = "stylesheet"> css.common.css gerekli değil
Udhav Sarvaiya

5

Bu mümkün değil dostum, Laravel her şeyin ortak klasörde olduğunu varsayar.

Benim önerim şu:

  1. Git kamu klasöre.
  2. Tercihen css adlı bir klasör oluşturun .
  3. İşleri organize etmek için ilgili görünümler için klasör oluşturun.
  4. İlgili css'i bu klasörlerin içine koyun, bu sizin için daha kolay olacaktır.

Veya

Eğer gerçekten görünümler klasörünün içine css koymakta ısrar ediyorsanız, Symlink oluşturmayı deneyebilirsiniz (Mac olduğunuz için sorun yok, ancak Windows için bu sadece Vista, Server 2008 veya üstü için) css klasör dizininizden herkese açık klasör ve {{HTML::style('your_view_folder/myStyle.css')}}görünüm dosyalarınızın içinde kullanabilirsiniz , burada size kolaylık sağlamak için bir kod, gönderdiğiniz kodda şunları koyun 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);

Fikrinizi gerçekten yapmayı denemek istiyorsanız, şunu deneyin:

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

Ancak dosya dizini doğru olsa bile çalışmaz çünkü Laravel bunu güvenlik amacıyla yapmaz, Laravel sizi çok seviyor.


5

Bana göre css & js'ye yönlendirmenin en iyi seçeneği aşağıdaki kodu kullanıyor:

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

Bu nedenle, ortak klasördeki css klasörünün içinde main.css adlı css dosyanız varsa, aşağıdaki gibi olmalıdır:

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

4

css dosyanızı ortak klasöre koyun. (public / css / bootstrap-responsive.css) ve<link href="./css/bootstrap-responsive.css" rel="stylesheet">


Harika, işe yarıyor! Ancak, <link href="./css/bootstrap-responsive.css" rel="stylesheet">ve arasında herhangi bir fark var mı?<link href="{{ url('/') }}./css/bootstrap-responsive.css" rel="stylesheet">
Gregordy

4

Tüm dosyaları kendi belirtilen klasörüne genel olarak koyabilirsiniz.


public / css
public / js
public / images


Sonra dosyaları normal html'deki gibi çağırın
<link href="css/file.css" rel="stylesheet" type="text/css">

Laravel'in herhangi bir sürümünde gayet iyi çalışıyor


3

Eklemek istediğiniz css veya js dosyasını ortak klasöre kopyalayın veya bunları public / css veya public / js klasörlerinde depolamak isteyebilirsiniz.

Örneğin. public dizindeki css klasöründen style.css dosyasını kullanıyorsunuz, sonra kullanabilirsiniz

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

Ancak Laravel 5.2'de kullanmanız gerekecek

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

ve javascript dosyalarını public / js klasöründen eklemek istiyorsanız, bu da oldukça basit

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

ve Laravel 5.2'de kullanmanız gerekecek

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

işlev url(), verilen yola tam olarak nitelenmiş URL oluşturacak bir laravel yardımcı işlevidir.


3

css'nizi ortak klasöre koyun, sonra

bunu bıçak dosyanıza ekleyin

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

3

{!! yeni laravelde

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

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

2

Laravel 5.4 için ve mix helper kullanıyorsanız, şunu kullanın:

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

2

Bunları publicklasöre koyun ve gibi bir şeyle görünümde arayın href="{{ asset('public/css/style.css') }}". publicVarlıkları aradığınızda dahil edilmesi gerektiğini unutmayın .


"Genel" klasörü belirtmenize gerek yok. Örneğin, bu benim için çalıştı. <link href = "{{asset ('css / bootstrap.min.css')}}" rel = "stylesheet">. Örneğiniz işe yaramadı.
Isuru

2

Herhangi bir nedenle js / css'i ortak klasörün dışında tutması gerekenler için, modern Laravel'de alt görünümleri kullanabilirsiniz . Görünüm yapınızın

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

içinde view1eklenti

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

içinde views-js.blade.phpdosyalarda js kodu sarın <script>etiketi

içinde views-css.blade.phpde Stillerinizi sarın <style>etiketi

Bu, Laravel'e ve kod editörünüze bunların gerçekte jsve cssdosyalar olduğunu söyleyecektir . Aynısını ek HTML, SVG'ler ve tarayıcıda oluşturulabilen diğer şeyler için de yapabilirsiniz.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.