tailwind nextjs starter blog Download - tailwind nextjs starter blog Source Code Download

tailwind nextjs starter blog

كود الذكاء الاصطناعي

v2.3.0

تنزيل

Tailwind-nextjs-banner

Tailwind NextJS Blogn Blog

هذا هو قالب المدونات CSS Tailwind CSS. يعتمد الإصدار 2 على دليل التطبيق التالي مع مكون React Server ويستخدم ContentLayer لإدارة محتوى Markdown.

من المحتمل أن يكون قالب التدوين الأكثر غنيًا بالميزات. قابلة للتكوين بسهولة وقابلة للتخصيص. مثالي كبديل لمدونات Jekyll و Hugo الفردية الحالية.

تحقق من الوثائق أدناه للبدء.

تواجه القضايا؟ تحقق من صفحة الأسئلة الشائعة وقم بالبحث في القضايا السابقة. لا تتردد في فتح مشكلة جديدة إذا لم يتم نشر أي منها سابقًا.

طلب ميزة؟ تحقق من المناقشات السابقة لمعرفة ما إذا كان قد تم طرحها سابقًا. خلاف ذلك ، لا تتردد في بدء موضوع مناقشة جديد. جميع الأفكار موضع ترحيب!

الاختلافات

ملاحظة : هذه هي الشوكات التي ساهمت بها المجتمع باستخدام أطر مختلفة أو مع تغييرات كبيرة على قاعدة الكود - غير مدعومة رسميًا.

Astro البديل - Tailwind Astro قالب.

Remix-Run البديل-قالب مدونة Tailwind Remix Run.

دعم التدويل - قالب مع I18N ورمز المصدر.

أمثلة V2

