Configuration Guides for Fumika Site

This guide walks you through configuring your site using the src/config.ts file in the Fumika Astro theme. If you are unfamiliar with JavaScript syntax, consider reviewing basic variable usage. TypeScript will also help catch any data type mismatches.

Site Configuration#

The siteConfig object controls core site metadata, layout behaviors, and multi-language support.

1
    title: "Fumika",
2
    subtitle: "Blog",
3
    lang: "en",
4
    supportedLangs: ["en", "es", "id", "ja"],
5
    theme: {
6
        hue: 75,
7
        mode: "light",
8
    },
9
    banner: {
10
        enable: true,
11
        src: "assets/images/demo-banner.jpg",
12
        position: "center",
13
        credit: {
14
            enable: true,
15
            text: "Artist Name",
16
            url: "https://example.com"
17
        },
18
    },
19
    toc: {
20
        enable: true,
21
        depth: 2,
22
    },
23
    favicon: [],
24
    ogImage: {
25
        useDefault: true,
26
        defaultSrc: "/media/images/banner.jpg",
27
    },
28
};

Attribute title and subtitle are displayed like this format in website title homepage:

1
<title> - <subtitle>

Languages#

Set lang for primary language code for your site.

The supportedLangs attribute is an array of language codes available in the site language switcher. Leave as an empty array [] to disable multi-language support. The order of items in the array determines their display order in the switcher.

Available languages:

"en"
"zh_CN"
"zh_TW"
"ja"
"ko"
"es"
"th"
"vi"
"tr"
"id"
"fr"
"fa"

WARNING
Currently, Persian fa language not set properly.
(Not set to right to left direction)

Theme#

theme.color is the primary accent color hue value ranging from 0 to 360 (e.g., Red: 0, Teal: 200, Cyan: 250, Pink: 345).

TIP
To see the live preview of theme color, run pnpm dev and see the display setting in navbar.
You can change the theme color without changing theme.color manually in src/config.ts.
This feature only appear in dev mode

Set theme.mode for default color theme mode ("light" or "dark").

Attribute	Description
banner.enable	Set to `true` to display the hero banner image at the top of pages
banner.src	Image source path. Relative to `src/` by default (e.g., `src/assets/images/demo-banner.jpg`), or relative to `public/` if prefixed with `/` (e.g., `/media/images/banner.jpg`).
banner.position	Object alignment for the banner image. Accepts `"top"`, `"center"`, or `"bottom"`.
banner.credit	Artwork attribution configuration: 1. `enable`: Set to `true` to display the credit text of the banner. 2. `text`: The credit string to display (e.g., artist name or source). 3. `url`: (Optional) Link to the original artwork or artist profile.

TOC#

Set toc.enable to true to display TOC. The toc.depth is the maximum heading depth level to display in the TOC, ranging from 1 to 3.

Favicon#

favicon is an array of custom favicon configuration objects. Leave empty [] to use the default site favicon.

This is example custom favicon look like:

1
favicon: [
2
    {
3
        src: "/favicon/icon.svg", // Path relative to /public
4
        theme: "light",           // Optional: 'light' or 'dark'
5
        sizes: "32x32",           // Optional: image size dimension
6
    },
7
]

Open Graph Image#

Open Graph image (ogImage) is the Social media preview card configuration

Attribute	Description
ogImage.useDefault	Set to `true` to fall back to `defaultSrc` when a post lacks its own cover image.
ogImage.detaultSrc	The default image path used for Open Graph previews. It’s only relative to `/public` directory start with `/` It’s also the Open Graph image for other pages tha posts like Home, About, etc.

Configure the main navigation links in navBarConfig. You can mix default preset links with custom external or internal links.

1
export const navBarConfig: NavBarConfig = {
2
    links: [
3
        LinkPreset.Home,
4
        LinkPreset.Archive,
5
        LinkPreset.About,
6
        LinkPreset.Friends,
7
        {
8
            name: "GitHub",
9
            url: "https://github.com/your-username/your-repo",
10
            external: true,
11
        },
12
    ],
13
};

Custom navigation bar link attributes:

Attribute	Description
name	Displayed name in navbar
url	URL navigation of external or internal links. Internal links should not include the base path, as it is automatically added
external	If it set to `true`, it will show an external link icon and open in a new tab

This is how navigation links that only contain Home, Archive, and About look like:

1
export const navBarConfig: NavBarConfig = {
2
    links: [
3
        LinkPreset.Home,
4
        LinkPreset.Archive,
5
        LinkPreset.About,
6
    ],
7
};

Profile Configuration#

The profileConfig object populates the sidebar profile card with your avatar, bio, and social links.

1
export const profileConfig: ProfileConfig = {
2
  avatar: "assets/images/demo-avatar.jpg",
3
  name: "Fumika",
4
  bio: "Lorem ipsum dolor sit amet",
5
  links: [
6
    {
7
      name: "X",
8
      icon: "fa6-brands:x-twitter",
9
      url: "https://x.com",
10
    },
11
    {
12
      name: "GitHub",
13
      icon: "fa6-brands:github",
14
      url: "https://github.com",
15
    },
16
  ],
17
};

