I am writing my posts in jekyll in html. I cannot seem to figure out how to specify layout fro the post.
What is the html equivalent of this markdown header
---
layout: post
---
You do the same thing in HTML files (and any files) to specify a layout to use.
The layout refers to the HTML templates stored under _layouts in your Jekyll directory structure.
If you want to use different layouts for different types of post then you need to create multiple templates in _layouts.
Related
I am a beginner at web development, and I just want to make a small website based on jekyll. So I have created 4 posts, and they show up nicely on the website. The thing is that they actually show up on the bottom of the page, under stuff I put in index.md (which takes up like the whole page); I want to find a way to move the whole post section to the right so it's parallel to the content in my index.md. I tried CSS flexbox, but I can't find where to add the codes because the posts are found in a separate folder and don't show up in my index.md. What should I do?
You might want to try a different Jekyll template from the one you are using now instead of adapting your current one. The template my university provide for Jekyll in our institutional GITLAB, for instance, has posts above content in the index.md file. And it can be tricky to adjust themes.
However, there are Jekyll templates with a two-column layout with a side-bar.
You might want to check out the "Minimal Mistakes" theme or the "Hyde" theme.
I have a Jekyll site, made in textile, which is very big and would like to separate it in several source pages.
The include tag seems to only work for html pages.
An alternative would be to run a script that would merge the several pages before jekyll converts the textile to html.
Can this be done?
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
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.
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