المدونة التجريبية - هذا الريبو
مدونتي الشخصية - تم تعديلها إلى منشورات المدونة التلقائية مع التواريخ
مدونة Karhdo - مدونة Karhdo - مغامرة ترميز Karhdo (رمز المصدر)
مدونة Ben.Codes - مدونة Benoit الشخصية حول تطوير البرمجيات (رمز المصدر)
مدونة TSIX - يتم استخدام مهندس أمامي لتسجيل بعض نقاط المعرفة في العمل والدراسة中文
مدونة Soto - موقع شخصي أكثر تخصيصًا تم ترقيته من V1 (رمز المصدر)
مدونة Prabhu - موقع Prabhu الشخصي مع المدونة (رمز المصدر)
مدونة Rabby Hasan - مدونة Rabby Hasan الشخصية حول تطوير المكدس الكامل مع Cloud (رمز المصدر)
TENSCIRE.DEV - مدونة TENSCINE الشخصية ؛ شنيغان الأمن السيبراني ، ويب ويب ، إلخ (رمز المصدر)
Dalelarroder.com - موقع Dale Larroder الشخصي الذي تم ترقيته من V1 (رمز المصدر)
Thetalhatahir.com - مدونة Talha Tahir الشخصية. تمت إضافة صورة مصغرة مقالة ، بطاقة LinkedIn ، محتوى البطل الجميل ، الرموز التكنولوجية.
Homing.so - مدونة Homing الشخصية حول الأشياء التي يتعلمها (رمز المصدر)
مدونة ZS1M - مدونة ZS1M الشخصية لتسجيل ومشاركة المحتوى الفني التعلم اليومي (رمز المصدر)
Dariuszwozniak.net - مدونة تطوير البرمجيات (رمز المصدر)
Dreams.Plus - موقع المدونة لبعض الأفكار والسجلات للحياة والتكنولوجيا.
مدونة Francisaguilar.co - مدونة فرانسيس أغيلار الشخصية تتحدث عن التكنولوجيا واللياقة والتطوير الشخصي.
مدونة MIN71 DEV - مدونة شخصية حول blockchain والتطوير وما إلى ذلك (رمز المصدر)
مدونة Bryce Yu - مدونة Bryce Yu الشخصية حول النظام الموزع وقاعدة البيانات وتطوير الويب. (رمز المصدر)
موقع Senpai Anime Series Senpai ANIME - صفحة المقاييس لسلسلة أنيمي بدء التشغيل عن بُعد Senpai.
Secret Base - مدونة Jac Hsu الشخصية حول التكنولوجيا والفكر والحياة بشكل عام.
Zsebinformatikus - مدونة دليل الطريق السريع للمعلومات.
مدونة Anton Morgunov - يتحدث عن العلم دون تبسيط مفرط أو لماذا الكيمياء النظرية والحسابية رائعة.
مدونة هانز - مدونة هانز الشخصية ، والتكنولوجيا الأمامية ، ومعرض ، مذكرات السفر 中文. (رمز المصدر)
محفظة Cub3y0nd - Notes Cub3y0nd's Cyber Security Notes 「中文」
London Tech Talk - بودكاست يستكشف اتجاهات التكنولوجيا وتجارب المعيشة المغتربين. - 日本語
مدونة Crud Flow - مدونة تقنية حول الذكاء الاصطناعي والهندسة السحابية وعلوم البيانات والتنمية الشخصية
مدونة Trillium - تم تعديلها لتقديم استئناف PDF على /resume صفحة. (رمز المصدر)
مدونة فرانك للتكنولوجيا - مدونة فرانك الشخصية حول تطوير البرمجيات والتكنولوجيا. (رمز المصدر)
مدونة Wujie: 旅行者计划 - حديقة Wujie الشخصية الرقمية (رمز المصدر)
مدونة Xiaodong - مدونة Xiaodong الشخصية حول التكنولوجيا الأمامية والحياة. 「中文」 (رمز المصدر)
Azurtelier.com - موقع Amos الشخصي للتكنولوجيا والموسيقى والرسوم التوضيحية منظمة العفو الدولية ، إلخ. [الإنجليزية/中文] (رمز المصدر)
Joshhaines.com - موقع شخصي لجوش هينز. (رمز المصدر)
- مدونة Jigu - مدونة Jigu الشخصية حول Tech و Crypto و Golang و Life. 「中文」
أندروزام (رمز المصدر)
محفظة Rulli Damara Putra - المدونة الشخصية والمحفظة الشخصية.
blog.taoluyuan.com 套路猿 - مدونة تقنية شخصية تدعم التبديل متعدد المواد. 「中英」
LyrandsDecode.com - موقع كلمات الأغنية يقدم كلمات أصلية وروماني وترجمات باللغة الإنجليزية مع خيارات عرض قابلة للتخصيص.
Bmacharia.com - مدونة بنسون ماشاريا الفنية حول الأمن السيبراني وإدارة المخاطر في تكنولوجيا المعلومات.
Armujahid.me - مدونة عبد الروف الشخصية حول التكنولوجيا والأشياء العشوائية.
leohuynh.dev - ؟؟ مدونة Leo's Dev - القصص والرؤى والأفكار. إضافة /snippets ، /books ، إضافة مكونات ProfileCard و CareerTimeline وغيرها الكثير.
مدونة OpenSats - A 501 (C) (3) مؤسسة خيرية عامة تهدف إلى تمويل مشاريع مجانية ومفتوحة المصدر بشكل مستدام. (رمز المصدر)
جدولة مدونة - نصائح جدولة وسائل التواصل الاجتماعي ، والاستراتيجيات ، وتحديثات المنتج لمبدعي المحتوى. (رابط المشروع)
مدونة Yawdev - تطوير برنامج IT -Agency / Software. مدونة حول التكنولوجيا والأعمال (رابط المشروع)
ملاحظات الهندسة - موقع Jonas Vetterle الشخصي والمدونة. أنا أكتب مقالات حول هندسة البرمجيات التي تهمني ، بما في ذلك الذكاء الاصطناعى والحوسبة الكمومية
screenager.dev - موقع شخصي كمحفظة ومدونة. توثيق رحلتي التعليمية وبعض الأدلة.
مدونة Kezhenxu94 - التدوين حول Dev ، Tips & Tricks ، دروس وأكثر من ذلك.

باستخدام القالب؟ لا تتردد في إنشاء العلاقات العامة وإضافة مدونتك إلى هذه القائمة.

أمثلة V1

v1-blogs-showcase.webm

بفضل مجتمع المستخدمين والمساهمين في القالب! لم نعد نقبل قوائم المدونات الجديدة هنا. إذا كنت قد قمت بالتحديث من الإصدار 1 إلى الإصدار 2 ، فلا تتردد في إزالة مدونتك من هذه القائمة وإضافتها إلى القائمة أعلاه.

