ساخت صفحات amp با لاراول

AMP (Accelerated Mobile Pages) یا صفحات پرشتاب موبایلی یک فناوری انتشار وب سایت منبع باز است که توسط گوگل توسعه یافته است. به کاربران شما تجربه بارگیری سریع، سبک و تقریباً فوری در وب تلفن همراه را می دهد. اگر نگران سئوی وب سایت خود هستید، به شدت به شما توصیه می شود که یک نسخه AMP از وب سایت خود تهیه کنید. تاثیر زیادی بر سئو سایت دارد. هنگامی که از طریق دستگاه تلفن همراه خود در Google جستجو می کنیم، Google نتایج جستجویی مانند زیر را نشان می دهد که فوراً در مرورگر ما بارگیری می شود.

در این مقاله نحوه ساخت صفحات AMP را در فریمورک لاراول آموزش می‌دهیم. با ما همراه باشید.

فرض کنید وب سایت ما دارای مسیرهایی مانند این یا هر ترکیب مسیر دیگری است.

Route::get('/','SiteController@home');
Route::get('/posts','SiteController@posts');
Route::get('/{slug}','SiteController@postDetails');

و همچین کد کنترلری دارد

<?php

namespace App\Http\Controllers\Site;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Post;

class SiteController extends Controller
{

    public function home(){
        return view('site.home');
    }

    public function posts(){
        $data = Post::all();
        return view('site.posts',compact('data'));
    }

    public function postDetails($slug){
        $post = Post::where('slug',$slug)->first();
        return view('site.single',compact('post'));
    }

}

این یک مثال ساده بود اما ممکن است وبسایت شما مسیر های بیشتری داشته باشد. قطعا اینجاد کنترلر جداگانه برای صفحات AMP کار ما را سخت خواهد کرد.

خب چکار کنیم: در واقع نیازی به ایجاد مسیر یا لینک جداگانه برای صفحات AMP نیست. ما از مسیرهای موجود و فایل کنترل کننده خود برای مدیریت نسخه AMP سایت خود با برخی تغییرات و ترفندهای جزئی استفاده می کنیم.

قدم اول: متد mapAmpRoutesرا به routeServiceProvider.php اضافه کنید.

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

سپس this را به متد map اضافه کنید.

$this->mapAmpRoutes();

نکته: این کد از فایل مسیر web.php استفاده می کند و از مسیرهای موجود سایت ما استفاده می کند. با استفاده از this آدرس(url) پایه ما با example.com/amp شروع می شود.

اکنون، باید تشخیص دهیم که مسیر فعلی برای درخواست صفحهAMP است یا صفحه معمولی. سپس طبق درخواست مسیر، قالب blade را تحویل خواهیم داد. بیایید ترفندهایی را انجام دهیم تا تشخیص دهیم مسیر فعلی برای صفحه AMP یا معمولی است. نقشه به این صورت است که در صورت درخواست مسیر برای صفحه AMP ما همان نام قالب را با پسوند AMP برمی گردانیم.

مثال

قدم 02: یک request detector بسازید.

اینgetViewرا به کنترلر خود اضافه کنید. این کد مشخص می‌کند که درخواست برای صفحه عادی است یا AMP

private function getView($viewName)
{
    if (request()->segment(1) == 'amp') {
        if (view()->exists($viewName . '-amp')) {
            $viewName .= '-amp';
        } else {
            abort(404);
        }
    }
    return $viewName;
}

بعد از افزودن این کد باید عبارت view return را مانند روبه رو آپدیت کنیم.return view($this->getView('home'))

<?php

namespace App\Http\Controllers\Site;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Post;

class SiteController extends Controller
{

    private function getView($viewName)
    {
        if (request()->segment(1) == 'amp') {
            if (view()->exists($viewName . '-amp')) {
                $viewName .= '-amp';
            } else {
                abort(404);
            }
        }
        return $viewName;
    }

    public function home(){
        return view($this->getView('site.home'));
    }

    public function posts(){
        $data = Post::all();
        return view($this->getView('site.posts'),compact('data'));
    }

    public function postDetails($slug){
        $post = Post::where('slug',$slug)->first();
        return view($this->getView('site.single'),compact('post'));
    }

}

قدم 03: صفحات AMP را بسازید

اکنون باید صفحات AMP را ایجاد کنیم

home-amp.blade.php
posts-amp.blade.php
single-amp.blade.php

طراحی صفحه AMP قوانین و اصول هایی دارد. اگر تازه کار هستید و علاقه مند به یادگیری نحوه طراحی صفحه amp هستید، از مستندات رسمی AMP و دستورالعمل طراحی صفحه amp بازدید کنید یا می توانید قالب صفحه AMP را رایگان دانلود کنید.

منبع: https://laravelarticle.com/laravel-amp-optimization