400-915-1135
laravel模板建站(laravel模板引擎)

laravel模板建站(laravel模板引擎)

发表日期:2022-12-18 14:56:31   作者来源:众诚企业建站   浏览:72


Github上有什么开源的vue+laravel网站代码吗

Laravel5Boilerplate——基于当前Laravel最新版本(Laravel5.1.*)并集成Boilerplate的项目
Laravel5AngularMaterialStarter——这是一个Laravel5.1和AngularJS的原型项目
SomelineStarter——基于Laravel5和Vue.js,用于快速构架RESTfulAPI和Web应用的原型项目
BootstrapCMS——Laravel5.1驱动的功能强大的CMS
October——基于Laravel5,致力于让开发工作变得简单的CMS
PyroCMS——MVC架构的PHP内容管理系统,3.0以前基于CodeIgniter,目前基于Laravel5.1
LavaLite——基于Laravel5.1&Bootstrap3的内容管理系统
TypiCMS——基于Laravel5构建的、支持多语言的内容管理系统
LaravelandAngularJSCMS——基于Laravel5.1和AngularJS的CMS
Microweber——基于Laravel拖拽式生成CMS及在线商店利器
AsgardCMS——基于Laravel构建的、支持模块化和多语言的CMS
Flarepoint——基于Laravel构建的免费开源CRM平台
Laravel.io——Laravel开发者社区
Flarum——免费的、开源的、专注于简约的论坛系统,esoTalk和FluexBB的联合继承者
PHPHub——基于Laravel4.2,积极向上的PHP&Laravel开发者社区
Antvel——基于Laravel5.*
www.lonwin.net
开发的开源电子商务项目
92fiveapp——基于Laravel框架&BackboneJS构建,是一个自托管的、基于web的项目管理应用
Scrumwala——基于Laravel5,项目管理应用
Canvas——基于Laravel5.2开发的轻量级博客系统
Katana——静态博客/站点生成器(支持Markdown和GitHubPages)
Vuedo——基于Laravel和Vue.js构建的博客平台
Wardrobe——专注于写作的最小化博客平台
LaravelAngularAdmin——基于Laravel+Angularjs+Bootstrap+AdminLTE实现的后台模板
Laravel.com——Laravel官网源码
LaravelTricks——Laravel小技巧&小贴士
InvoiceNinja——基于Laravel构建的开源发票及时间跟踪应用
Paperwork——基于Laravel4.X的开源的笔记&归档工具
Cachet——基于Laravel5的开源的状态页系统
StyleCI——由PHPCSFixer开发,提供PHP代码风格持续集成服务
Podcastwala——基于Laravel5,构建属于你自己的播客网站
Deployer——基于Laravel5.1的、免费的、开源的PHP应用部署工具
RSSMonster——基于Lumen开发的RSS聚合器和阅读器
Koel——基于Laravel5.1&Vue.js开发的酷炫音乐流媒体应用
Attendize——基于Laravel框架开发的开源门票及活动管理应用
本回答由网友推荐



怎么将一个WordPress站放到laravel站内

有难度哦,我只会简单点的,如果你是用pageadmin建站系统我还可以帮帮你。你想做其它网站也可以用pageadmin的,不懂可以问我。
本回答由提问者推荐



模板建站有哪些优点?

建站策划:传统建站前期都是需要根据客户自己的需求来设计网站的,好的沟通能减少大量的时间成本,甚至有些客户都不知道从哪里入手,甚至要求开发人员帮客户制定行业需求而开发人员对客户所在行业又不甚了解,所以需求描述肯定会有部分瑕疵,这样会增加后期需求改动成本。
2
建站时间:传统建站一般需要半个月甚至一个月以上,对于想快速建站,肯定是等不起的,这么长时间的建站时间,时效性已经不再。模板建站一般是需要2到3天就可以完成,即使需要微调版面和改版设计也是很短时间完成,因为大致的框架早就设计完成。
3
网站后期维护和升级传统建站在后期维护方面比较麻烦,因为大多数建站公司的后台都是使用用他们自己公司的后台,而不是我们常见的织梦和帝国,这样需要升级和维护需要联系他们,这样也需要交纳一定费用。模板建站都是使用的是开源的网站管理系统后台:比如:“海站堂”的织梦模板和帝国模板,这样自己看看相关教程就可以完成对网站升级和维护,简单方便而且还免费。
4
建站费用:传统建站由于需要很多步骤,建站时间又长,所以价格也不菲,一般会是上千元以上,稍微增加一点功能的网站甚至价格在几千上万元。这是一般的中小站长不能承受的。模板建站几百元就可以完成,在较短时间内使用符合优化的模板这样节约建站时间让客户利益最大化。



