I've got a requirement to build a section page that is comprised of some static header material, static footer material, and several sections of user-managed content. This user managed content is fragmentary, and as such should not have a permalink.
I thought that a good way to do this might be to use headless pages.
It looks like to do that, these fragments must have a directory with an index.md, and should be accessible using the .Site.GetPage operator.
I'm struggling with figuring out how to use .Site.GetPage to get a list of pages to iterate over. There will be 2..n user sections, and I don't want to rebuild the section's template if the number of content modules changes.
I'm assuming either there's some magic to query multiple pages using .Site.GetPage, or there's an entirely different operator for this.
That, or I've completely misunderstood how to use headless pages.
Here's my template for the section (../layouts/the-range/section.html):
{{ define "main" }}
<div id="page-wrapper">
<div class="halfhero" id="map"></div>
</div>
{{ $sections := .Site.GetPage "/the-range/*" }}
<!-- leaf content at .../content/the-range/*/*.md -->
{{ range $sections }}
<section class="range-section">
<div class="section-content">
{{.Content}}
</div>
<img src="{{.Site.BaseURL}}{{.Params.images}}">
</section>
{{ end }}
{{ end }}
The headless content is just a series of markdown files as leaf bundles.
Via the Hugo community at https://discourse.gohugo.io/t/using-headless-pages-in-section-lists-in-hugo/15275/2
Given a structure like this:
content/headless/
├── index.md # headless = true in front matter
├── five.md
├── four
│ └── index.md
├── one
│ └── index.md
├── three
│ └── index.md
└── two
└── index.md
You can do:
{{ $headlessbundle := .Site.GetPage "/headless" }}
{{ range ( $headlessbundle.Resources.ByType "page" ) }} <br>
{{.}}
{{ end }}
Which should output:
Page(/headless/five.md)
Page(/headless/four/index.md)
Page(/headless/three/index.md)
Page(/headless/two/index.md)
Page(/headless/one/index.md)
Related
I am running an open source comment engine on my server which I want to integrate to my Hugo site.
After doing all the listed things below, the comment section is not visible, and only the heading appears.
What are the possible reasons for this and error and how can I solve it?
So I created a partials file for It, added some code in single.hmtl and edited my config.toml correspondingly.
This is what's inside my partial file named commento.html:
<div id="commento"></div>
<script defer src="{{ .Site.Params.CommentoURL }}/js/commento.js"></script>
<noscript>Please enable JavaScript to load the comments.</noscript>
This is what's inside my single.html file:
{{ if and .Site.Params.CommentoURL (and (not .Site.BuildDrafts) (not .Site.IsServer)) -}}
<h2>Comments</h2>
{{ partial "commento.html" . }}
{{- end }}
and I added the commentoURL parameter in config.toml file like this:
CommentoURL = "http://qwerty.abc:8080"
Please Inspect the output HTML. I am pretty sure you will find this empty div:
<div id="commento"></div>
This means that your Javascript is broken. This has nothing to do with Hugo, partials or even Hugo themes. You probably also have a red error in your Javascript console. This is what you should focus on.
A page on my site calls .Resources.Match to fetch a group of content files that I expect to have their own .Resources property, but do not. I would like to fetch the page, then get a resource. The content structure is like a page bundle, and I've added [[resources]] to the front matter, but neither .BundleType nor Resources is set (.Resources returns an empty array). How can I get the content, then the resource?
Directory
page/
├─ index.md
└- leaf_bundles/
└- leaf/
├─ index.md
└─ resource.etc
Template page/index.md
{{ $leaf := .Resources.Match "leaf_bindles/**/*.md" | index 0 }}
{{ $leaf.IsPage }} // => true
{{ $leaf.Resources }} // => []
Content Front Matter leaf/index.md
[[resources]]
name = "resource"
src = "resource.etc"
I assume that if I were to create a template for "leaf", .Resources would be populated in that context. Is it possible to fetch leaf bundle resources from a page returned itself by a call to .Match?
I was able to achieve the desired result -- accessing page bundle content and resources from a parent page -- using .Pages and the where operator. Instead of calling .Resources.Match to fetch the .md file of a page bundle, .Pages where "Type" "mySection" returns the page bundle in its entirety, including a pointer to its resources. I set the "type" in front matter, and am good to go.
Thanks to misterbisson whose post led to my solution.
Is there anyway to create a hugo page which has no direct links? I would like to be able to create a markdown file for a page but only allow people to find the page if they have a direct link.
Yes it is possible. It really depends on how you are generating your pages. As for now I am showing two ways you can do it.
Way 1: Your _default/list.html generates the list of links to your content. You can customize that to exclude a link. Watch the if conditional.
{{ range .RegularPages }}
{{ if (not in .Title "title of page to exclude") }}
<li>
{{.Date.Format "2006-01-02"}} | {{.Title}}
</li>
{{ end }}
{{ end }}
Way 2: Alternatively you can put an html file in the static folder of your hugo directory. If the directory does not exist, you can create it. No direct links will be generated for static contents unless you explicitly link to it from somewhere else.
You can put all pages you do not want to list into a separate content sub-folder and not include it in the menu.
For example, my setup:
content
├── blog
├── notes
└── voice
Where only voice and blog have menu items, so everything in notes can not be accessed by links from the site.
How can I have /posts as homepage?
Should I redirect, change the baseURL in hugo 1config or make changes in
the theme 2config?
Footnotes
1 https://gohugo.io/getting-started/configuration/
2 https://github.com/luizdepra/hugo-coder/wiki/Configurations
You can modify the home.html file, as the index.html file is embedding it and there is nothing else in index.html
https://github.com/luizdepra/hugo-coder/blob/master/layouts/partials/home.html
Make the changes in the above file in theme/layouts/partials/home.html these changes will take effect on the site as soon as you save the file (if you are already running $ hugo server -D)
For me, it helped to add a layouts/index.html file to my theme. Here is its content:
{{ define "main" }}
{{ $pag := .Paginate (where site.RegularPages "Type" "in" site.Params.mainSections ) 6 }}
<div class="archive-body">
{{ range $pag.Pages }}
{{ .Render "li" }}
{{ end }}
</div>
{{ partial "pagination" . }}
{{ end }}
"li" is a partial HTML template, which renders a single page for me.
Then I had to specify mainSections in my config.toml. Since my content is located inside content/post directory, here is the configuration.
[params]
mainSections = ["post"]
Since this is a list, you should be able to add more than one section. For example, if your content is spread let's say between content/post and content/articles and so on. I haven't tried this, though.
I know this is an old question, but the easiest way for me to set a particular markdown page as the landing page was simply to create a layouts/index.html to override my theme's, and put this in it:
<script>window.location = "/mainlist"</script>
This way, I can keep all my theme's styling, not worry about editing templates, and just focus on creating the content. As a newcomer to hugo, this worked quite well as a replacement for Pelican's save_as: index.html.
Look, Hugo is for writing static (and blog) sites in markdown. GREAT! How do I create the home page (i.e. not the home post)?!
By home page I mean I want to have some markdown file rendered in my theme at the root: http://example.com/, not http://example.com/home (I will change themes if necessary, but I'm currently using hugo-nuo).
Here's how I'm trying to do it:
add my own layouts/index.html (overriding the theme's)
{{ define "main" }}
{{ partial "header.html" . }}
<section class="main">
WHERE I WISH I COULD IMPORT home.md OR SOME SUCH, HECK I'D BE ALRIGHT JUST PUTTING MARKDOWN HERE
</section>
{{ partial "footer.html" . }}
{{ end }}
This incredibly long thread seems to discuss a bunch of issues that've been addressed, but I don't see this answer.
This answer says to use shortcodes. I'm willing to do that, but it looks like shortcodes can only be used from within content (citation needed).
You can add a _index.md into the folder content/ and access it, e.g. via {{ .Content }}.