Build many similar pages with only 1 layout and 1 set of includes?

Help
1

I’m planning out my first Jekyll site which will have a landing page with some text and links. The real content of the site is going to be a series of sub-pages (linked to from the front page). They will be two-columned pages. The left column will be text and the right side will be code (and maybe a screenshot).

So, there’s mundane copy/paste ways of achieving this but from the documentation I’ve read and the videos I’ve watched so far I have an inkling there’s more power in jekyll that I can tap into.

The super-awesome-wow-jekyll-is-great dream I have is this:

  1. Have a layout with your usual header/footer includes.
  2. In the layout have a responsive grid for the two columns.
  3. Have an include in the left column for the text explanation and in the right another include for the code snippets.
  4. Have a folder somewhere that has a lot of markdown files. 1 md file for the text, another for the code. And then another 1+1 pair of files for another page, and on and on.
  5. Do something with front matter/includes/??? that will generate a series of pages that get built as a part of the jekyll build process which get unique titles and pull into the appropriate includes only the 1+1 pair corresponding to each other. And then another page with a unique title and its 1+1 pair.

I’m new and probably way off base with this idea. If so, I’ll keep plugging and poking trying to discover the most jekyll’y and programmatic way to build this site.

Thank you!

2

you probably could do something complex like this, but why not just do it all in the same md file? you can use html within a md file, so you should be able to use a 2 column layout without much trouble.

Just seems easier to maintain when it is all in one file.

To be clear the html would be just to set up the div structure for the 2 columns.

3

Sounds very reasonable!

So I’m clear: You’re suggesting that for each of the subpages just manually create the .md file and include the basic grid in that file along with the actual content for that page?

4

yes - but I will call a sub page a post to make it more clear. You should be able to make a post in MD that includes either classes or html to give you a 2 column layout. I would put both you text and code sample in the same post.

Sometimes there is a trick in MD when using html to tell it to process the content inside the html as MD - I don’t remember what that was but it should be easy to find on the kramdown docs site.

5

Thanks a lot for your help. I got it all figured out. I ran into some hiccups trying to get the HTML and MD to coexist peacefully but now it’s all sorted.

That trick you mentioned is to add markdown=“1” inside a tag, like <p markdown="1">

Thanks!