تنزيل astro paper - تنزيل كود مصدر astro paper

astro paper

فئات أخرى

v4.7.0

تنزيل

استروبابر؟

هيكل المشروع

داخل AstroPaper، سترى المجلدات والملفات التالية:

/
├── public/
│   ├── assets/
│   │   └── logo.svg
│   │   └── logo.png
│   └── favicon.svg
│   └── astropaper-og.jpg
│   └── robots.txt
│   └── toggle-theme.js
├── src/
│   ├── assets/
│   │   └── socialIcons.ts
│   ├── components/
│   ├── content/
│   │   |  blog/
│   │   |    └── some-blog-posts.md
│   │   └── config.ts
│   ├── layouts/
│   └── pages/
│   └── styles/
│   └── utils/
│   └── config.ts
│   └── types.ts
└── package.json

يبحث Astro عن ملفات .astro أو .md في الدليل src/pages/ . يتم عرض كل صفحة كمسار بناءً على اسم الملف الخاص بها.

يمكن وضع أي أصول ثابتة، مثل الصور، في الدليل public/ .

يتم تخزين جميع منشورات المدونة في دليل src/content/blog .

التوثيق

يمكن قراءة الوثائق في شكلين: تخفيض السعر ومنشور المدونة .

التكوين - تخفيض السعر | مشاركة مدونة
إضافة مشاركات - تخفيض السعر | مشاركة مدونة
تخصيص أنظمة الألوان - تخفيض السعر | مشاركة مدونة
أنظمة الألوان المحددة مسبقًا - تخفيض السعر | مشاركة مدونة

بالنسبة إلى AstroPaper v1، تحقق من هذا الفرع وعنوان URL المباشر هذا

مكدس التكنولوجيا

الإطار الرئيسي - أسترو
التحقق من النوع - TypeScript
إطار المكون - ReactJS
التصميم - TailwindCSS
UI/UX - ملف تصميم Figma
بحث غامض - FuseJS
أيقونات - Boxicons | طاولات
تنسيق الكود - أجمل
النشر - صفحات Cloudflare
رسم توضيحي في صفحة حول - https://freesvgillustration.com
البطانة - ESLint

??‍ تشغيل محليا

يمكنك البدء في استخدام هذا المشروع محليًا عن طريق تشغيل الأمر التالي في الدليل المطلوب:

 # npm 6.x
npm create astro@latest --template satnaing/astro-paper

# npm 7+, extra double-dash is needed:
npm create astro@latest -- --template satnaing/astro-paper

# yarn
yarn create astro --template satnaing/astro-paper

# pnpm
pnpm dlx create-astro --template satnaing/astro-paper

تحذير! إذا كنت تستخدم yarn 1 ، فقد تحتاج إلى تثبيت sharp باعتباره تبعية.

ثم ابدأ المشروع بتنفيذ الأوامر التالية:

 # install dependencies
npm run install

# start running the project
npm run dev

وكطريقة بديلة، إذا كان Docker مثبتًا لديك، فيمكنك استخدام Docker لتشغيل هذا المشروع محليًا. وإليك الطريقة:

 # Build the Docker image
docker build -t astropaper .

# Run the Docker container
docker run -p 4321:80 astropaper

التحقق من موقع Google (اختياري)

يمكنك بسهولة إضافة علامة HTML الخاصة بالتحقق من موقع Google في AstroPaper باستخدام متغير البيئة. هذه الخطوة اختيارية. إذا لم تقم بإضافة متغير البيئة التالي، فلن تظهر علامة google-site-verification في قسم HTML <head> .

 # in your environment variable file (.env)
PUBLIC_GOOGLE_SITE_VERIFICATION=your-google-site-verification-value

راجع هذه المناقشة لإضافة AstroPaper إلى Google Search Console.

؟ الأوامر

يتم تشغيل جميع الأوامر من جذر المشروع، من المحطة:

ملحوظة! بالنسبة لأوامر Docker يجب علينا تثبيتها على جهازك.

يأمر	فعل
`npm install`	تثبيت التبعيات
`npm run dev`	يبدأ تشغيل خادم التطوير المحلي على `localhost:4321`
`npm run build`	أنشئ موقع الإنتاج الخاص بك إلى `./dist/`
`npm run preview`	قم بمعاينة البناء الخاص بك محليًا، قبل النشر
`npm run format:check`	تحقق من تنسيق الكود مع Prettier
`npm run format`	تنسيق الرموز مع Prettier
`npm run sync`	يُنشئ أنواع TypeScript لجميع وحدات Astro. يتعلم أكثر.
`npm run lint`	لينت مع ESLint
`docker compose up -d`	قم بتشغيل AstroPaper على عامل الإرساء، ويمكنك الوصول إليه بنفس اسم المضيف والمنفذ المُبلغ بأمر `dev` .
`docker compose run app npm install`	يمكنك تشغيل أي أمر أعلاه في حاوية عامل الإرساء.
`docker build -t astropaper .`	إنشاء صورة Docker لـ AstroPaper.
`docker run -p 4321:80 astropaper`	قم بتشغيل AstroPaper على Docker. سيكون موقع الويب متاحًا على `http://localhost:4321` .

تحذير! قد يحتاج مستخدمو Windows PowerShell إلى تثبيت الحزمة بشكل متزامن إذا كانوا يريدون تشغيل التشخيص أثناء التطوير ( astro check --watch & astro dev ). لمزيد من المعلومات، راجع هذه المشكلة.