লারাভেল স্টাইলশিট এবং জাভাস্ক্রিপ্ট অ বেস-বেস রুটের জন্য লোড হয় না


97

ঠিক আছে - আমি জানি এটি সত্যিই প্রাথমিক সমস্যা, তবে আমি তা বের করতে পারি না। এটি লারাভেল সম্পর্কিত একটি প্রশ্ন।

মূলত, আমার স্টাইলশীটগুলি আমার ডিফল্ট লেআউট ভিউতে এম্বেড করা আছে। আমি বর্তমানে তাদের লিঙ্ক করার জন্য কেবল নিয়মিত CSS ব্যবহার করছি, যেমন:

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

যখন আমি একক স্তরের রুটে যেমন / প্রায় থাকি তখন এটি দুর্দান্ত কাজ করে তবে গভীর / about যেমন আমার সম্পর্কে / যখন যান তখন কাজ করা বন্ধ করে দেয় ।

আমি যদি ক্রোমের বিকাশকারী কনসোলটি দেখি তবে আমি নীচের কয়েকটি ত্রুটি দেখতে পাচ্ছি (কেবল গভীর রাস্তার জন্য):

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://example.dev/about/css/app.css".

সুতরাং পরিষ্কারভাবে এটি এখন "সম্পর্কে" ফোল্ডারের ভিতরে সিএসএস খুঁজছে - যা অবশ্যই কোনও ফোল্ডার নয়।

রুট নির্বিশেষে সম্পদের জন্য আমি একই জায়গায় এটি দেখতে চাই।

উত্তর:


169

লারাভেল 4 এবং 5 এর জন্য:

<link rel="stylesheet" href="{{ URL::asset('assets/css/bootstrap.min.css') }}">

URL::assetআপনার project/public/ফোল্ডারে লিঙ্ক করবে , সুতরাং আপনার স্ক্রিপ্টগুলি সেখানে ছাঁটাই করুন।


দ্রষ্টব্য: এর জন্য আপনাকে " ব্লেড টেম্প্লেটিং ইঞ্জিন " ব্যবহার করতে হবে । ফলক ফাইলগুলি .blade.phpএক্সটেনশন ব্যবহার করে ।


8
এটি নিশ্চিত করেই এটি লারাভেল 5 এবং 5.1 তেও কাজ করে । ধন্যবাদ.
ফিলিপোভিভিć

4
আমি আমার নিজস্ব প্যাকেজ তৈরি করেছি। আমি কি এর ভিতরে সিএসএস রাখতে পারি? যদি তা হয় তবে আমি কীভাবে নিজের প্যাকেজ থেকে সিএসএস অন্তর্ভুক্ত করতে পারি?
সোলিট

আপনি এর asset()সহায়ক পদ্ধতি তাত্ক্ষণিকভাবে ব্যবহার করতে পারেন URL::asset()। এটি একই কাজ করে।
মারেক স্কিবা

4
লারাভেল 5.4 এও কাজ করে ।
ব্যবহারকারী 3426112

আপনি যদি উত্পাদনে নয় তবে উন্নয়নের ক্ষেত্রে ক্ষুদ্র সংস্করণ চান?
জিওডেডসিক

52

লারাভেল 4

এটি করার সর্বোত্তম এবং সঠিক উপায়

সিএসএস যুক্ত করা হচ্ছে

এইচটিএমএল :: শৈলী আপনার প্রকল্প / পাবলিক / ফোল্ডারে লিঙ্ক করবে

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

জেএস যুক্ত করা হচ্ছে

এইচটিএমএল :: স্ক্রিপ্ট আপনার প্রকল্প / পাবলিক / ফোল্ডারে লিঙ্ক করবে

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

13

