Astro Narrow 主题配置指南

Astro Narrow 是 Narrow 阅读体验的 Astro-native 实现。它使用内容集合、类型化配置、Astro 组件和构建期 Markdown 转换，不保留 Hugo 兼容层。

配置 site.ts#

src/config/site.ts 控制站点信息、导航、整体宽度、评论、统计、图库和文章设置。

export const siteConfig = {
  name: 'Astro Narrow',
  shortName: 'Narrow',
  description: '一个内容优先的 Astro 主题。',
  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' }
  ]
}

配置内容类型#

src/config/content.ts 定义每种内容在导航、列表、卡片和首页中的展示方式。

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

Frontmatter#

文章使用 Astro content collections。建议保持 frontmatter 简洁稳定。

项目内容还支持 featured 和 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 能力#

Note

尽量使用 Markdown 原生输入。Astro Narrow 通过 remark 和 rehype 转换常见结构。

代码#

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

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

图库#

数学和 Mermaid#

行内公式：$E = mc^2$。