模板建站有哪些缺点?模板建站有哪些缺点?

1、模板不能修改,选好了模板,用户无法对其进行独立、随意地编辑,无法自定义模板,共享类模板设计出来的页面,往往是一个呆板而雷同的页面,让人感觉死色沉沉。
2、功能简单且没有个性,在页面、风格、功能、维护管理等方面的功能得不到保障。
3、网站自身服务器的约束性,由于管理和维护工作必须在服务商的服务器上完成,因此用户的一些网站也被牢牢捆绑在该公司的服务器上,用户不可以自由地移植到别的服务器上,用户就失去了自由选择的权利。



Github上有什么开源的vue+laravel网站代码吗

Laravel 5 Boilerplate —— 基于当前Laravel最新版本(Laravel 5.1.*)并集成Boilerplate的项目

Laravel 5 Angular Material Starter —— 这是一个Laravel 5.1和AngularJS的原型项目
Someline Starter —— 基于Laravel 5和Vue.js,用于快速构架RESTful API和Web应用的原型项目

CMS

Bootstrap CMS —— Laravel 5.1驱动的功能强大的CMS
October —— 基于Laravel 5,致力于让开发工作变得简单的CMS
PyroCMS —— MVC架构的PHP内容管理系统,3.0以前基于CodeIgniter,目前基于Laravel 5.1
LavaLite —— 基于Laravel 5.1 & Bootstrap 3的内容管理系统
TypiCMS —— 基于 Laravel 5 构建的、支持多语言的内容管理系统
Laravel and AngularJS CMS —— 基于Laravel 5.1和AngularJS的CMS
Microweber —— 基于 Laravel 拖拽式生成 CMS 及在线商店利器
AsgardCMS —— 基于 Laravel 构建的、支持模块化和多语言的CMS

CRM

Flarepoint —— 基于Laravel构建的免费开源CRM平台

论坛

Laravel.io —— Laravel开发者社区
Flarum —— 免费的、开源的、专注于简约的论坛系统,esoTalk和FluexBB的联合继承者
PHPHub —— 基于Laravel 4.2,积极向上的 PHP & Laravel 开发者社区

电商

Antvel —— 基于 Laravel 5.* www.lonwin.net开发的开源电子商务项目

项目管理

92five app —— 基于 Laravel框架 & Backbone JS 构建,是一个自托管的、基于web的项目管理应用
Scrumwala —— 基于Laravel5,项目管理应用

博客

Canvas —— 基于Laravel 5.2 开发的轻量级博客系统
Katana —— 静态博客/站点生成器(支持Markdown和GitHub Pages)
Vuedo —— 基于 Laravel 和 Vue.js 构建的博客平台

Wardrobe —— 专注于写作的最小化博客平台

后台模板

Laravel Angular Admin —— 基于 Laravel + Angularjs + Bootstrap + AdminLTE 实现的后台模板

其他

Laravel.com —— Laravel官网源码
Laravel Tricks —— Laravel小技巧&小贴士
Invoice Ninja —— 基于Laravel构建的开源发票及时间跟踪应用
Paperwork —— 基于Laravel 4.X的开源的笔记&归档工具
Cachet —— 基于Laravel 5的开源的状态页系统
StyleCI —— 由 PHP CS Fixer开发,提供PHP代码风格持续集成服务
Podcastwala —— 基于Laravel 5,构建属于你自己的播客网站
Deployer —— 基于Laravel 5.1的、免费的、开源的PHP应用部署工具
RSS Monster —— 基于 Lumen 开发的 RSS 聚合器和阅读器
Koel —— 基于 Laravel 5.1 & Vue.js 开发的酷炫音乐流媒体应用
Attendize —— 基于 Laravel 框架开发的开源门票及活动管理应用



wamp怎么安装laravel

