راه‌انداز وبلاگ Astro v5 – انجمن DEV

ek3nk4r 2024-12-30

0 0 خواندن این مطلب 3 دقیقه زمان میبرد

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

من اخیرا وبلاگ یکی از دوستانم را به Astro v5 منتقل کردم. انگیزه انتخاب Astro پشتیبانی درجه یک آن از محتوای markdown بود.

Astro فقط با حداقل مقدار دیگ بخار، موارد اولیه علامت گذاری را تأیید می کند، صفحات ایستا را برای هر پست ایجاد می کند و تمام تصاویر پست های شما را بهینه می کند.

https://astro-v5-blog-starter.pages.dev/blog/first-post

فهرست مطالب

مارک داون

---
date: '2024-12-01'
title: 'My First Blog Post'
image:
  src: '../images/birch-trees.webp'
---

## Markdown is

- a lightweight markup language
- for decorating plain text
- with things like headings, lists, links, and blockquotes
- making minimal assumptions about formatting.

#### Here is an inline image:

![sunset](../images/sunset-cambridge.jpg)

HTML


  src="/_astro/birch-trees.DrRha0ED_9bfrU.webp"
  alt=""
  width="2016"
  height="955"
  loading="lazy"
  decoding="async"
  class="w-full h-60 object-cover object-bottom"
/>
 class="prose mx-auto p-4">
  My First Blog Post
   href="https://dev.to/"><< Back
   id="markdown-is">Markdown is
  
    a lightweight markup language
    
for decorating plain text
    
with things like headings, lists, links, and blockquotes
    
making minimal assumptions about formatting.
  
   id="here-is-an-inline-image">Here is an inline image:
  
    
      alt="sunset"
      width="1343"
      height="683"
      loading="lazy"
      decoding="async"
      src="/_astro/sunset-cambridge.7ZAluiBF_15WAVg.webp"
    />

مخزن استارت

در اینجا نتیجه استخراج این ویژگی های کلیدی در یک شروع وبلاگ جدید است. مخزن شامل طراحی زیادی نیست – فقط پیکربندی و حداقل مقدار کد.

https://github.com/jldec/astro-v5-blog-starter

پروژه شامل:

ساختار فایل

├── README.md
├── astro.config.mjs
├── package.json
├── public
│   ├── _headers
│   ├── _redirects
│   └── favicon.svg
├── src
│   ├── assets
│   │   └── astro.svg
│   ├── components
│   │   └── Welcome.astro
│   ├── content
│   │   ├── blog
│   │   │   ├── 2nd-post.md
│   │   │   └── first-post.md
│   │   └── images
│   │       ├── birch-trees.webp
│   │       └── sunset-cambridge.jpg
│   ├── content.config.ts
│   ├── layouts
│   │   └── Layout.astro
│   ├── pages
│   │   ├── blog
│   │   │   └── [id].astro
│   │   └── index.astro
│   └── styles
│       └── global.css
├── tailwind.config.mjs
├── tsconfig.json
└── wrangler.toml

وبلاگ مبتنی بر Markdown

پست‌های وبلاگ Markdown در src/content/blog زنده هستند.

طرح واره برای blog مجموعه در content.config.ts تعریف شده است. این فایل همچنین شامل توابع کاربردی برای مرتب سازی و فیلتر کردن پست ها می باشد. به عنوان مثال اگر draft پرچم تنظیم شده است، یک پست فقط در طول توسعه برنامه گنجانده می شود، اما با ساخت تولید منتشر نمی شود.

صفحه اصلی در src/pages/index.astro تعریف شده است که پست ها را به ترتیب تاریخ فهرست می کند.

پست ها توسط مسیر پویا src/pages/blog/ ارائه می شوند[id].astro. برای اینکه Astro صفحات استاتیک را از قبل رندر کند، مسیرهای پویا a را صادر می کنند getStaticPaths تابعی که لیستی از پارامترها و props را برای هر مسیر رندر شده برمی گرداند.

src/pages/blog/[id].astro

---
import { Image } from 'astro:assets';
import { getCollection, render } from 'astro:content';
import { filterAllPosts } from '~/content.config';
import Layout from '~/layouts/Layout.astro';

export async function getStaticPaths() {
  const posts = await getCollection('blog', filterAllPosts);
  return posts.map((post) => ({
    params: { id: post.id },
    props: { post },
  }));
}

const { post } = Astro.props;
const { Content } = await render(post);
---

<Layout title={post.data.title}>
  <Image
    src={post.data.image.src}
    alt={post.data.image.alt || ''}
    class="w-full h-60 object-cover object-bottom"
  />
  <article class="prose mx-auto p-4">
    <h1>{post.data.title}h1>
    <a href="https://dev.to/"><< Backa>
    <Content />
  article>
Layout>

بهینه سازی تصویر

الف src مسیر و alt متن را می‌توان برای تصاویر به صورت نشانه‌گذاری frontmatter یا درون خطی در نشانه‌گذاری اعلام کرد.

اینها به داخل منتقل می شوند مؤلفه ای که هر تصویر را بررسی می کند و تولید می کند برچسب ها با width و height ویژگی ها، در نتیجه تغییرات طرح بندی در مرورگر را کاهش می دهد.

تصاویر به فرمت webp تبدیل شده و در آن ذخیره می شوند dist/_astro با نام های منحصر به فرد (قابل ذخیره سازی) در طول فرآیند ساخت.

انتشار در صفحات Cloudflare

صفحات Cloudflare از ساختار فایل برای تعیین اینکه آیا مسیرها با اسلش های انتهایی خاتمه می یابند یا خیر استفاده می کند. برای جلوگیری از اسلش های دنباله دار، ساخت را برای تولید پیکربندی کنید .html فایل ها به جای /index.html.

آداپتور @astrojs/cloudflare برای سایت های استاتیک مورد نیاز نیست.