Creating custom templates

If your pages include content which needs to appear in the same way on many pages, you can add it as a template and drop <livewire:prodigy-page /> where you want Prodigy to handle content.

For this site, we load docs into a template to add a consistent sidebar. As a result, the only dynamic content on the page is the actual text of the documentation. This makes it super convenient to make a lot of pages.

web.php

Route::get('/docs/{wildcard}', DocsSection::class);

<div class="hidden lg:block bg-gradient-to-l from-gray-100 to-white lg:w-1/5 md:fixed z-20 inset-0 top-[5rem] right-auto pt-8 px-8 overflow-y-auto">
  <x-docs.sidebar></x-docs.sidebar>
</div>

<div class="overflow-y-scroll lg:w-4/5 xl:w-3/5 lg:px-12 lg:pt-12 xl:px-20 lg:ml-auto xl:mx-auto">
   <main class="max-w-2xl mx-auto relative z-20 prose lg:text-lg max-w-none" listen-for-intersection-of-titles>
       <livewire:prodigy-page/>

       <livewire:prodigy-block block_title="Global Footer" />
   </main>
</div>
        
<div class="hidden hide-when-editing xl:block bg-gradient-to-r from-gray-100 to-white lg:w-1/5 md:fixed z-20 inset-0 top-[5rem] left-auto pt-8 px-8 overflow-y-auto">
     <x-docs.on-this-page/>
</div>

Adding blocks anywhere

It's helpful to use global blocks like headers and footers to scaffold your templates. You can create a global block and reference it by ID or title:

<livewire:prodigy-block block_id="5"/>
<livewire:prodigy-block block_title="Global Header"/>

You can include a Prodigy block anywhere Livewire is loaded.