谷歌AMP与Laravel配合使用

11

我最近基于Laravel推出了一款电商网站。现在我认为将AMP应用于该网站是一个好主意,因为它现在支持电商(即使Shopify和eBay也在实施)。

所以我的问题是如何在Laravel上实现AMP?是否有一种方法可以在桌面版本中使用desktopMainTemplate.blade.php,在移动版本中切换到mobileMainTemplate.blade.php? 我不想为移动设备创建不同的域名,如m.domain.com。我想在这里实现创意,但我不确定我是否朝着正确的方向前进。

如果你们处于我的位置,你们会做什么?


此问题或其答案正在 Meta 上讨论:回应 DMCA 下架通知 - Haem
如果有人感兴趣的话,我已经写了一篇相关文章,链接为 https://www.google.com/amp/s/stackcoder.in/amp/posts/setup-amp-accelerated-mobile-pages-in-php-laravel - Channaveer Hakari
3个回答

9

使用不同的路由和控制器来完成相同的任务但使用不同的视图非常困难。您可以采用以下方法进行改进:

  1. 对于/amp/网址,使用相同的Web控制器
  2. 通过修改view()助手,以不同的方式查看amp页面

Amp路由

为了捕获/amp/路由,请将其添加到您的RouteServiceProvider.php文件中。

protected function mapAmpRoutes()
{
    Route::group([
        'middleware' => 'web',
        'namespace' => $this->namespace,
        'prefix' => 'amp',
    ], function ($router) {
        require base_path('routes/web.php');
    });
}

同时修改你的map方法:

public function map()
{
    $this->mapAmpRoutes(); // <-- Add this

    $this->mapWebRoutes();

    $this->mapApiRoutes();
}

此时,所有类似于example.com/amp/...的地址将指向您的web.php路由。

Amp视图文件

现在,您应该自定义view()帮助程序以渲染不同的amp视图。在app/Http目录中创建一个helpers.php文件,并添加一个视图函数:

function view($view = null, $data = [], $mergeData = [])
{
    $factory = app(Illuminate\Contracts\View\Factory::class);

    if (func_num_args() === 0) {
        return $factory;
    }

    //if amp, add '-amp' to view name
    if(request()->segment(1) == 'amp'){
        if(view()->exists($view . '-amp')){
            $view .= '-amp';
        }else{
            abort(404);
        }
    }
    return $factory->make($view, $data, $mergeData);
}

只有在将此函数添加到您的bootstrap/autoload.php文件中后,才能加载该函数。

require __DIR__.'/../app/Http/helpers.php'; // <-- add this (should be before require vendor/autoload.php)
require __DIR__.'/../vendor/autoload.php';

编辑:如果你找不到 bootstrap/autoload.php 文件,请搜索 vendor/autoload.php ,因为laravel已将其移除。(感谢 MinderMondo 的评论)

现在,您可以添加任何您想要的带有“-amp”后缀的amp视图。例如,如果你拥有index.blade.php文件,则amp视图名称应该是index-amp.blade.php


谢谢您的回答。然而,其中一部分对我来说不起作用。我按照您的方法操作了,确实获得了原始视图,但是如果我的主页网址是example.com,那么amp页面将是example.com/amp,如果我有example.com/about,则它将是example.com/amp/about,这很好!但是视图助手没有获取index-amp.blade.php视图 - 它仍然获取旧的(原始视图)。可能是什么问题? - Momondo
4
明白了!我正在使用Laravel 5.6,但是我忘记包括helpers.php文件了。在bootstrap文件夹中没有autoload.php。这应该被包含在vendor/autoload.php文件中。这个变化是在https://github.com/laravel/laravel/commit/8914be5fc864ebc6877be38ff3502997e0c62761中进行的。无论如何还是谢谢! - Momondo

4

有几种方法可以将AMP页面应用到您的Web应用程序中(无论使用哪个框架)。

其中一个例子是https://www.theguardian.com的做法:创建一个新的子域名“amp.theguardian.com”,并且主站点“www.theguardian.com”的每个页面都有一个指向相同页面的规范链接,但是是AMP版本和反之亦然。

例如: 普通页面:LINK 页面的AMP版本:LINK

正如您所看到的,它们是相同的,但又不完全相同。大多数正常页面具有的元素已从AMP页面中删除(因为AMP不允许它们或者对于AMP来说这是一种不好的做法)。

所以,你可以通过创建单独的视图(resources/views/amp)和处理它们的控制器来实现将AMP应用到你的Laravel项目中。关于你的AMP视图可以具有哪些功能的良好指南在这里

1
我认为theguardian.com的方式是最好的方式,不是吗? - Prajwol Onta
如果您创建一个单独的域,那么最终会有两个源代码,这在长期运行中可能更难维护。我更喜欢为所有帖子使用AMP前缀。如果有人想知道我是如何实现它的,请查看我的文章https://stackcoder.in/posts/setup-amp-accelerated-mobile-pages-in-php-laravel - Channaveer Hakari

0

我用AMP创建了一个网站,我的解决方案很简单,只需在路由中添加一个新的GET规则:mobile/{articleSlug}/{pageNumber?},并在控制器中添加一个新函数来支持它,该函数加载所有必要的内容以显示新的AMP布局。

如果我没错的话,您无法在相同的路由上拥有AMP页面和普通页面- Google将不知道如何在它们之间进行切换。


那你做了什么?创建了不同的URL吗?还是像m.domain.com这样的域名? - Prajwol Onta
每篇文章在AMP中有不同的URL。 - Geding
我更喜欢这种方法,只是我使用/amp/而不是/mobile/ - aalaap

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接