Laravel दृश्यों में CSS का उपयोग करना?

108

मैंने अभी लारवेल सीखना शुरू किया है, और एक नियंत्रक और रूटिंग की मूल बातें कर सकता हूं।

मेरा OS Mac OS X Lion है, और यह एक MAMP सर्वर पर है।

मार्गों से मेरा कोड। 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>";
});

यह काम करता है, विचार पूरी तरह से प्रदर्शित करते हैं, '' हालांकि '' जो मैं कोशिश करना चाहता हूं और करता हूं उसमें सीएसएस को शामिल किया गया है, मैंने निर्देशिका के भीतर एक स्टाइलशीट के लिंक में जोड़ने की कोशिश की, लेकिन पृष्ठ ने इसे डिफ़ॉल्ट ब्राउज़र फ़ॉन्ट के रूप में भी प्रदर्शित किया हालांकि सीएसएस HTML में था!

यह दृश्य फ़ोल्डर में व्यवसायों से अनुक्रमणिका है।

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

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

मैंने CSS प्रदर्शित करने के लिए अपने अन्य विचार फ़ोल्डर (परीक्षण) में ब्लेड टेम्पलेट इंजन का उपयोग करने की कोशिश की, लेकिन फिर भी परीक्षण फ़ोल्डर में होने के बावजूद सीएसएस नहीं दिखा!

मैं इस समस्या को कैसे दूर कर सकता हूं, और बेहतर हो सकता हूं - जैसा कि मैं धीरे-धीरे इस रूपरेखा को सीख रहा हूं।

php frameworks laravel

— avenas8808
स्रोत

आप किस लार्वा संस्करण का उपयोग कर रहे हैं?

— काला

5

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

— विशालाकिशनद

156

अपनी संपत्ति को सार्वजनिक फ़ोल्डर में रखें

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

और उन्होंने इसे लारवेल का उपयोग करके बुलाया

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

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

— फर्नांडो मोंटोया
स्रोत

2

यदि आप ब्लेड का उपयोग करते हैं, तो मेरे लिए सीएसएस @ @ या कुछ भी कॉल न करें, मेरे लिए काम किया!

— तारा 18bit

3

आपको काम करने के लिए उस सिंटैक्स के लिए ब्लेड का उपयोग करना होगा। यदि आप ब्लेड का उपयोग नहीं कर रहे हैं, तो आपको इसके साथ जाना होगा: <? Php इको HTML :: स्टाइल ('css / common.css');>;>

— निकोलस क्रेडीबर्ग

6

लारवेल 5.0 के लिए यह अलग है जहां अब प्रबुद्ध / html पैकेज डिफॉल्ट लार्कास्टिक्स

— series

1

यदि यह आपके लिए काम नहीं करता है, तो यहां मेरे लिए क्या काम किया गया है: stackoverflow.com/questions/15232600/…

— दान क्लोस

1

मेरे लिए भी काम नहीं करता है। घातक त्रुटि: क्लास 'एचटीएमएल' नहीं मिला

— भौगोलिक

56

अपनी संपत्ति को सार्वजनिक फ़ोल्डर में रखें

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

और फिर इसे लारवेल का उपयोग करके बुलाया

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

आपकी सीएसएस फ़ाइल सार्वजनिक फ़ोल्डर या उसके सबफ़ोल्डर में है।

fe यदि आप अपना css अंदर डालते हैं

public/css/common.css

आप उपयोग करेंगे

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

अपने ब्लेड दृश्य में ...

या आप एसेट क्लास http://laravel.com/docs/views/assets का भी उपयोग कर सकते हैं ...

— आंद्रे केलर
स्रोत

नहीं, इससे कोई फर्क नहीं पड़ता। मैं उन निर्देशिकाओं में निहित ब्राउज़र के माध्यम से कुछ भी एक्सेस नहीं कर सकता ...

— dcolumbus

@dcolumbus यदि आप जो 404 प्राप्त कर रहे हैं, वह Laravel (अर्थात सर्वर डिफॉल्ट नहीं) द्वारा जनरेट किया गया है, तो आप अपने .htaccess (आप Apache का उपयोग कर रहे हैं) में निम्नलिखित पंक्ति याद कर रहे होंगे: "RewriteCond%" REQUEST_FILENAME}! -f "। उस पंक्ति को इसमें index.php के साथ एक से ऊपर जाना चाहिए, और उन रास्तों के अनुरोधों को रोका जाएगा जो फ़ाइल सिस्टम में मौजूद हैं जिसे लारवेल के राउटिंग सिस्टम द्वारा नियंत्रित किया जा रहा है। यदि 404 प्राप्त लारवेल द्वारा उत्पन्न नहीं किया जाता है, तो आपको .htaccess को संसाधित करने के लिए अपने Apache config में "AllowOverride All" को जोड़ना होगा (अधिक जानकारी के लिए Apache डॉक्स देखें)।

