در آسترو، هر فایلی که در پوشه src/pages/ قرار دهید، به طور خودکار به یک صفحه در وب‌سایت شما تبدیل می‌شود. این یعنی دیگر نیازی به درگیری با فایل‌های پیچیده‌ی تنظیمات مسیر (Router Config) ندارید. اگر فایل شما about.astro باشد، آدرس آن yoursite.com/about خواهد بود. به همین سادگی.
۱. آناتومی یک فایل .astro: قانون دو بخشی
مهم‌ترین نکته‌ای که باید در آسترو درک کنید، ساختار فایل‌های .astro است. هر فایل به دو بخش کاملاً مجزا تقسیم می‌شود که با یک “حصار کد” (Code Fence) از هم جدا شده‌اند:
---
// بخش اول: فرانت‌متر (Frontmatter)
// اینجا می‌توانید جاوااسکریپت بنویسید (Fetch دیتا، import کردن کامپوننت‌ها و...)
// این کدها فقط در زمان بیلد (Build) اجرا می‌شوند و به مرورگر ارسال نمی‌شوند.
const pageTitle = "درباره من";
---
<!-- بخش دوم: قالب (Template) -->
<!-- اینجا کدهای HTML و کامپوننت‌های شما قرار می‌گیرد -->
<html>
<body>
<h1>{pageTitle}</h1>
</body>
</html>
- Frontmatter: این بخش با سه خط تیره (
---) باز و بسته می‌شود. اینجا جایی است که منطق صفحه را می‌نویسید. چون این کدها قبل از ارسال صفحه به مرورگر اجرا می‌شوند، می‌توانید داده‌ها را از دیتابیس یا فایل‌ها بخوانید بدون اینکه حجمِ جاوااسکریپت سایت بالا برود. - Template: اینجا فضای طراحی شماست. شما می‌توانید متغیرهای تعریف شده در بخش اول را به راحتی با آکولاد
{}در HTML فراخوانی کنید.
۲. ساخت اولین صفحات سفارشی
فرض کنید می‌خواهید یک صفحه “درباره ما” بسازید. کافیست فایل زیر را در مسیر src/pages/about.astro بسازید:
---
const title = "درباره تیم ما";
---
<h1>{title}</h1>
<p>ما به طراحی مینیمال و کدهای بهینه علاقه داریم.</p>
حالا اگر سرور توسعه (npm run dev) را اجرا کنید و به آدرس /about بروید، نتیجه را بلافاصله می‌بینید.
۳. قدرت Markdown در آسترو
یکی از دلایل محبوبیت آسترو برای توسعه‌دهندگان محتوا-محور، پشتیبانی بومی (Native) از Markdown است. شما نیازی ندارید برای نوشتن مقاله، درگیر کدهای HTML شوید.
- در پوشه
src/pages/یک پوشه جدید به نامpostsبسازید. - داخل آن یک فایل به نام
my-first-post.mdبسازید. - محتوای خود را به این شکل بنویسید:
---
layout: ../layouts/MarkdownPostLayout.astro
title: "اولین مقاله من"
author: "حمید"
date: "2026-10-26"
---
این یک مقاله با فرمت مارک‌داون است!
آسترو به طور خودکار این فایل را می‌خواند، فرمت می‌کند و به یک صفحه HTML تبدیل می‌کند.
به همین راحتی! با نوشتن محتوا در فایل‌های .md، آسترو آن‌ها را به صفحات کامل سایت شما تبدیل می‌کند. این روش برای وبلاگ‌نویسی یا مستندسازی ایده‌آل است.
جمع‌بندی این بخش
- مسیردهی خودکار: فایل در
pages/= صفحه در مرورگر. - ساختار دو بخشی: جداسازی منطق (JS) از نمایش (HTML) که باعث می‌شود کدها بسیار تمیز و قابل نگهداری باشند.
- Markdown: بهترین دوست شما برای تولید محتواست؛ ساده، سریع و بدون نیاز به دیتابیس‌های پیچیده.
گام بعدی:
حالا که یاد گرفتیم چطور صفحات را بسازیم و محتوا را مدیریت کنیم، احتمالاً متوجه تکرار زیادِ کدهای HTML (مثل هدر و فوتر) در هر صفحه شده‌اید.
در بخش سوم، یاد می‌گیریم که چطور این عناصر تکراری را به کامپوننت‌های قابل استفاده مجدد تبدیل کنیم تا کدنویسی ما استاندارد و حرفه‌ای شود.
آیا آماده‌اید به سراغ بخش سوم (Components) برویم؟