To create a new blog details page :

1. Open your code editor.
2. Create a new file.
3. Copy code from the Get Starter Kit Codes section at the bottom of the documentation.
4. Set blogTitle variable value.
5. Set blogDetails variable value.
   The blogDetails.illustration and blogDetails.author.photo values is name of image file in the src/assets/images/ folder.
6. Arrange content as desired between {# block blogDetailContent #} and {# endblock #}.
7. Save the file as blog-details-name.twig in the src/twig/ directory.
8. The gulp command will automatically compile changes in blog-details-name.twig to blog-details-name.html in the root project directory.

Get Starter Kit Codes

The following is a Starter Kit Codes that you can use to create a new blog details page. You can copy the codes into your code editor application.

{# blog-details-name.twig : Blog details twig file will be compiled into blog-details-name.html #}

{# extends default layout #}
{% extends "layouts/blog-details.twig" %}

{# set required variables  #}
{% set blogTitle = 'Blog-News Title' %}

{% set blogDetails = {
	'illustration' : 'blog-detail-illustration.png',

	'meta'		: {
		'tag'		: 'Blog Tag',
		'description'	: 'Month YY  ·  x min read',
	},
	'author'	: { 
		'name'		: 'Author Name',
		'position'	: 'Author Position',
		'photo'		: 'author-photo.png',
	}
} %}

{% set pageClasses = 'page-blog-details' %}
{# end set required variables #}

{# block blog detail content  #}
{% block blogDetailContent %}
	
	{# write blog contents here #}

{% endblock %}
{# end block main content  #}