Guida al tema Astro Narrow

Astro Narrow è una versione Astro-native dell’esperienza di lettura Narrow. Usa content collection, configurazione tipizzata, componenti Astro e trasformazioni Markdown a build-time, invece di codice di compatibilità con Hugo.

Configurare site.ts#

src/config/site.ts controlla l’identità del sito, la navigazione, la larghezza del layout, i commenti, l’analytics e le impostazioni degli articoli.

export const siteConfig = {
  name: 'Astro Narrow',
  shortName: 'Narrow',
  description: 'Un tema Astro incentrato sui contenuti.',
  contentWidth: '56rem'
}

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

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

Configurare i tipi di contenuto#

src/config/content.ts definisce come ogni tipo di contenuto appare nella navigazione, nelle liste, nelle card e nelle sezioni della home.

export const contentTypes = {
  posts: {
    collection: 'posts',
    path: '/posts/',
    label: { it: 'Articoli', en: 'Posts' },
    cardStyle: 'article',
    listLayout: 'stack',
    gridColumns: 1
  }
}

Frontmatter#

Gli articoli usano i campi delle content collection di Astro. Mantieni il frontmatter piccolo e prevedibile.

Categorie e tag vengono individuati automaticamente dagli articoli pubblicati nella lingua corrente. I percorsi di lettura ordinati sono definiti separatamente in src/content/series/<lingua>/, quindi gli articoli non ripetono nomi di serie o numeri di capitolo. I progetti mantengono i propri tag per le card e la ricerca, ma non compaiono nell’Archivio. Le voci dei progetti supportano anche featured e links.

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

Funzionalità Markdown#

Note

Preferisci un input Markdown nativo. Astro Narrow trasforma i pattern più comuni con remark e rehype.

Codice#

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

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

Gallery#

Math e Mermaid#

La matematica inline funziona così: $E = mc^2$.