Astro Narrow Theme Guide

Astro Narrow is an Astro-native version of the Narrow reading experience. It uses content collections, typed config, Astro components, and build-time Markdown transforms instead of Hugo compatibility code.

Configure site.ts#

src/config/site.ts controls site identity, navigation, layout width, comments, analytics, gallery behavior, and post settings.

export const siteConfig = {
  name: 'Astro Narrow',
  shortName: 'Narrow',
  description: 'A content-focused Astro theme.',
  contentWidth: '56rem'
}

export const siteConfig = {
  nav: ['posts', 'projects', 'archives', 'tags'],
  footerNav: ['archives', 'tags']
}

export const siteConfig = {
  nav: [
    'posts',
    { label: { en: 'GitHub', 'zh-cn': 'GitHub' }, href: 'https://github.com/', icon: 'simple-icons:github' }
  ]
}

Configure Content Types#

src/config/content.ts defines how each content type appears in navigation, lists, cards, and home sections.

export const contentTypes = {
  posts: {
    collection: 'posts',
    path: '/posts/',
    label: { en: 'Posts', 'zh-cn': '文章' },
    cardStyle: 'article',
    listLayout: 'stack',
    gridColumns: 1
  }
}

Frontmatter#

Posts use Astro content collection fields. Keep frontmatter small and predictable.

Project entries also support featured and links.

links:
  - label: Website
    url: https://example.com
    icon: lucide:external-link
  - label: GitHub
    url: https://github.com/example/repo
    icon: simple-icons:github
featured: true

Markdown Features#

Note

Prefer Markdown-native input. Astro Narrow transforms common patterns with remark and rehype.

Code#

type ColorMode = 'light' | 'dark' | 'auto';

export function setMode(mode: ColorMode) {
  document.documentElement.classList.toggle('dark', mode === 'dark');
}

Gallery#

Math and Mermaid#

Inline math works as $E = mc^2$.