avel homepage (sample)

Language Switching

2026-06-08T00:00:00+00:00

avel supports static language switching with Zola's multilingual content model. It does not detect the browser language with JavaScript. Instead, Zola builds each language ahead of time and the theme renders ordinary links between matching pages.

The demo uses English as the default language and Japanese under /ja/</code>.


Try it now:</strong> this very article exists in both languages. 日本語で読む →</a> — the URL changes to /ja/posts/multilingual/</code>, and the Japanese page links straight back here. Both directions are plain static <a></code> links: no JavaScript, no redirect.</p>
</blockquote>
Configuration</h2>
Set English as the default language, then add Japanese in config.toml</code>.</p>
default_language</span> = "</span>en</span>"</span></span>
</span>
[</span>translations</span>]</span></span>
home</span> = "</span>Home</span>"</span></span>
posts</span> = "</span>Posts</span>"</span></span>
</span>
[</span>languages.ja</span>]</span></span>
title</span> = "</span>avel のホームページ（サンプル）</span>"</span></span>
description</span> = "</span>とにかく表示が速い、no-JS の Zola ブログテーマ</span>"</span></span>
taxonomies</span> = [</span></span>
  {</span> name</span> = "</span>tags</span>",</span> url</span> = "</span>tags</span>",</span> feed</span> =</span> false</span> },</span></span>
]</span></span>
</span>
[</span>languages.ja.translations</span>]</span></span>
home</span> = "</span>トップ</span>"</span></span>
posts</span> = "</span>記事一覧</span>"</span></span>
</span>
[</span>extra</span>]</span></span>
language_switch</span> =</span> true</span></span></code></pre>
Keep the default-language taxonomy at the top level.</p>
[[</span>taxonomies</span>]]</span></span>
name</span> = "</span>tags</span>"</span></span>
url</span> = "</span>tags</span>"</span></span>
feed</span> =</span> false</span></span></code></pre>Content files</h2>
Use the same slug for both languages. The default language has the plain filename, and Japanese adds .ja</code> before .md</code>.</p>
content/</span></span>
  _index.md</span></span>
  _index.ja.md</span></span>
  posts/</span></span>
    _index.md</span></span>
    _index.ja.md</span></span>
    my-post.md</span></span>
    my-post.ja.md</span></span></code></pre>
This produces:</p>
/posts/my-post/</span></span>
/ja/posts/my-post/</span></span></code></pre>
Zola matches these files as translations of the same page, so avel can link between them.</p>
Template behavior</h2>
The post list uses the active language when it reads the posts section.</p>
{% set posts = get_section(path="posts/_index.md", lang=lang) %}</span></span></code></pre>
UI labels use translation keys.</p>
{{ trans(key="posts", lang=lang) }}</span></span></code></pre>
The language switcher is a normal static link. There is no runtime language detection and no JavaScript fallback.</p>
Practical rule</h2>
Use English slugs even for Japanese translations. This keeps the URL structure stable and makes the theme gallery demo easier to inspect:</p>
content/posts/respect.md</span></span>
content/posts/respect.ja.md</span></span></code></pre>
The visible title can still be fully translated.</p>

