jiufen

The ‘jiufen’ theme is a theme that references the W3.CSS Template and incorporates ZOLA-related features.

Jiufen is the name of an old street located on the island of Formosa (Taiwan). If you have the chance, you should definitely visit this island to experience life here.

Installation

  
flowchart
    A[1.Installation Zola]
    B[2.Initialize Site]
    C[3.1.Git Initialize]
    D[3.2.Download Theme]
    E[4.Initialize Theme]
    F[4.1.Copy Sample]
    G[4.2.Edit Config]
    H[5.Other Options Setting]
    A --> B
    B -->| Use Git | C
    B -->| No Git | D
    C -->E
    D-->E
    E-->F
    E-->G
    F-->H
    G-->H
    click A "https://www.getzola.org/documentation/getting-started/installation/" "Install Zola" _blank
    click B "https://www.getzola.org/documentation/getting-started/overview/#initialize-site" "Initialize Site" _blank

1.Install Zola

ZOLA DOCS Installation

2.Initialize Site

ZOLA DOCS Initialize Site

# rename [myblog]

zola init [myblog]

> What is the URL of your site? (https://example.com):
> Do you want to enable Sass compilation? [Y/n]: n
> Do you want to enable syntax highlighting? [y/N]: y
> Do you want to build a search index of the content? [y/N]: y

cd [myblog]

3.1.Git Initialize

git init;touch .gitignore
git submodule add https://github.com/4yuinfo/zola-theme_jiufen.git themes/jiufen

3.2.Download Theme

Download And Upzip to Theme

4.1 Copy Sample

mkdir -p content/posts
cp themes/jiufen/config.toml .
cp themes/jiufen/content/home.md content/

4.2.Edit Config

ZOLA DOCS Configuration

Adjust config.toml

#config.toml
theme="jiufen"

5.Other Options Setting

Header And Footer

If Not Setting Hidden Header

Can Use Picture(html tag width set 100%)

# config.toml
[extra]
site_name = 'Zola Theme Jiufen'
site_desc = "Welcome to the Zola Theme Jiufen introduction website."
copyright = "Copyright © 2025 Saint Huang All rights reserved."

Navigation

Navigation Display Control

The top (bar) and sidebar are optional, if you want the display.

# config.toml
[extra]
navigation_display_top = true
navigation_display_sidebar = true
navigation = [
    {name = '<i class="fa fa-home"></i>', url = "/",top=true, sitebar=false },
    {name = "Blog", url = "/blog/", top=false, sitebar=true },
    {name = "Camp", url = "/camp/", top=true, sitebar=false },
    {name = "Travel", url = "/travel/", top=true, sitebar=false },
    {name = "404", url = "/404/", top=true, sitebar=false },
]

Search

Optional, if you want search

Only Support fuse_javascript

# config.toml
build_search_index = true

[slugify]
taxonomies = "safe"

[search]
include_title = true
include_content = true
include_description = true
include_date = false
include_path = false
index_format = "fuse_javascript"

Home.md

home.md

# home.md
+++
title = 'Home'
in_search_index = false
[extra]
image = "/images/jiufen.png"    # Option
+++

Context

context.md

+++
# context.md
title = "Blog01"
date = 2025-5-1
[taxonomies]
tags=["Blog", "Camp"]
[extra]
image = "/images/jiufen.png" # Option
+++

context/[folder]/_index.md

# context/[folder]/_index.md
+++
title = "List Theme Posts"
sort_by = "date"  # "date", "update_date", "title", "title_bytes", "weight", "slug"
paginate_by = 5
+++

Shortcodes

audio_webvtt(mp3_url=“”,vtt_url=“”)

youtube(id=“”)

imageh100(path=“”)

imageh200(path=“”)

imageh300(path=“”)

imagehw(path=“”)

code(code=“”, copy=true) context

mermaid() context