astro theme cactus
v5.0.0
Astro Cactus عبارة عن بداية بسيطة عنيدة تم تصميمها باستخدام إطار عمل Astro. استخدمه لإنشاء مدونة أو موقع ويب سهل الاستخدام.
تحقق من العرض التوضيحي، المستضاف على Netlify
قم بإنشاء الريبو الجديد من هذا القالب.
# npm 7+
npm create astro@latest -- --template chrismwilliams/astro-theme-cactus
# pnpm
pnpm dlx create-astro --template chrismwilliams/astro-theme-cactusاستبدل pnpm باختيارك لـ npm / الغزل
| يأمر | فعل |
|---|---|
pnpm install | تثبيت التبعيات |
pnpm dev | يبدأ تشغيل خادم التطوير المحلي على localhost:3000 |
pnpm build | أنشئ موقع الإنتاج الخاص بك إلى ./dist/ |
pnpm postbuild | البرنامج النصي Pagefind لإنشاء بحث ثابت لمشاركات مدونتك |
pnpm preview | قم بمعاينة البناء الخاص بك محليًا، قبل النشر |
pnpm sync | قم بإنشاء أنواع بناءً على التكوين الخاص بك في src/content/config.ts |
src/site.config.ts لبيانات التعريف الأساسية للموقعastro.config.ts/public :src/styles/global.css باستخدام الأنماط الفاتحة والداكنة الخاصة بك.src/site.config.ts . يمكنك العثور على المزيد من السمات والخيارات هنا.src/components/SocialList.astro لإضافة/استبدال ملف تعريف الوسائط الخاص بك. يمكن العثور على الأيقونات على موقع Icones.js.org، وفقًا لتعليمات Astro Icon.src/content/post/ & src/content/note/ باستخدام ملف (ملفات) .md/mdx. انظر أدناه لمزيد من التفاصيل.src/pages/og-image/[slug].png.ts إلى وظيفة الترميز حيث يمكنك تحرير فئات html/tailwind حسب الضرورة . يمكنك استخدام هذا الملعب للمساعدة في التصميم الخاص بك.src/content/post/social-image.md . يمكن العثور على مزيد من المعلومات حول Frontmatter هناfont-mono ، الموجودة في ملف CSS العالمي src/styles/global.css . يمكنك تغيير الخطوط عن طريق إزالة المتغير font-mono ، وبعد ذلك سيتحول TailwindCSS إلى مجموعة الخطوط font-sans الافتراضية. إذا قمت بتفرع القالب، فيمكنك مزامنة التفرع مع مشروعك الخاص، وتذكر عدم النقر فوق تجاهل التغييرات حيث ستفقد التغييرات الخاصة بك.
إذا كان لديك مستودع قوالب، فيمكنك إضافة هذا القالب كجهاز تحكم عن بعد، كما تمت مناقشته هنا.
يستخدم هذا المظهر مجموعات المحتوى لتنظيم ملفات Markdown وMDX المحلية، بالإضافة إلى التحقق من النوع باستخدام مخطط -> src/content/config.ts .
تعد إضافة منشور/ملاحظة أمرًا بسيطًا مثل إضافة ملفات .md(x) إلى مجلد src/content/post و/أو src/content/note ، والذي سيتم استخدام اسم الملف الخاص به كعنوان url/slug. المنشورات المضمنة في هذا القالب موجودة كمثال لكيفية تنظيم المادة الأمامية الخاصة بك. بالإضافة إلى ذلك، تحتوي مستندات Astro على قسم تفصيلي حول صفحات تخفيض السعر.
| الخاصية (* مطلوبة) | وصف |
|---|---|
| عنوان * | تفسيرية النفس. يتم استخدامه كرابط نصي للمنشور، وh1 في صفحة المنشورات، وخاصية عنوان الصفحات. يبلغ الحد الأقصى لطوله 60 حرفًا، ويتم تعيينه في src/content/config.ts |
| وصف * | كما هو مذكور أعلاه، يتم استخدامه كخاصية وصف تحسين محركات البحث (SEO). الحد الأدنى للطول هو 50 والحد الأقصى للطول هو 160 حرفًا، وهو محدد في مخطط النشر. |
| تاريخ النشر * | مرة أخرى بسيطة جدا. لتغيير تنسيق التاريخ/اللغة المحلية، حاليًا en-GB ، قم بتحديث خيار التاريخ في src/site.config.ts . لاحظ أنه يمكنك أيضًا تمرير خيارات إضافية إلى المكون <FormattedDate> إذا لزم الأمر. |
| updateDate | هذا تاريخ اختياري يمثل وقت تحديث المنشور، بنفس تنسيق تاريخ النشر. |
| العلامات | العلامات اختيارية مع أي مشاركة تم إنشاؤها. سيتم عرض أي علامة (علامات) جديدة في yourdomain.com/posts & yourdomain.com/tags ، وإنشاء الصفحة (الصفحات) yourdomain.com/tags/[yourTag] |
| صورة الغلاف | هذا كائن اختياري سيضيف صورة غلاف إلى أعلى المنشور. قم بتضمين كلاً من src : " path-to-image " و alt : " image alt ". يمكنك عرض مثال في src/content/post/cover-image.md . |
| ogImage | هذه خاصية اختيارية. سيتم إنشاء صورة OG تلقائيًا لكل مشاركة لا يتم توفير هذه الخاصية فيها. إذا كنت ترغب في إنشاء خاصيتك لمنشور معين، فقم بتضمين هذه الخاصية ورابطًا لصورتك، وسيتخطى السمة بعد ذلك إنشاء واحدة تلقائيًا. |
| مسودة | هذه خاصية اختيارية حيث يتم تعيينها على خطأ افتراضيًا في المخطط. من خلال إضافة صحيح، سيتم تصفية المنشور من نسخة الإنتاج في عدد من الأماكن، بما في ذلك. مكالمات getAllPosts() والصور og وموجزات RSS والصفحة [الصفحات] التي تم إنشاؤها. يمكنك عرض مثال في src/content/post/draft-post.md |
| الخاصية (* مطلوبة) | وصف |
|---|---|
| عنوان * | السلسلة، الحد الأقصى للطول 60 حرفًا. |
| وصف | لاستخدامها في خاصية الوصف التعريفي للرأس. |
| تاريخ النشر * | تنسيق ISO 8601 مع الإزاحات المسموح بها. |
يتضمن Astro Cactus مقتطف VSCode مفيدًا والذي ينشئ "قاعدة أساسية" للمقالات والملاحظات، والتي يمكن العثور عليها هنا -> .vscode/post.code-snippets . ابدأ بكتابة الكلمة frontmatter في ملف .md(x) الذي تم إنشاؤه حديثًا لتشغيله. تظهر مقتطفات التعليمات البرمجية لـ Visual Studio في IntelliSense عبر (⌃Space) على نظام التشغيل Mac، (Ctrl+Space) على نظام التشغيل Windows.
يوفر هذا التكامل ميزة بحث ثابتة للبحث في منشورات وملاحظات المدونة. في شكله الحالي، لا يعمل البحث عن الصفحات إلا بعد إنشاء الموقع. يضيف هذا الموضوع برنامجًا نصيًا لما بعد البناء والذي يجب تشغيله بعد قيام Astro بإنشاء الموقع. يمكنك المعاينة محليًا عن طريق تشغيل كل من build && postbuild.
تتضمن نتائج البحث فقط صفحات من المشاركات والملاحظات. إذا كنت ترغب في تضمين صفحات أخرى/جميعها، فقم بإزالة/إعادة تحديد موقع السمة data-pagefind-body إلى علامة المقالة الموجودة في src/layouts/BlogPost.astro و src/components/note/Note.astro .
كما يسمح لك بتصفية المشاركات حسب العلامات المضافة في مقدمة منشورات المدونة. إذا كنت تفضل إزالة هذا، فقم بإزالة سمة البيانات data-pagefind-filter="tag" من الرابط الموجود في src/components/blog/Masthead.astro .
إذا كنت تفضل عدم تضمين هذا التكامل، فما عليك سوى إزالة المكون src/components/Search.astro وإلغاء تثبيت كل من @pagefind/default-ui و pagefind من package.json. ستحتاج أيضًا إلى إزالة البرنامج النصي لما بعد البناء من هنا أيضًا.
يمكنك تقليل حمولة CSS الأولية لملف CSS الخاص بك، كما هو موضح هنا، عن طريق التحميل البطيء لأنماط مكونات الويب.
قد ترغب في تتبع عدد الزوار الذين تستقبلهم إلى مدونتك/موقعك على الويب لفهم الاتجاهات والمشاركات/الصفحات الشائعة التي أنشأتها. هناك عدد من مقدمي الخدمات الذين يمكن للمرء استخدامهم، بما في ذلك مضيفي الويب مثل vercel وnetlify وcloudflare.
لا يتضمن هذا الموضوع/القالب حلاً محددًا نظرًا لوجود عدد من حالات الاستخدام و/أو الخيارات التي قد يستخدمها أو لا يستخدمها بعض الأشخاص.
قد يُطلب منك تضمين مقتطف داخل علامة HEAD لموقعك على الويب عند إعداده، والذي يمكن العثور عليه في src/layouts/Base.astro . وبدلاً من ذلك، يمكنك إضافة المقتطف في src/components/BaseHead.astro .
تحتوي مستندات Astro على قسم رائع وتفصيل لكيفية نشر موقع Astro الخاص بك على منصات مختلفة وخصائصها.
افتراضيًا، سيتم إنشاء الموقع (راجع قسم الأوامر أعلاه) إلى دليل /dist .
هذا الموضوع مستوحى من موضوع Hexo Cactus
معهد ماساتشوستس للتكنولوجيا
