Nuxt Content ile Modern Blog Oluşturma

Nuxt Content, Nuxt.js ekosisteminin güçlü bir parçası olarak, markdown dosyalarını kullanarak kolayca blog ve dokümantasyon siteleri oluşturmanıza olanak tanır. Bu yazıda, Nuxt Content ile nasıl modern bir blog oluşturabileceğinizi adım adım göstereceğim.

Neden Nuxt Content?

Nuxt Content'in sunduğu avantajlar:

• Markdown Desteği: Yazılarınızı markdown formatında yazabilirsiniz
• Vue Bileşenleri: Markdown içinde Vue bileşenlerini kullanabilirsiniz
• Otomatik Routing: Dosya yapısına göre otomatik route oluşturur
• SEO Optimizasyonu: Built-in SEO özellikleri
• Syntax Highlighting: Kod blokları için otomatik syntax highlighting

Kurulum

Öncelikle Nuxt Content'i projenize ekleyin:

npm install @nuxt/content

Sonra nuxt.config.ts dosyanızda modülü aktifleştirin:

export default defineNuxtConfig({
  modules: [
    '@nuxt/content'
  ],
  content: {
    // Content konfigürasyonu
  }
})

İçerik Oluşturma

Blog yazılarınızı content/blog/ klasörü altında oluşturun:

---
title: 'Yazı Başlığı'
description: 'Yazı açıklaması'
date: '2024-01-15'
author: 'Yazar Adı'
tags: ['tag1', 'tag2']
---

# Yazı İçeriği

Buraya yazınızın içeriğini yazabilirsiniz...

Sayfa Oluşturma

Blog listesi için pages/blog/index.vue:

<template>
  <div>
    <h1>Blog</h1>
    <article v-for="article in articles" :key="article._path">
      <NuxtLink :to="article._path">
        <h2>{{ article.title }}</h2>
        <p>{{ article.description }}</p>
      </NuxtLink>
    </article>
  </div>
</template>

<script setup>
const { data: articles } = await queryContent('/blog')
  .sort({ date: -1 })
  .find()
</script>

Sonuç

Nuxt Content ile blog oluşturmak oldukça basit ve güçlü. Markdown'ın basitliği ile Vue.js'in gücünü birleştirerek harika bloglar oluşturabilirsiniz.

Faydalı Kaynaklar

• Nuxt Content Dokümantasyonu
• Markdown Rehberi
• Vue.js Dokümantasyonu

Bu yazı Nuxt Content kullanılarak oluşturulmuştur.