Back to well nothing really
So I talked about not using the Starter's Creek starter kit on here anymore and going right back to the basics, basically I'm doing that now.
I'm keeping the same 'blog' structure though and I might run with a couple of things from the starter kit just to get things going, primarily the basic part of the layout file (more below), the rest though is going to have very little formatting to, well, none at all.
So the first thing I've done is empty out the views folder and then creating a new empty layout.antlers.html
file in it, then taking some of the content out of the starter kit version I ended up with this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ $title }} — {{ $settings:site_name }}</title>
<meta name="description" content="{{ $intro | strip_tags | entities }}">
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "blogPost",
"name": "{{ $title }}",
"author": {
"@type": "Person",
"name": "{{ $author:name }}"
},
"datePublished": "{{ $date | format("Y-m-d") }}",
"description": "{{ $intro | strip_tags | entities }}"
}
</script>
<link rel="stylesheet" href="{{ mix src='css/tailwind.css' }}">
</head>
<body>
<main>
{{ $template_content }}
</main>
</body>
</html>
Note that I've stripped out the js and some other usual bits from the head, and I am only using three tags from Statamic title
, template_content
and mix
. The first two do exactly what you'd think they'd do, the mix tag takes an argument your css file in resources and outputs the compiled version into public
(just have to do the usual npm run dev
or npm run prod
, that sort of thing).
The tailwind.css
file itself is just a basic tailwind setup file, at this point I'm not using any classes from it yet, so not going to go into that here, it's just a placeholder for me for further down the line.
The next files I needed to create were for displaying the blog listings and individual entries, first off within views I created a blog
folder, and then within that I've created an index.antlers.html
and a show.antlers.html
. I should step back a bit, the antlers files enable you to use Statamic template tags right within the html, such as the title
or template_content
above.
The index.antlers.html
is set as the homepage within the Statamic homepage and needs to list out all of the blogs, what I've got here is about as basic a page as I could do for this and still be functional, it looks like this:
<article>
<header>
<h1>Blog</h1>
<p>Just a blog, mainly about Statamic, not sure what else you expect to be on a subdomain called blog?</p>
</header>
{{ collection:blog as="posts" paginate="12" sort="date:desc" }}
<section>
{{ posts }}
<div>
<a href="{{ url }}"><h2>{{ title }}</h2></a>
<p>{{ date }}</p>
</div>
{{ /posts }}
</section>
{{ /collection:blog }}
</article>
Everything in here is rendered by the template_content
tag in the layout file, the collection:blog
tag gives you the blogs a collection, then posts
loops through them, the title
and the `date ones should be obvious, and the url
tag takes you through to the show.antlers.html
<article>
<header>
<h1>{{ $title }}</h1>
</header>
<section>
{{ main_content }}
{{ if $type == "text" }}
{{ text }}
{{ /if }}
{{ /main_content }}
</section>
</article>
This again is reasonably obvious what it's doing, it's a few tags with a simple if
statement to check that the content of the blog is actually text, and if it is print it out. There you go job done, very (very) simple blog built.
If you happen to be looking at this page when I publish it then you will see what it outputs, if I have been good and continued through with this then you are hopefully something a bit tidier, I'll add some screenshots of how it looks just for future reference.