Hi,
I’m new to the likes of global variables and counters.
I try to implement a <section><h#>sfsfs</h#>Chapter</section> layout, for instance to give a different background to chapters with specific headings.
What I want is one Page-level variable which I would rewrite, like a counter, to signify how deep on the heading tree we are. Then I would add $dept - .Level </section> closing tags, before reducing the counter of that much.
I think of using:
Problem is it can’t work with the last closing tags after the last paragraph, because the footnotes (more accurately called endnotes on a webpage) are part of .Content, I can’t put anything between them and the last paragraph.
Hugo doesn’t facilitate that very common layout, if it allows it all.
I hope one day we’ll have detachable footnotes (.Endnotes) not part of .Content., to keep total control of our layout. What if I want them in a sidebar for instance ?
No css counters don’t work, I need to edit the html, meaning, using partials.
I want the text to be divided by section tags like this:
<section>
<h1>h1 In a section></h1>
<section>
<h2>h2 in a nested section</h2>
<section>
<h3>h3 doubly nested in two sections</h3>
text in subchapter
</section>
<section>
<h3>h3 doubly nested in two sections</h3>
text in subchapter
</section>
</section>
</section>
So I need to keep track of how deep I am in the tree - which is easy with .Level, only available in render-heading.html - and at the end of the document, before <div class=footnotes>.
. In this dream, you are welcome to participate.<div class=footnote …
And I would need to insert a (.Level - 1) number of tags before the div. I can’t write that in render-heading.html (as far as I understand ?) but I can’t know the last the depth level reached down the tree outside of render-heading.html.
Unless I increment a scratch counter with every heading and use it at the end of the document to edit .Content.
But then it would have to parse .Content first… I don’t know how that works.
for the simple reason that goldmark doesn’t work that way at all and correcting this afterwards seems very tedious. Proper headings are generated automatically so I would never need an outline algorithm with hugo/markdown.
The only reason I want to encapsulate headings and the following text within sections, is to target entire chapter of whatever depth and style them.
Without sections I don’t know how I can accomplish this.
They’ll allow you to use a pair of recursive partials that ‘walk’ the content (or data) tree.
The branch page bundle choice has the advantage that you can have your headings and per-chapter / sub-chapter content together and use a layout that wraps them in a section or div quite nicely.
I’ll try to make some time to an example of what I mean, later.
Oh…
In fact, yes it looks very close to what I would like, except heading numbers would not reset within sections. But your solution would be an absolute maintenance nightmare and it’s horribly clunky compared to writing articles in one go. I don’t even want simple leaf bundles, so this would obviously be a big no no. So goldmark doesn’t allow the layout (or anything but their plain one).
That sucks.
I already make a generous use of this since shortcodes are so inconvenient.
But how could this target a block that doesn’t exist ? Without a framing paragraphs, there’s no targeting them with css. Foregoing markdown is out of the question for what amounts to a HTML purist’s quest.
But changing the markdown handler, why not ? I thought the reason we switched to Goldmark is that others sucked ? And I don’t know if pandoc or ascii-doc can be parameterize as to produce that headings/sections outline. Only the the default handler is explained. If I only need to write a few python or go lines, I can try.
Hugo facilities every and any layout. You issue is that you want to generate very specific set of markup, using content. That’s not going to be easy and seems like the hardest possible way to achieve what you want.
I’d suggest using a list template, and organising your content in the structure you want. That way you can attach any style you like directly to the content item itself, as front matter. For example, if the 3rd ‘section’ should have a green background, set that as a parameter in section-3.md and then output it as your list page loops through the sections.
However, if you are in fact dealing with a book/article/essay then the example markup you are trying to achieve is far from ideal. In your example the current output is almost perfect (it is missing closing p tags), but the example you are trying to get is not good at all from a semantics perspective, it makes no sense and the reason you gave for attempting this doesn’t make much sense either;
The only reason I want to encapsulate headings and the following text within sections, is to target entire chapter of whatever depth and style them.
Why would I want to style a chapter specifically ? Why not ? It would reflect the logical structure of a book. Btw the absence of </p> is hugo’s/goldmark’s doing, not mine. It seems not to matter semantically..
Because it doesn’t make sense. The logical structure of a book is based on the order of content, and heading levels.
What you are trying to achieve would damage the logical structure, and poor html provides poor semantics.
If you are trying to change ‘the look’ use css, not arbitrary section elements as that will change ‘the meaning’. It would be trivial to attach a class to each heading element of a ‘section’ you wanted to style and use that as a hook to style that ‘section’, using the .has() selector, possibly in combination with an adjacent sibling combinator, though it depends on exactly what you are trying to achieve.
Get the html right and the document will always be right.
It would be much more indirect and cumbersome css than #special_paragraph + section {…},
with the added benefit of working with all heading levels. But I could use inline css in the heading renderhook to profit from .Level.
A big caveat though:
Borders/outline and worse background images (kinda what I was looking for, oups !) absolutely require a container(<section> !!) to not look ugly. Or am I mistaken ?
You are overspecifiying your css. Don’t use h3 as an element selector and it will work with all heading levels, but I still think the best approach is to use a list template. That way you can easily style each section however you want; just add front-matter to your ‘chapter’.