OGP Card Image 2026-06-08T00:00:00+00:00 avel can emit an Open Graph image for social sharing, but the image is optional. The theme does not force one fixed card on every site. The demo uses static/ogp.png</code> so links to the demo render as a large social card. Your own site should replace that image with one that matches your title, brand, and content. Configuration</h2> Place an image in static/</code>, then point extra.og_image</code> at it. [extra] og_image = "ogp.png" og_image_alt = "My site" og_image_type = "image/png" og_image_width = "1200" og_image_height = "630"</code></pre> When og_image</code> is set, avel emits og:image</code>, og:image:secure_url</code>, twitter:image</code>, and a large Twitter Card. When og_image_alt</code> is set, it is used for both Open Graph and Twitter image alt text. If the alt text is omitted, the current page title is used. The og_image_type</code>, og_image_width</code>, and og_image_height</code> keys are optional, but they help social crawlers render image previews consistently. Image Size</h2> Use a 1200 x 630 image for the most predictable preview across social sites. The OGP image is separate from screenshot.png</code>. screenshot.png</code> is for the Zola theme gallery. ogp.png</code> is for social sharing of your own site.Use This Comment Section with Any Zola Theme 2026-06-06T00:00:00+00:00 avel's comment section is made from independent pieces. If your site is built with Zola, you can add the same no-JS comment block even when you use another theme. If you already use avel, follow the comment settings article</a>. This article is for sites that want only the comment component. This page also has a comment section at the bottom, so you can see the result in place. Prerequisites</h2> Nostalgic</a> is free and requires no account sign-up. Choose any 8-16 character string as your token. Step 1 - Copy the script</h2> Copy scripts/sync-nostalgic-bbs.mjs</code> into your site's scripts/</code> directory. Then run the script before zola build</code>. node scripts/sync-nostalgic-bbs.mjs && zola build</code></pre> Cloudflare Pages and other CI builds can use the same command. The script scans content/posts/</code> by default. If your articles live elsewhere, set NOSTALGIC_CONTENT_DIR</code>. NOSTALGIC_CONTENT_DIR=content/articles node scripts/sync-nostalgic-bbs.mjs && zola build</code></pre>Step 2 - Put the token in an environment variable</h2> The script reads process.env.NOSTALGIC_TOKEN</code>. Do not commit this token. export NOSTALGIC_TOKEN=your-token-here</code></pre> If the token is missing, existing BBS ids are kept and new BBS creation is skipped. Step 3 - Add config</h2> Only nostalgic_bbs = true</code> is required. The other keys have template defaults. [extra] nostalgic_bbs = true nostalgic_bbs_limit = 3 nostalgic_bbs_width = 760 nostalgic_bbs_label = "Comments" nostalgic_bbs_hint = "Click to comment"</code></pre>Step 4 - Add the template block</h2> Override your theme's templates/page.html</code> and place avel's Nostalgic BBS block after the article body. For the full version, see avel's own templates/page.html</code>. Comment Settings 2026-06-04T00:00:00+00:00 avel can show a Nostalgic BBS</a> image comment section at the end of each post. The article page still has no runtime JavaScript. Recent comments are rendered as an SVG image, and clicking the image opens the Nostalgic posting page. Enable it in config.toml</code>. [extra] nostalgic_bbs = true nostalgic_bbs_limit = 3 nostalgic_bbs_width = 760 nostalgic_bbs_label = "Comments" nostalgic_bbs_hint = "Click to comment"</code></pre> Before building, run the sync script. npm run sync:nostalgic-bbs zola build</code></pre> The script uses base_url</code> and each post path to find or create a Nostalgic BBS, then writes public ids to data/nostalgic_bbs.toml</code>. [posts] "/posts/my-post/" = "my-post-bbs-id"</code></pre> Keep NOSTALGIC_TOKEN</code> in your build environment. Do not put it in front matter, templates, or generated HTML. Speed Features 2026-05-20T00:00:00+00:00 avel uses a few browser-native features to improve perceived speed while staying light. Most are enabled by default and can be changed in config.toml</code>. View Transitions</h2> Pages can cross-fade with CSS only. No JavaScript is used. This is off by default: cross-document view transitions can show a brief white flash on dark themes during navigation. Enable it if your site is light, or if you accept that trade-off. [extra] view_transitions = true # opt-in; off by default</code></pre>Speculation Rules</h2> Internal links can be prerendered when hovered, so clicking often feels instant. [extra] speculation_rules = true</code></pre> This adds one declarative <script type="speculationrules"></code>. It is an instruction to the browser, not runtime application code. content-visibility</h2> Long lists defer off-screen rendering until they scroll into view. Visible text still paints immediately. Markdown Showcase 2026-05-10T00:00:00+00:00 This page checks basic Markdown rendering. Headings</h2> h3 heading</h3> h4 heading</h4> Text</h2> Normal text, bold, italic, strikethrough</del>, and inline code</code>. Lists</h2> apple</li> orange</li> grape Kyoho</li> Muscat</li> </ul> </li> </ul> Numbered list: First</li> Second</li> Third</li> </ol> Quote</h2> The web should remain readable. </blockquote> Code blocks</h2> fn main() { println!("Hello, world!"); }</code></pre>[extra] name = "avel demo" font = "serif"</code></pre>Table</h2> Theme</th> Runtime JS</th> CSS</th> Note</th></tr></thead> avel</td> none</td> minimal</td> Hiroshi Abe-inspired</td></tr> others</td> often</td> heavier</td> typical</td></tr> </tbody></table> Horizontal rule</h2> The Idea Behind avel 2025-11-15T00:00:00+00:00 The web has become heavier little by little. Many pages run external scripts, initialize frameworks, and make readers wait before a simple article appears. avel is one answer to that problem. A blog does not need much to work: text, a little structure, and readable links are often enough. Zola is a static site generator written in Rust. It builds quickly and outputs simple HTML. avel keeps that simplicity instead of adding a large frontend layer on top. This does not mean "never add anything." avel avoids runtime JavaScript, but it does use browser-native declarative features such as Speculation Rules (link prerendering) when they improve perceived speed without adding application code. CSS View Transitions are available too, but off by default — they can flash on dark themes during navigation. Respect for Hiroshi Abe's Homepage 2025-11-01T00:00:00+00:00 Do you know Hiroshi Abe's official homepage</a>? It is the official site of Japanese actor Hiroshi Abe. Its table-like layout, blue links, pale lavender sidebar, and small text preserve the atmosphere of late-1990s web design. It is famous in Japan for being extremely fast. There are no heavy effects, no animation layers, and no tracking scripts. Only the information that needs to be there. avel recreates that design philosophy as a Zola theme. The nostalgic look is intentional: the default sans-serif font, pale sidebar, and colored ●</code> menu markers all point back to the original. This is a respectful homage to speed and restraint. It Renders Fast 2025-10-15T00:00:00+00:00 Pages built with avel appear very quickly. There is no runtime JavaScript to parse or execute, and no external resources by default, so there are no extra DNS lookups or blocking CDN requests. CSS is inline, so the browser can start painting as soon as the HTML arrives. The HTML is designed to render from top to bottom. The first text should not wait for the whole page to finish loading. The demo aims for Lighthouse 100 in Performance, Accessibility, Best Practices, and SEO. Hiroshi Abe's homepage is fast for the same reason: it does not put unnecessary work in front of the reader. Registering with getzola.org/themes 2025-10-01T00:00:00+00:00 avel has been submitted to getzola.org/themes</a>. Zola themes are registered by opening a pull request to the official repository. The theme needs theme.toml</code>, a demo URL, and a screenshot. avel's submission branch has been pushed and is waiting for the official review. avel's theme.toml</code> describes it like this. name = "avel" description = "An ultra-lightweight, no-JS Zola blog theme inspired by Hiroshi Abe's famously lightweight official homepage." license = "MIT" homepage = "https://github.com/kako-jun/avel" min_version = "0.19.0" demo = "https://avel.llll-ll.com" tags = ["blog", "minimal", "no-js"] [author] name = "kako-jun" homepage = "https://llll-ll.com"</code></pre> Embedding Images 2025-09-15T00:00:00+00:00 Put images in static/</code> and reference them from Markdown. ![Description](/sample.svg)</code></pre> Markdown images automatically receive loading="lazy"</code> when lazy_async_image = true</code> is set in config.toml</code>. When writing HTML directly, include dimensions to avoid layout shift. <img src="/sample.svg" width="320" height="120" alt="sample image" loading="lazy"></code></pre> Atom Feed 2025-09-01T00:00:00+00:00 avel generates an Atom feed. Use the "Atom" link near the bottom of the sidebar. generate_feeds = true feed_filenames = ["atom.xml"]</code></pre> The default-language feed is served at /atom.xml</code>. In multilingual sites, translated feeds are generated under each language path. Pagination 2025-08-15T00:00:00+00:00 Add paginate_by</code> to content/posts/_index.md</code>. +++ title = "Posts" sort_by = "date" paginate_by = 20 +++</code></pre> When there are multiple pages, avel shows page numbers and previous/next arrows below the post list. The homepage shows only the latest five posts. /posts/</code> shows all posts with pagination. Using Tags 2025-08-01T00:00:00+00:00 Add a taxonomy to config.toml</code>. [[taxonomies]] name = "tags" url = "tags" feed = false</code></pre> For multilingual sites, add the same taxonomy under each language. [languages.ja] taxonomies = [ { name = "tags", url = "tags", feed = false }, ]</code></pre> Then add tags in post front matter. +++ title = "Post title" date = 2025-08-01 [taxonomies] tags = ["foo", "bar"] +++</code></pre> Zola generates /tags/</code> and each tag page. Changing Text and Link Colors 2025-07-20T00:00:00+00:00 The defaults follow classic browser colors. Key</th> Default</th> Purpose</th></tr></thead> text_color</code></td> #000000</code></td> Body text</td></tr> link_color</code></td> #0000ee</code></td> Unvisited links</td></tr> link_visited</code></td> #551a8b</code></td> Visited links</td></tr> </tbody></table> Override them in config.toml</code>. [extra] text_color = "#000000" link_color = "#cc0000" link_visited = "#880000"</code></pre> Links stay underlined by default. That is intentional: readability comes first. Background Image 2025-07-10T00:00:00+00:00 The demo background is a tiled SVG file. Put an image in static/</code> and point background_image</code> at it. [extra] background_image = "bg.svg"</code></pre>Solid background</h2> You can also skip the image and use a plain color. [extra] body_bg = "#fffff0"</code></pre> Changing Fonts 2025-07-01T00:00:00+00:00 The default font is sans-serif</code>. This follows Hiroshi Abe's homepage: because it has almost no styling, browsers show their own default fonts. System fonts</h2> [extra] font = "serif" font_family = "Georgia" font_size = "14px"</code></pre> System fonts add no external requests, so they keep the site fast. Google Fonts</h2> [extra] google_fonts_url = "https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap" font_family = "Noto Serif JP" font = "serif"</code></pre> This adds a request to Google's servers on first load. Use it only when the font is worth the cost. Customizing the Sidebar 2025-06-20T00:00:00+00:00 The left sidebar can be adjusted from config.toml</code>: width, background color, border, and item spacing. [extra] nav_width = "18%" nav_bg = "#f0f0ff" nav_border = true nav_item_gap = "1.3em"</code></pre> The defaults follow Hiroshi Abe's homepage: a pale lavender background and an 18% sidebar. On narrow screens, the sidebar automatically becomes a top horizontal menu. Customizing Navigation 2025-06-15T00:00:00+00:00 Sidebar links can be defined with config.extra.nav</code>. [extra] nav = [ { label = "Home", url = "/" }, { label = "Posts", url = "/posts/" }, { label = "Tags", url = "/tags/" }, { label = "GitHub", url = "https://github.com/yourname" }, ]</code></pre> If nav</code> is omitted, avel renders language-aware default links. Bullets</h2> By default, each item has a colored ●</code>, following the seven-color menu feel of Hiroshi Abe's homepage. [extra] nav_bullet = "●" nav_bullet_colors = ["#ffcccc", "#00ff00", "#33ffff", "#0099ff", "#0000ff", "#333399", "#cc00cc"]</code></pre> Colors cycle from the first item onward. Previous and next posts</h2> Post pages show previous and next links at the bottom, using the section's sort_by</code> order. Profile and Contact Settings 2025-06-10T00:00:00+00:00 The homepage uses a two-column layout inspired by Hiroshi Abe's homepage: profile on the left, latest posts on the right. On narrow screens, the columns stack. Profile</h2> [extra] name = "Your Name" profile_image = "me.webp" profile_width = "120" profile_height = "120" profile_text = "one-line profile"</code></pre> Put the image in static/</code>. Width and height help avoid layout shift. Contact links</h2> Use social</code> to show contact links below the profile. [extra] social = [ { label = "X", url = "https://x.com/yourname" }, { label = "Instagram", url = "https://instagram.com/yourname" }, { label = "GitHub", url = "https://github.com/yourname" }, ]</code></pre> External links open in a new tab. Installation 2025-06-05T00:00:00+00:00 Add avel as a git submodule. cd your-zola-site git submodule add https://github.com/kako-jun/avel themes/avel</code></pre> Set the theme in config.toml</code>. theme = "avel"</code></pre> Create content/posts/_index.md</code>. +++ title = "Posts" sort_by = "date" paginate_by = 20 +++</code></pre> Run zola serve</code> and check the site. What is avel? 2025-06-01T00:00:00+00:00 avel is a runtime-JavaScript-free Zola</a> theme inspired by Hiroshi Abe's famously lightweight official homepage</a>. It cares about one thing before everything else: pages should appear immediately. It is built around a few simple ideas. No runtime JavaScript</li> No external resources by default</li> Inline CSS, so the browser does not wait for a separate stylesheet</li> Theme knobs live in config.toml</code>, so you do not need to edit HTML or CSS</li> </ul> Why lightness matters</h2> Light pages load quickly, break less often, and age better. They also avoid tracking scripts and are less dependent on CDNs or third-party services. Hiroshi Abe's homepage has stayed online for years because it is simple. avel borrows that attitude and turns it into a reusable Zola theme. Adjusting the Content Layout 2025-05-26T00:00:00+00:00 Several values control the page layout. [extra] max_width = "960px" content_align = "left" line_height = "1.5" title_align = "center" main_padding = "1em"</code></pre> max_width</code> keeps long lines readable on wide screens. If you do not set these values, avel uses its default look. SEO Settings 2025-05-22T00:00:00+00:00 avel emits several metadata fields by default: canonical URL, Open Graph, Twitter Card, JSON-LD structured data, sitemap, and feed autodiscovery. They live in <head></code> and do not affect rendering speed. The twitter:</code> metadata names are still correct even after Twitter became X. There is no x:</code> replacement. Set og_image</code> for social cards and twitter</code> for the source account. [extra] og_image = "ogp.png" og_image_alt = "My site" twitter = "@yourhandle"</code></pre> Without og_image</code>, shared cards remain text-focused. When og_image</code> is set, avel also emits image alt text. If og_image_alt</code> is omitted, the current page title is used. Footer Settings 2025-05-18T00:00:00+00:00 Set footer</code> to show a short footer at the bottom of the page. If it is not set, nothing is rendered. [extra] footer = "© 2025 Your Name"</code></pre> This is useful for a copyright notice or a short contact line. Changing the Date Format 2025-05-12T00:00:00+00:00 Post dates use the translated date_format</code> key. For a single-language site, you can set a format directly. [extra] date_format = "%Y-%m-%d"</code></pre> The format follows strftime</code>. For example, %Y/%m/%d</code> renders 2025/05/12</code>, and %B %d, %Y</code> renders an English month name. Hello 2025-05-01T00:00:00+00:00 Hello, and thank you for visiting this blog. This is a place for small notes, things I made, and thoughts I want to keep. I hope to write without making it too heavy. This first post is short, but it is enough to begin.

