Blog Setup (part 2) : Modify Theme

Blog Setup
anatolebloghugo

 

[!WARNING]

For my blog, I am no longer using the anatole theme showed in this post and series. I made a Tailwind CSS theme. Read about it in Hugo Theme Development Series

Add stylesheet

Add custom.css file in anatole/assets/css/
This is where we will add our custom styles for the theme.

 

Remove profile section

Disable sidebar

The profile section is shown in the sidebar. We can disabled it in css. The sidebar will still be generated but will be hidden by our css styles.
Add in custom.css

aside.wrapper__sidebar {
    display: none;
}

main.wrapper__main {
    margin: auto;
}

The theme has two copyright footers, one in sidebar and one by itself. The one in sidebar is shown on bigger screens when the sidebar shows, the other one is shown on smaller screen when sidebar is hidden. Since the sidebar is now disabled, we can always show the second copyright footer.
Add in custom.css

body{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.footer__base {
    display: unset;
    margin-top: auto;
}

Fix content hiding behind menu

Because of the changes above, some content is hidden behind the site menu on smaller screens.
Add in custom.css file.

.wrapper__main > .post:nth-child(2) {
    margin-top: 50px;
}

 

Fix taxonomy pages

NOTE: The code in this section is from another theme called PaperMod (https://github.com/adityatelange/hugo-PaperMod). I liked the way it showed the terms so I added it to this theme.

Add template for terms

Anatole theme uses anatole/layouts/_default/single.html template for rendering taxonomies. The tags, categories and series pages look very similar to posts page. Add separate terms template page to use a different layout. No need to remove taxonomy template code from single.html since it will no longer be used for taxonomy pages.
Add anatole/layout/_default/terms.html template with this content

{{- define "main" }}

<ul class="terms-tags">
    {{- $type := .Type }}
    {{- range $key, $value := .Data.Terms.Alphabetical }}
    {{- $name := .Name }}
    {{- $count := .Count }}
    {{- with site.GetPage (printf "/%s/%s" $type $name) }}
    <li>
        <a href="{{ .Permalink }}">{{ .Name }} <sup><strong><sup>{{ $count }}</sup></strong></sup> </a>
    </li>
    {{- end }}
    {{- end }}
</ul>

{{- end }}{{/* end main */ -}}

NOTE: Instead of anatole/layout/_default/terms.html, the file can also be added to project/layout/_default/terms.html and the project will use that file to render terms.

Add css for terms

Add in custom.css

.terms-tags li {
    display: inline-block;
    margin: 10px;
    font-weight: 500;
}

.terms-tags a {
    display: block;
    padding: 3px 10px;
    background: var(--tertiary);
    border-radius: 6px;
    transition: transform 0.1s;
}

.terms-tags a:active {
    background: var(--tertiary);
    transform: scale(0.96);
}

 

Show all pages recursively in lists

By default the list pages will show only the posts directly in the current folder. To make it also shows the posts in the subfolders too, edit layouts/default/list.html
Replace .Data.Pages by .RegularPagesRecursive
Line 11 should now read:

{{ range .RegularPagesRecursive.GroupByDate "2006" }}

 

Add series

Add partial taxonomy template for series

Create file layouts\partials\taxonomy\series.html, copy code from tags.html and modify for series

{{ partial "taxonomy/template.html" (dict "items" . "linkClass" "series" "linkBase" "series") }}

Add styles for series

Add in custom.css

.series {
    display: inline-block;
    font-size: 1.4rem;
    margin: 5px 8px 5px 0;
}

 

Show tags in list pages

Add render code

Add after date div in layouts/_default/list.html

<div class="mod_posts_list_content">
  <div class="post__footer">
    {{ with .Page.Params.Tags }}
      {{ partial "taxonomy/tags.html" . }}
    {{ end }}
  </div>
</div>

Can show other taxonomies as well by adding similar blocks

<div class="mod_posts_list_content">
  <div class="post__footer">
    {{ with .Page.Params.Tags }}
      {{ partial "taxonomy/tags.html" . }}
    {{ end }}

    {{ with .Page.Params.Categories }}
      {{ partial "taxonomy/categories.html" . }}
    {{ end }}

    {{ with .Page.Params.Series }}
      {{ partial "taxonomy/series.html" . }}
    {{ end }}    
  </div>
</div>

Add styles

Add in custom.css

.archive__list-item {
    flex-wrap: wrap;
}

.mod_posts_list_content {
    flex: none;
    width: 100%;
}

.mod_posts_list_content > .post__footer {
    margin: 0;
    padding: 0;
    border: none;
    line-height: 14px;
}

 

Show taxonomies post title

By default, the taxonomies at the end of the post. Bring them to the top, under the date.
Add under date and above expirationnote in single.html

<div class="mod_post_taxonomy">
{{ with .Page.Params.Categories }}
{{ partial "taxonomy/categories.html" . }}
<br>
{{ end }}

{{ with .Page.Params.Series }}
{{ partial "taxonomy/series.html" . }}
<br>
{{ end }}      

{{ with .Page.Params.Tags }}
{{ partial "taxonomy/tags.html" . }}
<br>
{{ end }}
</div>

Remove from end of post in single.html

<div class="post__footer">
  {{ with .Page.Params.Categories }}
    {{ partial "taxonomy/categories.html" . }}


  {{ end }}

  {{ with .Page.Params.Tags }}
    {{ partial "taxonomy/tags.html" . }}


  {{ end }}
</div>

 

Show posts in series sorted by date

Use .ByDate to sort the posts in series chronologically. Modify layout\partial\series.html

{{ range $related.ByDate }}

 

Posts in this series