Blog Posts Functionality

Alexandet Kutsan January 20, 2024 [Technical] #zola

I am using Zola as a static site generator with theme. It provides an easy way to create posts in Markdown, requiring minimal configuration. Despite its simplicity, it is feature-rich and has no JavaScript/npm dependencies.

In this post, I am exploring various useful abilities of Markdown/HTML that can enhance blog posts.

For example, hiding part of the content in a collapsible block:

In the collapsed part, I can include extensive text without cluttering the page. This can be achieved using the following syntax:

<details>
    <summary>Summary of the content</summary>
    Content itself
</details>

Syntax highlighting also works within these blocks.

I can include Markdown-style images like ![Image](img.jpg):

Or link to an image/file like [link to image](img.jpg) : link to image

Additionally, I can use HTML tags for more control over the images:

<img align="right"  src="img.jpg" width="128">

Lists are easy to create:

Point 1
Point 2
- Subpoint
- Subpoint 2
- Subpoint 3
Point 3
- Subpoint 3

Headers or Chapter Titles Markdown Style

One interesting feature is the ability to inject scripts and create small HTML/JS-based dynamic content:

<script>
  function showAlert() {
    alert('Hello, this is an alert!');
  }
</script>
<button onclick="showAlert()">Click me</button>