كتاب الطبخ في Aloisdg - مع الصور والوصفات!
العرض التوضيحي لـ Gautierarcin مع الترجمة التالية - يتضمن ترجمة منشورات MDX ، رمز المصدر
حديقة David Levai الرقمية - تصميم مخصص واشتراكات بريد إلكتروني أضيفت
THVU.DEV - تمت إضافة mdx-embed ، عدد العرض ، دقائق القراءة والمزيد.
Irvin.dev - موقع إيرفين لين الشخصي. وأضاف youtube تضمين.
Kirillso.com - مدونة وموقع شخصي.
SurfleSharpe.com - مدونة شركة Tincre الرئيسية
blog.b00st.com - مدونة الترويج للموسيقى الرئيسي B00st.com
Astrosaurus.me - مدونة Ephraim Atta -Duncan الشخصية
Dhanrajsp.me - موقع Dhanraj الشخصي والمدونة.
Blog.r00ks.io - مدونة أوستن روكس الشخصية (رمز المصدر).
Honghong.me - موقع Tszhong الشخصي (رمز المصدر)
Marceloformentao.dev - موقع Marcelo Formentão الشخصي (رمز المصدر).
Abiraja.com - مع مكون Snippet Code Runnable!
bpiggin.com - مدونة بن بيجين الشخصية
Maqib.cn - مدونة للمطورين الصينيين الواجهة الأمامية 狂奔小马的博客 (源码)
Ambilena.com - مدونة الموسيقى الإلكترونية والبصمة للموسيقيين القادمين.
0xchai.io - مدونة تشاي الشخصية
Techipedia - تطبيق ويب تقدمي تدوين بسيط مع زر التثبيت المخصص وأعلى شريط التقدم
reubence.com - حديقة روبن رابوز الرقمية
Axolo.co/Blog - تحديثات الإدارة الهندسية والتحديثات Axolo.co (مع معاينة الصور للمقالة في الصفحة الرئيسية)
Musing.vercel.app - مدونة Parth Desai الشخصية (رمز المصدر)
Onyourmental.com - موقع Curtis Warcup لـ On On Podcast (رمز المصدر)
CWARCUP.com - موقع ويب Curtis Warcup الشخصي والمدونة (رمز المصدر).
Ondiek -Elijah.me - موقع Ondiek Elijah ومدونة (رمز المصدر).
jmalvarez.dev - مدونة خوسيه ميغيل ألفاريز الشخصية (رمز المصدر)
موقع Justingosses.com - موقع ومدونة Justin Gosses (رمز المصدر)
https://bitoflearning-9a57.fly.dev/ - مدونة Sangeet Agarwal الشخصية ، تم إعادة تشغيلها لإعادة إعادة التعديل باستخدام مكدس Indie (رمز المصدر)
RaphaelChelly.com - موقع Raphaël Chelly الشخصي والمدونة (رمز المصدر)
Kaveh.Page - مدونة Kaveh Tehrani الشخصية. دليل العلامات المضافة ، بطاقة الملف الشخصي ، وقت القراءة على دليل المنشورات ، إلخ.
DRAKEROSSMAN.com - مدونة Drake Rossman حول NIXOS ، RUST ، Architecture Prochange and Engineering Management ، بالإضافة إلى التأملات العامة.
Meamenu.com - الصفحة المقصودة ومدونة المنتج تبدأ من هذا القالب. كما أنه يستخدم حركة الإطار للرسوم المتحركة وقوالب التخطيط المخصصة و Waline لتعليقات المدونة وأشكال primereact [ITA]
giovanni.orciuolo.it - موقع جيوفاني أورسيولو الشخصي ، المدونة وكل شيء الطالب الذي يذاكر كثيرا.

تحفيز

كنت أرغب في نقل مدونتي الحالية إلى NextJs و Tailwind CSS ولكن لم يكن هناك سهلة خارج قالب الصندوق لاستخدامها ، لذلك قررت إنشاء واحد. يتم تكييف التصميم من مدونة Tailwindlabs.

كنت أرغب في أن يكون الأمر غنيًا بالميزات مثل قوالب التدوين الشهيرة مثل Jekyll و Hugo Academic ، ولكن مع أفضل ممارسات REACT's Ecosystem وأفضل ممارسات تطوير الويب الحالية.

سمات

Next.js مع TypeScript
ContentLayer لإدارة منطق المحتوى
تخصيص سهلة التصميم مع Tailwind 3.0 وسمة اللون الأساسي
MDX - اكتب JSX في مستندات Markdown!
بالقرب من نقاط المنارة المثالية - تقرير المنارة
خفيفة الوزن ، 85 كيلو بايت أول تحميل JS
عرض صديق للهاتف المحمول
موضوع خفيف ومظلم
تحسين الخط مع التالي/الخط
التكامل مع بليني الذي يوفر:
- خيارات تحليلات متعددة بما في ذلك UMAMI ، تحليلات معقولة ، بسيطة ، POSTHOG و Google Analytics
- التعليقات عبر الجيسكوس أو الكلام أو Disqus
- API النشرة الإخبارية ومكون مع دعم لـ Mailchimp و Buttondown و ConvertKit و Klaviyo و Revue و EmailOctopus و Beehiiv
- بحث لوحة القيادة مع KBAR أو Algolia
بناء جملة من جانب الخادم مع أرقام الأسطر وتمييز الخط عبر إعادة التأهيل الزائد
عرض الرياضيات مدعومًا عبر Katex
الاقتباس ودعم المراجع عن طريق إعادة التقيد
تنبيهات github عبر الملاحظة github-blockquote-alert
تحسين الصورة التلقائي عبر التالي/الصورة
دعم العلامات - كل علامة فريدة ستكون صفحتها الخاصة
دعم لعدة مؤلفين
3 تخطيطات مدونة مختلفة
2 تخطيطات قائمة مدونة مختلفة
دعم التوجيه المتداخل لمشاركات المدونة
صفحة المشاريع
رؤوس الأمن المسبقة
كبار المسئولين الاقتصاديين ودية مع تغذية RSS ، والخلفات sitems والمزيد!

