devii
v0.5.0
بداية مدونة مطور لعام 2020.
Next.js
رد فعل
TypeScript
تخفيض السعر
بناء جملة تسليط الضوء
كبار المسئولين الاقتصاديين
جيل RSS
إذا كنت سعيدًا وأنت تعرف ذلك ، فامنز هذا الريبو
/md/blogMarkdown.tsx مع دعم بناء جملة على غرار Githubاقرأ المزيد عن الدافع + التصميم وراء Devii على https://colinhacks.com/blog/devii.
يحتوي هذا الريبو على رمز https://devii.dev.
Devii.dev بمثابة كلاً من الوثائق والتوضيح العام ل Devii. بعد استنساخ/شوكة ، يمكنك النظر من خلال الكود لمعرفة كيفية عمل Devii. بعد ذلك ، يمكنك مزق كل ما لا يعجبك ، وتخصيص كل شيء آخر ، وبناء الأدوات والمكونات الخاصة بك أعلى الأساس الذي يوفره Devii!
موقع الويب الخاص بك هو مظهر من مظاهرك عبر الإنترنت. Devii لا يوفر الكثير من الصندوق. يوفر بعض الأنماط الافتراضية ذات الطراز المتوسط اللطيف لمشاركات المدونة الخاصة بك وبعض الأدوات لتحميل/عرض تخفيض. ولكن سيتعين عليك تنفيذ صفحتك الرئيسية أكثر أو أقل من نقطة الصفر. وهذه هي النقطة! لا تسوية لبعض الموضوع. بناء شيء يمثلك.
للبدء:
git clone [email protected]:yourusername/devii.git my-blog
cd my-blog
yarn
yarn dev . يجب أن يبدأ هذا خادمًا على http://localhost:3000 . جوهر هذا الريبو هو التالي. لقد اخترنا next.js لأنها أبسط وأكثرها أناقة لإنشاء نسخة ثابتة من موقع ويب قائم على React. الوثائق ممتازة. اقرأها أولاً: توثيق Next.js.
فيما يلي نسخة مختصرة من هيكل المشروع. تمت إزالة بعض ملفات التكوين ( next.config.js ، next-end.d.ts ، .gitignore ) من أجل البساطة.
.
├── README.md
├── public // all static assets (images, css, etc) go here
├── pages // every .tsx component in this dir becomes a page of the final site
| ├── index.tsx // the home page (which has access to the list of all blog posts)
| ├── blog
| ├── [blog].md // a template component that renders the blog posts under `/md/blog`
├── md
| ├── blog
| ├── devii.md // this page!
├── whatever.md // every MD file in this directory becomes a blog post
├── components
| ├── BlogPost.tsx
| ├── Code.tsx
| ├── Footer.tsx
| ├── Header.tsx
| ├── Markdown.tsx
| ├── Meta.tsx
| ├── <various>
├── loader.ts // contains utility functions for loading/parsing Markdown
├── node_modules
├── tsconfig.json
├── package.json
يقوم Next.js بإنشاء صفحة ويب جديدة لكل ملف في دليل pages . إذا كنت ترغب في إضافة صفحة حول مدونتك ، فما عليك سوى إضافة about.tsx داخل pages وابدأ في كتابة الصفحة.
بشكل افتراضي ، يحتوي repo فقط على صفحتين: صفحة رئيسية ( /pages/index.tsx ) وصفحة المدونة ( /pages/[blog].md pages/ Budapblog.
يتبع الملف [blog].ts اتفاقية Next.js لاستخدام قوسين مربع للإشارة إلى مسار ديناميكي.
الصفحة الرئيسية ضئيلة عن قصد. يمكنك وضع ما تريد في index.tsx ؛ كان أحد أهدافنا في تصميم Devii هو وضع أي قيود على المطور. استخدم خيالك! موقع الويب الخاص بك هو المظهر المظهر عبر الإنترنت لك. يمكنك استخدام أي حزم NPM أو مكتبات التصميم التي تحبها.
Devii غير مصقول حول التصميم. نظرًا لأن موقع Devii الخاص بك هو تطبيق React Standard تحت الغطاء ، يمكنك استخدام مكتبتك المفضلة من npm للقيام بالتصميم.
يوفر Devii أنماطًا معينة افتراضيًا ، لا سيما في عارض Markdown ( /components/Markdown.tsx ). يتم تنفيذ هذه الأنماط باستخدام حلول التصميم المدمج في NEXT styled-jsx . لسوء الحظ ، كان من الضروري جعل هذه الأنماط عالمية ، نظرًا لأن styled-jsx لا يلعب بشكل جيد مع مكونات الطرف الثالث (في هذه الحالة react-markdown ).
لا تتردد في إعادة إنشاء الأنماط المدمجة مع مكتبتك المفضلة إذا اخترت استخدام مكتبة تصفيف منفصلة (العاطفة رائعة) ثم يمكنك إعادة تنفيذ الأساليب الافتراضية
فقط أضف ملف Markdown ضمن md/blog/ لإنشاء منشور جديد للمدونة:
foo.md ضمن دليل /md/bloghttp://localhost:3000/blog/foo . يجب أن ترى المنشور الجديد. يمكن أن يتضمن كل ملف Markdown "كتلة Frontmatter" التي تحتوي على بيانات بيانات مختلفة. يوفر Devii أداة loadPost التي تقوم بتحميل ملف Markdown ، ويقوم بتحليل بيانات التعريف الخاصة به ، ويعيد كائن PostData منظم:
type PostData = {
path : string ;
title ?: string ;
subtitle ?: string ;
description ?: string ; // used for SEO
canonicalUrl ?: string ; // used for SEO
datePublished ?: number ; // Unix timestamp
author ?: string ;
authorPhoto ?: string ;
authorHandle ?: string ; // twitter handle
tags ?: string [ ] ;
bannerPhoto ?: string ;
thumbnailPhoto ?: string ;
} ; على سبيل المثال ، إليك مدونة Frontmatter من منشور المدونة العينة ( md/blog/the-ultimate-tech-stack.md ):
---
title: Introducing Devii
subtitle: Bringing the power of React, TypeScript, and static generation to dev blogs everywhere
datePublished: 1589064522569
author: Ben Bitdiddle
tags:
- Devii
- Blogs
authorPhoto: /img/profile.jpg
bannerPhoto: /img/brook.jpg
thumbnailPhoto: /img/brook.jpg
---
عرض /loader.ts لمعرفة كيف يعمل هذا.
فقط أضف معرف Google Analytics الخاص بك (على سبيل المثال "UA-9999999999-1 ') إلى globals.ts و Devii ستضيف تلقائيًا مقتطف Google Analytics المناسب إلى موقعك. انتقل إلى /pages/_app.ts لمعرفة كيف يعمل هذا أو تخصيص هذا السلوك.
يوفر عارض Markdown ( Markdown.tsx ) نمطًا افتراضيًا مستوحى من المتوسط. ما عليك سوى تعديل CSS في Markdown.tsx لتخصيص التصميم حسب رغبتك.
يمكنك بسهولة إسقاط كتل التعليمات البرمجية في منشورات المدونة الخاصة بك باستخدام بناء جملة Triple-Backtick (تمامًا مثل Github). لا مزيد من تضمين codepen iframes!
يعمل خارج الصندوق لجميع لغات البرمجة. حدد لغتك مع "علامة لغة". لذلك هذا:
`` `ts
// جميلة هاه؟
const test = (arg: string) => {
إرجاع arg.length> 5 ؛
} ؛
`` `يتحول إلى
// pretty neat huh?
const test = ( arg : string ) => {
return arg . length > 5 ;
} ; عرض /components/Code.tsx لمعرفة كيف يعمل هذا أو تخصيص هذا السلوك.
لا تحتاج إلى فهم كل هذا لاستخدام Devii. فكر في هذا "دليل متقدم" يمكنك استخدامه إذا كنت ترغب في تخصيص بنية الموقع.
يتم تحميل منشورات Markdown خلال Next.js Static Build Step. تحقق من وثائق جلب البيانات لمعرفة المزيد حول هذا الموضوع.
فيما يلي الإصدار القصير: إذا تم تصدير وظيفة تسمى getStaticProps من أحد مكونات صفحتك ، فسيقوم Jox.js بتنفيذ هذه الوظيفة ، واتخاذ النتيجة ، وتمرير خاصية props (التي يجب أن تكون كائنًا آخر) في صفحتك كدعائم.
يمكنك تحميل ملف Markdown وحوض تحليله بشكل ديناميكي باستخدام loadMarkdownFile ، وهي وظيفة الأداة المساعدة التي يتم تنفيذها في loader.ts . إنها دالة غير متزامنة تُرجع كائن PostData typescript يحتوي على جميع مفاتيح البيانات الوصفية المذكورة أعلاه:
على سبيل المثال ، تحقق من تطبيق getStaticProps من الصفحة الرئيسية. تستدعي الدالة loadBlogPosts - وظيفة utilty تقوم بتحميل كل منشورات مدونة في /md/blog/ directory ، وتوصيفها ، وإرجاع PostData[] .
export const getStaticProps = async ( ) => {
const posts = await loadBlogPosts ( ) ;
return { props : { posts } } ;
} ; هناك عدد قليل من وظائف الأداة المساعدة في loader.ts . جميع الوظائف غير متزامنة ! تقبل جميع الوظائف مسارًا نسبيًا من المتوقع أن يكون _ _ -reconform to md/ directory. على سبيل المثال ، سيتم loadPost('blog/test.md' ) تحميل /md/blog/test.md .
loadPost يحمل/تحليلات ملفات التنسيق وإرجاع PostDataloadBlogPosts : تحميل/تحليل جميع الملفات في /md/blog/ . إرجاع PostData[] . تستخدم في index.tsx لتحميل/تقديم قائمة بجميع منشورات المدونة المنشورةloadMarkdownFile : يقوم بتحميل ملف Markdown ولكنه لا يتم تحليله. إرجاع محتوى السلسلة. مفيد إذا كنت ترغب في تنفيذ بعض أجزاء الصفحة في Markdown وأجزاء أخرى في ReactloadMarkdownFiles : يقبل نمط الكرة الأرضية ويحمل جميع الملفات داخل /md/ التي تطابق أسماؤها النمط. تستخدم داخليًا بواسطة loadBlogPosts يمكنك إنشاء نسخة ثابتة تمامًا من موقعك باستخدام yarn build && yarn export . هذه الخطوة مدعومة بالكامل بواسطة Next.js. يتم تصدير الموقع الثابت إلى الدليل out .
بعد إنشاؤه ، استخدم خدمة استضافة الملفات الثابتة المفضلة لديك (Vercel ، NetLify ، Firebase Hosting ، Amazon S3) لنشر موقعك.
يوجد ملف globals.ts في جذر المشروع يحتوي على بعض الإعدادات/بيانات التعريف حول موقعك:
yourName : اسمك ، يستخدم لعلامات حقوق الطبع والنشر في تذييل وتغذية RSS ، على سبيل المثال alyssa P. HackersiteName : عنوان مدونتك ، مثل Alyssa's Cool Blog ؛siteDescription : وصف قصير ، يستخدم في علامة وصف meta ، على سبيل المثال ، أكتب عن الكود "n stuff" ؛siteCreationDate : يستخدم في تغذية RSS التي تم إنشاؤها. استخدم هذا التنسيق: "3 مارس ، 2020 04:00:00 بتوقيت جرينتش" ؛twitterHandle : مقبض Twitter لك أو مدونتك/شركتك ، المستخدمة في علامات Twitter Meta. قم بتضمين الرمز ، على سبيل المثال 'alyssaphacker' ؛email : البريد الإلكتروني الخاص بك ، يستخدم كحقل "مشرف المواقع" و "ManagingEditor" من خلاصة RSS التي تم إنشاؤها ، على سبيل المثال [email protected] ؛url : عنوان URL الأساسي لموقع الويب الخاص بك ، يستخدم "لحساب" الروابط الكنسي الافتراضية من المسارات النسبية ، على سبيل المثال https://alyssaphacker.com '؛accentColor : لون خلفية الرأس والتذييل ، على سبيل المثال #4fc2b4 ؛ يتم توليد خلاصة RSS تلقائيًا من موجز منشور المدونة الخاص بك. يتم إنشاء هذه التغذية باستخدام وحدة rss (لتحويل JSON إلى تنسيق RSS) showdown لتحويل ملفات Markdown إلى HTML المتوافقة مع RSS.
لكي يعمل جيل RSS ، يجب أن تحتوي جميع منشوراتك على طابع زمني datePublished في بيانات التعريف الأمامية الخاصة بهم. لفحص أو تخصيص جيل RSS ، تحقق من ملف rssUtil.ts في دليل الجذر.
كل صفحة نشر مدونة تلقائيًا تلقائيًا علامات التعريف بناءً على البيانات الوصفية. يتضمن ذلك علامة title ، وعلامات meta ، og: Tags ، وبيانات تعريف Twitter ، وعلامة link التي تحتوي على عنوان URL الكنسي.
يتم حساب القيمة الافتراضية لعنوان URL الكنسي عن طريق تسلسل قيمة تكوين url الخاص بك (انظر التكوينات العالمية أعلاه) والمسار النسبي لمشاركتك. تحقق من أن عنوان URL الكنسي يعادل تمامًا عنوان URL في المتصفح عند زيارة موقعك المباشر ، وإلا فقد يعاني كبار المسئولين الاقتصاديين في موقعك.
لا يوجد شيء "تحت الغطاء" هنا. يمكنك عرض وتعديل جميع الملفات التي توفر الوظائف المذكورة أعلاه. يوفر Devii فقط سقالة للمشروع ، وبعض أدوات تحميل التحميل (في loader.ts ) ، وبعض الإعدادات الافتراضية للتصميم المعقول (وخاصة في Markdown.tsx ).
للبدء في التخصيص ، تحقق من الكود المصدري لـ index.tsx (الصفحة الرئيسية) و BlogPost.tsx (قالب منشور المدونة) و Markdown.tsx (عارض Markdown).
توجه إلى github repo للبدء: https://github.com/colinhacks/devii. إذا كنت تحب هذا المشروع ، فاترك ️star️ لمساعدة المزيد من الناس في العثور على Devii؟
yarn dev يبدأ خادم التطوير. أي ما يعادل next dev .
yarn build يخلق بناء محسّن لموقعك. أي ما يعادل next build .
yarn export يصدر موقعك إلى الملفات الثابتة. تتم كتابة جميع الملفات إلى /out . استخدم خدمة استضافة الملفات الثابتة الخاصة بك (Firebase Hosting ، Amazon S3 ، Vercel) لنشر موقعك. أي ما يعادل next export .