一.安装Composer
首先你需要安装Composer,Composer是PHP依赖管理工具,Laravel框架就是使用 Composer 执行安装和依赖管理。
注:
(1)若安装Composer出错,在php.ini中开启php_openssl,php_fileinfo扩展,因为Laravel需要。
备注一下: 由于我自己更新的版本比较多,所以在这儿安装时有些问题,原因我在wamp快捷方式中启动相关扩展,实际上php.ini文件中没有注释掉相应的逗号,所以安装时报错,提示依赖的扩展没有安装。烦请各位在安装的时候排查一下,以防止出错。

(2)安装过程中,选择正确的php.exe位置
二.安装Laravel
Composer安装完成后,在cmd中,你的网站目录执行下面命令即可:

composer create-project laravel/laravel your-project-name

Composer会自动帮你下载Laravel及安装。

三.部署虚拟主机
例如我的项目名称是project:

*:80>
DocumentRoot "E:/www/project/public"
ServerName laravel.dev
ErrorLog "logs/laravel.log"
CustomLog "logs/laravel.log" common

当然,也需要在你的hosts中绑定域名:

127.0.0.1 laravel.dev

至此,安装完成:
四.实现Hello World
通过路由实现打印Hello World,在app/routes.php中新增:

Route::get('test', function()
{
return 'Hello World!';
});

因为Laravel模板使用的是Blade,所以在后面的教程才介绍Controller或view相关!



网友:laravel模板建站

引言

编写代码的时候,我们总是追求写的最少,做的最多。能重用的就要重用, 避免后期更改一处修改,处处修改的困境。而对于模板文件内的HTML内容, 也完全可以如此构造。

本期就来说说模板的页面布局。

单区块布局

很显然,我们不想每写一个页面,都要把logo,导航栏,尾部声明都重新写一遍,那样页面多了起来之后, 改一次头部文件,或者更换logo,或者修改网站的声明,都要把所有页面重新修改一次。

维护起来简直是灾难!

所以laravel blade模板提供了 layout 布局。在目录 resources/views/layouts/ 内添加blade模板文件即可。

比如我们创建一个 app.blade.php 布局文件,并输入以下内容:

<!doctype html><html lang="en">    <head>        <meta charset="UTF-8">        <title>Welcome to Laravel</title>    </head>    <body>       @yield('content')    </body></html>

其中,@yield 指令用于区分当前模板内的section块的名称。我们现在开始使用这个布局。 修改上一章我们测试的 welcome.blade.php 页面模板文件:

@extends('layouts.app')@section('content')    <h1>Laravel Helps You Build Stuff Faster.</h1>    <p>Learn, teach, hack, and make friends with developers in your city.</p>@endsection

其中,@extends 指令表名使用的布局文件,就是我们上面创建的文件。其中,@section...@endsection 部分, 指定了该区域块所要渲染的布局内的位置。

在浏览器打开根目录地址,正常路由到 welcome.blade.php 视图就可以看到输出页面了。

多区块布局

既然单个区块的布局可以正常渲染,毫无疑问,多区块也没有问题。 通常页面会有一个侧边栏sidebar,和主体部分。对于头部和尾部的内容,往往是全局的内容, 而导航栏内可能就是动态变化的,根据用户权限进行选择性地展示。

我们把布局文件 layouts/app.blade.php 文件再增加一些内容:

<div>    @yield('content')</div><div>    @section('advertisement')        <p>Score some Laravel swag in our store!</p>    @show</div>

使用了 @show 指令,其实是一个快捷方式,等同于下面的书写方式:

@endsection@yield('advertisement')

也就是关闭区块,并立即输出该块内容。上面的布局我们解决了一个场景问题,就是假如在侧边栏有一个广告位, 不同的页面路由会追加不同的内容,在模板内我们可以使用 @parent 指令,将内容追加到声明的区块内。

在 welcome.blade.php 模板文件内实现下面的代码:

@extends('layouts.app')@section('content')<h1>Laravel Helps You Build Stuff Faster.</h1>@endsection@section('advertisement')@parent<p>Laravel members always get 10% off at Tron Cafe!</p>@endsection

大家注意,在区块 advertisement 包裹的区域内使用了 @parent 指令,这会把其之后的内容, 追加到区块 advertisement 内,而不是覆盖区块布局的内容。

写在最后

本文通过laravel模板布局的指令介绍,演示了单个和多个区块的用法, 以及如何在模板内引用布局并渲染。特别是对于区块的覆写,还有追加, 可以有效地降低代码冗余度,提升编程效能。

