sveltekit blog mdx
1.0.0
بداية مدونة SvelteKit لمساعدتك على البدء في موقع مدونة Svelte التالي الخاص بك. يقوم المشروع بإنشاء تطبيق ويب تقدمي (PWA) خارج الصندوق. تحتاج فقط إلى التخصيص باستخدام شعاراتك وما إلى ذلك.
راجع منشور مدونة Sveltekit Blog Starter على موقع Rodney Lab للحصول على بعض التوضيحات حول ما بداخله وكيفية التخصيص. يرجى ترك الأسئلة في تعليق في أسفل تلك الصفحة.
هذه هي البداية السريعة:
كل ما تحتاجه لإنشاء موقع مدونة Svelte، مدعوم من sveltekit-blog-mdx .
إذا كنت ترى هذا، فمن المحتمل أنك قمت بهذه الخطوة بالفعل. تهاني!
git clone https://github.com/rodneylab/sveltekit-blog-mdx.git my-new-mdsvex-blog
cd my-new-mdsvex-blog
pnpm install # or npm install
npm run dev يقوم المبدئ بإنشاء صور سريعة الاستجابة وتخزينها مؤقتًا باستخدام البرنامج الإضافي vite-imagetools . يعد هذا أمرًا سهل الاستخدام عندما تعرف مسبقًا الصورة التي تريد تضمينها. ما عليك سوى استيراده على الصفحة التي تريد استخدامه عليها:
import featuredImageSrc from '$lib/assets/home/home.jpg' ; سيقوم البرنامج المساعد vite-imagetools بعد ذلك بإنشاء الصورة وتجزئتها. راجع الأمثلة في src/routes/index.svelte .
المثال الذي تريد فيه الحصول على صورة مميزة مختلفة لكل منشور في المدونة هو أكثر تعقيدًا بعض الشيء، على الرغم من أنه يمكن التحكم فيه. في هذه الحالة، يمكنك تشغيل برنامج نصي (راجع generate-responsive-image-data.js ) لتكرار جميع منشورات المدونة، مع أخذ الصورة المميزة من مقدمة منشور المدونة. يمكن لهذا البرنامج النصي بعد ذلك إخراج عمليات الاستيراد الضرورية إلى ملف JavaScript تم إنشاؤه، واحد لكل منشور مدونة (راجع الدليل src/lib/generated ). وأخيرًا، يمكنك استيراد ملف JavaScript ديناميكيًا في وظيفة تحميل قالب المدونة.
لتشغيل البرنامج النصي المضمن في الأمر مثل النوع:
pnpm run gen:imagesيجب أن يتم ذلك في كل مرة تقوم فيها بإضافة منشورات مدونة جديدة. كما أنه ينشئ عنصرًا نائبًا منخفض الدقة لتقليل تغيير تخطيط المحتوى أثناء تحميل الصفحة.
لكي يتمكن البرنامج النصي من العثور على صور منشور مدونتك، قم بإضافتها ضمن المجلد src/lib/assets/blog . في هذا المجلد، قم بإنشاء مجلد جديد يتطابق اسمه مع سبيكة النشر وأضف الصور إلى المجلد الجديد. يجب أن يتطابق اسم الملف مع الاسم الذي تستخدمه وهو المادة الأمامية للنشر (على سبيل المثال للصور المميزة).
قد يحتاج البرنامج النصي إلى بعض التغيير والتبديل لحالة الاستخدام الخاصة بك. اسمحوا لي أن أعرف كيف يمكن تحسينها.
src/routes/sitemap.xml/+server.js . قم بتعديل هذا الملف لضبط الإخراج. تأكد من تعريف عنوان URL لموقعك في .env كمتغير PUBLIC_SITE_URL حتى يتم إخراج عناوين URL الصحيحة إلى خريطة الموقع.
يقوم المبدئ في الغالب بإنشاء تكوين PWA تلقائيًا، بما في ذلك عامل الخدمة للتوفر في وضع عدم الاتصال وإضافة التعريف إلى قسم رأس HTML. يحتاج PWA إلى ملف بيان يتضمن تفاصيل الشعارات (للأيقونات المفضلة) بأحجام مختلفة ومتوافقة مع الأجهزة المختلفة. ستحتاج إلى إنشاء مجموعة من الرموز في assets/ :
يمكنك استخدام أدوات مجانية مفتوحة المصدر لإنشاء هذه الأدوات وتحسينها من خلال إدخال SVG. يشتمل هذا المورد على برنامج نصي Shell يمكنك تشغيله لأتمتة عملية الإنشاء.
تتم إضافة تعريف HTML لـ PWAs في المكون الموجود في src/lib/components/PWA.svelte .
يمكنك تخصيص البيان (بما في ذلك مسار ملف الرمز) عن طريق تحرير src/lib/config/website.js . يتم تغذية المتغيرات التالية في ملف manifest.json الذي تم إنشاؤه:
siteTitle ,siteShortTitle ,siteUrl ,backgroundColor ,themeColor .راجع المقالة حول تطبيقات الويب التقدمية في SvelteKit للمزيد.
npm run buildيمكنك معاينة التطبيق المدمج باستخدام
npm run preview، بغض النظر عما إذا كنت قد قمت بتثبيت محول أم لا. لا ينبغي استخدام هذا لخدمة تطبيقك في الإنتاج.
.
├── README.md
├── generate-responsive-image-data.js
├── jsconfig.json
├── netlify.toml
├── package.json
├── src
│ ├── app.html
│ ├── content
│ │ └── blog
│ │ ├── best-medium-format-camera-for-starting-out
│ │ ├── folding-camera
│ │ └── twin-lens-reflex-camera
│ ├── global.d.ts
│ ├── hooks.server.js
│ ├── lib
│ │ ├── assets
│ │ │ ├── blog
│ │ │ └── home
│ │ ├── components
│ │ │ ├── BannerImage.svelte
│ │ │ └── ...
│ │ ├── config
│ │ │ └── website.js
│ │ ├── constants
│ │ │ └── entities.js
│ │ ├── generated
│ │ │ └── posts
│ │ ├── styles
│ │ └── utilities
│ │ ├── blog.js
│ │ ├── file.js
│ │ └── image.js
│ ├── routes
│ │ ├── +error.svelte
│ │ ├── +layout.js
│ │ ├── +layout.svelte
│ │ ├── +page.js
│ │ ├── +page.svelte
│ │ ├── [slug]
│ │ │ ├── +layout.svelte
│ │ │ ├── +page.js
│ │ │ └── +page.svelte
│ │ ├── contact
│ │ │ └── +page.svelte
│ │ ├── manifest.webmanifest
│ │ │ └── +server.js
│ │ └── sitemap.xml
│ │ └── +server.js
│ └── service-worker.js
├── static
│ ├── assets
│ ├── favicon.png
│ ├── icon.svg
│ ├── robots.txt
│ └── sitemap.xml
└── svelte.config.js
src/contentsrc/content/blog هو المكان الذي نحتاج إلى وضع منشورات مدونتنا فيه. ما عليك سوى مسح محتوى العينة واستبداله بآرائك حول العالم! يوجد مجلد منفصل لكل مشاركة، مما يسمح لك بالاحتفاظ بالصور ومقاطع الفيديو والوسائط الأخرى ذات الصلة الخاصة بمنشورك بشكل منظم بشكل أفضل. لقد قمنا بتعيين مسار المتصفح من اسم المجلد هذا، لذا ضع ذلك في الاعتبار عند تسمية المجلدات. اكتب المنشور الفعلي في ملف يسمى index.md داخل مجلد المنشور. على الرغم من أن الملف له امتداد .md ، إلا أنه يمكنك كتابة Svelte فيه.srchooks.server.js نحدد سياسة أمان المحتوى (CSP) ورؤوس أمان HTTP الأخرى هنا، وهي فعالة للتطبيقات المقدمة من جانب الخادم. راجع المنشور على رؤوس HTTP لموقع SvelteKit الثابت لمعرفة كيفية إعداد CSP وما إلى ذلك للمواقع الثابتة.src/componentssrc/lib/components هذه هي المكونات التي نستخدمها في الصفحات.src/lib src/lib/config/website.js للراحة، نحدد خصائص الموقع هنا مثل عنوان الموقع وعناوين البريد الإلكتروني للاتصال وحسابات الوسائط الاجتماعية. بعض الخصائص تتغذى من متغيرات البيئة. راجع منشورًا حول بدء استخدام SvelteKit لمعرفة المزيد حول متغيرات البيئة في SvelteKit.
src/lib/styles يفعل ما تتوقعه! نحن نستخدم SCSS للتصميم ومصدر الخطوط المستضافة ذاتيًا في التخطيطات.
src/utilitiessrc/utilities/blog.js يحتوي هذا الملف على بعض التعليمات البرمجية لمساعدتنا في تحويل تخفيض السعر في منشورات المدونة إلى Svelte. بالإضافة إلى أنها تساعد في استخراج الحقول الموجودة في المادة الأمامية (هذه هي البيانات الوصفية التي نقوم بتضمينها في الجزء العلوي من ملفات index.md لمنشور المدونة).src/routes src/routes/[slug]/+page.js هذا هو في الأساس نموذج لبيانات منشورات المدونة. يتم إنشاء أحد هذه الملفات عند الإنشاء لكل منشور مدونة. يتم استخدامه لاستخراج البيانات المطلوبة في ملف Svelte المستخدم لإنشاء HTML الخاص بالمنشور.
src/routes/[slug]/+page.svelte بشكل مشابه للملف السابق، يتم إنشاء واحد من هذه الملفات لكل مشاركة مدونة. هذه المرة هو رمز Svelte الذي يستخدمه SvelteKit لإنشاء HTML وJavaScript لمشاركات مدونتنا.
لقد ذكرت معظم الملفات الأخرى في منشور مدونة "البدء مع SvelteKit"، ولكن اسمحوا لي أن أعرف إذا فاتني أي شيء يحتاج إلى مزيد من التوضيح.
لا تتردد في الانتقال إلى غرفة الدردشة الخاصة بمصفوفة Rodney Lab.
