Heavily nested and styled ul/ol list needs extra <span>s

support
1

Hello,

I’m quite new to Hugo. I’m trying to port a design for an heavily CSS-themed and deeply nested list structure. The final result looks like this:

2019-12-04-211106_1424x497_scrot
2019-12-04-211106_1424x497_scrot1424×497 58.2 KB

and the HTML like this:

<div id="summary">
    <ul>
      <li><span>Les machines peuvent-elles penser ?</span>
        <ol>
          <li><span>Non, car ce qui pense en nous, c'est une âme immatérielle</span>
            <ol>
              <li><span>Par introspection, je me découvre comme être pensant, mais pas comme substance matérielle</span>
                <div class="details">
                  <p class="quote">Descartes: «Je pense, donc je suis»</p>
                  <p class="quote">Descartes: l'indivisibité de l'âme</p>
                </div>
…

Unless my CSS skills are failing me (not unlikely!), I need the <span>s around the titles to style those spans and the nested sublists separately. My issue is that, well, Goldmark doesn’t generate this extra markup I need. I found a few hacky solutions (insert manually in the markdown source, use **bold** and style the strong selector instead of span, etc.) but I wonder if there isn’t a cleaner solution. I considered a {{% span %}} shortcode, but that’s not too elegant either.

A minor limitation is that this weird list is part of the post’s contents: I’d rather not have it defined elsewhere. A key consideration for me is usability for the content writer: my ideal solution would only require them to write a regular markdown list, fully wrapped in a single shortcode:

{{% weirdlist %}}
 - Les machines peuvent-elles penser?
   1. Non, car ce qui pense en nous, c'est une âme immatérielle
      1. Par introspection, je me découvre comme être pensant, mais pas comme substance matérielle
         - Descartes: «Je pense, donc je suis»
         - Descartes: l'indivisibité de l'âme
   2. Oui, car la pensée n'est que l'activité du cerveau: toute machine qui ressemblerait assez à un cerveau pourrait penser
   3. La pensée semble dépendre des états du cerveau sans leur être identique: la réponse dépend de leur relation
{{% /weirdlist %}}

Thanks in advance for any suggestion!

2

forget lists, go GRID

1 Like
3

Thanks, but my structure is logically a hierarchical list, not a grid.

I tried with this shortcode, but the regex substitution fails, I’m not sure what I do wrong.

<div class="keypoints-lycee">
  {{.Inner | replaceRE "^(\\s*\\S+\\s*)(.+)$" "$1<span>$2</span>"  | markdownify  }}
</div>

Here’s the shortcode call, in case it’s relevant:

{{< cours/essentiel >}}
 - Les machines peuvent-elles penser?
   1. Non, car ce qui pense en nous, c'est une âme immatérielle
      1. Par introspection, je me découvre comme être pensant, mais pas comme substance matérielle
         - Descartes: «Je pense, donc je suis»
         - Descartes: l'indivisibité de l'âme
   2. Oui, car la pensée n'est que l'activité du cerveau: toute machine qui ressemblerait assez à un cerveau pourrait penser
   3. La pensée semble dépendre des états du cerveau sans leur être identique: la réponse dépend de leur relation
{{< /cours/essentiel >}}
4

A CSS grid is a layout system, not an Excel spreadsheet…

Ou, en français, la notion de grille CSS n’est qu’une manière de positionner des éléments, pas une manière de structurer des données. À mon avis, c’est faisable avec CSS grid…

5

OK, I was confused since the example uses a bunch of <div>s, but why not. Still, my issue is not positioning elements, but styling a <li>'s “immediate” text separately from the other lists nested inside, hence the need (in my mind) for the extra span: <ol><li><span>Level title</span><ul>…</ul></li>, where Hugo only produces <ol><li>Level title<ul>…</ul></li>

My prototype from the screenshot above uses flex boxes and works perfectly with only this extra markup. If CSS grids or anything could render this with the only markup Hugo generates, I’m interested in an example, because I really can’t think of a way to achieve this.

6

I found an acceptable solution: with an extra \n between list elements, Hugo wraps text in <p>. I could have hoped for something cleaner, but it will do.

7

OK, I used GRID for structuring my pages (YES it’s CSS) to get a working responsive design.
The is a small sample to study

You can nest grids inside grids to build the shown layout.

PS: I wasn’t at home, sorry for the short reply.