Laravel 5.6中仅在指定视图加载Summernote相关CSS/JS的方法

嘿，作为Laravel新手，你这个需求其实很容易实现，核心就是利用Blade模板的区块（section）功能，只在需要的视图里加载对应的资源。下面是具体步骤：

1. 修改主模板，预留资源注入区块 #

首先调整你的master.blade.php，在<head>里预留样式注入的位置，在</body>结束前预留脚本注入的位置，这样子视图就能针对性地添加资源：

<html>
<head>
    @include('header')
    <!-- 预留样式注入区块 -->
    @yield('styles')
</head>
<body>
    @yield('content')
    @include('footer')
    <!-- 预留脚本注入区块 -->
    @yield('scripts')
</body>
</html>

2. 在编辑器视图中注入Summernote资源并初始化 #

接下来修改你的editor.blade.php，通过@section填充刚才预留的区块，同时添加编辑器的HTML容器和初始化代码：

@extends('master')

@section('content')
    <!-- Summernote编辑器容器 -->
    <textarea id="summernote-editor"></textarea>
@endsection

@section('styles')
    <!-- 引入Summernote的CSS -->
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
@endsection

@section('scripts')
    <!-- 注意：Summernote依赖jQuery，必须先引入jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <!-- 引入Summernote的JS -->
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
    
    <!-- 初始化Summernote编辑器 -->
    <script>
        $(document).ready(function() {
            $('#summernote-editor').summernote({
                height: 300, // 设置编辑器默认高度
                // 可根据需求添加更多配置，比如自定义工具栏按钮、语言等
            });
        });
    </script>
@endsection

额外注意事项 #

• 如果你的项目已经全局引入了jQuery（比如在header.blade.php或footer.blade.php里），记得删掉editor.blade.php里的jQuery引用，避免重复加载。
• 如果你不想使用CDN资源，可以下载Summernote的CSS和JS文件放到项目的public目录下，然后用Laravel的asset()函数引入，比如：{{ asset('vendor/summernote/summernote-bs4.min.css') }}

这样设置后，只有访问editor.blade.php对应的页面时，Summernote的CSS和JS才会被加载，其他页面完全不会引入这些资源，完美满足你的需求~

内容的提问来源于stack exchange，提问作者Prasad Kavinda