Generate Section URLs

support
1

Hey,

I’m currently building https://help.spolytics.com/. It is the help site for spolytics.com.

My content organization is pretty basic. I hope I’ll get the wording right because for a beginner Hugo is pretty confusing.

content/
|-- About\ spolytics
|   `-- How\ much\ does\ spolytics\ cost?.md
|-- How\ do\ I\ use\ the\ app?
|   |-- Reviewing-the-history.md
|   |-- Tracking-a-match.md
|   |-- Using-the-box-score.md
|   |-- Using-the-line-chart.md
|   |-- Using-the-pie-charts.md
|   |-- creating-a-new-match.md
|   |-- creating-a-new-player.md
|   `-- creating-a-new-team.md
`-- Understanding\ beach\ volleyball\ analysis
    |-- What\ is\ a\ category?.md
    `-- What\ is\ an\ outcome?.md

Everything is hosted at AWS S3 using this config

baseURL = "https://help.spolytics.com/"
languageCode = "en-us"
title = "spolytics Help"
theme = "zafta"
pluralizelisttitles = false
uglyURLs = true

Here is the code to generate the breadcrumbs which should link to the individual sections. Each section should show a list of pages which are inside this section.

  <ol class="breadcrumb">
    <li>
      <a href="/{{ .Section | urlize }}.html">
        {{ .Section }}
      </a>
    </li>
    <li class="active">
      {{ .Title }}
    </li>
  </ol>

As you can see I had to manually include the .html suffix. That means if I remove uglyURLs = true from my config in the future I also have to remove the hardcoded .html ending from my templates. I don’t think this is right.

So here is my question: How do I generate a link to a section from inside a single page?

My goal is to have a help page very similar to https://help.github.com/. Not the first “Common Issues” block but below that one.

Cheers!

2

Assuming you are asking how to link to a section’s index page (i.e., a list template) from within a single page template, you might find some utility in the .GetPage function.

3

Thank you for your response. Using

{{ .Site.GetPage "section" }}`

just below my breadcrumbs returns <nil>.

4

How about…(not tested)…

{{$sec := .Section}}
{{with .Site.GetPage "section" $sec}}{{.Permalink}}{{end}}

Would need to be modified per your templating, but just so you can get an idea of how to use the function, which requires a kind for a first argument and a second argument…

5

I’m not sure why you need the urglyURLs = true but in my case, I just use the url without “.html” prefix which is the “pretty” url, and just link it using "/{{ .Section | urlize }}". This makes life much easier.

6

Looks nice! Will try tonight! Thank you.

Tried

{{ .Site.GetPage "section" .Section }}

but that didn’t work.

Will report if this solves the problem.

7

I need urglyURLs = true because the page is hosted on Amazon S3. You cannot use pretty URLs over there execept for the main page, i.e. index.html.

8

You can also use pretty URLs with S3, I do that with my Hugo websites on S3 too. S3 is smart enough to, when requesting example.com/posts/intro/, to fetch the example.com/posts/intro/index.html file.

It’s a bit offtopic, but just saying in case you’d rather use pretty URLs. :slightly_smiling:

9

I’m not sure if I follow this question, because I don’t see a problem. In Hugo, we only have a top-most section (see this doc page, for example).

Because .Section returns the section of the current page, and because there’s only one possible section for each content (or no section at all), I think this will always generate a link to your section page (it does in my case, at least):

{{ .Site.BaseURL }}/{{ .Section }}/

Or, if you’re using ugly URLs:

{{ .Site.BaseURL }}/{{ .Section }}.html

I don’t see the need to complicate matters with the .GetPage function, since you’re only looking to generate a URL to the current section, right?

Hope my 2 cents help.

10

I’m pretty sure you can have pretty URLs with S3.

Here’s a link to the blog post on our website: http://preview.dalafarm.com.vn/blog/cong-dung-bot-ca-rot/ (Sorry it’s in Vietnamese but you get the idea)

It’s hosted on S3 and it has pretty URLs for blog posts.

If you have any problem with having pretty URLs on S3, we’re happy to help.

11

I would steer clear of any construction that uses BaseURL to create your URLs. Try relURL or absURL instead.

12

Can you say why?

13

Tends to be more fragile…and until recently, usage was pretty inconsistent, especially in themes. {{ "whatever-string" | absURL }} is more consistent. See this comment in a related issue:

1 Like
14

Better late than never. That didn’t work. The result was simply blank.

15

@zemirco Can you point me to a repo for this project so I can test locally? Also, what version of Hugo are you using?

16

Here is a repo you can play with https://github.com/zemirco/hugo-demo.