Happy coding :-)

我是@程序员小助手,专注编程知识,圈子动态的IT领域原创作者

首发于推荐超好用的 6 款 Laravel Admin 管理模版 | 码匠技术博客

如果您正在为您的企业调研开发 Admin 管理后台的最佳方案,那么基于 PHP 的 Laravel 框架会是一个不错的选择,它灵活且易用,还提供了一系列开发规范和组件加速我们的开发。而在这篇文章中,码匠将为您介绍几款专门基于 Laravel 打造的美观且常用的 Admin 管理后台模板,这些模板提供了很多开箱即用的功能,不仅确保您可以轻松启动并运行一个 Admin 后台,还为您节省了大量开发时间。

Laravel Admin 管理后台模板的不同类型

在搜索引擎中粗略搜索,你会得到大概 20多种 Laravel Admin 模板的选项,尽管它们表面上看起来很相似,但实际上在用途和架构存在着很大差异。在码匠为大家介绍一些受欢迎选项的具体功能前,让我们先了解 Laravel Admin 模板五个不同的种类,以便结合自身需求更好地做出判断:

脚手架

脚手架主要是通过程序,自动化地创建启动和运行所需的文件和配置来生成 Laravel 样板。例如,假设您想为您的活动业务创建一个管理后台,主要涉及的领域实体为事件、发言人和与会者,脚手架软件包不仅可以自动为每个实体生成模型、控制器、路由、视图等,还包括了 CRUD 操作,这将为您节省乏味又重复地手动创建这些样板的时间。但是,脚手架只能在开始一个项目时才有用,如果您在初始设计中犯了错误,后续则很难进行更改和调整。脚手架软件包的一个例子可以参考 InfyOm Laravel Generator。

Laravel 开发准备之安装脚手架

CRUD

Laravel 框架遵循 MVC(模型-视图-控制器)模式,提供 CRUD 接口是 Laravel Admin 模板的一种流行架构方法。这些是视图和控制器的集合,可以自动添加 CRUD 逻辑和 UI 到现有的模型中。这种结构提供了一种快速获得模块化管理后台的方法,它可以轻松地添加到一个新的应用程序中,或改装到一个现有的应用程序中。一些流行的支持该功能的 Laravel 管理模板包括 Nova、Backpack 和 Orchid 等。

但缺点是,如果您业务上有着复杂的模型关系,可能很难让它按照您的要求来工作。

可视化编程

一个可视化的编程平台能够允许您单纯从一个图形用户界面 (GUI) 来管理您的站点,这有点像 CMS,但可以添加更详细的站点配置。

当您的团队有非开发人员时,一个可视化的编程平台会是一个不错的选择,但这些软件包通常局限在通用功能上。这种类型的后台模板的例子是 Voyager 和 Backpack DevTools。

主题和组件库

一些管理后台模板只关注用户界面,即组件库、主题等等,例如 Creative Tim 的 Argon 管理模板 不提供任何 CRUD 接口或生成器,但提供很多对管理应用程序有帮助的详细的前端组件——如表格、图表、菜单等。

如果您的应用程序已经有了一套完善的后端逻辑,或者后端逻辑希望自己编写,那么这种类型的工具就会很有用。

付费/开源

管理后台模板的另一个不同之处在于它们是付费的还是免费(开源)的,免费的固然是大家所倾向的,但付费软件往往提供更强大的业务模型与客服支持。

如果您的目标是开发一个既能省钱又能省时的工具,那么花少量的钱买一个付费项目可能更适合。如果不希望花钱,那么找一个开源并且有着更活跃的社区的模板是一个更好的选择。

码匠

在您深入了解多种 Laravel Admin 模板之前,不妨先了解下码匠,码匠是一款开发者友好的低代码平台,您无需了解 React 开发、部署等各种细节,就可以快速打通前后端连接 REST API、MySQL、MongoDB 等多种数据源,然后通过一套开箱即用的组件,就可以轻松搭建功能完善的数据看板、数据洞察、Admin 管理后台等多种应用。

使用码匠快速搭建 CRM 系统(具体可参考:)

