Converting Simple Web Page Into Hugo Theme Part 3 - Single Post Page

February 10, 2019

Single Post page

In previous post we saw how to convert HTML page into fragments and created home page that shows list of posts. In this part we’ll show how to implement single post page.

When creating page that shows list of posts we said that all pages will inherit _default/baseof.html that looks like this:

<!DOCTYPE html>
<html>

{{- partial "header" . -}}

<body>
	<div class="wrapper">

		{{- partial "sidebar" . -}}

		{{- block "main" . }}{{- end }}

	</div>
</body>
</html>

And our HTML that displays a post looks like this:

<!DOCTYPE html>
<html>
<head>
	<title>Esed Alihodzic</title>
	 <meta name="viewport" content="width=device-width">
    <link href="style.css" rel="stylesheet">
</head>

<body>

	<div class="wrapper">

        <nav class="main-nav">
        	<a href="index.html"><h3>Esed Alihodzic</h3></a>
            <ul class="nav">
                <li><a href="index.html">Blog</a></li>
                <li><a href="">About</a></li>
            </ul>

            <ul class="social">
              <li><a href="#">G</a></li>
              <li><a href="#">T</a></li>
              <li><a href="#">Li</a></li>
              <li><a href="#">M</a></li>
            </ul>
		
        </nav>

        <div class="content">

        <article>

                <h1>Article #1</h1>
                
                <p class="article-detail-date">February 8, 2018</p>
            <p>In this layout, we display the areas in source order for any screen less that 500 pixels wide. We go to a two column layout, and then to a three column layout by redefining the grid, and the polylineacement of items on the grid.</p>

            <p>Many websites are a variation of this type of layout, with content, sidebars, a header and a footer. In a responsive design, you may want to display the layout as a single column, adding a sidebar at a certain breakpoint and then bring in a three-column layout for wider screens.</p>

            </article>
        </div> 
</div>
</body>
</html>

We’ll take div.content and put it into single.html with just few changes.

{{ define "main" }}

<div class="content">

	<article>

		<h1>{{ .Title }}</h1>

		<p class="article-detail-date">{{ .Date.Format "January 2, 2006" }}</p>

		{{ .Content }}

	</article>
</div> 
{{ end }}

Hugo knows that .Title and .Content refer to the post that is opened.

single.html will be rendered instead main block in baseof.html for single post page.

Save the changes and try clicking a “Read more…” link, it should show single post page.

In next post we’ll see how to externalize some theme configuration options.