見出し画像

[laravel8] HTMLファイルをBladeに変換

tomocito

今回の記事ではすでに準備されているHTMLをBladeに移植していきます。

ダウンロード

HTMLファイルが準備されているので以下のページから

Codeをクリックし

スクリーンショット 2021-06-24 22.19.54

Download ZIP より圧縮されたファイルをダウンロードする。

スクリーンショット 2021-06-24 22.20.02

圧縮ファイルを解凍する。

移植

解凍するとindex.htmlがあるので、そのファイルの中身をコピーして

resources/views/components/layout.blade.php

へ、ペーストする。（書き換える）

その後にソースコードの中のimgタグのsrcで ./images/~~となっている箇所をすべて /images/~~ に変更する

例

<img src="./images/illustration-1.png" alt="Blog Post illustration" class="rounded-xl">

↓

<img src="/images/illustration-1.png" alt="Blog Post illustration" class="rounded-xl">

そして解凍したディレクトリの中にimagesディレクトリがあるので、そのディレクトリをまるごと

publicディレクトリの中にコピーする。（public/images/ となる）

TOPページへアクセスすると以下のようになっているはず。

スクリーンショット 2021-06-24 22.34.34

Component作成

layout.blade.phpを分けていきます。

まず現在は簡単に書くと以下のようになっています。

<body>
    <section>
        <nav></nav>
        <header></header>
        <main>
            <article></article>
            <div class="lg:grid lg:grid-cols-2">
                <article></article>
                <article></article>
            </div>
            <div class="lg:grid lg:grid-cols-3">
                <article></article>
                <article></article>
                <article></article>
            </div>
        </main>
        　<footer></footer>
    </section>
</body>

headerとmainはページに依存するので、$slotを使いデータを挿入できるようにします。

resources/views/components/layout.blade.php

<body>
    <section>
        <nav></nav>
        {{ $slot }}
        　<footer></footer>
    </section>
</body>

resources/views/posts.blade.php

<x-layout>
    <header></header>
    <main>
        <article></article> // featured article 
        <div class="lg:grid lg:grid-cols-2">
            <article></article>
            <article></article>
        </div>
        <div class="lg:grid lg:grid-cols-3">
             <article></article>
             <article></article>
             <article></article>
        </div>
    </main>
</x-layout>

articleは２種類存在していて、featured articleとそれ以外のarticleに分かれます。

featured article用に

resources/views/components/post-featured-card.blade.php

他のarticle用に

resources/views/components/post-card.blade.php

コンポーネントを作成し、

resources/views/posts.blade.php内で今作成したコンポーネントを使用する。

<x-layout>
   <header>~~~~~~</header>

   <main class="max-w-6xl mx-auto mt-6 lg:mt-20 space-y-6">
       <x-post-featured-card />

       <div class="lg:grid lg:grid-cols-2">
           <x-post-card />
           <x-post-card />
       </div>

       <div class="lg:grid lg:grid-cols-3">
           <x-post-card />
           <x-post-card />
           <x-post-card />
       </div>
   </main>
</x-layout>

includeファイル作成

headerの部分をincludeして使うようにパーシャルファイル（部分ファイル）を作成する。もちろん一回のみの使用のためにcomponentを作成してももちろん良いのだが、今回はパーシャルファイルを作成してincludeします。

resources/views/_posts-header.blade.php を作成し、headerタグを含むheaderタグ内部のコードをコピーする。そしてposts.blade.phpでそのファイルをincludeする。

resources/views/posts.blade.php

<x-layout>
   @include('_posts-header')

   <main class="max-w-6xl mx-auto mt-6 lg:mt-20 space-y-6">
       <x-post-featured-card />

       <div class="lg:grid lg:grid-cols-2">
           <x-post-card />
           <x-post-card />
       </div>

       <div class="lg:grid lg:grid-cols-3">
           <x-post-card />
           <x-post-card />
           <x-post-card />
       </div>
   </main>
</x-layout>

最後に

今回は準備されていたHTMLのファイルをLaravelへ移植しただけになります。

以下がソースコードになります。


この記事が気に入ったらサポートをしてみませんか？