Dividing content into "left" and "right" column

[Hartmut Goebel]

Hi,

being quite new toe nikola, I need to convert an existing website.

Each page consists of several sections and is two-column, the design is based on https://html5up.net/paradigm-shift:

• Left column: Headline, one or more lead texts, link to the next section
• Right column: Text, images, galleries.

In HTML it looks like this:

<section id="first">
  <header>
    <h2>Headline</h2>
    <p>Some lead text</p>
    <p>Possibly another lead text</p>
    <a href="#second"><Link to next section on page</a>
  </header>
  <div class="content">
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
    images, galleries
  </div>
</section>
<section id="second">...</section>
<section>...</section>

The text is written in reSt (can still be change id required) and will be maintained by a non-technical person. Thus any solution should be as simple as possible.

Questions:

• Is there some easy(!) way to group the left and right sides, to make them stylable? (I already tried some directives, but did make one of ti work.) Maybe putting some shortcode or role at the dividing point.
  
• How can the links to the next section be generated automatically?
  

Some more background:

• Its about 6 pages and max. 10 sections per page. So some solution collecting sections into pages would be acceptable.

Thanks in advance for any ideas

-- 
Regards
Hartmut Goebel

| Hartmut Goebel          | h.go...@crazy-compilers.com               |
| www.crazy-compilers.com | compilers which you thought are impossible |

[Chris Warrick]

> --
> You received this message because you are subscribed to the Google Groups "nikola-discuss" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to nikola-discus...@googlegroups.com.
> To view this discussion on the web visit https://groups.google.com/d/msgid/nikola-discuss/e35ef750-edcd-f505-9567-7156cf3c408b%40crazy-compilers.com.

You could probably use well-placed `.. raw:: html` blocks that add in
the necessary HTML. You might also split your content into separate
.rst files, tell the non-technical person to edit that, and then
include them (via reST directives) into the real file with raw-html
directives.
--
Chris Warrick <https://chriswarrick.com/>
PGP: 5EAAEA16

[Hartmut Goebel]

Am 20.05.22 um 00:14 schrieb Chris Warrick:

> You could probably use well-placed `.. raw:: html` blocks that add in
> the necessary HTML. You might also split your content into separate
> .rst files, tell the non-technical person to edit that, and then
> include them (via reST directives) into the real file with raw-html
> directives.

Thanks for sharing this idea. I would prefer to have the corresponding
left and right side, which from one "page" or "article", in one file. So:

* How can I have `.. raw:: html` block in s shortcode, or some other
means of replacement?

* The left side is quite simple, just some heads, short texts and one or
two short paragraphs. So maybe use the page metadata section?

* Is there some way to post-process the document tree after rst-parsing?
If so, maybe this can be use for splitting left and right at some
marker, rearrange the tree and remove the marker?

[Hartmut Goebel]

Am 23.05.22 um 08:59 schrieb Hartmut Goebel:

> * The left side is quite simple, just some heads, short texts and one
> or two short paragraphs. So maybe use the page metadata section?
>
> * Is there some way to post-process the document tree after
> rst-parsing? If so, maybe this can be use for splitting left and right
> at some marker, rearrange the tree and remove the marker?

Or maybe some sophisticated template, tweaking the "article" doc-tree
prior to passing it to the "story" template.

[Maciej Kusz]

If you are using theme based on bootstrap, you can simply use class directives with col-md-6. For rreST syntax this is
.. class:: col-md-6
If you are using markdown syntax, then this is:
{@class=col-md-6}
To use 2 column layout you need to paste 2 of this. Text after fist directive, will be a left one, after secodn, will be right. You can take a look here: https://testerembyc.pl/pages/jak-zaczac-automatyzowac-testy/
If you want to came back to full page column, use 12 instead of 6 at the end of directive. 

[Maciej Kusz]

PS. Example from linke is not with text, but it uses those directives: left column is a book cover, right is a text with form.