عينة المشاركات

دليل تخفيض
تعرف على المزيد حول الصور في Next.js
جولة في تنضيد الرياضيات
شبكة صورة MDX بسيطة
مثال على النثر الطويل
مثال على طريق الطريق المتداخل

دليل البدء السريع

استنساخ الريبو

npx degit ' timlrx/tailwind-nextjs-starter-blog '

تخصيص siteMetadata.js (المعلومات المتعلقة بالموقع)
قم بتعديل سياسة أمان المحتوى في next.config.js إذا كنت ترغب في استخدام مزود تحليلات آخر أو حل تعليق آخر غير الجيسكس.
تخصيص authors/default.md (المؤلف الرئيسي)
تعديل projectsData.ts
تعديل headerNavLinks.ts لتخصيص روابط التنقل
أضف منشورات المدونة
نشر على Vercel

تثبيت

yarn

يرجى ملاحظة أنه إذا كنت تستخدم Windows ، فقد تحتاج إلى تشغيل:

 $env :PWD = $( Get-Location ) .Path

تطوير

أولاً ، قم بتشغيل خادم التطوير:

yarn dev

افتح http: // localhost: 3000 مع متصفحك لرؤية النتيجة.

قم بتحرير التصميم في app أو المحتوى في data . مع إعادة التحميل المباشر ، فإن تحديثات الصفحات أثناء تحريرها.

تمديد / تخصيص

data/siteMetadata.js - يحتوي على معظم المعلومات المتعلقة بالموقع والتي يجب تعديلها لاحتياجات المستخدم.

data/authors/default.md - معلومات المؤلف الافتراضي (مطلوب). يمكن إضافة مؤلفين إضافيين كملفات في data/authors .

data/projectsData.js - البيانات المستخدمة لإنشاء بطاقة مصممة على صفحة المشاريع.

data/headerNavLinks.js - روابط التنقل.

data/logo.svg - استبدل بشعارك الخاص.

data/blog - استبدل منشورات المدونة الخاصة بك.

الأصول public/static - تخزين الأصول مثل الصور والمخاطر.

tailwind.config.js و css/tailwind.css - تكوين Woodwind وورقة الأنماط التي يمكن تعديلها لتغيير المظهر الشامل للموقع.

css/prism.css - يتحكم في الأنماط المرتبطة بكتل الكود. لا تتردد في تخصيصها واستخدام موضوع Prismjs المفضل لديك مثل موضوعات Prism.

contentlayer.config.ts - التكوين لـ ContentLayer ، بما في ذلك تعريف مصادر المحتوى والإضافات MDX المستخدمة. راجع توثيق ContentLayer لمزيد من المعلومات.

components/MDXComponents.js - تمرير رمز JSX الخاص بك أو مكون رد الفعل عن طريق تحديده هنا. يمكنك بعد ذلك استخدامها مباشرة في ملف .mdx أو .md . بشكل افتراضي ، يتم تمرير رابط مخصص ، مكون next/image ، مكون جدول المحتويات ونموذج النشرة الإخبارية. لاحظ أنه يجب تصدير المكونات الافتراضية لتجنب المشكلات الحالية مع Next.js.

layouts - القوالب الرئيسية المستخدمة في الصفحات:

هناك حاليًا 3 تخطيطات ما بعد المتاحة: PostLayout و PostSimple و PostBanner . PostLayout هو تخطيط العمود الافتراضي 2 مع معلومات التعريف والمؤلف. PostSimple هي نسخة مبسطة من PostLayout ، بينما يتميز PostBanner بصورة شعار.
هناك تخطيطان لدراسة المدونة: ListLayout ، التصميم المستخدم في الإصدار 1 من القالب مع شريط بحث و ListLayoutWithTags ، المستخدمة حاليًا في الإصدار 2 ، والذي يغفل شريط البحث ولكنه يتضمن شريطًا جانبيًا يحتوي على معلومات على العلامات.

