This page contains almost all elements that can be used for pages. Check out the source of this page to see how it is made. (markdown tutorial and cheatsheet link)
For information regarding the site architecture and other things besides content, please visit the github project and read the README file.
To write content that has to be easily injectable in other pages, navigate to the folder _includes and then the folder _content. There will be folders for every language, as content is language specific. Go to the correct folder and make a new file there. You can name it anything, as long as it ends with .md . Make sure there is no so-called Front Matter in the file, which are the — lines at the top of content pages. To inject it in a page, use the include tag with the file path like so:
Which results in the following:
Hello, this is an included piece of content, which can also be enriched with markdown.
Including a table of content
This table of content element is not to list all sections of the current page, but rather to list all children pages. This can be done the same way as including content, but using the path “_content/table-of-contents.html”. It is not in a language folder because it is not language specific and is rendered with the page’s titles themselves.
Including code can be done with the highlight tag. It also takes a parameter for the language that the code is written in. Refer to this github page to see all supported languages.
A code block can be added with the following:
A specific element that can be inserted is the information box. This can be used to highlight information in a certain way.
Notification / Information box
This is a notification box, we can put anything, including markup in here.
This is a warning box.
This is an error box.
Tables are styled in a specific way, but this will happen automatically.
|Number||Next number||Previous number|
Images should be saved in the /img/content folder.
To make it a specific size, add height=”200px” and width=”200px”. Be aware that if a big size is used and the image is viewed on mobile, it does shrink to the screen size (to prevent sideways scrolling), but does not scale proportionally, which gives an undesired effect. As such, it is advised that if height and width are added, the class img-responsive is also added, so it will scale proportionally on small screens.
To only make them responsive, and thus screen-filling, only add class=”img-responsive”.