码匠主要面向国内用户,相较于国外开发的 Admin 后台工具,码匠的 UI 界面设计更加适合国内业务场景。同时码匠整合了多款国内常见数据源,包括飞书、企业微信、钉钉、阿里云 OSS等。不仅如此,码匠还一站式提供了企业内部系统常用的租户管理、细粒度的权限控制、审计日志等功能,让您快速搭建后台应用的同时,也为您的企业信息安全保驾护航。

Laravel Admin 管理后台模板推荐

了解了区分 Laravel 管理后台模板的一些主要因素后,码匠将具体介绍和比较 Laravel 中一些流行的软件包:Nova、Orchid、Backpack、Argon 和 InfyOm Laravel Generator,以便您更好地了解 Laravel Admin 模板并选择出一款适合您的项目。

Laravel Nova

Laravel 官方提供的 Admin 管理模板是 Nova,它主要是由 Laravel 的作者 Taylor Otwell 创建的。它的首次发布是在 2018 年,相对来说较晚。Nova 的架构是一个CRUD 界面,只需很少的配置就能允许用户完全从 UI 界面管理他们的数据库记录。

Nova 提供可配置的 UI 功能,例如搜索、过滤和自定义操作。这些功能开箱即用,也可以在前端和后端进行自定义(Nova 使用 Vue.js 作为前端组件)。

主要特征

在 Nova 中向模型添加 CRUD 操作的机制被称为资源,这些是您可以在命令行上创建的类似控制器的类,例如要创建一个 Post 资源:php artisan nova:resource Post,一个新类会显示在您项目的 app/Nova 目录中,不仅如此,它还会自动显示在 Nova 模板中供您使用。通常大多数 Laravel 模型在 Nova 中工作无需任何额外的配置,但您可以定义具体的细节,如字段如何被编辑等。

此外,Nova 另一个值得关注的特点是允许您在一个或多个模型上执行自定义任务。例如您可以编写一个将用户的会员订阅延长一个月的操作,先在资源文件中编写这方面逻辑,再在用户界面中检查,然后从动作下拉列表中选择操作。

优点由 Laravel 官方团队创建,与 Laravel 功能和设计理念保持一致可与现有 Laravel 项目快速集成UI 界面整洁美观缺点定制化能力相对较低无免费试用,需要付费(小型项目 99 美元,大型项目 199 美元)Orchid

Orchid 主要由俄罗斯开发者 Alexandr Chernyaev 开发,是 Laravel 框架的开源 CRUD 接口包,允许您使用表单生成器、表格过滤和排序以及文本搜索等便利的功能来快速开发管理模板。

Orchid 最吸引人的是它的开源社区,在没有任何付费项目的情况下能够维护好其完善的功能。

主要特征

与 Nova 的开箱即用不同,Orchid 需要您通过名为 screen 的类来创建管理模板的逻辑和外观。每个模板都为特定模型定义 CRUD 接口,可以从任何来源获取数据,包括 Eloquent 模型以及外部 API。此外,您还可以通过布局和组件来自定义屏幕的查询和权限以及视图层。

虽然这比使用 Nova 需要更多的手动操作,但它非常灵活,易于迭代和定制。

优点免费和开源经常迭代更新轻松定制强大的社区以及作者在 GitHub 上的支持(可以看下他的提交记录)缺点不是开箱即用——需要编写代码文档部分有待改进Backpack

Backpack 是罗马尼亚开发者 Cristian T?b?citu 于 2016 年创建的一个 Laravel Admin 项目。它是一个强大的全能工具,因为它不仅有一个 CRUD 接口包,还有一个可选的可视化编程界面,以及它自己的 UI 框架。鉴于这种多功能性,Backpack 不是免费的,但可以为非商业用途提供免费许可。

主要特征

与 Nova 和 Orchid 类似,Backpack 的核心是为应用程序的模型(简称CRUDS)提供一个 CRUD 接口,这些是管理模板的部分,操作由添加到标准 Laravel 类的方法和特点来定义。您可以从命令行生成 CRUDS,或者可以使用 Backpack DevTools 工具,它提供了一个 Web 界面,可以从用户界面快速生成 CRUDS。

Backpack 拥有自己的 UI 软件包,叫为Backstrap。这是基于 CoreUI 和 Bootstrap 4 的,能够确保您的管理站点在没有任何配置的情况下看起来整洁专业。

优点优秀的文档,包含视频教程强大的前端主题非商业项目的免费选项缺点如果您想要所有工具和选项,则相对昂贵Voyager

