index

Theme Guide

작성일:
수정일:

Chiri is a minimal blog theme built with Astro, offering customization options while preserving its clean aesthetic.


Basic Commands

  • npm run new -- "<title>" - Create a new post (use _title for drafts)
  • npm run update-theme - Fetch upstream theme changes for review

Main Files & Directories

  • src/content/about/about.md - Edit the about section of the index page. Leave it empty if you don’t want any content.
  • src/content/posts/ - All blog posts are stored here
  • src/config.ts - Configure main site info and settings
// Site Info
site: {
  website: 'https://chiri.the3ash.com/', // Site domain
  title: 'CHIRI', // Site title
  author: '3ASH', // Author name
  description: 'Minimal blog built by Astro', // Site description
  language: 'en-US' // Default language
},
// General Settings
general: {
  contentWidth: '35rem', // Content area width
  centeredLayout: true, // Use centered layout (false for left-aligned)
  themeToggle: false, // Show theme toggle button (uses system theme by default)
  postListDottedDivider: false, // Show dotted divider in post list
  footer: true, // Show footer
  fadeAnimation: true // Enable fade animations
},
// Date Settings
date: {
  dateFormat: 'YYYY-MM-DD', // Date format: YYYY-MM-DD, MM-DD-YYYY, DD-MM-YYYY, MONTH DAY YYYY, DAY MONTH YYYY
  dateSeparator: '.', // Date separator: . - / (except for MONTH DAY YYYY and DAY MONTH YYYY)
  dateOnRight: true // Date position in post list (true for right, false for left)
},
// Post Settings
post: {
  readingTime: false, // Show reading time in posts
  toc: true, // Show table of contents (when there is enough page width)
  imageViewer: true, // Enable image viewer
  copyCode: true, // Enable copy button in code blocks
  linkCard: true, // Enable link card
  katex: true // Enable KaTeX math rendering
}

Post Frontmatter

Only title and pubDate are required. The site language is Korean; use language: 'en-US' for English posts.

---
title: 'Post Title'
pubDate: '2025-07-10'
language: 'en-US'
description: 'A short, specific summary of this post.'
# updatedDate: '2026-09-07' # Only after a meaningful content update
# image: '/og/posts/example.jpg'
# imageAlt: 'Describe the representative image'
---

Store social images inside public/, for example public/og/posts/example.jpg, and use the public URL /og/posts/example.jpg in frontmatter. PNG or JPEG at 1200 × 630 is a useful sharing format. WebP and GIF are also supported.

An omitted image, an invalid path, a filename with incorrect letter casing, or a broken image uses /og/default.png. Invalid custom images produce a build warning; a broken default image fails the build. Replace public/og/default.png to change the shared default card.

If description is empty, visible prose from the post supplies a short summary. JSON-LD, page descriptions, Open Graph tags, Twitter cards, and feeds use the same summary. A custom image should represent the article, because it also appears in the article’s structured data. The generic default card is used for sharing but is omitted from the article’s structured image data.

Set updatedDate only after changing the content. It must be on or after pubDate and updates the visible modification date, structured data, sitemap, and Atom feed without changing the original publication date. Builds alone never change content dates.

Syntax Highlighting

You can configure the theme via shikiConfig in astro.config.ts.

More details: Syntax Highlighting | Astro Docs

import { defineConfig } from 'astro/config'

export default defineConfig({
  markdown: {
    shikiConfig: {
      themes: {
        light: 'github-light',
        dark: 'github-dark'
      },
      wrap: false
    }
  }
})

Preview of Some Features

Theme Toggle
Theme Toggle
Dotted Divider
Dotted Divider
Date on Left Side
Date on Left Side
Table of Contents
Table of Contents
Reading Time
Reading Time
Copy Code
Copy Code