আপনি আপনার সম্পদের জন্য আপেক্ষিক পাথ ব্যবহার করছেন, একটি নিখুঁত পথে পরিবর্তন করুন এবং সবকিছু কাজ করবে ("সিএসএস" এর আগে একটি স্ল্যাশ যুক্ত করুন।

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

আপনার অ্যাপ্লিকেশন সাইটের একটি উপ-ডিরেক্টরিতে থাকলে এটি কাজ করবে না। তারপরে আপনি যে বিষয়গুলিতে নিজের সম্পদের জন্য খুব বেশি পিছনে ফিরে যাচ্ছেন সেখানে ইস্যুটি চালিয়ে যান। আমার সুপারিশটি হ'ল @ ক্রিস প্রদত্ত সমাধানটি ব্যবহার করা। এটি সমস্ত অনুমানকে বাদ দেয় এবং আপনাকে আপনার অ্যাপ্লিকেশনটি যে কোনও জায়গায় সরিয়ে নিতে দেয় এবং এখনও নিশ্চিত করে যে এটি সম্পদগুলি সঠিকভাবে লোড করবে।
টিম এফ

10

লারাভেল ৫-এ ,
আপনার দৃষ্টিতে জেএস ফাইল লোড করার জন্য দুটি উপায় রয়েছে
প্রথমে এইচটিএমএল সহায়ক ব্যবহার করছে, দ্বিতীয়টি সম্পদ সহায়কগুলি ব্যবহার করছে।
এইচটিএমএল সহায়ক ব্যবহার করতে আপনাকে প্রথমে কমান্ডলাইনের মাধ্যমে এই প্যাকেজটি ইনস্টল করতে হবে:

composer require illuminate/html

তারপরে আপনাকে এটিকে পুনরায় নিবন্ধিত করতে হবে, সুতরাং কনফিগারেশন / অ্যাপ.এফপি যান এবং সরবরাহকারী অ্যারেতে এই লাইনটি যুক্ত করুন

'Illuminate\Html\HtmlServiceProvider'

তারপরে আপনাকে আপনার এইচটিএমএল প্যাকেজটির জন্য এলিয়াসগুলি সংজ্ঞায়িত করতে হবে তাই কনফিগারেশন / অ্যাপ.পিএফ-এ এলিয়াস অ্যারে যান এবং এটি যুক্ত করুন

'Html'     => 'Illuminate\Html\HtmlFacade'

এখন আপনার এইচটিএমএল সহায়কটি ইনস্টল করা আছে যাতে আপনার ব্লেড ভিউ ফাইলগুলিতে আপনি এটি লিখতে পারেন:

{!! Html::script('js/test.js') !!}

এটি আপনার প্রজেক্ট_রোট / পাবলিক / জেএস / টেস্ট.জেজে আপনার টেস্ট.জেএস ফাইলের সন্ধান করবে।
/////////………………………………………………………………………………………………………………………………………… /////////////
এইচটিএমএল হেল্পারের পরিবর্তে সম্পদ সহায়কগুলি ব্যবহার করতে, আপনার ভিউ ফাইলগুলিতে আপনাকে এই জাতীয় লেখনী লিখতে হবে:

<script src="{{ URL::asset('test.js') }}"></script>

এটি প্রকল্প_রোট / সংস্থানসমূহ / সম্পদ / টেস্ট.জেজে টেস্ট.জেএস ফাইলের সন্ধান করবে


আলোকিত / এইচটিএমএল পরিত্যক্ত হয়েছে। পরিবর্তে ব্যবহারকারী লারাভেলকোলেক্টিভ / এইচটিএমএল।
জিওএইডসিক

আপনি ব্যবহার করতে পারেন <script src="{{ url(asset('test.js')) }}"></script>(বা <script src="{{ url(mix('test.js')) }}"></script>যদি আপনি লারাভেল মিক্স ব্যবহার করছেন)।
25:59

9

যদি আপনি লারাভেল 3 এবং আপনার সিএসএস / জেএস ফাইলগুলি এর মতো সর্বজনীন ফোল্ডারের অভ্যন্তরে ব্যবহার করেন

public/css
public/js

তারপরে আপনি এ জাতীয় ব্লেড টেম্পলেট ব্যবহার করে তাদের কল করতে পারেন

{{ HTML::style('css/style.css'); }}
{{ HTML::script('js/jquery-1.8.2.min.js'); }}

6

আমি আপনাকে {প্রকল্প} / অ্যাপ্লিকেশন / উত্স। php এ যাওয়ার আগে এটি রুট ফিল্টারে রাখার পরামর্শ দিই

Route::filter('before', function()
{
    // Do stuff before every request to your application...    
    Asset::add('jquery', 'js/jquery-2.0.0.min.js');
    Asset::add('style', 'template/style.css');
    Asset::add('style2', 'css/style.css');

});

এবং ফলক টেম্পলেট ইঞ্জিন ব্যবহার করে

{{ Asset::styles() }}
{{ Asset::scripts(); }}

বা লারাভেল সম্পদ ডক্স পরিচালনার বিষয়ে আরও অনেক কিছু


হ্যাঁ, এই নতুন লারাভেল সবকিছু জটিল করে তুলেছে, সম্পদ এমনকি প্রোফাইলারও এখন আর ডকুমেন্টেশনে নেই ..
অ্যান্ড্রি ইউসুয়া

3

মধ্যে laravel 4আপনি শুধু আটকাতে হবে {{ URL::asset('/') }}এই ভাবে:

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

এটি একই জন্য:

  <script language="JavaScript" src="{{ URL::asset('/') }}js/jquery.js"></script>
  <img src="{{ URL::asset('/') }}img/image.gif">

3

মিক্স সহায়ক সহ লারাভেল 5.4:

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

3

লারাভেল ৫.7 এ আপনার সিএসএস বা জেএস ফাইলটিকে পাবলিক ডিরেক্টরিতে রেখে দিন।

সিএসএসের জন্য:

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

জেএসের জন্য:

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

2

আমার মতে সেরা উপায় আপনার HTML এ বেস ট্যাগ যুক্ত করুন

<base href="/" target="_top">

সুতরাং এটি পছন্দ মত জিনিস ব্যবহার করার প্রয়োজন হয় না

{{ HTML::script('js/jquery/jquery-1.11.1.min.js'); }}

লিখো

<script src="js/jquery/jquery-1.11.1.min.js"></script>

আপনার দৃষ্টিতে এবং এটি কার্যকর হবে।

এই মেহোড চিত্র, সিএসএস, স্ক্রিপ্ট হিসাবে বিশদ URL এবং স্থিতিশীল সংস্থানগুলির সাথে ডিল করবে।


2

আপনার যোগ করা উচিত ঠিক ভিন্সার কাছে এটি ছিল

<base href="{{URL::asset('/')}}" target="_top">

এবং স্ক্রিপ্টগুলি তাদের নিয়মিত পথে চলতে হবে

<script src="js/jquery/jquery-1.11.1.min.js"></script>

এর কারণ হ'ল ইমেজ উত্স বা এজাক্স অনুরোধগুলির মতো আপেক্ষিক পথ সহ চিত্রগুলি এবং অন্যান্য জিনিসগুলি বেস পাথ সংযুক্ত ব্যতীত সঠিকভাবে কাজ করবে না।


1

আপনি যদি এটিকে হার্ড কোড করেন তবে আপনার সম্ভবত পুরো পথটি ব্যবহার করা উচিত ( href="http://example.com/public/css/app.css")। তবে, এর অর্থ আপনাকে বিকাশ এবং উত্পাদনের জন্য ইউআরএলগুলি ম্যানুয়ালি সমন্বিত করতে হবে।

উপরের সমাধানগুলির বিকল্পটি <link rel="stylesheet" href="URL::to_asset('css/app.css')" />লারাভেল 3 বা <link rel="stylesheet" href="URL::asset('css/app.css')" />লারাভেল 4 এ ব্যবহার করা হবে এটি আপনাকে আপনার HTMLটি যেভাবে চান তা লেখার অনুমতি দেয়, তবে কোনও পরিবেশে লারাভেল আপনার জন্য সঠিক পথ তৈরি করতে দেয়।


1

এর মতো ব্যবহারের আরও ভাল উপায়,

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

1

মনে করুন আপনি নিজের সর্বজনীন ফোল্ডারের নাম পরিবর্তন করেননি। আপনার সিএসএস এবং জেএস ফাইলগুলি পাবলিক ফোল্ডারে সিএসএস এবং জেএস সাবফোল্ডারগুলিতে রয়েছে। এখন আপনার শিরোনাম হবে:

<link rel="stylesheet" type="text/css" href="/public/css/icon.css"/>
<script type="text/javascript" src="/public/js/jquery.easyui.min.js"></script>

1

শুধু অন্য ইস্যু যুক্ত করুন:

আপনি যদি এই /publicপ্রকল্পটি ব্যবহার করে অপসারণ করতে চান .htaccess,

তারপরে আপনি এটি ব্যবহার করতে পারেন, [ অভ্যন্তরের publicআগে যোগ করুন ]/cssasset()

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

[কখনও কখনও, এটি দরকারী।]


0

লারাভেল 4 এর জন্য: {!! ডাবল কোঁকড়া ধনুর্বন্ধনী {
for এবং লারাভেল 5 এবং উপরের সংস্করণের জন্য: আপনি replace প্রতিস্থাপন করতে পারেন! উচ্চ-শেষ সংস্করণে {{এবং !! by দ্বারা।। দ্বারা

আপনি যদি কোনও কাস্টম সংজ্ঞায়িত ডিরেক্টরিতে জাভাস্ক্রিপ্ট স্থাপন করেন।
উদাহরণস্বরূপ, যদি আপনার jQuery-2.2.0.min.jsডিরেক্টরিটি নীচে স্থাপন করা হয় resources/views/admin/plugins/js/তবে আপনার পক্ষ থেকে *.blade.phpবিভাগটির শেষে যুক্ত করতে সক্ষম হবেন

<script src="{!! asset('resources/views/admin/plugins/js/jQuery-2.2.0.min.js') !!}"></script>

যেহেতু উচ্চ-শেষ সংস্করণ লোয়ার-এন্ড সংস্করণটিকে সমর্থন করে তবে তদ্বিপরীত নয়


0

এটি করার সর্বোত্তম এবং সঠিক উপায়:

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

0

লারাভেল 5.8 এ

<script src="{{asset('js/customPath1/customPath2/customjavascript.js')}}"></script>

স্রেফ আমার জন্য কৌতুক তৈরি।


0

আপনার স্ক্রিপ্ট ফাইলটিকে সর্বজনীন ডিরেক্টরিতে রাখুন (ব্যবহারকারীর জন্য উদাহরণস্বরূপ)

<script type="text/javascript" src="{{asset('js/userFunctions.js')}}">
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.