avatar path is relative to the src/ directory by default (e.g., "assets/images/demo-avatar.jpg"). Also it relative to the public/ directory if the path starts with a leading slash / (e.g., "/media/images/avatar.webp").

links icons are powered by Iconify. If you use an icon set that is not already included in the template, you must install the corresponding package:

1
pnpm add @iconify-json/<icon-set-name>

Visit https://icones.js.org for icon codes.

License Configuration#

Configure the content license displayed at the end of post using licenseConfig:

1
export const licenseConfig: LicenseConfig = {
2
  enable: true,
3
  name: "CC BY-NC-SA 4.0",
4
  url: "https://creativecommons.org/licenses/by-nc-sa/4.0/",
5
};

Expressive Code Configuration#

WARNING
Please select a dark theme, as Fumika currently only supports dark background color.

1
export const expressiveCodeConfig: ExpressiveCodeConfig = {
2
    theme: "github-dark",
3
};

Comment Configuration#

Fumika targeting 3 comment support, Disqus, Giscus, and Twikoo. Currently only support Giscus.

Giscus#

Fumika supports Giscus out-of-the-box for GitHub Discussions-powered comments.

1
export const commentConfig: CommentConfig = {
2
    giscus: {
3
        repo: "your-username/your-repo",
4
        repoId: "R_kgDO...",
5
        category: "General",
6
        categoryId: "DIC_kwDO...",
7
        mapping: "pathname",
8
        strict: "0",
9
        reactionsEnabled: "1",
10
        emitMetadata: "1",
11
        inputPosition: "top",
12
        theme: "reactive",
13
        lang: "en",
14
        loading: "lazy",
15
    },
16
};

Attribute	Description
repo	Repository for discussion database. Format: `username/repo`
repoId	The unique ID of the GitHub repository. Obtainable from https://giscus.app
category	The discussion category name. Options: `Announcement`, `General`, `Ideas`, `Polls`, `Q&A`, `Show and tell`
categoryId	The unique ID of the discussion category. Obtainable from https://giscus.app
mapping	How pages map to GitHub Discussions. Options: `pathname`, `url`, `title`, `og:title`, and specific
strict	Whether to strictly match discussion titles. (`"1"` for enable and `"2"` for disable)
reactionsEnabled	Enable or disable reaction buttons for the main post. (`"1"` for enable and `"2"` for disable)
emitMetadata	Whether to send discussion metadata to the parent page. (`"1"` for enable and `"2"` for disable)
inputPosition	Position of the comment box relative to comments. (`"top"` or `"bottom"`)
theme	Giscus color theme. (e.g., `"light"`, `"dark"`, `"preferred_color_scheme"`, `"reactive"`)
lang	Display language for the Giscus widget. (e.g., `"en"`, `"zh-CN"`, `"ja"`)
loading	Loading strategy for the comment iframe. (`"lazy"` or `"eager"`)

TIP
set theme to reactive to use reactive style using custom CSS.
set category to Announcement to prevent replies directly in repository of discussion.

To disable comments completely, set giscus to undefined:

1
export const commentConfig: CommentConfig = {
2
    giscus: undefined;
3
}

Analytics Configuration#

Analytics allow you to monitor and analyze site traffic. Fumika integrates with Partytown to offload third-party scripts to a Web Worker, ensuring your site maintains optimal loading performance.

Currently, Fumika natively supports Google Analytics (GA4). Integration with Umami is planned for a future update.

To disable analytics completely, set enabled to false:

1
export const analyticsConfig: AnalyticsConfig = {
2
    enabled: false,
3
};

Google Analytics#

To enable Google Analytics, set enabled to true and provide your GA4 Measurement ID in analyticsConfig:

1
export const analyticsConfig: AnalyticsConfig = {
2
    enabled: true,
3
    google: {
4
        id: "G-XXXXXXXXXX",
5
    },
6
};

If wanna disable it, set analyticsConfig like:

1
export const analyticsConfig: AnalyticsConfig = {
2
    enabled: false,
3
};

Deployment Configuration#

Configure your site’s domain and base path in deployConfig:

1
export const deployConfig: DeployConfig = {
2
    siteUrl: "https://example.com",
3
    baseUrl: "/",
4
};

Keep baseUrl as "/" if you are deploying directly to the root domain like https://example.com.

Subpath Deployment Example

If your site is hosted at https://example.com/blog, configure deployConfig as follows:

1
export const deployConfig: DeployConfig = {
2
    siteUrl: "https://example.com",
3
    baseUrl: "/blog",
4
};

Site Configuration#

Languages#

Theme#

Banner Image#

TOC#

Favicon#

Open Graph Image#

Navigation Bar Configuration#

Profile Configuration#

License Configuration#

Expressive Code Configuration#

Comment Configuration#

Giscus#

Analytics Configuration#

Google Analytics#

Deployment Configuration#