بناء مدونة احترافية متعددة اللغات باستخدام Nuxt Content و Nuxt i18n

npx nuxi@latest init my-multilingual-blog
cd my-multilingual-blog
npm install

npm install @nuxt/content @nuxtjs/i18n @nuxtjs/tailwindcss
npm install dayjs

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    "@nuxt/content",
    "@nuxtjs/i18n",
    "@nuxtjs/tailwindcss"
  ],
  
  i18n: {
    locales: [
      {
        code: "en",
        iso: "en-US",
        name: "English",
        file: "en.json",
        dir: "ltr"
      },
      {
        code: "ar",
        iso: "ar-SA",
        name: "العربية",
        file: "ar.json",
        dir: "rtl" // مهم للغة العربية
      }
    ],
    defaultLocale: "en",
    strategy: "prefix_except_default", // روابط: /blog, /ar/blog
    lazy: true,
    langDir: "i18n/locales/",
    detectBrowserLanguage: {
      useCookie: true,
      cookieKey: "i18n_redirected",
      redirectOn: "root"
    }
  },

  content: {
    highlight: {
      theme: "github-dark"
    }
  }
});

content/
├── en/
│   ├── articles/
│   │   ├── my-first-post.md
│   │   └── another-post.md
│   ├── authors/
│   │   └── raed-bahri.md
│   └── categories/
│       └── development.md
├── ar/
│   ├── articles/
│   │   ├── my-first-post.md
│   │   └── another-post.md
│   ├── authors/
│   │   └── رائد-البحري.md
│   └── categories/
│       └── التطوير.md

---
title: "My First Blog Post"
description: "Introduction to my multilingual blog"
publishedAt: "2025-01-10"
author: "رائد-البحري"
category: "development"
tags:
  - nuxt
  - tutorial
image: "/images/blog/post-1.jpg"
isFeatured: true
readingTime: 5
locale: "en"
---

Your content here...

---
title: "مقالتي الأولى"
description: "مقدمة إلى مدونتي متعددة اللغات"
publishedAt: "2025-01-10"
author: "رائد-البحري"
category: "development"
tags:
  - nuxt
  - تعليم
image: "/images/blog/post-1.jpg"
isFeatured: true
readingTime: 5
locale: "ar"
---

المحتوى هنا...

// types/content.ts
import { z } from "zod";

export const ArticleSchema = z.object({
  title: z.string(),
  description: z.string(),
  publishedAt: z.string(),
  author: z.string(),
  category: z.string(),
  tags: z.array(z.string()).optional(),
  image: z.string().optional(),
  isFeatured: z.boolean().optional(),
  readingTime: z.number().optional(),
  locale: z.string(),
});

export type Article = z.infer<typeof ArticleSchema> & {
  path: string;
  _path: string;
};

export type Category = {
  title: string;
  description: string;
  slug: string;
  image?: string;
  locale: string;
  _path: string;
};

export type Author = {
  name: string;
  slug: string;
  bio: string;
  avatar: string;
  locale: string;
};

// دوال مساعدة للحصول على المجموعات
export const getArticlesCollection = (locale: string) => {
  return `${locale}/articles`;
};

export const getCategoriesCollection = (locale: string) => {
  return `${locale}/categories`;
};

export const getAuthorsCollection = (locale: string) => {
  return `${locale}/authors`;
};

<script setup lang="ts">
import { getArticlesCollection, type Article } from "@@/types/content";

const { locale } = useI18n();
const localePath = useLocalePath();

// جلب المقالات للغة الحالية
const { data: posts } = await useAsyncData<Article[]>(
  `articles-${locale.value}`,
  async () => {
    const collection = getArticlesCollection(locale.value);
    return queryCollection(collection).all();
  },
  { watch: [locale] } // مهم: مراقبة تغييرات اللغة
);

// الحصول على المقالات المميزة
const featuredPosts = computed(() => 
  posts.value?.filter(post => post.isFeatured) || []
);
</script>

<template>
  <main>
    <section class="container py-12">
      <h1 class="text-4xl font-bold mb-8">
        {{ $t('blog.title') }}
      </h1>
      
      <!-- شبكة المقالات المميزة -->
      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
        <NuxtLink
          v-for="post in featuredPosts"
          :key="post.path"
          :to="localePath(post.path)"
          class="border rounded-lg overflow-hidden hover:shadow-lg transition"
        >
          <img 
            :src="post.image" 
            :alt="post.title"
            class="w-full h-48 object-cover"
          />
          <div class="p-4">
            <h2 class="text-xl font-bold mb-2">{{ post.title }}</h2>
            <p class="text-gray-600">{{ post.description }}</p>
          </div>
        </NuxtLink>
      </div>
    </section>
  </main>
</template>

<script setup lang="ts">
const { locale } = useI18n();
const route = useRoute();