与我们目前看到的其他管理模板包不同,Voyager 是 Laravel Admin 应用的可视化开发平台,允许您从 UI 生成而不用敲代码。这对于某些类型的项目来说可能是完美的,但您会被限制在一个拓展性有限的 GUI 中,其灵活性远远低于代码。

主要特征

Voyager 提供了一个资源管理器,无论文件是在本地存储中还是在 S3 等远程存储中,您都可以从 UI 中查看、编辑和删除这些文件。它不仅有一个菜单生成器,允许您管理网站的菜单,还有一个数据库管理器,允许您添加、编辑和删除表格。Voyager 是围绕 BREAD 功能构建的,您可以指示任何表的浏览、读取、编辑、添加和删除功能。

优点适合编程经验有限的开发者提供免费视频培训课程,让您快速学习可以轻松扩展和覆盖默认的控制器缺点Laravel 的细粒度配置在视觉构建器中是很难实现的与 Laravel 作为框架而不是 CMS 的理念背道而驰InfyOm Laravel Generator

每当设置 Laravel 项目时,都需要定义每个实体的模型、控制器、路由和视图,这也许很乏味并且需要大量时间。

InfyOm Laravel Generator 是由印度开发公司 InfyOm 创建的工具,它是为创建 Laravel 管理网站而制作的,可以在几分钟内将您所有的模板代码构建起来。

主要特征

开始一个项目时,您需要使用 CLI 或 JSON 文件定义事件及其字段,完成后您可以开始编写脚手架脚本,比如:php artisan infyom:scaffold $MODEL_NAME --fieldsFile=mySchema.json,之后生成器将尝试创建所有的文件和内容,以实现完整的CRUD功能,包括模型、控制器、组件模版、路由、测试案例、数据表等,完成这些后,就会有一个按照您的要求配置出的 Laravel 管理网站。

优点以最佳实践为支架,如 Repository 模式、Swagger 注释和测试案例免费缺点与其他模板相比,UI 模板缺乏亮点需预先了解设计与架构,不适合快速原型设计Argon

Argon Laravel Dashboard 是一个基于 Bootstrap 4 的管理模板,为 Laravel 打造。其专业版(149 美元授权)含有 100+ 灵活的组件,如图表、表格等。Argon 包含一个 Laravel 后端,但非常初级,它不包括我们在其他项目中看到的用于 CRUD 接口、脚手架或可视化编程的任何特殊包。出于这个原因,我认为这个产品最适合那些想自己编写后端逻辑,且主要想在视图层得到帮助的项目。

主要特征

Argon 设计系统基于Bootstrap 4 ,并允许使用 Sass 预处理器轻松自定义 CSS 。它提供了 100 多个 UI 组件,

从按钮和表单输入到图表和图片轮播。

购买 Argon 时,您可以决定要为哪个前端库编写交互方面的内容,包括 jQuery、React、Vue 和 Svelte。Argon 还为 Laravel 后端提供了一些基本的 CRUD 实体,包括用户、角色、类别和项目。

优点设计美观100+ UI 组件有免费版和专业版(售价 149 美元)支持多个前端库缺点模板功能相较其它几款,比较基础

写在最后

在使用 Laravel 构建管理模板时有多种选择,每个工具都有自己的优点和缺点,您选择的工具将取决于您项目的具体要求以及您团队的优势。

本文为原创内容,版权归「码匠Majiang」所有。欢迎文末分享、点赞、在看三连。转载请联系后台~

在Laravel框架中,使用renatomarinho/laravel-page-speed 扩展可以将blade模板渲染的html网页进行压缩、优化。可以节省了网络带宽,使我们的网站具有更快的访问速度。扩展包的文档中说明,可以自动优化网站,优化压缩 35%。接下来看一下如何使用:

安装

GitHub仓库地址

composer require renatomarinho/laravel-page-speed发布配置文件

php artisan vendor:publish --provider="RenatoMarinhoLaravelPageSpeedServiceProvider"

执行上述命令后会生成 config/laravel-page-speed.php 配置文件,定义了是否开启压缩和不需要压缩的url路径。对于某些你不想进行压缩的url可以配置到这里边。

使用

