Set {{ content }} in Jekyll included template via nested layouts - jekyll

This may be too complicated and there may be a better design, so I'm open to suggestions.
Essentially I have a default-page.html that look something like
...
{{ content }}
...
I want a posts page where the content is going to be a for-loop over all posts.
So this posts page can call the default-page setting the content to its own content -- how?
Can the posts.html itself have a layout feature, creating a nested layout?
Is the best way to through everything into a captured variable? This seems complicated.

You are overthinking it. posts.html or posts/index.html can be an HTML file, that uses Liquid, that has a layout on top. Calling liquid does not preclude a file from using a layout.
I am not sure whether nested layouts are also possible but the syntax certainly would be identical.

Related

Mailchimp - Can you show and hide content block in a custom template?

I have the joyful task of making an email template and I have a lot of content blocks that need to be coded into the template.
All of which might not always be used.
I was wondering if there is a way to hide/show content blocks for the client so they aren't stuck with the same layout?
From my own research this doesn't seem to be something that is possible.
Update
I've found that there is the mc:hideable
attribute but it does not work as expected. It is fair to say it doesn't work.
if you added the content blocks, and the template is ready - try to create a campaign, using start point your prior done template, and try to hide the blocks there, and check if that is the result what you need.

How to make modular HTML pages (partials) using Node?

I've been trying to find a way to write HTML partials (header.html, nav.html etc.) and include them inside another HTML page as a part of my build process.
I know about server-side includes in Apache or includes in PHP but I was wondering if there was a way to do it in Node ? I've tried using template engines like Jade or Handlebars but they were not really built for that. Jade was the closest to what I'm trying to achieve but I don't want to use the syntax and there's no good way to use regular HTML. With every other one you have to include a script tag in your HTML, which I would have to strip for production.
I'm just trying to build a static website and would like to keep my build process simple (I'm using NPM scripts). Do you know any other way around copy-pasting the common parts of my website for every page ? How do you manage this in your workflow ?
Here is a recap (a bit overdue) of what seem to be the best solutions for a simple use case: preprocess (has more options, can use custom or environment variables) and ssi (mentioned by #Alex K., it is very simple and sticks to Apache-style server-side includes). I ruled out jade since it added a lot of features I didn't really need.
This actually is really a perfect use case for jade or some other tempting engine.
Layout
The basic approach would be to create a layout.jade file with all the stuff that doesn't change and dictates the general layout of the site.
layout.jade
doctype strict
html(xmlns='http://www.w3.org/1999/xhtml')
head
meta(http-equiv='Content-Type', content='text/html; charset=utf-8')
title some title
body
| Static content like nav
block pageContent
Content based on the route
Within the layout file you can define a series blocks as place holders for content to be injected from other templates. That template will extend the layout and inject the relevant blocks, something like this:
some-route-template.jade
extends layout
block pageContent
| I am content from the relevant page
Compilation
The only thing left at this point is to compile template that matches the requested route using the jade library

Has anyone tried to use jekyll to generate dashboard pages?

I'm using static html pages and incline js to generate dashboard. The backend is go.
However, as number of pages growing, I have to maintain a lot of html pages, and many of the block elements are duplicated.
I'm wondering whether there're some cases to use jekyll to generate dashboard pages, since jekyll can convert pieces of elements into complete htmls? So that I can modify one part and the modification take effect on every html pages that generated.
Are there better framework to do so?
Thank you!
If you're duplicating elements, then those are the perfect pieces of markup to put into a layout and/or include. That's exactly what those are for.
Each individual page you need can reference a specific layout in its front matter. Includes can be used within the individual pages or within the layouts or both (and can be nested).
The Jekyll Documentation is ok for this, but to wrap your head around it I find it easiest to look at the documentation together with a few existing Jekyll templates to understand how it all fits together.
after a bit more dig. I found that packages such as Grunt and Gulp can be used to generate htmls from separate parts.

Editing static content

I'm generally really impressed with Bolt and the flexibility it provides me for creating contenttypes with specific fields with minutes. However, I have a template which has common content across the site that I would like to make editable without allowing the user to edit the .twig files directly.
I've considered creating a different contenttype just for each part of the template but this seems inefficient.
For example I would like to make the address editable, and a panel that contains text and three images. Just wondering if there's a sensible way for achieving this.
Thanks
Create resource ContentTypes for this type of stuff, then you can put that into inheritable Twig files that you can then {% include '' %} as required.

What is the best way to organize Jinja2 templates?

I found the way Jinja2 extends works quite inadequate or I'm possibly not using it in the correct way.
I would like to break down my templates folder into smaller, manageable pieces and include them into a bigger page. For example, I would like the index.html page to be made up of:
header.html
content.html
signup.html
footer.html
While my dashboard.html would be:
header.html
dashboard.html
footer.html
I can create a base.html template and include header/footer etc. in it but, that still leaves me with a rather large chunk of html that I don't want. I want as small pieces of html in one file as possible.
Please suggest a way to achieve this. Or guide me to some best practices, etc.
I created a jinja CMS to generate child templates like your index.html and dashboard.html. A child templates holds one or more small html blocks. This html is stored in the db. I use App Engine.
The first version of this CMS can be found here:
https://codereview.stackexchange.com/questions/5965/review-request-jinja-cms-for-energiekantoor-nl-on-google-app-engine