Prerequisites</h2>
Nostalgic</a> is free and requires no account sign-up. Choose any 8-16 character string as your token.</p>

Step 4 - Add the template block</h2>
Override your theme's `templates/page.html</code> and place avel's Nostalgic BBS block after the article body. For the full version, see avel's own templates/page.html</code>.</p>`

avel homepage (sample)

Language Switching

OGP Card Image

`Image Size</h2> Use a 1200 x 630 image for the most predictable preview across social sites.</p> The OGP image is separate from screenshot.png</code>. screenshot.png</code> is for the Zola theme gallery. ogp.png</code> is for social sharing of your own site.</p>`

Use This Comment Section with Any Zola Theme

Comment Settings

Speed Features

`content-visibility</h2> Long lists defer off-screen rendering until they scroll into view. Visible text still paints immediately.</p>`

Markdown Showcase

Headings</h2>

h3 heading</h3>

h4 heading</h4>

Text</h2>
Normal text, bold</strong>, italic</em>, strikethrough</del>, and `inline code</code>.</p>`

The Idea Behind avel

Respect for Hiroshi Abe's Homepage

It Renders Fast

Registering with getzola.org/themes

Embedding Images

Atom Feed

Pagination

Using Tags

Changing Text and Link Colors

Background Image

Solid background</h2>
You can also skip the image and use a plain color.</p>
`[</span>extra</span>]</span></span> body_bg</span> = "</span>#fffff0</span>"</span></span></code></pre>`

