digital garden
v0.7.2
المزيد من لقطات الشاشة هنا
قالب التدوين مفتوح المصدر (البستنة الرقمية) للمطورين الذين يستخدمون جهاز توجيه تطبيق NEXT.JS ، MDX ، ContentLayer ، Tailwind CSS ، @Shadcn/UI ، أيقونات Lucide ، وأكثر من ذلك.
إذا كنت تحب هذا القالب و/أو تستخدمه ، فيرجى إعطائه نجمة على Github. هذا سيساعد المزيد من الناس على اكتشاف ذلك ، وبالتالي يساعد على تحسين القالب.
ملاحظة: يتطور هذا المشروع دائمًا وهو بعيدًا عن كونه مثاليًا أو حتى القيام به. أنا دائمًا منفتح على الاقتراحات والمساهمات. لا تتردد في فتح مشكلة أو العلاقات العامة إذا كان لديك أي أفكار أو اقتراحات. يمكنك أيضًا رؤية خريطة الطريق للميزات المخطط لها إذا كنت ترغب في المساهمة.
كمطور يقوم بإنشاء محتوى ، أريد أن يكون لدي مدونة وحديقة رقمية حيث يمكنني مشاركة أفكاري وأفكاري مع العالم. الآن ، ليس هناك حقًا "حل مثالي" لهذا الحالي. من خلال التحليلات المضمنة ، SEO ، اشتراكات البريد الإلكتروني ، الأدوات الحديثة ، التصميم البسيط ، وما إلى ذلك ، يتعين علينا إما بناء واحدة من نقطة الصفر ، أو استخدام قالب تصميم ورمز الميزات ، أو استخدام أداة CMS/NO-CODE.
لذلك قررت بناء حل سأستخدمه بنفسي. هذه هي النتيجة.
إذا كنت تريد أن ترى كيف قمت بإعداد هذا القالب لحديقتي الرقمية الخاصة ، فيمكنك التحقق من هذا الالتزام بجميع التغييرات.
pnpm installutils/metadata.ts مع معلوماتك والإعدادات العامةutils/uses-data.ts مع البرامج والأجهزة التي تستخدمهاutils/projects-data.ts مع مشاريعكutils/navigation-links.ts مع الروابط التي تريدها في التنقلcontent/pages/now مع توفركcontent/pages/about سيرتك الذاتيةpnpm devافتح http: // localhost: 3000 في متصفحك لرؤية النتيجة.
يمكنك كتابة المحتوى في Marmdown أو MDX. يقع المحتوى في content/ ويتم تنظيمه في المجلدات. يحتوي مجلد pages على الصفحات. يحتوي مجلد posts على Blogposts. يحتوي مجلد projects على المشاريع.
يتم تحرير صفحات قائمة في مجلد lib .
/uses - lib/uses-data.ts/projects - lib/projects-data.ts/social - lib/social-data.ts يستخدم Frontmatter لتحديد البيانات الوصفية للصفحات والوظائف. إنه يقع في الجزء العلوي من الملف ويتم كتابته في Yaml. يمكنك تحديد الحقول التالية:
title - عنوان الصفحة/المنشورdescription - وصف الصفحة/المنشورpublishedDate - تاريخ المنشور (لا يستخدم على الصفحات)lastUpdatedDate - تاريخ الصفحة/المنشورtags - قائمة العلامات لهذا المنشور. يمكنك إضافة علامات جديدة عن طريق إضافتها إلى قائمة tagOptions . (لا تستخدم على الصفحات)series - سلسلة المنشور. السلسلة لديها عنوان ورقم طلب للنشر. (لا تستخدم على الصفحات)author - مؤلف المنشور. المؤلف له اسم ، وصورة. (لا تستخدم على الصفحات)status - ما إذا تم نشر الصفحة/المنشور أو المسودةيمكنك نشر المشروع مع Vercel أو أي مزود استضافة آخر. إذا كنت ترغب في استخدام Vercel ، فيمكنك استخدام الزر الموجود في الجزء العلوي من هذا ReadMe.
package.json معلومات المؤلفNEXT_PUBLIC_BASE_URL على Vercel للإشارة إلى عنوان URL لجذر موقع الويب الخاص بك يستخدم هذا المشروع Inter كخط افتراضي. يمكنك تغييره على app/layout.tsx باستخدام حزمة next/fonts .
يستخدم المشروع ألوان Tailwind و @Shadcn/UI Config. تخصيص الألوان على globals.css .
هناك مكون توقيع لاستخدامه في تذييل. يمكنك تحرير التوقيع على components/signature.tsx . لقد استخدمت Figma لكتابة التوقيع بخط Caveat وتصديره على أنه SVG. يمكنك أن تفعل الشيء نفسه وتحديث SVG في المكون.
الصور وملفات الوسائط الأخرى موجودة في public/ الدليل. يمكنك استخدامها في المحتوى الخاص بك باستخدام مسار /<filename>.<ext> .
إليك برنامج تعليمي سريع حول كيفية صنع الصورة الرمزية مماثلة في Figma في أقل من دقيقتين. https://youtu.be/ny-vaeehjkm
يمكنك تغيير بيانات البيانات الوصفية والمؤلف في utils/metadata.ts . سيتم استخدام هذا حول موقع العناوين والروابط الاجتماعية والمقابض الاجتماعية وكبار المسئولين الاقتصاديين وما إلى ذلك.
يمكنك تحرير روابط التنقل في lib/navigation-links.ts .
يمكنك تحرير الروابط الاجتماعية في lib/social-data.ts . يمكنك أيضًا إضافة روابط اجتماعية جديدة عن طريق إضافتها إلى الملف واستخدام اسم النظام الأساسي كمفتاح وعنوان URL كقيمة. سيضيف مكون SocialButton تلقائيًا أيقونة للنظام الأساسي إذا كان مدعومًا في البسيطات البسيطة.
للتكوين ، تحتاج إلى تمكينها على لوحة معلومات Vercel Project عن طريق تحديد مشروعك ثم النقر فوق علامة التبويب Analytics وانقر فوق تمكين من مربع الحوار.
Umami هو حل تحليلات ويب بسيط وسهل الاستخدام مع خيار الاستضافة الذاتي! يمكنك قراءة المزيد حول هذا الموضوع على موقع Umami. (تلميح: على السكك الحديدية ، يمكنك استضافة الذات منخفضة التكلفة أو حتى مجانية) .
تكوين: set NEXT_PUBLIC_UMAMI_SCRIPT_URL & NEXT_PUBLIC_UMAMI_WEBSITE_ID متغيرات البيئة على ملف .env.local الخاص بك وعلى لوحة معلومات Vercel.
معقول هو بديل بسيط وخفيف الوزن ومصادر مفتوحة للمصدر لتحليلات Google. يمكنك قراءة المزيد حول هذا الموضوع على موقع معقول.
تكوين: SET NEXT_PUBLIC_PLAUSIBLE_DOMAIN & NEXT_PUBLIC_PLAUSIBLE_SCRIPT_URL متغيرات البيئة على ملف .env.local الخاص بك وعلى لوحة معلومات Vercel. إذا كنت قلقًا بشأن حاصرات الإعلانات ، فيمكنك وكيل البرنامج النصي المعقول من خلال مجالك الخاص. يمكنك قراءة المزيد عنها هنا.
Google Analytics هي خدمة تحليلات الويب التي تقدمها Google والتي تتتبع وتقارير حركة مرور موقع الويب ، حاليًا كمنصة داخل العلامة التجارية لـ Google Marketing Platform. يمكنك قراءة المزيد عنها على موقع Google Analytics.
تكوين: SET NEXT_PUBLIC_GOOGLE_ANALYTICS_ID متغير البيئة على ملف .env.local الخاص بك وعلى لوحة معلومات Vercel.
دعم مقدمي التحليلات الآخرين قيد التقدم. لا تتردد في فتح مشكلة إذا كان لديك أي اقتراحات أو علاقات عامة إذا كنت ترغب في تنفيذها بنفسك.
Mailerlite هي أداة تسويق بريد إلكتروني بسيطة لجميع أنواع الشركات. يمكنك قراءة المزيد حول هذا الموضوع على موقع Mailerlite.
تكوين: تعيين EMAIL_API_BASE و EMAIL_API_KEY و EMAIL_GROUP_ID البيئة على ملف .env.local الخاص بك وعلى لوحة معلومات Vercel.
دعم مقدمي الخدمات الإخبارية الآخرين قيد التقدم. لا تتردد في فتح مشكلة إذا كان لديك أي اقتراحات أو علاقات عامة إذا كنت ترغب في تنفيذها بنفسك.
يمكنك الاختيار بين 3 متغيرات بطل مختلفة لاستخدامها في app/(site)/page.tsx عن طريق تغيير مكون البطل المستورد.
HeroSimple - قسم البطل البسيط المتمركز مع الصورة والعنوان والترجمة.HeroVideo - 2 Column Hero مع VideoSk تم تضمينه على جانب واحد وعنوان وبين العنوان من جهة أخرى.HeroImage - قسم بطول العمود 2 مع صورة على جانب وعنوان ، وبين الترجمة من جهة أخرى.HeroMinimal - اسم قسم البطل الصغير والمسمى الوظيفي أوصي بتحسين الصور بسرعة مجانًا مع ImageOptim. تثبيت على جهاز Mac الخاص بك ، ثم افتح المجلد public في Finder. حدد كل الصور ، انقر بزر الماوس الأيمن ، واختر "Open with> ImageOptim". سيؤدي هذا إلى تحسين جميع الصور في المجلد.
ملاحظة: لا تبالغ فيها. يمكنك بسهولة جعل الصور تبدو سيئة مع خوارزميات الضغط المفقودة.
قم بإنشاء علاقات عامة وأضف مدونتك إلى هذه القائمة إذا كنت تستخدم القالب!
robots.txt & sitemap.xml هذا المشروع من المطورين للمطورين. جميع المساهمات موضع ترحيب! لا تتردد في:
develop .develop فرع.أي مساهمات تقدمها ستكون تحت رخصة برنامج MIT. باختصار ، عند إرسال تغييرات الكود ، من المفهوم أن تقلبات التقديمات الخاصة بك تحت نفس ترخيص معهد ماساتشوستس للتكنولوجيا الذي يغطي المشروع. يمكن العثور على مدونة قواعد السلوك هنا.
إذا كنت تحب هذا القالب و/أو تستخدمه ، فيرجى إعطائه نجمة على Github.
