🌸 در اطراف من گل می دهد و استارلایت نیز رشد می کند. بیایید نگاهی بیندازیم و ببینیم چه چیزی جدید است!
ما در حال کار بر روی نقشه راه خود برای انتشار نسخه 1 در اواخر امسال هستیم. در اینجا برخی از نکات برجسته از آخرین نسخه های ما آمده است:
برای ارتقاء یک سایت Starlight موجود، از خودکار استفاده کنید @astrojs/upgrade ابزار CLI. با این کار Starlight، Astro و هر ادغام دیگری که استفاده می کنید به روز می شود:
پیوندهای لنگر عنوان
Starlight نسخه 0.34 پشتیبانی داخلی را برای نمایش خودکار پیوندهای لنگر قابل کلیک در کنار عناوین موجود در محتوای Markdown، MDX و Markdoc شما اضافه می کند.
ما بر اساس تحقیقات دسترسی از امبر ویلسون برای طراحی یک رویکرد پیوند لنگر با هدف مفید بودن برای همه کاربران ساخته شدیم.
Starlight عنصر پیوند را در زیر عنوان در خروجی HTML قرار می دهد و به طور خودکار یک برچسب قابل دسترسی از محتوای Markdown شما ایجاد می کند. به عنوان مثال Markdown زیر:
HTML را کمی شبیه به این تولید می کند:
h2 id="get-started">Get startedh2>
a href="#get-started">Section titled “Get started”a>
این تضمین می‌کند که سرفصل‌ها در ساختار سند مملو از پیوندهای لنگر نیستند و خود پیوندها هنوز دارای یک برچسب واضح برای فناوری کمکی هستند.
ما مدتی است که از این رویکرد در اسناد Astro استفاده می کنیم و هیجان زده ایم که آن را برای همه سایت های ساخته شده با Starlight در دسترس قرار دهیم!
پشتیبانی از Tailwind v4
Starlight از اولین نسخه ما از طریق یک پلاگین سفارشی Tailwind از سبک های نوشتن با Tailwind CSS پشتیبانی می کند. ما اکنون پشتیبانی خود را برای سازگاری با Tailwind v4 به روز کرده ایم!
Tailwind v4 با تغییرات بزرگی همراه است. اکنون پشتیبانی از طریق افزونه Vite ارائه می شود و پیکربندی به جای ماژول JS به یک فایل CSS منتقل شده است. سبک‌های سازگاری Tailwind Starlight اکنون باید مستقیماً به CSS شما وارد شده و با استفاده از @theme بخشنامه:
/* Include the "starlight" layer alongside Tailwind’s default layers. */
@layer base, starlight, theme, components, utilities;
/* Import Starlight’s compatibility styles. */
@import '@astrojs/starlight-tailwind';
@import 'tailwindcss/theme.css' layer(theme);
@import 'tailwindcss/utilities.css' layer(utilities);
/* Configure Starlight theme variables. */
برای راهنمایی دقیق در مورد به روز رسانی، نگاه کنید @astrojs/starlight-tailwind تغییرات ثبت شده همچنین ممکن است بخواهید راهنمای رسمی ارتقاء Tailwind v4 و راهنمای راه اندازی Tailwind Starlight را در دسترس داشته باشید.
لایه های آبشاری CSS
مهم است که کاربران Starlight بتوانند به راحتی سایت خود را سفارشی کنند. از لحاظ تاریخی، تضاد بین سبک‌های داخلی Starlight و CSS کاربر، سفارشی‌سازی را کمتر از آنچه که می‌توانست آسان کرده است:
/* Starlight built-in styles (simplified) */
:not(h1, h2, h3, h4, h5, h6) + h2 {
margin-top: 1em; /* ❌ Doesn’t apply because `h2` is a lower specificity! */
Starlight نسخه 0.34 تضادها را با انتقال همه سبک های داخلی به یک سبک خاص حل می کند starlight لایه آبشاری CSS. این به این معنی است که سبک های سفارشی همیشه اولویت دارند بیش از سبک های پیش فرض و ما می توانیم با نبردهای خاص خداحافظی کنیم.👋
/* Starlight built-in styles (simplified) */
@layer starlight.content {
:not(h1, h2, h3, h4, h5, h6) + h2 {
margin-top: 1em; /* ✅ Applies because it’s in the top layer! */
این تغییر همچنین به این معنی است که می توانید از مزایای استفاده از آن لذت ببرید @layer برای سازماندهی CSS خود بدون اینکه سبک های Starlight همیشه آن را نادیده بگیرند.
درباره استفاده از لایه‌های آبشاری در راهنمای CSS و Styling Starlight بیشتر بیاموزید.
API های بهبود یافته
در Starlight v0.33 ما یک نسخه جدید اضافه کردیم head ویژگی به شی داده مسیر ما. این کنترل کامل بر Starlight را باز می کند tags in route middleware, including for plugins, allowing you to add tags and filter default tags more easily.
For example, this middleware uses Railway’s demo Open Graph image API to add og:image متا تگ ها برای هر صفحه Starlight:
import { defineRouteMiddleware } from '@astrojs/starlight/route-data';
export const onRequest = defineRouteMiddleware((context) => {
const { entry, head } = context.locals.starlightRoute;
// Create an Open Graph image URL using the current page’s title.
const ogImageUrl = new URL(
'https://og.railway.com/api/image?fileType=png&layoutName=simple',
ogImageUrl.searchParams.set('text', entry.data.title);
// Add a `` tag to the current page’s ``.
attrs: { property: 'og:image', content: ogImageUrl.href },
رفع اشکال و موارد دیگر
مانند همیشه، ما همچنین در حال رفع مشکلات و گسترش ویژگی های موجود هستیم. برای جزئیات کامل، از جمله دستورالعمل های مهاجرت برای تغییرات شکسته، به لاگ تغییرات Starlight مراجعه کنید.
متشکرم
با تشکر از همه کسانی که در انتشارات روابط عمومی و بررسی اخیر ما مشارکت کردند، از جمله HiDeoo، Dhruv Bhanushali، Hippo، mayank99، Mark Gaze، Matthew Justice، Ariel K، techfg، jsparkdev، trueberryless، Juan Diaz، dragomano، Armand Philippot، Ayo Aycofelv Sofelv, Oluwalirsrut Live. گیمینو، فلوریان لفور، امانوئل استوپا، اروینس استراومانیس، پیوو و سارا رینزبرگر.
ما مشتاقانه منتظریم ببینیم چه چیزی با Starlight ایجاد می کنید! اگر سوالی دارید، نظری دارید یا فقط می خواهید سلام کنید، از Astro Discord دیدن کنید.