app - الصفحات للتوجيه إلى. اقرأ وثائق Next.js لمزيد من المعلومات.

next.config.js - التكوين المتعلق بـ Next.js. تحتاج إلى تكييف سياسة أمان المحتوى إذا كنت ترغب في تحميل البرامج النصية والصور وما إلى ذلك من المجالات الأخرى.

بريد

يتم تصميم المحتوى باستخدام ContentLayer ، والذي يتيح لك تحديد مخطط المحتوى الخاص بك واستخدامه لإنشاء كائنات المحتوى المكتوبة. راجع توثيق ContentLayer لمزيد من المعلومات.

Frontmatter

Frontmatter يتبع معايير هوغو.

يرجى الرجوع إلى contentlayer.config.ts للحصول على قائمة محدثة من الحقول المدعومة. الحقول التالية مدعومة:

 title (required)
date (required)
tags (optional)
lastmod (optional)
draft (optional)
summary (optional)
images (optional)
authors (optional list which should correspond to the file names in `data/authors`. Uses `default` if none is specified)
layout (optional list which should correspond to the file names in `data/layouts`)
canonicalUrl (optional, canonical url for the post for SEO)

إليك مثال على الواجهة الواجهة:

 ---
title: 'Introducing Tailwind Nexjs Starter Blog'
date: '2021-01-12'
lastmod: '2021-01-18'
tags: ['next-js', 'tailwind', 'guide']
draft: false
summary: 'Looking for a performant, out of the box template, with all the best in web technology to support your blogging needs? Checkout the Tailwind Nextjs Starter Blog template.'
images: ['/static/images/canada/mountains.jpg', '/static/images/canada/toronto.jpg']
authors: ['default', 'sparrowhawk']
layout: PostLayout
canonicalUrl: https://tailwind-nextjs-starter-blog.vercel.app/blog/introducing-tailwind-nextjs-starter-blog
---

نشر

صفحات جيثب

تم توفير pages.yml سير العمل بالفعل. ما عليك سوى تحديد "إجراءات github" في: Settings > Pages > Build and deployment > Source .

Vercel

أسهل طريقة لنشر القالب هي النشر على Vercel. تحقق من وثائق نشر Next.js لمزيد من التفاصيل.

NetLify

تتيح تكوينات Runtime الخاصة بـ NetLify's Next.js وظائف مفتاح Next.js على موقع الويب الخاص بك دون الحاجة إلى تكوينات إضافية. يقوم NetLify بإنشاء وظائف بدون خادم ستتعامل مع وظائف Next.js مثل صفحات المقدمة من جانب الخادم (SSR) ، والتجديد الثابت المتزايد (ISR) ، next/images ، إلخ ، إلخ.

راجع next.js على netlify للحصول على قيم التكوين المقترحة والمزيد من التفاصيل.

خدمات الاستضافة الثابتة (Github Pages / S3 / Firebase وما إلى ذلك)

يجري:

$ EXPORT=1 UNOPTIMIZED=1 yarn build

بعد ذلك ، نشر المجلد الذي تم out أو تشغيل npx serve out محليًا.

مهم

إذا انتشرت مع مسار قاعدة URL ، مثل https://example.org/myblog ، فأنت بحاجة إلى قاعدة إضافية BASE_PATH القاعدة إلى أمر الإنشاء:

$ EXPORT=1 UNOPTIMIZED=1 BASE_PATH=/myblog yarn build

=> في الكود الخاص بك ، ${process.env.BASE_PATH || ''}/robots.txt سوف يطبع "/myblog/robots.txt" في out Build (أو فقط /robots.txt إذا كان yarn dev ، أي: على المضيف المحلي: 3000)

نصيحة

بدلاً من ذلك ، إلى UNOPTIMIZED=1 ، للمتابعة باستخدام next/image ، يمكنك استخدام مزود تحسين الصور البديل مثل IMGIX أو Clobinary أو Akamai. انظر وثائق تحسين الصور لمزيد من التفاصيل.

فكر في إزالة الميزات التالية التي لا يمكن استخدامها في بناء ثابت:

التعليق على headers() من next.config.js .
قم بإزالة مجلد api والمكونات التي تستدعي الوظيفة من جانب الخادم مثل مكون النشرة الإخبارية. غير مطلوب من الناحية الفنية وسيقوم الموقع بنجاح ، ولكن لا يمكن استخدام واجهات برمجة التطبيقات لأنها وظائف من جانب الخادم.