Changing Fonts

Customizing the Sidebar

Customizing Navigation

Previous and next posts</h2>
Post pages show previous and next links at the bottom, using the section's `sort_by</code> order.</p>`

Profile and Contact Settings

Installation

What is avel?

Adjusting the Content Layout

SEO Settings

Footer Settings

Changing the Date Format

Hello

avel homepage (sample)

Language Switching

OGP Card Image

Image Size</h2> Use a 1200 x 630 image for the most predictable preview across social sites.</p> The OGP image is separate from screenshot.png</code>. screenshot.png</code> is for the Zola theme gallery. ogp.png</code> is for social sharing of your own site.</p>

Use This Comment Section with Any Zola Theme

Prerequisites</h2> Nostalgic</a> is free and requires no account sign-up. Choose any 8-16 character string as your token.</p>

Step 4 - Add the template block</h2> Override your theme's templates/page.html</code> and place avel's Nostalgic BBS block after the article body. For the full version, see avel's own templates/page.html</code>.</p>

Comment Settings

Speed Features

content-visibility</h2> Long lists defer off-screen rendering until they scroll into view. Visible text still paints immediately.</p>

Markdown Showcase

Headings</h2>

h3 heading</h3>

h4 heading</h4>

Text</h2> Normal text, bold</strong>, italic</em>, strikethrough</del>, and inline code</code>.</p>