扩展包的使用是通过一堆中间件来完成的,文档中提到了很多 中间件 不过大部分还没有实现,可以用的只有前面的这 7 个。我们添加这些中间件测试一下,注册到 web 中间件组中。

app/Http/Kernel.php

...'web' => [...RenatoMarinhoLaravelPageSpeedMiddlewareInlineCss::class,RenatoMarinhoLaravelPageSpeedMiddlewareElideAttributes::class,RenatoMarinhoLaravelPageSpeedMiddlewareTrimUrls::class,RenatoMarinhoLaravelPageSpeedMiddlewareInsertDNSPrefetch::class,RenatoMarinhoLaravelPageSpeedMiddlewareRemoveComments::class,RenatoMarinhoLaravelPageSpeedMiddlewareRemoveQuotes::class,RenatoMarinhoLaravelPageSpeedMiddlewareCollapseWhitespace::class, // Note: This middleware invokes "RemoveComments::class" before it runs.]...

这么多的中间件,我们总结了一下它们的作用:

转自:压缩 HTML 加速网页响应—— renatomarinho/laravel-page-speed

中间件

描述

InlineCss

将 HTML 中的行内样式,转换为一行单独的样式放在 header style 标签中

ElideAttributes

去除 HTML 中一些多余的属性

InsertDNSPrefetch

添加 DNS 预读取 标签

RemoveComments

删除 HTML 注释

TrimUrls

简化 URL,将 修改为

RemoveQuotes

去除一些标签的引用,src="foobar.com" 转换成 src=foobar.com

CollapseWhitespace

去除 HTML 中多余的换行和空格

一般我常用的只有这4个

RenatoMarinhoLaravelPageSpeedMiddlewareElideAttributes::class,RenatoMarinhoLaravelPageSpeedMiddlewareRemoveQuotes::class,RenatoMarinhoLaravelPageSpeedMiddlewareCollapseWhitespace::class,RenatoMarinhoLaravelPageSpeedMiddlewareRemoveComments::class,InlineCss

当我们只开启这个中间件的时候,看的会更加明显:

中间件去除了某些行内样式,用一个 class 替换,将样式合并成一行,放在 head 中,提前加载,非常有用。

ElideAttributes

主要作用就是替换一些默认的标签:

去除 from 表单中的 属性,很少会这样用;将 <button disabled>转换为 <button disabled>;将 <option selected>Foobar</option> 转换为 <option selected>Foobar</option>InsertDNSPrefetch

可以看到一些关于 DNS 预读取 的标签,也就是检查 HTML 中所有的链接,告诉浏览器提前去解析这些链接的 DNS,更快的加载图片,css 等资源,用户打开链接的速度也会更快。

由于DNS的级联特性,DNS解析时间从本地缓存结果的<1ms到数百毫秒不等。这对总页面加载时间有很大影响。此筛选器通过在HTML开头向浏览器提供提示来缩短DNS查找时间,从而允许浏览器预解析页面上资源的DNS。

RemoveComments

去除所有的 HTML 注释应该很好理解:

TrimUrls

作用就是去除链接的协议部分,因为默认会使用当前 URL 的协议。

但是这时候你会发现上面 DNS 预读取的标签都消失了,我们解决一下这个 BUG,修改一下中间件的顺序,将 TrimUrls 放在 InsertDNSPrefetch 之前。

因为这些中间件是作用于请求的响应,其实执行的顺序,是从下往上的,放在下面的会先执行,TrimUrls 去除了协议,InsertDNSPrefetch 中使用正则匹配就会出问题了。

RemoveQuotes

中间件会去除一些标签的引号,会作用在下面这些标签:

srcwidthheightnamecharsetalignbordercrossorigintypeCollapseWhitespace

去除了换行以及空格,最终我们将 HTML 优化为上面这样。

对比效率

添加中间加前后,用chrome的调试模式看一下请求的size,会发现请求包体积明显减小。从网络层面上减轻了带宽压力,加速了dns解析,加快了浏览器渲染速度。

注意点

1、当blade模板中的js代码存在//单行注释时,通过renatomarinho/laravel-page-speed压缩后会将整个js代码//后面的注释掉,所以js代码中不能存在双斜杠单行注释,改成 /* */形式即可解决

2、对于存在代码段(pre code中内容)的html, CollapseWhitespace 会将代码段中的空格和空行删除,这样就不行了,会影响实际展示效果。