Kevin C. Coram ec18ebfeec | ||
---|---|---|
archetypes | ||
exampleSite | ||
layouts | ||
LICENSE.md | ||
README.md | ||
theme.toml |
README.md
A Basic Hugo Theme
While the official documentation about Hugo Templates does provide all of the pieces to get started creating a theme, it doesn't necessarily put them together in one, easy-to-see-together place. This theme attempts to pull all of the necessary pieces together into a theme that can be used as a starting point to create more sophisticated themes.
Getting Started
Follow the Hugo Quickstart instructions on how to install Hugo, create a site, and install a theme. Installing the theme as a git submodule is the preferred way.
git add submodule https://git.thecorams.net/kevin/basic-theme.git themes/basic-theme
Example Site
The theme includes an example site to give a quick way to see how the theme looks and behaves.
cd exampleSite
hugo serve [ -D ] --themesDir ../..
Most of the sample posts are intentionally set draft: true
to allow for
testing few posts vs many posts.
Setup
As a very basic theme, there is very little to be configured in ones config.toml
file.
The layout files uses Hugo's markdownify
pipe to display the copyright
configuration setting, providing support both for HTML5 character escape
sequences such as ©
as well as markdwn formatting and links.
The only non-standard configuration setting is the subtitle
parameter:
[params]
subtitle = "A sub-title for your site"
Theme Organization
Semantic Content Organization
The chrome of the theme page organization is as follows:
<html>
<head>
<title>Site Title</title>
</head>
<body>
<header>
<hgroup>
<h1>Site Title</h1>
<h2>Site Sub-title</h2>
</hgroup>
<nav>
<!-- Site Navigation/Menu: links to pages that are part of -->
<!-- the "main" menu -->
</nav>
</header>
<main>
<header>
<h1>Content Title</h1>
<nav>
<!-- Content Navigation/Menu: a place holder for a -->
<!-- content specific menu, such as a list of blog posts -->
<!-- based on publication date. Not yet implemented. -->
</nav>
</header>
<section>
<!-- The page content. For list sections, this is where the -->
<!-- the list of pages goes. For single pages, this is where -->
<!-- the content of the page markdown file goes. -->
</section>
</main>
<footer>
<!-- The Site Footer, for copyright information etc. -->
</footer>
</body>
</html>
If the content pages use ##
as their largest heading, this will result
in document outlines structured as:
- Site Title
- Site Sub-title
- Content Title
- Header from Content
- Sub-header from content
- Second Header from Content
- Header from Content