Używam Laravel 5.0, Form i Html Helper są usunięte z tej wersji, nie wiem, jak dołączyć zewnętrzne pliki css i js do mojego pliku nagłówkowego. Obecnie używam tego kodu.
<link rel="stylesheet" href="/css/bootstrap.min.css"> <!--- css file --->
<script type="text/javascript" src="/js/jquery.min.js"></script>
Odpowiedzi:
Myślę, że właściwy sposób to ten:
<script type="text/javascript" src="{{ URL::asset('js/jquery.js') }}"></script>
Tutaj mam
js
katalog wapp/public
folderze laravel . Tam mamjquery.js
plik. Funkcja URL :: asset () generuje niezbędny adres URL. To samo dotyczy CSS:<link rel="stylesheet" href="{{ URL::asset('css/somestylesheet.css') }}" />
Mam nadzieję że to pomoże.
Pamiętaj, że stare metody:
i
są przestarzałe i nie będą działać w Laravel 5!
źródło
URL::asset
dosłownie wskaże twój folder publiczny.asset()
metody pomocniczej. Robi to samo.src="/js/jquery.js"
ihref="https://stackoverflow.com/css/somestylesheet.css"
?asset()
i działa. Czy ktoś może wyjaśnić różnicę?asset()
działa nawet wtedy, gdy uzyskujesz dostęp z podkatalogu, gdzie dodawaniesrc="/js/jquery.js"
nie działa, ponieważ zawsze oczekuje plików na poziomie głównym, a te pliki js nie zostaną znalezione, więc 404sSpróbuj.
Możesz po prostu przekazać ścieżkę do arkusza stylów.
{!! HTML::style('css/style.css') !!}
Możesz po prostu przekazać ścieżkę do javascript.
{!! HTML::script('js/script.js') !!}
Dodaj następujące wiersze w wymaganej sekcji pliku composer.json i uruchom aktualizację kompozytora „illuminate / html”: „5. *” .
Zarejestruj usługodawcę w config / app.php , dodając następującą wartość do tablicy dostawców:
'Illuminate\Html\HtmlServiceProvider'
Zarejestruj fasady, dodając te dwie linie do tablicy aliasów:
'Form'=> 'Illuminate\Html\FormFacade', 'HTML'=> 'Illuminate\Html\HtmlFacade'
źródło
W Laravel 5.1,
<link rel="stylesheet" href="{{URL::asset('assets/css/bootstrap.min.css')}}"> <script type="text/javascript" src="{{URL::asset('assets/js/jquery.min.js')}}"></script>
Gdzie lokalizacja folderu zasobów znajduje się w folderze publicznym
źródło
używam w ten sposób, nie zapomnij umieścić swojego pliku css w folderze publicznym.
na przykład włączam mój bootstrap css
"root/public/bootstrap/css/bootstrap.min.css"
dostęp z nagłówka:
<link href="{{ asset('bootstrap/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css" >
Mam nadzieję, że to pomoże
źródło
Umieść swoje zasoby w katalogu publicznym i użyj następujących
przykład
<link rel="stylesheet" type="text/css" href="{{ URL::to('css/style.css') }}"> <script type="text/javascript" src="{{ URL::to('js/jquery.min.js') }}"></script>
źródło
{{ HTML::style('yourcss.css') }} {{ HTML::script('yourjs.js') }}
źródło
URL::asset() or app_path()
?HTML
tego musiHtml
.Najpierw musisz umieścić swoje pliki
.css
lub.js
wpublic
folderze swojego projektu. Możesz tworzyć do niego podfoldery i przenosić pliki do podfolderów. Następnie musisz wykonać następujące czynności<link rel="stylesheet" href="{{asset('css/your_css_file.css')}}"> <script src="{{asset('js/your_js_file.js')}}"></script>
W moim przykładzie utworzyłem dwa podfoldery o nazwach css i js. Umieszczam wszystkie pliki
.css
i.js
w odpowiednich folderach i używam ich w dowolnym miejscu . Dziękuję i mam nadzieję, że to pomoże.źródło
Ok, więc udało mi się znaleźć wersję 5.2. Najpierw musisz utworzyć folder zasobów w folderze publicznym, a następnie umieścić w nim folder css i wszystkie pliki css, a następnie połączyć go w następujący sposób:
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
Mam nadzieję, że to pomoże!
źródło
Laravel 5.5 zawiera mix, zamiennik dla Elixir, zewnętrzny css (sass) można wyodrębnić do zasobów / asset / css (sass) i zaimportować do app.css (scss) lub podać poprawną ścieżkę do folderu node_module, który zawiera biblioteki i może być używany jako
<link rel="stylesheet" href="{{ mix('css/app.css') }}" >
To samo można zrobić dla JavaScript.
źródło
Najpierw musisz zainstalować klasę pomocniczą Illuminate Html:
composer require "illuminate/html":"5.0.*"
Następnie musisz otworzyć /config/app.php i zaktualizować w następujący sposób:
'providers' => [ ... Illuminate\Html\HtmlServiceProvider::class, ], 'aliases' => [ ... 'Form' => Illuminate\Html\FormFacade::class, 'HTML' => Illuminate\Html\HtmlFacade::class, ],
Aby potwierdzić, że działa, użyj następującego polecenia:
php artisan tinker > Form::text('foo') "<input name=\"foo\" type=\"text\">"
Aby dołączyć zewnętrzny plik CSS do swoich plików, użyj następującej składni:
{!! HTML::style('foo/bar.css') !!}
źródło
Jeśli masz plik zewnętrzny
.css
lub.js
plik do dodania do swojej strony!Moja wersja: Laravel Framework 5.7
npm install
w swoim terminalu.node_modules
.app.js
.npm run dev
w swoim terminalu.Twoje skrypty zostaną zaktualizowane, a następnie skompilowane i przeniesione do
public/js/app.js
. dodanie.js
pliku do folderu publicznego nie wpłynie na twoją stronę.npm install
w swoim terminalu.node_modules
.app.scss
.npm run dev
w swoim terminalu.Twoje skrypty zostaną zaktualizowane, a następnie skompilowane i przeniesione do
public/css/app.css
. dodanie.css
pliku do folderu publicznego nie wpłynie na twoją stronę.Laravel JavaScript & CSS Scaffolding
Kompilowanie zasobów YouTube
źródło
Mogę się spóźnić na imprezę, ale łatwo jest dołączyć JS i CSS w Laravel Way, używając po prostu funkcji asset ()
na przykład
<link rel="stylesheet" href="{{ asset('css/app.css') }}" />
Mam nadzieję, że to pomoże
źródło
Korzystałem z
<script type="text/javascript" src="{{ URL::asset('js/jquery.js') }}"></script> for javascript and <link rel="stylesheet" href="{{ URL::asset('css/main.css') }}"> for css, this points to the public directory, so you need to keep your css and js files there.
źródło
Istnieje wiele sposobów dołączania zewnętrznych plików css i js, jak określono w poniższym kodzie, ale możesz wybrać jeden z nich, przetestowałem je wszystkie, działają tak samo.
<link rel="stylesheet" href="{{ asset('css/stylesheet.css') }}" /><!--Recommended--> <link rel="stylesheet" href="{{ URL::asset('css/somestylesheet.css') }}" /> <link rel="stylesheet" href="{{ URL::to('css/otherstylesheet.css') }}" /> <link rel="stylesheet" href="{{ url('css/anotherstylesheet.css') }}" />
Może jest więcej sposobów, aby go załadować.
ale pamiętaj, że jeśli ładujesz css i js z innego folderu niż publiczny, lepiej go użyć
Laravel mix
.źródło