The Idea Behind avel

Respect for Hiroshi Abe's Homepage

It Renders Fast

Registering with getzola.org/themes

Embedding Images

Atom Feed

Pagination

Using Tags

Changing Text and Link Colors

Background Image

Solid background</h2> You can also skip the image and use a plain color.</p> [</span>extra</span>]</span></span> body_bg</span> = "</span>#fffff0</span>"</span></span></code></pre>

Changing Fonts

Customizing the Sidebar

Customizing Navigation

Previous and next posts</h2> Post pages show previous and next links at the bottom, using the section's sort_by</code> order.</p>

Profile and Contact Settings

Installation

What is avel?

Adjusting the Content Layout

SEO Settings

Footer Settings

Changing the Date Format

Hello

`Image Size</h2> Use a 1200 x 630 image for the most predictable preview across social sites.</p> The OGP image is separate from screenshot.png</code>. screenshot.png</code> is for the Zola theme gallery. ogp.png</code> is for social sharing of your own site.</p>`

Prerequisites</h2>
Nostalgic</a> is free and requires no account sign-up. Choose any 8-16 character string as your token.</p>

Step 4 - Add the template block</h2>
Override your theme's `templates/page.html</code> and place avel's Nostalgic BBS block after the article body. For the full version, see avel's own templates/page.html</code>.</p>`

`content-visibility</h2> Long lists defer off-screen rendering until they scroll into view. Visible text still paints immediately.</p>`

Text</h2>
Normal text, bold</strong>, italic</em>, strikethrough</del>, and `inline code</code>.</p>`

Solid background</h2>
You can also skip the image and use a plain color.</p>
`[</span>extra</span>]</span></span> body_bg</span> = "</span>#fffff0</span>"</span></span></code></pre>`

Previous and next posts</h2>
Post pages show previous and next links at the bottom, using the section's `sort_by</code> order.</p>`