— tjbp

उन्होंने कहा कि वह सीएसएस फाइलों को व्यू फोल्डर के अंदर रखना चाहते हैं, न कि पब्लिक फोल्डर, एसेट () और एचटीएमएल :: स्टाइल / एचटीएमएल :: स्क्रिप्ट के सभी प्वाइंट्स पब्लिक डायरेक्टरी में हैं, लार्वेल एप फोल्डर के अंदर कुछ भी नहीं होने देता है। सुरक्षा उद्देश्यों के लिए बाहरी मामलों द्वारा पहुंच। यहां तक कि अगर वहाँ सूचकांक भी है। एफपी या कोई फर्क नहीं पड़ता कि वह क्या चाहता है।

— ब्रायन पी

26

आप एक सामान्य लिंक टैग भी लिख सकते हैं जिसे आप सामान्य रूप से चाहते हैं और फिर href अट्रैक्शन पर उपयोग कर सकते हैं:

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

बेशक आपको सार्वजनिक / सीएसएस के तहत अपनी सीएसएस फ़ाइल डालने की आवश्यकता है

— डिएगो Castaño
स्रोत

@dcolumbus 404 शायद इसलिए गलत रास्ता दे रहा है, उपसर्ग / सार्वजनिक / जोड़ने का प्रयास करें, लार्वा डिफ़ॉल्ट में उपसर्ग / सार्वजनिक / / गणतंत्र / वर्ग / असामान्य.कैंस है

— david valentino

23

हम निम्नलिखित तरीके से ऐसा कर सकते हैं।

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

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

यह Laravel के सार्वजनिक फ़ोल्डर में शैली फ़ाइल खोजेगा और फिर उसे रेंडर करेगा।

— अहमद शरीफ
स्रोत

1

कूल अहमद, यू लिंक स्टाइल-शीट पर http <लिंक href = "{{{संपत्ति (/ css / style.css ')}}}}" rel = "स्टाइलशीट"> पर ठीक काम करेगा, लेकिन यदि आप उपयोग कर रहे हैं httpsतो अनुरोध अवरुद्ध हो जाएगा और एक मिश्रित सामग्री त्रुटि आ जाएगी, इसे https पर उपयोग करने के लिए आपको secure_asset<लिंक href = "{{{Secure_asset ('/ css / style.css')}}}}" rel = "स्टाइलशीट 1 का उपयोग करना होगा > laravel.com/docs/5.1/helpers#method-secure-asset

— पांडे

केवल 2 कोष्ठक की आवश्यकता होती है - 3. नहीं।

— ओलेग अब्राजेव

यदि आप लारवल 5 के लिए इस समाधान का उपयोग करते हैं तो आपको LaravelCollective Forms & HTML प्रदाता को स्थापित करने की आवश्यकता है। निर्देश के लिए देखें: laravelcollective.com/docs/5.4/html । आपके द्वारा कंपोज़र अपडेट करने के बाद "कंपोज़र अपडेट" चलाना न भूलें।

— असिमोव

15

जैसा कि अहमद शरीफ ने कहा है, आप स्टाइलशीट को लिंक कर सकते हैं http

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

लेकिन यदि आप उपयोग कर रहे हैं httpsतो अनुरोध अवरुद्ध हो जाएगा और मिश्रित सामग्री त्रुटि आ जाएगी, इसे उपयोग करने के लिए secure_assetजैसे https का उपयोग करना होगा

<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

— नवीन

10

चूंकि Laravel 5 HTMLकक्षा में डिफ़ॉल्ट रूप से शामिल नहीं है।

यदि आप फॉर्म या HTML मददगारों का उपयोग कर रहे हैं, तो आपको एक त्रुटि बताते हुए क्लास 'फॉर्म' नहीं मिला या क्लास 'एचटीएमएल' नहीं मिला। लारवेल 5.0 में फॉर्म और HTML सहायकों को हटा दिया गया है; हालाँकि, समुदाय-संचालित प्रतिस्थापन हैं जैसे कि लारवेल कलेक्टिव द्वारा बनाए रखा गया है।

आप अपनी CSS या JS फ़ाइलों को शामिल करने के लिए निम्न लाइन का उपयोग कर सकते हैं:

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

— बोनो
स्रोत

2

मुझे लगता है कि यह उत्तर अधिक होना चाहिए क्योंकि यह पसंदीदा तरीका लगता है, क्योंकि एचटीएमएल वर्ग को हटा दिया गया है।

— असिमोव

7

लार्वा 5.4 के लिए अद्यतन ----

सभी उत्तर में लारवल के लिए एचटीएमएल वर्ग का उपयोग किया गया है, लेकिन मुझे लगता है कि यह अब लार्वा 5.4 में मूल्यह्रास कर दिया गया है, इसलिए अपनी सीएसएस और जेएस फाइलों को सार्वजनिक रूप से डालें-> सीएसएस / जेएस और अपने एचटीएमएल में उनका संदर्भ लें

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

