Bevezetés és kontextus
A ilogus.fr webhelyem átépítése során több csomagra is rábukkantam, ami biztosan megosztásra érdemes.
A kontextus megértéséhez: a webhely Laravel-en (13-as verzió PHP 8.4 alatt) alapul, egy meglehetősen egyszerű Blade oldalrendszerrel. Nem fogom részletezni a Laravel-t itt, de még nem ismeri a keretrendszert, a hivatalos dokumentáció kiváló: https://laravel.com
Az átépítés során több klasszikus, de lényeges funkciót kellett megvalósítanom:
- Markdown megjelenítés a bloghoz,
- Open Graph képek generálása,
- Sitemap kezelése.
Ahelyett, hogy mindent magam építettem volna, a Spatie csomagaihoz fordultam.
A Spatie egy belga webes ügynökség, amely a Laravel-re specializálódott, és nyílt forráskódú csomagjai minőségéről ismert. Tucatnyit tartanak karban (engedélyek, biztonsági mentések, média, stb.), amelyek közül sok a szabvány lett az ökoszisztémában.
Laravel Markdown
A blog számára egyszerű választást hoztam: a cikkek tartalmát Markdownban tárolom az Article modellemben.
A következő lépés a Markdown HTML-lé alakítása volt.
Első megközelítés: Str::markdown
Kezdetben egyszerűen ezt használtam:
Str::markdown($content);
Ez jól működik, további függőségek nélkül, mivel a Laravel már a league/commonmark csomagra támaszkodik.
De hamar megjelent egy korlátozás: szintaxis-kiemeléssel szerettem volna kódot megjeleníteni.
Váltás a spatie/laravel-markdown-re
A kódmegjelenítés megoldásának keresése közben találtam erre: https://spatie.be/docs/laravel-markdown/v1/introduction
Ez a csomag nagymértékben egyszerűsíti az integrációt egy Blade komponenssel:
<x-markdown>{!! $content !!}</x-markdown>
Két nagy előny:
- a szintaxis-kiemelés integrált,
- a megjelenítés automatikusan gyorsítótárazva van.
Eredmény: kevesebb logika a vezérlőben és jobb teljesítmény.
Testreszabás AttributesExtension-szel
Szerettem volna kontrollálni a HTML megjelenítést, különösen a képek stílusát.
Hozzáadtam a CommonMark AttributesExtension kiterjesztését:
// config/markdown.php
'extensions' => [
\League\CommonMark\Extension\Attributes\AttributesExtension::class,
],
Ez lehetővé teszi közvetlenül Markdownban írást:
{.shadow-lg .rounded-lg}
És ezt kapjuk:
<img src="/images/photo.jpg" class="shadow-lg rounded-lg" alt="Képem">
Ez egy kis trükk, de elkerüli a HTML vagy a Blade oldali transzformációkkal való bíbelődést.
Laravel OG Image
Amikor megosztunk egy cikket, az Open Graph kép teszi a különbséget. Ez gyakran az első dolog, ami látható a Twitteren, LinkedInen vagy Slacken.
Ezeket a képeket manuálisan létrehozni gyorsan fárasztó, ezért használtam ezt: https://spatie.be/docs/laravel-og-image
Az elv: definiáljunk egy Blade sablont, és generáljunk automatikusan képet.
Példa:
<div class="w-full h-full bg-gradient-to-br from-slate-900 to-slate-700 text-white flex items-center justify-center p-16">
<div class="space-y-4">
<span class="bg-blue-500 text-sm font-semibold px-3 py-1 rounded-full">
{{ $category }}
</span>
<h1 class="text-5xl font-bold leading-tight">
{{ str($title)->limit(80) }}
</h1>
<p class="text-xl opacity-70">
{{ $author }}
</p>
</div>
</div>
Majd az oldalon:
<x-og-image view="og-images.article" :data="[
'title' => $article->title,
'category' => $article->category,
'author' => $article->author->name
]" />
A csomag generálja a képet, hozzáadja a meta tageket (og:image, stb.), és gyorsítótárazza az egészet.
Chrome-mentes a Cloudflare-nek köszönhetően
Egy pontot különösen érdekesnek találtam: nincs szükség headless Chrome-ra.
Használhatjuk a Cloudflare drivert:
// AppServiceProvider.php
use Spatie\OgImage\Facades\OgImage;
public function boot(): void
{
OgImage::useCloudflare(
apiToken: env('CLOUDFLARE_API_TOKEN'),
accountId: env('CLOUDFLARE_ACCOUNT_ID'),
);
}
Eredmény: nincs nehéz függőség a szerver oldalon, és külső generálás API-n keresztül.
Laravel Sitemap
A SEO szempontjából lehetetlen kihagyni a megfelelő sitemap-et.
A https://spatie.be/docs/laravel-sitemap használatával a generálás nagyon egyszerű.
Automatikus generálás
use Spatie\Sitemap\SitemapGenerator;
SitemapGenerator::create('https://ilogus.fr')
->writeToFile(public_path('sitemap.xml'));
Manuális generálás (több kontroll)
Az esetemben (blog) inkább kontrollálom az URL-eket:
use Spatie\Sitemap\Sitemap;
use Spatie\Sitemap\Tags\Url;
Sitemap::create()
->add(Url::create('/')
->setPriority(1.0)
->setChangeFrequency(Url::CHANGE_FREQUENCY_DAILY))
->add(Url::create('/blog')
->setPriority(0.9)
->setChangeFrequency(Url::CHANGE_FREQUENCY_WEEKLY))
->add(Article::all()->map(fn ($article) => Url::create("/blog/{$article->slug}")
->setLastModificationDate($article->updated_at)
->setChangeFrequency(Url::CHANGE_FREQUENCY_MONTHLY)))
->writeToFile(public_path('sitemap.xml'));
Majd egy ütemezett feladat elegendő a naprakészen tartáshoz.
Többnyelvű és hreflang
A webhely többnyelvű lévén, külön sitemap-eket választottam (sitemap-fr.xml, sitemap-en.xml, stb.).
A csomag kezeli a hreflang tageket is:
Url::create('/blog/cikkem')
->addAlternate('fr', 'https://ilogus.fr/blog/mon-article')
->addAlternate('en', 'https://ilogus.fr/en/blog/my-article')
->addAlternate('hu', 'https://ilogus.fr/hu/blog/my-article-hu');
A tagek automatikusan generálódnak a sitemap-ben, a SEO ajánlásoknak megfelelően.
Következtetés
Ezek a csomagok rengeteg időt takarítottak meg nekem az ilogus.fr átépítése során.
Jól átgondoltak, jól dokumentáltak, és súrlódásmentesen integrálhatók egy Laravel projektbe.
A whitecube/laravel-cookie-consent-et is használom a cookie hozzájárulás kezeléséhez. írtam egy teljes cikket erről: Süti-hozzájárulás kezelése fizetős CMP nélkül.
Ha Laravel-lel dolgozik, tényleg ajánlom, hogy nézze meg a csomagjaikat: https://github.com/spatie https://spatie.be