# Views Views contain HTML, have access to your data, and are used to render the front-end of your site. Layouts, templates, and partials are all different types of views. ## Overview Views contain the HTML served by the frontend of your site and are stored in the `resources/views` directory. A simple view might look something like this (but should it?): ``` // resources/views/greeting.antlers.html

The invention of the shovel was ground breaking.

``` Each file inside your `resources/views` directory is a **view**. Each view can be used in different ways โ€” given different roles and responsibilities. :::watch https://www.youtube.com/embed/leI3qRhzHLQ See how layouts and templates work together. ::: ## Layouts **Layouts** are the foundation of your frontend's HTML. Any markup you want to present no matter what page you're on, no matter where you go, how far you travel, or loud you sing, should go into a layout. By default, Statamic will look for and use `/resources/views/layout.antlers.html`, but you're welcome to create other layouts and configure specific entries, whole sections, or the whole site to use those instead. Layouts usually contain `` markup, global header, navigation, footer, JavaScript includes, and so on. In between all that HTML is your _template_ area โ€”ย the magical place where unique, non-global things happen. Use the `{{ template_content }}` variable to set where you'd like that to live. ``` // resources/views/layout.antlers.html {{ title }} | {{ site_name }} {{ partial:nav }} {{ template_content }} ``` An entry can control the layout it's rendered with by setting the `layout` system variable. ``` yaml # Use /resources/views/rss.antlers.html layout: rss ``` As mentioned above, Statamic will use the `resources/views/layout.antlers.html` view as the default layout. You can change the default layout in your `config/statamic/system.php` config file: ```php 'layout' => env('STATAMIC_LAYOUT', 'layout'), ``` ## Templates Templates are views that can be used by any entry or section on your site. The template's contents will be inserted into the `{{ template_content }}` variable in your layout much like the way a painting goes into an ornate picture frame. An entry can control the template it's rendered with by setting the `template` system variable. ``` yaml # This fake entry will use /resources/views/gallery.antlers.html template: gallery title: Photo Gallery ``` :::tip You can use the [template](/fieldtypes/template.md) fieldtype to make choosing your template in any entry easy. Any [fieldtype](/fieldtypes.md) that returns a string like in the example above works too, so you have a lot of flexibility. ::: ### Map templates to entry blueprints To automatically map the template from an entry's blueprint, set the collection's default template to `@blueprint`. ``` yaml # collections/{collection}.yaml template: '@blueprint' ``` By doing this, Statamic will look for the corresponding template in `/resources/views/{collection}/{blueprint}.antlers.html`. For example, if you have an `articles` collection entry that uses a blueprint with the handle of `long`, the `/resources/views/articles/long.antlers.html` template will be used. :::tip You can still set a template on the entry level and override the default. ::: #### Customizing the template path By default, Statamic looks for the template in a directory matching the collection's handle. If you'd like to look somewhere else, you can map collections to a different path using the `blueprint_templates` config in `config/statamic/system.php`. ``` php 'blueprint_templates' => [ 'blog' => 'shared', 'news' => 'shared', ], ``` With the above config, both the `blog` and `news` collection entries using the `post` blueprint will look for `/resources/views/shared/post.antlers.html`. This could be useful when you have templates that are similar across collections. ## Partials Partials are reusable views that may find themselves in any number of other layouts, templates, and other partials. You can use any view as a partial by using the [partial](/tags/partial.md) tag. ``` // This will import /resources/views/blog/_card.antlers.html {{ partial:blog/card }} ``` :::best-practice We recommend prefixing any views intended to be _only_ used as partials with an underscore, `_like-this.antlers.html` and reference them `{{ partial:like-this }}`. The underscore is not necessary in the partial tag definition. ::: :::watch https://www.youtube.com/embed/Ddz6mD-jT7E We have a video about Partials too! ::: ## Using Blade If your view ends with `.blade.php` instead of `.antlers.html`, it will be rendered with Laravel's [Blade](https://laravel.com/docs/blade) engine. All of the same data will be injected into the view, but you won't have access to Statamic's [tags](/tags.md). This is useful if... - You want to reuse existing Laravel views and keep your markup DRY. - You have some gnarly loops to work with and can benefit from temporary variables and the `foreach` loop approach. - You're really used to using Blade and don't want to learn anything else even if it's really simple, similar, and powerful. You do you. ## Recommended conventions We recommend the following conventions for consistency. These are just suggestions, not requirements. ### Naming - Use lowercase filenames - Use hyphens to separate words - Prefix partials with _underscores - Be consistent with plurality (e.g. blog, articles, faq) ### Organizing There are a few recommended ways to organize your layouts, templates, and partials. But you don't have to take _our_ word for it. ๐ŸŒˆ ### Go super flat Partials are indicated by a prefixed underscore (`_header`), layout by the word `layout` and everything else is a template. **Best for small sites.** ``` files theme:serendipity-light resources/views/ _header.antlers.html about.antlers.html article.antlers.html layout.antlers.html listing.antlers.html page.antlers.html ``` ### Organize by type This is a bit more of a Statamic v2 style where views are grouped by type - partials, layouts, and templates. **Best for medium sized sites.** ``` files theme:serendipity-light resources/views/ partials/ _card.antlers.html _footer.antlers.html _nav.antlers.html layouts/ amp.antlers.html api.antlers.html main.antlers.html templates/ about.antlers.html article-list.antlers.html article-show.antlers.html faq-list.antlers.html faq-show.antlers.html form.antlers.html ``` ### Organize by section A more Laravel/application approach where views are grouped by section (or collection), along with their own partials and alternate layout files. **Best for large sites.** ``` files theme:serendipity-light resources/views/ blog/ _card.antlers.html index.antlers.html layout.antlers.html rss.antlers.html show.antlers.html contact/ index.antlers.html success.antlers.html faq/ layout.antlers.html index.antlers.html show.antlers.html layout.antlers.html ```