— Eminem347
स्रोत

यह अच्छी तरह से Laravel <link href = "सीएसएस / common.css" rel = "स्टाइलशीट"> css.common.css आवश्यक नहीं में काम कर रहा है

— उद्धव Sarvaiya

5

यह संभव नहीं है भाई, Laravel मानता है कि सब कुछ सार्वजनिक फ़ोल्डर में है।

तो मेरा सुझाव है:

सार्वजनिक फ़ोल्डर पर जाएं ।
एक फ़ोल्डर बनाएँ, अधिमानतः सीएसएस नाम ।
संबंधित चीज़ों को व्यवस्थित करने के लिए फ़ोल्डर बनाएँ।
संबंधित सीएसएस को उन फ़ोल्डरों के अंदर रखें, जो आपके लिए आसान होंगे।

या

यदि आप वास्तव में दृश्य फ़ोल्डर के अंदर सीएसएस लगाने के लिए जोर देते हैं, तो आप साइमलिंक बनाने की कोशिश कर सकते हैं (आप मैक हैं इसलिए यह ठीक है, लेकिन खिड़कियों के लिए, यह केवल आपके सीएसएस फ़ोल्डर निर्देशिका से जनता के लिए Vista, सर्वर 2008 या अधिक से अधिक काम करेगा) फ़ोल्डर और आप {{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">

अगर फ़ाइल निर्देशिका सही है तो भी यह काम नहीं करेगा क्योंकि लारवेल सुरक्षा उद्देश्यों के लिए ऐसा नहीं करेगा, लारावेल आपसे बहुत प्यार करता है।

— ब्रायन पी
स्रोत

5

मेरी राय में सीएसएस और जेएस के लिए मार्ग का सबसे अच्छा विकल्प निम्नलिखित कोड का उपयोग करें:

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

इसलिए यदि आपके पास सार्वजनिक फ़ोल्डर में css फ़ोल्डर के अंदर main.css नामक सीएसएस फ़ाइल है, तो यह निम्न होना चाहिए:

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

— kqcreations
स्रोत

4

अपने 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">

यह लारवेल के किसी भी संस्करण में ठीक काम करता है

— suzan
स्रोत

3

उस सीएसएस या जेएस फ़ाइल को कॉपी करें जिसे आप सार्वजनिक फ़ोल्डर में शामिल करना चाहते हैं, या आप उन लोगों को सार्वजनिक / सीएसएस या सार्वजनिक / जेएस फ़ोल्डर में संग्रहीत करना चाहते हैं।

उदाहरण के लिए। आप सार्वजनिक निर्देशिका में css फ़ोल्डर से style.css फ़ाइल का उपयोग कर रहे हैं तब आप उपयोग कर सकते हैं

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

लेकिन लारवेल 5.2 में आपको उपयोग करना होगा

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

और यदि आप जावास्क्रिप्ट फ़ाइलों को सार्वजनिक / js फ़ोल्डर से शामिल करना चाहते हैं, तो यह काफी सरल है

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

और लारवेल 5.2 में आपको उपयोग करना होगा

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

फ़ंक्शन url()एक लार्वा हेल्पर फ़ंक्शन है जो दिए गए पथ के लिए पूरी तरह से योग्य URL उत्पन्न करेगा।

— अक्षय खले
स्रोत

3

अपने सीएसएस को सार्वजनिक फ़ोल्डर में रखें, फिर

इसे आप ब्लेड फ़ाइल में जोड़ें

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

— Saengdaet
स्रोत

3

उपयोग {!! नए लार्वा में

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

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

— तरुण शर्मा
स्रोत

2

लारवेल 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
स्रोत

"सार्वजनिक" फ़ोल्डर को बताने की आवश्यकता नहीं है। उदाहरण के लिए, इसने मेरे लिए काम किया। <लिंक href = "{{एसेट ('css / bootstrap.min.css')}}" rel = "स्टाइलशीट">। आपका उदाहरण काम नहीं आया।

— ईसरू

2

उन लोगों के लिए जिन्हें सार्वजनिक फ़ोल्डर से js / css बाहर रखना है, जो भी कारणों से, आधुनिक लारवेल में आप उप-विचारों का उपयोग कर सकते हैं । कहो कि आपके विचार संरचना है

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फ़ाइलों में अपने जेएस कोड लपेटें<script> टैग

views-css.blade.phpअपनी शैलियों को <style>टैग में लपेटें

वह लारवेल, और आपके कोड संपादक को बताएगा कि वे वास्तव में jsऔर cssफाइलें हैं। आप अतिरिक्त HTML, SVGs और अन्य सामान जो ब्राउज़र-रेंडर करने योग्य है, के साथ भी कर सकते हैं

— आर्थर तारसोव
स्रोत