شبكات محفظة بداية
تحقق من الإصدار Astro هنا: https://github.com/drehimself/astro- portfolio-starter
موضوع بداية محفظة بسيطة للشبكات
عنوان URL التجريبي
https://gridsome- portfolio-starter.netlify.com
سمات
- تصميم نظيف وأدنى
- Tailwind CSS V1 (مع purgecss). باستخدام هذا المكون الإضافي الشبكية.
- قم بالتمرير إلى أقسام باستخدام Vue-Scrollto
- مدونة مع محتوى Markdown للمنشورات
- نوع الوثائق الذي يوضح كيفية استخدام مكونات VUE في Markdown (انقر فوق مستندات)
- تبديل السمة مع الوضع المظلم
- البحث عن مشاركات مع Fuse.js و Vue-Fuse
- علامات للوظائف
- ترقيم الصفحات الأساسية
- بناء جملة تسليط الضوء مع shiki (باستخدام هذا المكون الإضافي الشبكات)
- 404 صفحة
- تغذية RSS
- sitemap في XML
تثبيت
- قم بتثبيت أداة CLI Gridsome إذا لم يكن لديك:
npm install --global @gridsome/cli
- استنساخ repo:
git clone https://github.com/drehimself/gridsome-portfolio-starter.git
-
cd gridsome-portfolio-starter
-
npm install
(يمكن أن يكون هذا تنزيلًا طويلًا بسبب Cypress. إذا كنت لا تهتم بالاختبار باستخدام Cypress ، فقم بإزالته من package.json
) -
gridsome develop
لبدء خادم Dev محلي على http://localhost:8080
الاختبار
لدي بعض الاختبارات الأساسية إلى النهاية باستخدام Cypress. يمكنك العثور عليها في /cypress/integration/tests.js
.
لتشغيل الاختبارات ، تأكد أولاً من تشغيل خادم DEV الخاص بك مع gridsome develop
. أفترض أنك تستخدم المنفذ الافتراضي 8080. إذا لم يكن الأمر كذلك ، قم بتغيير مفتاح baseUrl
في ملف cypress.json
.
بعد تشغيل خادم DEV الخاص بك ، يمكنك تشغيل npm run test
أو ./node_modules/.bin/cypress open
سيتم تشغيل تطبيق Cypress Electron. انقر فوق ملف tests.js
وسيتم إجراء الاختبارات في متصفح آلي.
ملحوظات
- عندما تنتقل الشبكات إلى Vue 3 ، سأقوم بتحديث هذا الريبو أيضًا. سأقوم أيضًا بالتحديث إلى Tailwind V2 ، جنبًا إلى جنب مع الأشياء الجيدة الأخرى مثل Dark Mode و JIT.
- بناءً على موقع محفظتي الشخصية. أردت إنشاء إصدار مفتوح المصدر مع المزيد من الميزات.
- تحقق من جهاز الشاشة الذي قمت به حيث أذهب إلى عملية بناء موقع الويب الخاص بي.
- الرسوم التوضيحية من Uncraw
- يعتمد البحث على fuse.js و vue-fuse. يبحث فقط عن عنوان وملخص المنشورات في الوقت الحالي. قد يكون من الضروري بعض التغيير والتبديل للبحث عن رغبتك. تحقق من وثائق الصمامات لإعدادات البحث. أضاف هذا العلاقات العامة القدرة على البحث عن كل من أنواع "post" و "الوثائق".
- تحقق من هذه المبتدئين في الشبكات الأخرى حيث حصلت على بعض الأفكار من:
- شبكات مدونة بداية
- شبكات بداية بليدا
- مدونة Jigsaw Starter - حصلت على الكثير من إلهام التصميم من موضوع بداية هذا.
إصدارات أخرى
- إصدار Nuxt: https://github.com/drehimself/nuxt- portfolio-starter
- إصدار Saber: https://github.com/drehimself/saber- portfolio-starter