// إنشاء المسار الكامل مع اللغة
const path = `/${locale.value}/articles/${route.params.slug}`;

const { data: article } = await useAsyncData(`article-${path}`, () =>
  queryContent()
    .where({ _path: path })
    .findOne()
);

if (!article.value) {
  throw createError({ 
    statusCode: 404, 
    statusMessage: "المقال غير موجود" 
  });
}

// تعيين meta tags لتحسين SEO
useHead({
  title: article.value.title,
  meta: [
    { name: "description", content: article.value.description },
    { property: "og:title", content: article.value.title },
    { property: "og:description", content: article.value.description },
    { property: "og:image", content: article.value.image },
  ],
});
</script>

<template>
  <article class="container prose prose-lg mx-auto py-12">
    <h1>{{ article.title }}</h1>
    <div class="text-gray-600 mb-8">
      {{ article.publishedAt }} • {{ article.readingTime }} دقيقة قراءة
    </div>
    
    <ContentRenderer :value="article" />
  </article>
</template>

<script setup lang="ts">
const { locale, locales } = useI18n();
const switchLocalePath = useSwitchLocalePath();

const availableLocales = computed(() => 
  (locales.value as Array<{code: string, name: string}>)
    .filter(l => l.code !== locale.value)
);
</script>

<template>
  <div class="flex gap-2">
    <NuxtLink
      v-for="loc in availableLocales"
      :key="loc.code"
      :to="switchLocalePath(loc.code)"
      class="px-3 py-1 rounded border hover:bg-gray-100"
    >
      {{ loc.name }}
    </NuxtLink>
  </div>
</template>

import { getCategoriesCollection, type Category } from "@@/types/content";

export const useCategoryTitle = async (categorySlug: string) => {
  const { locale } = useI18n();
  
  const { data: category } = await useAsyncData<Category | null>(
    `category-${locale.value}-${categorySlug}`,
    async () => {
      const collection = getCategoriesCollection(locale.value);
      const foundCategory = await queryCollection(collection)
        .where("slug", "=", categorySlug)
        .first();
      return foundCategory ?? null;
    }
  );

  return computed(() => category.value?.title || categorySlug);
};

<script setup lang="ts">
const props = defineProps<{ categorySlug: string }>();
const categoryTitle = await useCategoryTitle(props.categorySlug);
</script>

<template>
  <span>{{ categoryTitle }}</span>
</template>

<script setup lang="ts">
import { getCategoriesCollection, type Category } from "@@/types/content";

const props = defineProps<{ post: Article }>();
const { locale } = useI18n();

// الحصول على عنوان الفئة باللغة الحالية
const { data: category } = await useAsyncData<Category | null>(
  `category-${locale.value}-${props.post.category}`,
  async () => {
    const collection = getCategoriesCollection(locale.value);
    const foundCategory = await queryCollection(collection)
      .where("slug", "=", props.post.category)
      .first();
    return foundCategory ?? null;
  }
);

const categoryTitle = computed(() => 
  category.value?.title || props.post.category
);
</script>

<template>
  <div>
    <!-- سيظهر "التطوير" بدلاً من "development" في النسخة العربية -->
    <Badge>{{ categoryTitle }}</Badge>
  </div>
</template>

<script setup lang="ts">
const { locale } = useI18n();

const i18nHead = useLocaleHead({
  addDirAttribute: true,
  identifierAttribute: "id",
  addSeoAttributes: true,
});

useHead(() => ({
  htmlAttrs: {
    lang: i18nHead.value.htmlAttrs!.lang,
    dir: locale.value === 'ar' ? 'rtl' : 'ltr',
  },
  link: [...(i18nHead.value.link || [])],
  meta: [...(i18nHead.value.meta || [])],
}));
</script>

export default {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./app.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require("@tailwindcss/typography"),
  ],
};

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  * {
    @apply rtl:font-arabic ltr:font-latin;
  }
}

app: {
  head: {
    link: [
      {
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700&display=swap',
      },
      {
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap',
      },
    ],
  },
},

const categoryTitle = computed(() => 
  category.value?.title || post.category || 'غير مصنف'
);

const { data } = await useAsyncData(
  `key-${locale.value}`,
  () => fetchData(),
  { watch: [locale] }  // مهم!
);

<NuxtImg
  :src="post.image"
  :alt="post.title"
  width="800"
  height="400"
  format="webp"
  loading="lazy"
/>

detectBrowserLanguage: {
  useCookie: true,
  cookieKey: "i18n_redirected",
}

{ watch: [locale] }

<!-- سيء -->
<div class="ml-4">

<!-- جيد -->
<div class="ms-4">

nitro: {
  prerender: {
    routes: ["/", "/ar"],
    crawlLinks: true,
  },
},

sitemap: {
  hostname: 'https://yourdomain.com',
  i18n: true,
}