Tale Theme: Creating a Standalone Page

support
1

Hello everyone,

I’m relatively new to Hugo and trying to decipher how I can create a standalone page when using the Tale theme like the tags page in the demo, i.e. a page that is linked from the header, doesn’t show up in the posts list, and doesn’t have an author reference at the top saying “Written by…”. Looking through the files for the theme, I don’t understand how the tags page is generated. My ultimate goal is to add a standalone page with a list of my publications that is linked to from the header of the site. I’d appreciate any pointers you all may be able to offer!

Thanks!

Chris

2

I’ll try my best to explain. I think I have a similar page to what you’ve described. We’ll assume the page is in /archives/.

a page that is linked from the header

This depends from theme to theme but usually, it is done with menus. The theme also uses the same thing.

doesn’t have an author reference at the top saying “Written by…”

In Hugo, there are templates for different types of content. Each type may have its own template for lists, standalone, etc. We can also create template for custom types.

For this example, we can create a custom archive type by creating layouts/archive. Since you want a standalone page, we’ll create a single page template at layouts/archive/single.html. For reference, here’s how I implement it. Then, in one of the content, I’ll simply declare the content to be of the archive type and Hugo will render the page as declared from layouts/archive/single.html.

Hope that explains it. Still, feel free to ask a question if it’s unclear. Hugo is a huge software, after all. :slight_smile:

3

Thank you @foo-dogsquared for your thorough reply! So here’s exactly what I did that failed to change anything. In layouts/single I created list.html with the following content:

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

I then created the file content/contact.md with the following content:

---
title: "Contact"
type: "single"
menu: "main"
---
This is a test.

And sadly this page is still rendering as a blog post with the same formatting I mentioned in my first post. It’s almost as if the type declaration is not registering. So baffling. Any suggestions?

4

Rename layouts/single/list.html to layouts/single/single.html. The content will be rendered with single page templates so you need single.html.

1 Like
5

I renamed layouts/single/list.html to layouts/single/single.html and the contact page still shows up as a blog post at the end of the list.

6

From what I understand list in the build frontmatter should help you?

7

Just to clarify, are you suggesting changing the type to type: "list" in the front matter? I just tried that and the page still shows up in the blog post list.

8

nope:

---
title: blabla
_build:
  list: never
---

Read that link above. Those are special build parameters that will configure if the page will be rendered, added to lists and so on.

1 Like
9

thank you sir! that actually solved the major problem of removing the page from the blog post list. now to figure out how to remove the “Written by…” addition to the page.

10

post a link to the repo with the layouts and I ask my texteditor to search for those words :wink:

Do you know that you can override single template files by having a copy of them in your root/layouts folder? Let’s say there is a /themes/mytheme/layouts/_default/single.html in your theme folder, then copy that into /layouts/_default/single.html in the root directory of your website repository and change things in that file. Hugo will prefer those files.

So what you do is look for “Written by…” in your theme, copy the file, remove the line.

1 Like
11

I’ve been grepping on the themes directory looking for the origin of this. :wink:

The “Written by” bit only shows up in a .toml file. I need to keep tracing back to find out where it shows up in a layout.

I do know about the layout override thankfully. I’m clearly managing to get that to work. As you are pointing to, the last bit of the puzzle is to figure out how that page is currently being rendered and remove the unwanted contribution. I’ll keep digging. I greatly appreciate your pointers!

12

If it’s in a toml file then it’s translated. look for i18n using the [keyword] above your grepped location.

{{ i18n "keyword" ...
13

So I found where it shows up. Your suggestion is exactly what I tried. How should I think partials in the layouts? I assume these are page sections? I’ll keep grepping…

14

add a /layouts/partials/single/post-info.html to your repo with this content:

<div class="post-info">
    {{- if .PublishDate }}
        <span>{{ i18n "on" }}&nbsp;</span><time datetime="{{ .PublishDate }}">{{ i18n "publishdate" . }}</time>
    {{- end }}
</div>

or whatever you want to show up (I removed the authorname too).

Stop thinking structure :wink: if it’s a FILE in the theme folder then it’s a FILE in your root/layouts folder.

1 Like
15

yes sir. :wink: I’ll try this now. what I’m suspecting though is that this will remove the author name addition from all my blog posts as well. I’m aiming just to remove it from the static pages I add. so I’m thinking I need a new page type.

16

Define “static page”. Is that all “not blog pages”? You can check in that template if you are in the blog section or not before adding the lines. What is your blog “section” called? (The foldername of your blog entries inside of content.)

17

The blog posts are in the directory content/posts.

18 
<div class="post-info">
  {{ if (eq .Type "posts") }}
    <span>{{ i18n "writtenBy" }}</span>
    {{- if .Params.Author }}
        {{ .Params.Author }}
    {{- else }}
        {{ .Site.Author.name }}
    {{- end }}
  {{ end }}
    {{- if .PublishDate }}
        <br>
        <span>{{ i18n "on" }}&nbsp;</span><time datetime="{{ .PublishDate }}">{{ i18n "publishdate" . }}</time>
    {{- end }}
</div>

not tested… if that does not work try post instead of posts in the second line. Something along these lines…

1 Like
19

thank you sir. I’ve got another idea along the lines of what you suggested in terms of creating another page type. one of these paths should fix this.

20

For future reference, here’s the complete solution:

I created a new static page template in layouts/staticpage/single.html with the following:

{{ define "main" }}
<main>
        <div class="post">
                {{ partial "single/title.html" . }}
                {{ partial "single/header.html" . }}
                {{ .Content }}
                {{ partial "single/footer.html" . }}
        </div>
</main>
{{ end }}

Now any static page placed in content with the front matter:
—
type: “staticpage”
_build:
list: never
menu: “main”
—
yields a static page that is not listed in the blog post list, is linked from the header of the blog, and does not have an another reference.