So, if I look at this site, I see that everything is in one page. When I click News, Team or Publications, it all moves down that page. How do I get the links to open up as separate pages?
What I mean by that is that I do not want the other “Sections” to be a continuation of the same webpage.
Where in the documentation can I know more about this?
so with the two linked documentation pages and the themes config folder (which has a menus.yaml you should be able to put the pieces together. the relevant parameter for linking to pages in the site is pageRef - and the config shows both variants to a second page ond to an anchor (#) on the same…
Just to add to what others have said, the key thing to understand here is the difference between a single-page site (where all sections are on one long page and the nav scrolls you to anchors) versus a multi-page site (where each nav link goes to a completely separate URL).
That theme you’re looking at is using the single-page approach with anchor links (#section-name). If you want separate pages, you need to either:
Switch to a theme that’s built for multi-page sites (most Hugo themes are, honestly)
Or create individual content pages in your content/ folder (like content/news.md, content/team.md, etc.) and then update your menus.yaml to point to those pages using pageRef instead of anchor links
The pageRef parameter in your menu config is what tells Hugo “this links to an actual page” rather than a section on the same page. So your menu config would look something like:
Thanks very much, @markupandmatcha and @irkode for the help! I will read through these documents to figure this out. Now that I know the relevant sections, this will be very helpful! Thank you again!
The single-page vs multi-page decision usually comes down to the theme. That theme is set up as a one-pager where all sections render on the homepage and the nav links are anchor links (they scroll to sections on the same page).
If you want separate pages for News, Team, Publications etc, you have two options:
Option 1: Pick a multi-page theme
This is usually the easier route. Themes like PaperMod, Ananke, or Congo are designed for multi-page sites out of the box. Each piece of content gets its own URL.
Option 2: Modify the current theme
You would need to create individual layout templates and update the navigation to point to actual page URLs instead of anchor links. In the theme config, the menu items probably look something like:
[[menu.main]]
name = "News"
url = "#news"
You would change them to:
[[menu.main]]
name = "News"
url = "/news/"
Then make sure you have content files at content/news/_index.md etc, with corresponding list templates in your layouts.
For someone new to Hugo, option 1 is honestly the faster path. You can always customise a multi-page theme later once you are more comfortable with how Hugo templating works.
Thank you for this, @markupandmatcha ! I am looking to create an academic website. I had not previously noticed Congo but I did consider PaperMod. The most attractive feature of PaperMod is its simplicity. There are two things that bothered me about that theme. The first is that I could not quite figure out how to move the top image to the side (to save screen estate), and even better have text wrap around it. The second, I think I possibly have a handle on, is to make the navigation bar sticky. But the first, I have not been able to figure out so far. (Sort of like this:
So, I tried this, and this almost works! I changed config_default/menus.yaml
That is, except for the landing page which is one long page with all the sections in it. That is probably some other file, but I can not tell where that is.
(I also tried this with the careercanvas theme and had the same result. So, I guess almost there, but not quite.)
The above are the files called _index.md. I can not see where there is a link with menu entries.
I find the code for this site extremely confusing. I see that there are three themes in there, and it appears to me that all three are being called. (The hugo.toml does not appear to have anything called `theme` in the root directory. But I do not quite understand how and where the different themes are being called. Any suggestions in this regard would be very helpful!
There is none as far as I can see. Where and Why do you expect something there?
The theme used is “starter-hugo-academic” and all in the local layouts folder
There’s a Readme for the theme in their folder - follow the links there to get some documentation.
recheck the docs about the two possible ways to configure a hugo project. The main theme is “starter-hugo-academic”
all in the config files: all or one of
-theme variable
as imports
as modules
I would not consider these Wowchemy/Hugo-Blox theme a good place to start “fast path learning” and “cherry-picking” . There’s a lot behind the scenes… see their websites
Maybe an external resource or a tutorial … and DIG in and play with it -