Posts on John's Blog

Lazy Load Posts

Sat, 12 Sep 2026 00:00:00 +0000

Toha can append the next page of post cards as readers scroll near the bottom of a list. It works on blog sections, nested sections, and individual tag and category pages.

Configuration

Enable the feature in hugo.yaml:

params:
 features:
 pagination:
 maxPostsPerPage: 12
 lazyLoad: true

lazyLoad defaults to false. maxPostsPerPage controls the number of cards in both normal pagination and each additional batch. No JSON output configuration or additional library is required. Existing RSS feeds and output formats remain unchanged.

Code blocks

Thu, 22 Jan 2026 00:00:00 +0000

Code blocks have a compact header automatically. This example site enables params.features.codeBlock.folding.enable with an eight-line preview. Set folding.previewLines to change the preview length or folding.enable: false to show all code. Use codeBlock.copyButton.enable to control copying.

A long example

Copy includes the complete configuration, even while only its preview is visible.

baseURL: "https://example.com/"
languageCode: "en-us"
title: "My portfolio"

params:
 features:
 codeBlock:
 copyButton:
 enable: true
 folding:
 enable: true
 previewLines: 8

 footer:
 enable: true
 newsletter:
 enable: false

Initially expanded, without line numbers

This block starts expanded and can still be folded. Its Copy button preserves the complete source without relying on the highlighted markup.

Introduction

Mon, 08 Jun 2020 08:06:25 +0600

Greeting! This is an introduction post. This post tests the followings:

Hero image is in the same directory as the post.
This post should be at top of the sidebar.
Post author should be the same as specified in author.yaml file.

Markdown Samples

Mon, 08 Jun 2020 08:06:25 +0600

This is a sample post intended to test the followings:

A different post author.
Table of contents.
Markdown content rendering.
Math rendering.
Emoji rendering.

Markdown Syntax Rendering

Headings

The following HTML <h1>—<h6> elements represent six levels of section headings. <h1> is the highest section level while <h6> is the lowest.

H1

H2

H3

H4

H5

H6

Paragraph

Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.

Rich Content

Mon, 08 Jun 2020 08:06:25 +0600

This sample post tests the followings:

Category, sub-category nesting in the sidebar.
Hero image and other images are in images folder inside this post directory.
Different media rendering like image, X (formerly Twitter), YouTube video, Vimeo video etc.

Image Sample

X (formerly Twitter) Sample

Owl bet you'll lose this staring contest 🦉 pic.twitter.com/eJh4f2zncC
— San Diego Zoo Wildlife Alliance (@sandiegozoo) October 26, 2021

YouTube Video Sample

Vimeo Video Sample

Shortcodes Samples

Mon, 08 Jun 2020 08:06:25 +0600

This is a sample post intended to test the followings:

Default hero image.
Different shortcodes.

Alert

The following alerts are available in this theme.

This is sample alert with type="success".

This is sample alert with type="danger".

This is sample alert with type="warning".

This is sample alert with type="info".

This is sample alert with type="dark".

This is sample alert with type="primary".

This is sample alert with type="secondary".

Image

A sample image without any attribute.

A sample image with `height` and `width` attributes.

A center aligned image with `height` and `width` attributes.

A image with `float` attribute.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras egestas lectus sed leo ultricies ultricies. Praesent tellus risus, eleifend vel efficitur ac, venenatis sit amet sem. Ut ut egestas erat. Fusce ut leo turpis. Morbi consectetur sed lacus vitae vehicula. Cras gravida turpis id eleifend volutpat. Suspendisse nec ipsum eu erat finibus dictum. Morbi volutpat nulla purus, vel maximus ex molestie id. Nullam posuere est urna, at fringilla eros venenatis quis.

Posts on John's Blog

Lazy Load Posts

Configuration

Code blocks

A long example

Initially expanded, without line numbers

Introduction

Markdown Samples

Markdown Syntax Rendering

Headings

H1

H2

H3

H4

H5

H6

Paragraph

Rich Content

Image Sample

X (formerly Twitter) Sample

YouTube Video Sample

Vimeo Video Sample

Shortcodes Samples

Alert

Image

A sample image without any attribute.

A sample image with height and width attributes.

A center aligned image with height and width attributes.

A image with float attribute.

A sample image with `height` and `width` attributes.

A center aligned image with `height` and `width` attributes.

A image with `float` attribute.