cgartlab.github.io
1.0.0
ScrewFast هو قالب مفتوح المصدر مصمم لإعداد مشروع الويب السريع والفعال ، ويمزج بساطتها مع الوظائف . سواء كنت تعرض محفظة أو تشغيل صفحة مقصودة للشركة أو تشغيل مدونة ، يوفر ScrewFast كل ما تحتاجه. من خلال الجمع بين قوة Astro و Tailwind CSS و Preline UI ، يوفر هذا القالب حلًا وظيفيًا وجماليًا لوجود الويب الخاص بك.
عرض التوضيح المباشر
مكون المشاركة الاجتماعية :
مكون زر الإشارة المرجعية :
localStorage .localStorage بملفات تعريف الارتباط لاستمرار المرجعية.بعد مكون التعليقات :
تكامل موضوع توثيق النجوم :
مكون مجموعة الأيقونة :
<Icon name="iconName" /> في مكونات Astro الخاصة بك.ميزات التدويل (I18N) :
LanguagePicker .monolingual-site . الجدول الديناميكي للمحتويات (TOC) مع مؤشر تقدم التمرير :
ملحوظة
حاليا ، لا توجد تحسينات مخططة أو الأخطاء المعروفة. إذا واجهت أي مشكلات ، فيرجى الإبلاغ عنها في صفحة القضايا لدينا أو بدء مناقشة لتبادل الأفكار أو الاقتراحات أو طرح الأسئلة.
سيوفر لك هذا الدليل الخطوات اللازمة لإعداد المشروع Astro والتعرف عليه على جهاز التطوير المحلي الخاص بك.
للبدء ، انقر فوق الزر Use this template (الزر الأخضر الكبير في الجزء العلوي الأيمن) لإنشاء ريبو الخاص بك من هذا القالب في حساب github الخاص بك.
بمجرد إنشاء مستودعك ، يمكنك استنساخه إلى جهازك المحلي باستخدام الأوامر التالية:
git clone https://github.com/[YOUR_USERNAME]/[YOUR_REPO_NAME].git
cd [YOUR_REPO_NAME]ابدأ بتثبيت تبعيات المشروع. افتح المحطة الخاصة بك ، وانتقل إلى دليل الجذر للمشروع ، وتنفيذ:
npm install سيقوم هذا الأمر بتثبيت جميع التبعيات اللازمة المحددة في ملف package.json .
مع تثبيت التبعيات ، يمكنك الاستفادة من البرامج النصية NPM التالية لإدارة دورة حياة تطوير مشروعك:
npm run dev : يبدأ خادم تطوير محلي مع تمكين إعادة التحميل الساخن.npm run preview : يخدم إخراج البناء محليًا للمعاينة قبل النشر.npm run build : يحدد موقعك في ملفات ثابتة للإنتاج.للحصول على مساعدة مفصلة مع أوامر Astro CLI ، تفضل بزيارة وثائق Astro.
قبل النشر ، تحتاج إلى إنشاء بناء إنتاج:
npm run build هذا ينشئ dist/ دليلًا مع موقعك المضمّن (قابل للتكوين عبر Outsir في Astro).
انقر فوق الزر أدناه لبدء نشر مشروعك على Vercel:
انقر فوق الزر أدناه لبدء نشر مشروعك على NetLify:
يقوم ScrewFast بتنظيم مكونات وحدات ومحتوى وتخطيطات لتبسيط التطوير وإدارة المحتوى.
src/
├── assets/
│ ├── scripts/ # JS scripts
│ └── styles/ # CSS styles
├── components/ # Reusable components
│ ├── Meta.astro # Meta component for SEO
│ ├── sections/ # Components for various sections of the website
│ ├── ThemeIcon.astro # Component for toggling light/dark themes
│ └── ui/ # UI components categorized by functionality
├── content/ # Markdown files for blog posts, insights, products, and site configuration
│ ├── blog/
│ ├── docs/
│ ├── insights/
│ ├── products/
│ └── config.ts # Contains site-wide configuration options
├── data_files/ # Strings stored as JSON files
├── images/ # Static image assets for use across the website
├── layouts/ # Components defining layout templates
│ └── MainLayout.astro # The main wrapping layout for all pages
├── pages/ # Astro files representing individual pages and website sections
│ ├── 404.astro # Custom 404 page
│ ├── blog/
│ ├── fr/ # Localized content
│ ├── contact.astro
│ ├── index.astro # The landing/home page
│ ├── insights/
│ ├── products/
│ ├── robots.txt.ts # Dynamically generates robots.txt
│ └── services.astro
└── utils/ # Shared utility functions and helpers
توجد الملفات الثابتة التي يتم تقديمها مباشرة إلى المتصفح ضمن الدليل public بجذر المشروع.
public/
└── banner-pattern.svg
يسمح ScrewFast بتخصيص سهل لتناسب احتياجاتك المحددة. فيما يلي بعض الطرق التي يمكنك من خلالها تكوين المكونات والمحتوى:
تحتوي بعض المكونات على خصائص محددة على أنها متغيرات TypeScript داخل ملف المكون. فيما يلي مثال على تخصيص المكون FeaturesGeneral :
// Define the string variables title and subTitle for the main heading and sub-heading text.
const title : string = "Meeting Industry Demands" ;
const subTitle : string =
"At ScrewFast, we tackle the unique challenges encountered in the hardware and construction sectors." ;بالنسبة لمجموعات المحتوى مثل الشهادات أو الإحصائيات ، قم بتحرير المجموعة المقابلة للكائنات:
// An array of testimonials
const testimonials : Testimonial [ ] = [ ... ] ;
// An array of statistics
const statistics : StatProps [ ] = [ ... ] ;قم بتعديل المحتوى داخل هذه المصفوفات لتعكس بياناتك.
يمكنك تمرير القيم إلى الدعائم مباشرة في ملفات الصفحات للمكونات المستخدمة عبر الصفحات. فيما يلي مثال على مكون HeroSection و ClientsSection مع الدعائم المضمنة:
< HeroSection
subTitle =" Top-quality hardware tools and expert construction services for every project need. "
primaryBtn =" Start Exploring "
primaryBtnURL =" /explore "
/>
< ClientsSection
title =" Trusted by Industry Leaders "
subTitle =" Experience the reliability chosen by industry giants. "
/> قم بتحرير الدعائم مثل title ، subTitle ، primaryBtn ، إلخ ، لتخصيص هذه الأقسام. تأكد من الحفاظ على هيكل وأنواع البيانات من الدعائم.
قم utils ملف navigation.ts .
تحرير صفيف navBarLinks لضبط روابط شريط التنقل:
// An array of links for the navigation bar
export const navBarLinks : NavLink [ ] = [
{ name : "Home" , url : "/" } ,
{ name : "Products" , url : "/products" } ,
{ name : "Services" , url : "/services" } ,
{ name : "Blog" , url : "/blog" } ,
{ name : "Contact" , url : "/contact" } ,
] ; استبدل name بنص العرض وعنوان url بالمسار المناسب للصفحات على موقعك.
وبالمثل ، اضبط الروابط المعروضة في تذييل تذييل من خلال تحرير مجموعة footerLinks :
// An array of links for the footer
export const footerLinks : FooterLinkSection [ ] = [
{
section : "Product" ,
links : [
{ name : "Tools & Equipment" , url : "/tools-equipment" } ,
{ name : "Construction Services" , url : "/construction-services" } ,
{ name : "Pricing" , url : "/pricing" } ,
] ,
} ,
{
section : "Company" ,
links : [
{ name : "About us" , url : "/about" } ,
{ name : "Blog" , url : "/blog" } ,
{ name : "Careers" , url : "/careers" } ,
{ name : "Customers" , url : "/customers" } ,
] ,
} ,
] ; يمثل كل قسم داخل صفيف footerLinks مجموعة من الروابط. قم بتحديث قيمة section لبطولة المجموعة وتعديل name كل رابط وعنوان url حسب الحاجة.
استبدل عناوين URL ذات العناصر النائبة في كائن socialLinks بملفات تعريف وسائل التواصل الاجتماعي الخاصة بك:
// An object of links for social icons
export const socialLinks : SocialLinks = {
facebook : "#" ,
twitter : "#" ,
github : "#" ,
linkedin : "#" ,
instagram : "#" ,
} ; ملحوظة
تذكر إضافة عناوين URL كاملة وصالحة للملاحة للعمل بشكل صحيح. سوف تنعكس هذه التخصيصات في موقع Astro الخاص بك ، مما يعزز الاتساق عبر جميع الصفحات.
لدينا خياران لمكونات شريط التنقل: Navbar.astro للحصول على شريط Navbar و NavbarMegaMenu.astro للحصول على قائمة Mega. كلاهما يقع في src/components/sections/navbar&footer .
يمكن تكوين مكونات Navbar.astro و NavbarMegaMenu.astro داخل MainLayout.astro ، مما يتيح لك اختيار نمط التنقل الذي يناسب مشروعك. لتخصيص هذه المكونات ، يمكنك تعديلها مباشرة تحت src/components/sections/navbar&footer لتطبيق تكوينات محددة أو تحديثات التصميم.
تم تجهيز ScrewFast الآن بنجوم النجوم ، المصممة لرفع تجربة المستخدم مع الوثائق. يتضمن هذا الموضوع الحديث والأنيق مجموعة من الميزات لجعل المحتوى أكثر سهولة وممتعة للتنقل.
الميزات الرئيسية:
مع ضوء النجوم ، يمكنك الوصول إلى ميزات وتكاملات قوية ، بالإضافة إلى خيارات تخصيص واسعة لتناسب احتياجاتك.
ملحوظة
يمكنك الغطس في قائمة الميزات الشاملة لـ Starlight وتعلم كيف يمكن أن تبسيط عملية التطوير الخاصة بك من خلال زيارة موقع توثيق السمة.
مهم
إذا لم يتم تمرير الشريط الجانبي في موقع Starlight الخاص بك ، وعليك سحب شريط التمرير يدويًا ، قم بإزالة علامة البرنامج النصي المتعلقة بمكتبة Lenis Smooth Scroll من src/components/ui/starlight/Head.astro .
تجربة الزبد ناعمة التمرير مع لينيس. لقد قمنا بدمج Lenis لتوفير تجربة تمرير محسّنة سائلة وسريعة الاستجابة.
إليك كيفية إعداد Lenis في src/assets/scripts/lenisSmoothScroll.js :
// src/assets/scripts/lenisSmoothScroll.js
import "@styles/lenis.css" ;
import Lenis from "lenis" ;
const lenis = new Lenis ( ) ;
function raf ( time ) {
lenis . raf ( time ) ;
requestAnimationFrame ( raf ) ;
}
requestAnimationFrame ( raf ) ; ثم أضفه إلى MainLayout.astro :
< script >
import "@scripts/lenisSmoothScroll.js";
</ script >يرجى ملاحظة أن التمرير السلس يمكن أن يؤثر على إمكانية الوصول والأداء على بعض الأجهزة ، لذلك تأكد من اختباره بشكل شامل عبر بيئات مختلفة.
ملحوظة
إذا كنت ترغب في إزالة Lenis والعودة إلى سلوك التمرير الافتراضي للمتصفح ، فما عليك سوى التعليق أو حذف هذه الخطوط من ملف MainLayout.astro و /starlight/Head.astro إذا كنت تستخدم مستندات.
بالنسبة لصفحات المنتج الفردية ، تم دمج GSAP لإضافة رسوم متحركة جذابة تنفذ بمجرد تحميل صفحة المنتج. يمكنك العثور على تكوين GSAP وتعديله في أقسام البرنامج النصي في ملف صفحة المنتج الموجود في src/pages/products/[...slug].astro وصفحة الرؤى في src/pages/insights/[...slug].astro :
< script >
import { gsap } from "gsap";
// Initialize GSAP animations...
</ script >تخصيص الرسوم المتحركة:
يرجى تخصيص الرسوم المتحركة GSAP ضمن هذا البرنامج النصي لتناسب مظهر مشروعك ومظهره. المثال المقدم هو نقطة انطلاق ، تمثل كيفية الاستفادة من GSAP للتأثير البصري الفوري مع تحميل صفحة المنتج.
تعديل أو إزالة الرسوم المتحركة:
gsap.from() ، أو إضافة مكالمات الرسوم المتحركة الجديدة GSAP كما هو مطلوب.ملحوظة
لقد اخترنا الحفاظ على التكامل الهزيل والمركّز ، ولكن يمكن الإشارة إلى وثائق GSAP الشاملة للرسوم المتحركة الأكثر تعقيدًا: وثائق GSAP.
لتحقيق تصميم أنظف وأكثر اتساعًا ، تمت إزالة شريط التمرير الافتراضي بصريًا. على الرغم من أن هذا الاختيار يناسب الأهداف الجمالية للمشروع ، فمن المهم مراعاة أن أشرطة التمرير يمكن أن تؤثر في بعض الأحيان على إمكانية الوصول وتجربة المستخدم. نوصي بتقييم قرار التصميم هذا في سياق قاعدة المستخدم الخاصة بك واحتياجاتهم.
بالنسبة لأولئك الذين يفضلون أشرطة التمرير المخصصة ، نقترح استخدام المكون الإضافي Tailwind-Scrollbar ، والذي يضيف مرافق CSS Tailwind لأنماط شريط التمرير ، مما يتيح المزيد من التخصيص الذي يمكن التحكم فيه والذي يمكن أن يلبي أيضًا معايير إمكانية الوصول.
ملحوظة
إذا كنت ترغب في إرجاع شريط التمرير الافتراضي ، فيمكنك التعليق أو إزالة CSS التالية من src/layouts/MainLayout.astro :
< style >
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
</ style > بالإضافة إلى ذلك ، قم بتحديث علامة <html> لإزالة فئة scrollbar-hide ، مما يؤدي إلى:
< html lang =" en " class =" scroll-pt-16 " >تم تصميم تكوين SEO في قالب ScrewFast لتمكين المستخدمين في تحسين رؤية موقع الويب الخاص بهم على محركات البحث ومنصات الوسائط الاجتماعية. تحدد هذه الوثائق تفاصيل التنفيذ وتعليمات الاستخدام لإدارة إعدادات كبار المسئولين الاقتصاديين بشكل فعال.
تم تركيز تكوين SEO باستخدام ملف constants.ts . يدير هذا الملف البيانات المتعلقة بكبار المسئولين الاقتصاديين مثل عناوين الصفحات والأوصاف والبيانات المنظمة وعلامات الرسم البياني المفتوحة ، مما يوفر نهجًا أكثر تنظيماً وقابلًا لإدارة كبار المسئولين الاقتصاديين.
لتخصيص إعدادات SEO ، قم بتعديل القيم في ملف constants.ts . تشمل التكوينات الرئيسية الموقع وكبار المسئولين الاقتصاديين و OG ، مما يسمح للمطورين بتحديد معلمات كبار المسئولين الاقتصاديين على مستوى الموقع.
// constants.ts
export const SITE = {
title : " ScrewFast " ,
// Other SITE properties...
} ;
export const SEO = {
title : SITE . title ,
// Other SEO properties...
} ;
export const OG = {
title : ` ${ SITE . title }: Hardware Tools & Construction Services ` ,
// Other OG properties...
} ; عند تطبيق البيانات الوصفية داخل تخطيطاتك ، مثل MainLayout.astro ، يمكنك تمرير قيم البيانات الوصفية المطلوبة كدعائم إلى مكون Meta :
---
// In MainLayout.astro file
const { meta } = Astro . props ;
interface Props {
meta ? : string ;
}
---
< Meta meta = { meta } />بالنسبة لتجاوزات تحسين محركات البحث (SEO) الخاصة بالصفحة ، يمكن للمطورين تمرير خصائص المخطط الفردية داخل ملفات صفحات محددة.
---
import { SITE } from " @/data_files/constants " ;
---
< MainLayout
title = { ` Example Page | ${ SITE . title } ` }
structuredData = { {
" @type " : " WebPage " ,
// Other structured data properties...
} }
>
<!-- Page content -->
</ MainLayout >
باستخدام هذا الإعداد ، يتلقى مكون META وصف التعريف المخصص ويطبقه على بيانات تعريف الصفحة. إذا لم يتم تمرير قيمة مخصصة ، فسيتم استخدام الافتراضي من Meta.astro بدلاً من ذلك.
للحصول على استراتيجية SEO الأكثر قوة ، يمكنك إنشاء خصائص إضافية في مكون Meta.astro . على سبيل المثال ، قد ترغب في تضمين علامات رسم بيانية مفتوحة محددة لتواريخ نشر المقالات أو علامات للبيانات الوصفية الخاصة بـ Twitter.
يمكن إدارة البيانات المهيكلة بتنسيق JSON-LD بواسطة مكون Meta.astro ، مما يحسن كيفية فهم محركات البحث لمحتوى صفحتك وتعزيز نتائج البحث المحتملة باستخدام قصاصات غنية. قم بتعديل خاصية structuredData مع أنواع وخصائص Schema.org ذات الصلة:
< MainLayout
structuredData = { {
" @context " : " https://schema.org " ,
" @type " : " WebSite " ,
" name " : " ScrewFast " ,
" url " : " https://screwfast.uk " ,
" description " : " Discover top-quality hardware tools and services "
} }
>على الرغم من أن القالب يوفر حل SEO مخصص ، يمكنك اختيار استخدام تكامل Astro مثل SEO Astro للحصول على ميزات وكبار المسئولين الاقتصاديين الإضافيين. قد يوفر دمج مثل هذه الحزمة إدارة المزيد من البيانات الوصفية الآلية والوظائف الإضافية التي تركز على كبار المسئولين الاقتصاديين.
يتم إنشاء robots.txt ديناميكيًا باستخدام الكود الموجود في SRC/Pages/Robots.txt.ts. يتبع هذا التكوين المثال من مستندات Astro:
import type { APIRoute } from 'astro' ;
const robotsTxt = `
User-agent: *
Allow: /
Sitemap: ${ new URL ( 'sitemap-index.xml' , import . meta . env . SITE ) . href }
` . trim ( ) ;
export const GET : APIRoute = ( ) => {
return new Response ( robotsTxt , {
headers : {
'Content-Type' : 'text/plain; charset=utf-8' ,
} ,
} ) ;
} ; إن إضافة ملف .vscode/settings.json في دليل الجذر يسهل تكامل الصور مباشرة في مجموعات المحتوى ضمن محررين Markdown. تتيح هذه الميزة إنشاء روابط Markdown دون عناء مع ملفات الوسائط والنسخ السلس في مساحة العمل.
()src/images/content/<path> . لصق getting-started.png src/content/post-1.md
post-1.md src/images/content/post-1/getting-started.png . ملحوظة
تذكر أن تضغط على التحول أثناء إسقاط الصور.
زيادة كفاءة موقع الويب الخاص بك إلى الحد الأقصى مع هذه التكاملات Astro المدمجة:
astro.config.mjs : export default defineConfig ( {
// ...other Astro configurations
integrations : [ ... other Astro integrations , compressor ( { gzip : false , brotli : true } ) ] ,
} ) ;astro.config.mjs : export default defineConfig ( {
// ...
site : 'https://example.com' ,
integrations : [ sitemap ( ) ] ,
} ) ;إن الشيء العظيم في Astro هو نظامها الإيكولوجي الغني للتكامل ، مما يتيح لك تكييف وظائف المشروع لاحتياجاتك الدقيقة. لا تتردد في استكشاف صفحة تكامل Astro وإضافة قدرات إضافية كما ترى مناسبة.
تم تصميم هذا المشروع باستخدام مجموعة متنوعة من الأدوات والتقنيات التي تعزز أدائها وقابليتها للصيانة وتجربة المطور. فيما يلي قائمة بالأدوات الرئيسية وأدوارها في المشروع:
تم تصميم المكونات التفاعلية مثل Navbars و Midals و Excludions باستخدام Preline UI ، وهي مكتبة شاملة للمكونات مفتوحة المصدر.
يعزز التصميم عبر مشروعنا الفصول الأولى من المرافق التي تقدمها CSS Tailwind. تتيح لنا هذه المنهجية إنشاء تخطيطات ومكونات مخصصة بسرعة وكفاءة.
لضمان تنسيق التعليمات البرمجية المتسقة ، وخاصة بالنسبة لفرز الفئة ، قمنا بدمج المكون prettier-plugin-tailwindcss . تم تعيين التكوين التالي في ملف .prettierrc في جذر المشروع:
{
"plugins" : [ " prettier-plugin-tailwindcss " ]
} ننشر مشروعنا على Vercel ، والاستفادة من منصتها القوية لسير عمل CI/CD سلس. باستخدام vercel.json ، قمنا بتعيين رؤوس أمان صارمة وسياسات التخزين المؤقت ، وضمان الالتزام بأحدث الممارسات للأمن والأداء:
{
"headers" : [
{
"source" : " /(.*) " ,
"headers" : [
{
"key" : " Content-Security-Policy " ,
"value" : " default-src 'self'; [other-directives] "
},
" Additional security headers... "
]
}
]
} من أجل أداء الموقع الأمثل ، نقوم بعد بعبادة ملفات HTML الخاصة بنا باستخدام process-html.mjs ، وهو برنامج نصي مخصص يعاني من HTML بعد مرحلة البناء لتقليل حجم الملف وتحسين أوقات التحميل.
فيما يلي مقتطف من برنامج HTML Minification Script في process-html.mjs :
/ process-html.mjs
// Post-build HTML minification script snippet
// ...
await Promise . all (
files . map ( async ( file ) => {
// File processing and minification logic
} )
) ;نشجعك على الرجوع إلى الوثائق التفصيلية لكل أداة لفهم قدراتها تمامًا وكيفية المساهمة في المشروع:
إذا كنت مهتمًا بالمساعدة ، فيمكنك المساهمة بعدة طرق:
يتم إصدار هذا المشروع تحت رخصة معهد ماساتشوستس للتكنولوجيا. يرجى قراءة ملف الترخيص لمزيد من التفاصيل.
ملاحظة: لا ينتم قالب موقع الويب هذا مع الشركات المعروضة. يتم استخدام الشعارات لأغراض التوضيح فقط ويجب استبدالها في الإصدارات المخصصة.
