diff --git a/content/fa/docs/4.directory-structure/4.content.md b/content/fa/docs/4.directory-structure/4.content.md
new file mode 100644
index 0000000000..4e32376bfd
--- /dev/null
+++ b/content/fa/docs/4.directory-structure/4.content.md
@@ -0,0 +1,286 @@
+---
+title: فهرست محتوا
+navigation.title: محتوا
+description: برنامه ی Nuxt خود را با ماژول @nuxt/content قدرتمند کنید، جایی که می‌توانید در فهرست content/ directory بنویسید و فایل‌های Markdown، JSON، YAML و CSV خود را از طریق MongoDB شبیه یک API واکشی کنید که مثل یک CMS مبتنی بر Git Headless عمل می‌کند.
+category: directory-structure
+---
+# فهرست محتوا
+
+برنامه Nuxt خود را با ماژول '@nuxt/content' تقویت کنید، جایی که می‌توانید در فهرست 'content/' بنویسید و فایل‌های Markdown، JSON، YAML و CSV خود را از طریق MongoDB مانند API واکشی کنید. **Git-based Headless CMS**.
+
+---
+
+![](/img/docs/nuxt-content.svg)
+
+### داشتن ریلود سریع در زمان توسعه
+
+وقتی نوبت به بارگذاری سریع (Hot Reload) در توسعه می‌رسد، ماژول محتوای به سرعت در حال افزایش است، زیرا هنگام ایجاد تغییرات در فایل‌های علامت‌گذاری، نیازی به عبور از webpack نیست. همچنین می‌توانید به رویداد 'content:update' گوش دهید و یک افزونه ایجاد کنید تا هر بار که فایلی را در فهرست محتوای خود به‌روزرسانی می‌کنید برای مثال یک متد fetchCategories ارسال شود..
+
+::alert{type="next"}
+[برای جزئیات بیشتر به این لینک مراجعه کنید](https://content.nuxtjs.org/advanced#handling-hot-reload)
+::
+
+### نمایش مطالب
+
+می‌توانید از مؤلفه '<nuxt-content>' مستقیماً در قالب خود برای نمایش بدنه صفحه استفاده کنید.
+
+```html{}[pages/blog/_slug.vue]
+<template>
+  <article>
+    <nuxt-content :document="article" />
+  </article>
+</template>
+```
+
+::alert{type="next"}
+لینک [content module docs](https://content.nuxtjs.org/displaying#component) را برای اطلاعات بیشتر ببینید
+::
+
+### استایل دادن به محتوای خود
+
+بسته به آنچه برای طراحی برنامه خود استفاده می کنید، ممکن است لازم باشد استایلی بنویسید تا نشانه گذاری به درستی نمایش داده شود.
+
+مؤلفه '<nuxt-content>' به‌طور خودکار یک کلاس '.nuxt-content' اضافه می‌کند، می‌توانید از آن برای سفارشی‌سازی استایلهای خود استفاده کنید.
+
+```html
+<style>
+  .nuxt-content h2 {
+    font-weight: bold;
+    font-size: 28px;
+  }
+  .nuxt-content p {
+    margin-bottom: 20px;
+  }
+</style>
+```
+
+::alert{type="next"}
+لینک [content module docs](https://content.nuxtjs.org/displaying#style) را برای اطلاعات بیشتر ببینید
+::
+
+### کنترل Markdown, CSV, YAML, JSON(5)
+
+این ماژول فایل های .md شما را به ساختار درختی JSON AST تبدیل می کند که در یک متغیر body ذخیره می شود. همچنین می‌توانید یک بلوک ماده جلویی YAML به فایل‌های نشانه‌گذاری یا یک فایل .yaml اضافه کنید که به سند اضافه می‌شود. همچنین می توانید یک فایل json/json5 اضافه کنید که می تواند به سند نیز اضافه شود. و می توانید از یک فایل csv. که در آن ردیف ها به متغیر body اختصاص داده می شود استفاده کنید.
+
+```md
+---
+title: My first Blog Post
+description: آموزش استفاده از nuxt/content@ برای ایجاد وبلاگ
+---
+```
+
+::alert{type="next"}
+لینک [content module docs](https://content.nuxtjs.org/writing#markdown) را برای اطلاعات بیشتر ببنید
+::
+
+### اجزای Vue در Markdown
+
+می‌توانید از مؤلفه‌های Vue مستقیماً در فایل‌های علامت‌گذاری خود استفاده کنید. با این حال باید از اجزای خود به عنوان kebab-case استفاده کنید و نمی توانید از تگ های self-closing استفاده کنید.
+
+```html{}[components/global/InfoBox.vue]
+<template>
+  <div class="p-4 mb-4 text-white bg-blue-500">
+    <p><slot name="info-box">default</slot></p>
+  </div>
+</template>
+```
+
+```html{}[content/articles/my-first-blog-post.md]
+<info-box>
+  <template #info-box>
+    This is a vue component inside markdown using slots
+  </template>
+</info-box>
+```
+
+::alert{type="next"}
+لینک [content module docs](https://content.nuxtjs.org/writing#vue-components) را برای اطلاعات بیشتر ببینید
+::
+
+### API کاملا قابل جستجو
+
+می‌توانید از '$content()' برای فهرست کردن، فیلتر کردن و جستجوی آسان محتوای خود استفاده کنید.
+
+```html{}[pages/blog/index.vue]
+<script>
+  export default {
+    async asyncData({ $content, params }) {
+      const articles = await $content('articles', params.slug)
+        .only(['title', 'description', 'img', 'slug', 'author'])
+        .sortBy('createdAt', 'asc')
+        .fetch()
+
+      return {
+        articles
+      }
+    }
+  }
+</script>
+```
+
+::alert{type="next"}
+لینک  [content module docs](https://content.nuxtjs.org/fetching#methods) برای اطلاعات بیشتر ببینید
+::
+
+### مقاله های قبلی و بعدی
+
+ماژول محتوا شامل '.slug(slug)' است تا به راحتی موضوعات قبلی و بعدی را دریافت کنید.
+
+```js
+async asyncData({ $content, params }) {
+    const article = await $content('articles', params.slug).fetch()
+
+    const [prev, next] = await $content('articles')
+      .only(['title', 'slug'])
+      .sortBy('createdAt', 'asc')
+      .surround(params.slug)
+      .fetch()
+
+    return {
+      article,
+      prev,
+      next
+    }
+  },
+```
+
+```html
+<prev-next :prev="prev" :next="next" />
+```
+
+::alert{type="next"}
+لینک [content module docs](https://content.nuxtjs.org/fetching#surroundslug-options) را برای اطلاعات بیشتر ببینید
+::
+
+### جستجوی تمام متن
+
+ماژول محتوا با یک جستجوی متن کامل ارائه می شود، بنابراین می توانید به راحتی در بین فایل های علامت گذاری شده خود بدون نیاز به نصب چیزی جستجو کنید.
+
+```html{}[components/AppSearchInput.vue]
+<script>
+  export default {
+    data() {
+      return {
+        searchQuery: '',
+        articles: []
+      }
+    },
+    watch: {
+      async searchQuery(searchQuery) {
+        if (!searchQuery) {
+          this.articles = []
+          return
+        }
+        this.articles = await this.$content('articles')
+          .limit(6)
+          .search(searchQuery)
+          .fetch()
+      }
+    }
+  }
+</script>
+```
+
+::alert{type="next"}
+لینک [content module docs](https://content.nuxtjs.org/fetching#searchfield-value) را برای اطلاعات بیشتر ببینید
+::
+
+### برجسته سازی نحو (Syntax)
+
+این ماژول به طور خودکار بلوک های کد را بسته بندی می کند و کلاسها را اعمال می کند [Prism](https://prismjs.com/). همچنین می توانید یک تمپلیت Prism متفاوت اضافه کنید یا آن را به طور کلی غیرفعال کنید.
+
+::code-group
+```bash [Yarn]
+yarn add prism-themes
+```
+```bash [NPM]
+npm install prism-themes
+```
+::
+
+```js{}[nuxt.config.js]
+content: {
+  markdown: {
+    prism: {
+      theme: 'prism-themes/themes/prism-material-oceanic.css'
+    }
+  }
+}
+```
+
+::alert{type="next"}
+لینک [content module docs](https://content.nuxtjs.org/writing#syntax-highlighting) را برای اطلاعات بیشتر ببینید
+::
+
+### Extend Markdown Parsing
+
+علامت گذاری در اصل از برجسته کردن خطوط درون بلوک کد یا نام فایل ها پشتیبانی نمی کند. ماژول محتوا با نحو مرسوم خود به آن اجازه می دهد. شماره‌های خط به تگ 'pre' در ویژگی‌های خط داده اضافه می‌شوند و نام فایل به 'span' با کلاس 'filename' تبدیل می‌شود، بنابراین می‌توانید به آن استایل دهید.
+::alert{type="next"}
+لینک [content module docs](https://content.nuxtjs.org/writing#codeblocks) برای اطلاعا بیشتر ببینید
+::
+
+### تولید فهرست مطالب
+
+یک ویژگی آرایه toc (جدول مطالب) به داکیومنت شما تزریق می‌شود و همه سرفصل‌ها را با عناوین و شناسه‌هایشان فهرست می‌کند، بنابراین می‌توانید به آنها لینک دهید..
+
+```html{}[pages/blog/_slug.vue]
+<nav>
+  <ul>
+    <li v-for="link of article.toc" :key="link.id">
+      <NuxtLink :to="`#${link.id}`">{{ link.text }}</NuxtLink>
+    </li>
+  </ul>
+</nav>
+```
+
+::alert{type="next"}
+لینک [content module docs](https://content.nuxtjs.org/writing#table-of-contents) را برای اظلاعات بیشتر ببینید
+::
+
+### Powerful query builder API (MongoDB-like)
+
+ماژول محتوا دارای یک API سازنده پرس و جو قدرتمند مشابه MongoDB است که به شما امکان می دهد JSON هر دایرکتوری را در 'http://localhost:3000/_content/' به راحتی ببینید. نقطه پایانی در درخواست GET و POST قابل دسترسی است، بنابراین می توانید از پارامترهای پرس و جو استفاده کنید.
+
+`http://localhost:3000/_content/articles?only=title&only=description&limit=10`
+
+::alert{type="next"}
+لینک [content module docs](https://content.nuxtjs.org/advanced/#api-endpoint) را برای اطلاعات بیشتر ببینید
+::
+
+### توسعه با هوک
+
+می توانید از هوک برای گسترش ماژول استفاده کنید تا بتوانید قبل از ذخیره شدن یک سند، داده ها را به آن اضافه کنید.
+
+::alert{type="next"}
+لینک [content module docs](https://content.nuxtjs.org/advanced#hooks) را برای اطلاعات بیشتر ببینید
+::
+
+### ادغام با nuxtjs/feed@
+
+در مورد مقالات، محتوا  می تواند برای تولید فیدهای خبری از ماژول زیر استفاده کند [@nuxtjs/feed](https://www.npmjs.com/package/@nuxtjs/feed).
+
+::alert{type="next"}
+لینک [content module docs](https://content.nuxtjs.org/integrations/#nuxtjsfeed) برای اطلاعات بیشتر ببنید
+::
+
+### پشتیبانی از تولید سایت استاتیک
+
+ماژول محتوا با تولید سایت ایستا با استفاده از "nuxt generate" کار می کند. همه مسیرها به لطف ویژگی خزنده nuxt به طور خودکار ایجاد می شوند.
+
+::alert{type="warning"}
+اگر از Nuxt <2.13 استفاده می کنید و باید مسیرهای پویا را مشخص کنید، می توانید این کار را با استفاده از ویژگی generate و با استفاده از @nuxt/content به صورت برنامه ریزی شده انجام دهید.
+::
+
+::alert{type="next"}
+لینک [content module docs](https://content.nuxtjs.org/advanced#programmatic-usage) برای اطلاعات بیشتر و نحوه استفاده ببینید
+::
+
+### What's next
+
+::alert{type="next"}
+آموزشهای ما را ببینید [How to Create a Blog with Nuxt Content](/tutorials/creating-blog-with-nuxt-content)
+::
+
+::alert{type="next"}
+لینک [content module docs](https://content.nuxtjs.org/) برای اطلاعات بیتشر و برنامه ها بیشتر ببینید
+::