在刀片模板中包含 js 文件
Posted
技术标签:
【中文标题】在刀片模板中包含 js 文件【英文标题】：include js file in blade templating 【发布时间】：2020-11-21 12:25:39 【问题描述】：我正在使用 laravel 和刀片模板引擎编写应用程序，并且。我将我的页面特定脚本包含在一个名为 page-scripts 的部分中，该部分在放置主脚本的主布局中产生，但这不起作用，我不断收到“无法读取 null 的属性 x”，这意味着 dom 元素脚本不可见。
这是主要布局
<html lang=" str_replace('_', '-', app()->getLocale()) ">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content=" csrf_token() ">
<title> config('app.name', 'Laravel') </title>
<!-- Scripts -->
<script src=" asset('js/app.js') " defer></script>
@yield('page-scripts')
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,400;0,800;0,900;1,800&display=swap" rel="stylesheet">
<!-- Styles -->
<link href=" asset('css/main.css') " rel="stylesheet">
</head>
<body>
<div id="app">
@auth
<nav class="flex items-center justify-between flex-wrap bg-red-500 p-6 font-nunito">
<div class="flex items-center flex-shrink-0 text-white mr-6">
<span class="font-semibold text-xl tracking-tight">Innova</span>
</div>
<div class="block lg:hidden">
<button class="flex items-center px-3 py-2 border rounded text-white border-teal-400 hover:text-white hover:border-white">
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
</button>
</div>
<div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
<div class="text-sm lg:flex-grow">
<a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-white hover:text-white mr-4">
Lista canali
</a>
<a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-white hover:text-white mr-4">
Generale
</a>
<a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-white hover:text-white">
Profilo
</a>
</div>
<div>
<a href=" route('logout') "
onclick="event.preventDefault();
document.getElementById('logout-form').submit();" class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-red-500 hover:bg-white mt-4 lg:mt-0">Logout</a>
<form id="logout-form" action=" route('logout') " method="POST" style="display: none;">
@csrf
</form>
</div>
</div>
</nav>
@endauth
<main class="py-4">
@yield('content')
</main>
</div>
</body>
</html>
这里有我的一页
@section('page-scripts')
<script type="text/javascript" src=" URL::asset('js/page.js') "></script>
@endsection
@section('content')
<form class="w-full max-w-lg" action="'/post/'.Request::path()" method="POST">
@csrf
<div class="flex flex-wrap -mx-3 mb-6 font-nunito">
<div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
<label class="block tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-first-name">
Condividi qualcosa con gli altri innovatori
</label>
<input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" id="grid-first-name" name="title" placeholder="Titolo"/>
@error('title')
<p class="text-red-500 text-xs italic">Il post deve avere un titolo</p>
@enderror
<textarea class="appearance-none block w-full bg-gray-200 text-gray-700 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" id="grid-first-name" name="body" placeholder="Testo"></textarea>
@error('body')
<p class="text-red-500 text-xs italic">Niente post muti ci spiace</p>
@enderror
<div id="tag-output"></div>
@error('tag')
<p class="text-red-500 text-xs italic">il post deve contenere tag</p>
@enderror
<input id='tag-input' class="appearance-none block w-full bg-gray-200 text-gray-700 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" id="grid-first-name" placeholder="Tags"/>
<input id='tag-value' style="display: none" name="tags" placeholder="Tags"/>
<button class="flex-shrink-0 bg-red-500 hover:bg-red-500 border-red-500 hover:border-red-500 text-sm border-4 text-white py-1 px-2 rounded" >
Condividi
</button>
</div>
</div>
</form>
@forelse($channel->posts as $post)
<h1>$post->title</h1>
@foreach($post->comments as $comment)
<div id="$comment->id" class="comment-container">
<p>$comment->body</p>
<button id="reply-button-$comment->id">reply</button>
<form id='reply-form-$comment->id' action="/$channel->id/reply/$comment->id" method="POST" class="invisible">
@csrf
<input class=" appearance-none block w-full bg-gray-200 text-gray-700 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" id="grid-first-name" name="body" placeholder="commenta"/>
@error('body')
<p class="text-red-500 text-xs italic">la risposta deve avere un testo</p>
@enderror
</form>
</div>
@endforeach
<form action="/$channel->id/comment/$post->id" method="POST">
@csrf
<input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" id="grid-first-name" name="body" placeholder="commenta"/>
<button class="flex-shrink-0 bg-red-500 hover:bg-red-500 border-red-500 hover:border-red-500 text-sm border-4 text-white py-1 px-2 rounded" >
Commenta
</button>
@error('body')
<p class="text-red-500 text-xs italic">il commento deve avere un testo</p>
@enderror
</form>
@empty
<p>No posts yet</p>
@endforelse
@endsection
在主布局中包含我的所有脚本是行不通的，因为它们对没有通用页面元素的其他页面也可见
我该如何进行这项工作？
【问题讨论】：
【参考方案1】：JS 的处理方式不同。它不是产生的，而是堆叠的。
改变
@yield('page-scripts')
到
@stack('page-scripts')
并使用
@push('page-scripts')
<script type="text/javascript" src=" URL::asset('js/page.js') "></script>
@endpush
在你看来。查看更多信息：https://laravel.com/docs/7.x/blade#stacks
【讨论】：
以上是关于在刀片模板中包含 js 文件的主要内容，如果未能解决你的问题，请参考以下文章
在 Laravel 5 Blade 模板中包含 SVG 内容
如何在单独的 js 文件中使用访问 django 模板变量，而不是在同一个 html 文件中包含小脚本块？
无法使用 Node Js App 在句柄栏模板中包含 CSS 样式