astro ink

Astro Ink عبارة عن سمة بسيطة تم إنشاؤها لتلبية احتياجات المدونات المبنية على تخفيض السعر. يأتي مزودًا تقريبًا بجميع مكونات Astro الأساسية التي قد تحتاجها أثناء إنشاء مدونات شخصية خفيفة الوزن وفعالة تركز على شحن كميات أقل من Javascript افتراضيًا.

إنه مستوحى بشكل كبير من موضوع Hugo's Ink ويسعى جاهداً ليظل خفيفًا، مع توفير الأساس لمدونة جميلة ومبسطة.

سمات

• يتم تحديث Minimal وCrisp وMarkdown-Blog Ready دائمًا إلى أحدث إصدار من Astro (إصدار 2.x حاليًا) تحت الغطاء.
• Svelte Ready - في إطار جهودها للحفاظ على خفة الوزن والأداء وسهولة الوصول إليها من Astro's POV، يتم استخدام Svelte للمكونات التفاعلية مثل مبدل السمات
• معياري - الهيكل معياري للغاية، حيث تقوم المكونات بوظيفة واحدة فقط، ووظيفة واحدة بشكل جيد.
• Astro 2.0 Content Collection + Dynamic Pages - إنه جاهز مع Next.js مثل الصفحات الديناميكية، لدعم نظام تصنيف قائم على العلامات مع نتائج مرقّمة، وكلها قابلة للتكوين
• الوضع الداكن ورموز الألوان - يدعم الوضع الداكن وأكثر من 6 أوضاع ألوان يتم تحديدها باستخدام tailwind.config.js . يمكنك تمرير THEME_KEY باستخدام dev أو build البرنامج النصي/الأوامر على سبيل المثال: THEME_KEY=purpleheart astro build/dev لتغيير سمة اللون المستخدمة. يمكن العثور على جميع السمات المتاحة في tailwind.theme.config.js. لتخصيص قسم المدونة، أضف أيًا من فئات prose-{color} الخاصة بـ Tailwind Typography كما هو مشار إليه هنا
• Netlify CMS - قم بإضافة/تحرير/تحديث كافة المنشورات الموجودة في دليل /blog عن طريق زيارة your-site.netlify.com/admin ، على سبيل المثال: astro-ink.netlify.app/admin باستخدام بيانات اعتماد Netlify الخاصة بك. يحتاج إلى Netlify Identity(https://app.netlify.com/sites/your-site/settings/identity#registration ) وGit Gateway(https://app.netlify.com/sites/your-site/settings/identity #الخدمات) ممكّنة.
• المنشورات المستقبلية (باستخدام إجراءات Github) - أنشئ منشورات في الدليل /src/drafts date مستقبلي بتنسيق YYYY-MM-DD ، واترك إجراء Github المصمم خصيصًا يتولى نشره تلقائيًا في التاريخ المحدد. يمكنك تكوين الفاصل الزمني للتحقق في Github Action.
• البحث من جانب العميل - اسمح للمستخدمين بالوصول إلى منشورات مدونتك بسرعة من خلال ميزة البحث من جانب العميل. Lunr.js
• عرض الفذ العداد. Redis/Upstash Redis - قم بتكوين مضيف Redis الخاص بك، ثم ضع عنوان URL للاتصال الخاص به في وحدة تحكم موفر الاستضافة (Vercel، Netlify، وما إلى ذلك) أو في ملف .env (تطوير محلي)، وقم بإلغاء التعليق على رمز الاتصال هنا ثم قم بالنشر. موقعك مدعوم بعداد طرق العرض الديناميكي. راجع .env.example لفهم قيم البيئة المختلفة التي تحتاج إلى تكوينها.
• صفحة الوسائط مع دعم قناة YT - اعرض محتوى قناة YT الخاصة بك بسهولة على صفحة الوسائط بمجرد وضع معرف قناتك في ثابت ytChannelId في ملف التكوين. اختياريًا، قم بتعطيل الصور المصغرة للصور من قائمة مقاطع الفيديو الخاصة بقناة YT الخاصة بك عن طريق تعيين USE_MEDIA_THUMBNAIL على false .
• بطاقات المؤلف - يمكنك بسهولة إضافة بطاقات المؤلف المستندة إلى المنشورات أو على مستوى الموقع، والتي تتضمن زر متابعة Twitter عن طريق تعيين USE_AUTHOR_CARD على true داخل ملف التكوين.
• تراكب الصور تحت عنوان - يمكنك اختياريًا تمكين التراكبات، والتي يمكنها إضافة تدرج لوني جميل أعلى صور المنشورات الخاصة بك عن طريق تعيين USE_POST_IMG_OVERLAY على true داخل ملف التكوين.

كيف تبدأ؟

ما عليك سوى استنساخ هذا القالب والبدء في العمل من نسختك. لديك جميع أوامر NPM الشائعة تحت تصرفك مثل dev و build وما إلى ذلك. راجع package.json للاطلاع على قائمة بجميع الأوامر المتاحة.

ملاحظة: استخدم npx degit one-aalam/astro-ink لاستنساخ القالب دون أي من محفوظات git

ملاحظة: يقوم هذا القالب بإنشاء مخرجات server (SSR الجاهز) بشكل افتراضي. إذا كنت تريد بنيات static

• قم بتغيير output إلى static من server في astro.config.js
• إزالة adapter: vercel()
• قم بإزالة واجهة برمجة تطبيقات عداد المشاهدات
• اضبط USE_VIEW_STATS على false داخل config.ts

ملحوظة: قبل تشغيل npm run dev للمرة الأولى -

• قم بإنشاء ملف .env عن طريق تشغيل mv .env.example .env (إذا كنت تستخدم توزيعة Linux أو Mac)
• قم بتعيين متغير SITE_URI كـ SITE_URI=http://localhost:4321 ( حيث 4321 هو المنفذ الذي يعمل عليه مشروعك )

تم تصميمه باستخدام حبر أسترو

• jamesperkins.dev - موقع شخصي للمطور، مدرب YouTube جيمس آر بيركنز
• Highlandcows.github.io مدونة نيك جاكوب الشخصية

هل تعرف موقعًا تم إنشاؤه باستخدام Astro Ink؟ اسمحوا لي أن أعرف على تويتر

هل تريد أن تتعلم استرو أثناء بناء الحبر؟

تم إنشاء هذا الموضوع في البداية باستخدام إصدار ألفا أولاً، ثم إصدار تجريبي من Astro Framework. إذا كنت قد بدأت للتو في استخدام Astro ، فيمكنك بالفعل تعلم Astro أثناء بناء هذا الموضوع بالذات من خلال متابعة سلسلة من المدونات التي كتبتها والتي تعلمك Astro من الأساس!

توجه إلى aalam.in/blog وتعرف

• كيفية إعداد Astro وتشغيله باستخدام الإعدادات الافتراضية الأساسية للتصميم والنماذج الأولية وعمليات النشر المتزايدة
• إدارة مكونات العرض وإنشاء صفحات Astro
• تغذية البيانات المحلية والبعيدة إلى صفحات Astro
• وضع التفاعل حيث لا يمكنك الاستغناء عنه مطلقًا في Astro
• إنشاء صفحات ديناميكية تعتمد على البيانات ونتائج مرقمة في Astro
• قم بتأليف محتوى موقع Astro الخاص بك باستخدام أنظمة إدارة المحتوى المستندة إلى Git