تنزيل refo - تنزيل كود المصدر refo

refo

فئات أخرى

1.0.0

تنزيل

ريفو

قالب موقع ويب للويب الحديث.
تجربة المطور القوية تلبي المخرجات خفيفة الوزن.

إنشاء موقع ثابت بسهولة وبمرونة

هل تشعر بالإرهاق من مشهد مولد الموقع الثابت؟ يقدم Refo أسلوبًا بسيطًا وقابلاً للتخصيص ومبنيًا بالكامل على Node.js.

على عكس Jekyll وGatsby وAstro وغيرهم، نسمح لك بالاستفادة من قوة وحدات Node.js مباشرة. هذا يعني أنه يمكنك إنشاء أي نوع من مواقع الويب التي يمكنك تخيلها، كل ذلك مع مرونة مكتبات وخوادم Node.js المفضلة لديك.

الفوائد الرئيسية:

التطوير بدون جهد : قم بتحرير الوحدات النمطية الخاصة بك وشاهد التحديثات الفورية بفضل إعادة التحميل السريع.
مرونة لا مثيل لها : قم باستيراد ملفات SVG ، واستخدم الواردات raw ، وقم style مكوناتك بسهولة.
المحتوى المعتمد على البيانات : يمكنك إنشاء السيرة الذاتية أو المحافظ أو أي موقع ويب يعتمد على البيانات بسهولة.
قابل للتخصيص بشكل كبير : لا توجد هياكل مجلدات صلبة، أو تصغير أسماء الفئات، أو حتى استبدال SolidJS بـ React - الأمر متروك لك تمامًا.

تجاوز حدود مولدات المواقع الثابتة التقليدية. احتضن قوة ومرونة Refo لمشروعك القادم!

️ نجمة لدعم عملنا!
احصل على إشعارات حول الإصدارات الجديدة عبر رسائل البريد الإلكتروني.

سمات

( H ot) تحميل الوحدة النمطية باستخدام dynohot
لغة ترميز جافا سكريبت القابلة للتوسعة باستخدام babel-preset-solid
تخصيص وحدة Node.js
- استيراد ملفات SVG كمكونات
- الواردات raw
- (جافا) تجميع البرامج النصية
- عمليات الاستيراد بدون امتداد باستخدام عقدة تحديد الدقة
مكونات مصممة باستخدام العاطفة
- أسماء الفئات القصيرة (مثل a ، b ، c ، ...، aa ، ab ، ...)
- تسميات أسماء الفئات في وضع development باستخدام أداة تتبع المكدس
ضبط أبعاد الصورة باستخدام حجم الصورة
تصغير HTML وCSS وJS المضمنة باستخدام HTMLMinifier terser
(Java) تصغير البرنامج النصي باستخدام UglifyJS
التنقل من جانب العميل
الجلب المسبق للرابط باستخدام Quicklink
التحميل البطيء باستخدام الأحجام البطيئة

دعم Markdown للسلاسل في ملفات JSON باستخدام تخفيض السعر

حساب المدة باستخدام Moment.js

توليد PDF باستخدام محرك الدمى مع مكتشف الكروم

أبرز

قم بتحرير بيانات سيرتك الذاتية في ملف JSON .
قم بعرض سيرتك الذاتية ونشرها كملف PDF أو document HTML أو كصفحة على موقع ويب.
- تصميم وتخصيص تخطيط السيرة الذاتية باستخدام HTML و CSS .
قم بإنشاء ملف PDF واحد أو أكثر يدعم تنسيقات مختلفة مثل Letter و A4 .
- قم بتحديث PDF بعد حفظ التغييرات لرؤية PDF المحدث.

ابدء

الخطوات الأولية
- تثبيت، و.
- قم بتنزيل أو استنساخ هذا المستودع.
- افتح موجه الأوامر في هذا المجلد.

تثبيت التبعيات:
pnpm install

هل أنت على نوع من النظام القائم على يونكس؟ ماك؟ لينكس؟ إذا كان الأمر كذلك، فقد ترغب في تغيير port في وحدة index ، والتي تم ضبطها على 80 والتي تعمل على نظام التشغيل Windows. الرقم الافتراضي لـ Superstatic هو 3474 لذا يمكنك إزالته إذا كنت تفضل ذلك.

ابدأ الخادم في وضع التطوير:

pnpm dev

تفضل بزيارة http://localhost/ للوصول إلى الموقع.

توليد موقع ثابت

إنشاء موقع ثابت:

pnpm static

افتح ملف index.html داخل المجلد static للوصول إلى موقع الويب.

المفهوم الرئيسي

`import`		الملف الذي تم إنشاؤه
فِهرِس/		`static` /
• الرمز المفضل `.ico` ( `file` الرمز (وحدة Node.js))		• الأيقونة المفضلة `.ico`
• main `.js` `.js` ( `module` Node.js)	→	• الرئيسية `.js`
• فهرس `.html` `.jsx` ( `module` Node.js)		• فهرس `.html`
firebase `.json` `.js` ( `module` Node.js)		فايربيباس `.json`

تقوم file المستوردة (التي لها امتداد ملف معين ( ico , png )) (Node.js)) بنسخ الملفات نفسها إلى المجلد static عند تحميل الوحدات. في وضع إعادة ربط الوحدة، يقومون بإزالتها إذا لم يتم استيرادها بعد الآن.

تتم كتابة export default module (Node.js) (التي لها امتداد ملف معين ( js ، json ، html ) في اسم الملف الأساسي الخاص بها) كمحتويات ملفات الإخراج (في المجلد static ). أسماء الملفات الكاملة لملفات الإخراج هي أسماء الملفات الأساسية module (Node.js).

️ نجمة لدعم عملنا!

صفحة بسيطة مثال التعليمات البرمجية المصدر

فهرس .html .jsx ( module import التحرير):

 import template from '#@SolidJS/template'

import use from '#@style'

const [ { styled } , extract ] = use ( )

const Body = styled . body `
	font-weight: bold;
`

export default < >
	{ template ( `<!DOCTYPE HTML>` ) }
	< html lang = "en" >
		{ template ( `<head>` ) }
			< style > { extract ( ) } </ style >
		{ template ( `</head>` ) }
		< Body >
			example content
		</ Body >
	</ html >
</ >

فهرس .html (الملف الذي تم إنشاؤه):

 <!DOCTYPE HTML > < html lang = en > < head > < style > .a{font-weight:700} </ style > </ head > < body class = a > example content </ body > </ html >

النشر

صفحات جيثب

يمكنك نشر مجلد docs الثابتة كما هو.

قد ترغب في تغيير prefixum في الملفات التالية وفقًا لاسم مستودع project site الخاص بك: index/index/site/ main/

رأس/index.jsx#L6
مؤشر.jsx#L7
index/resume/index/index
- .jsx#L13
- /controls.jsx#L5

يمكنك إزالة prefixum بالكامل في حالة قيامك بنشر user or an organization site .

استضافة Firebase

الخطوات الأولية
- قم بإزالة prefixum من الملفات المذكورة أعلاه ضمن نشر صفحات GitHub.
- تثبيت وإعداد CLI.
- أضف ملف .firebaserc بمعرف مشروع Firebase الخاص بك:
```
 {
 	"projects" : {
 		"default" : " <projectId> "
 	}
 }
```

انشر موقعك على استضافة Firebase:
pnpm deploy

مساهمة

قد يكون من المفيد فصل قالب السيرة الذاتية ونشره كحزمة Refo جديدة.

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

عن

يستخدم هذا المثال معالج Refo JSON. لذلك يمكنك التحكم في كيفية عرض خصائص معينة وما إذا كان سيتم عرضها من ملف Index/index/site/index/resume/data.js كما هو موضح في ملف Refo التمهيدي في قسم استخدام معالج JSON.

الخادم

يستخدم هذا المشروع superstatic لخدمة الملفات الثابتة التي تم إنشاؤها. يمكنك استخدام أي مكتبة مماثلة لخدمة الملفات أو عدم وجود مكتبة على الإطلاق في حالة رغبتك في تصفح الملفات مباشرة. يمكن أن يكون هذا مفيدًا للوثائق غير المتصلة بالإنترنت على سبيل المثال.

يمكنك إزالة superstatic واستخدام أدوات firebase بدلاً من ذلك (والتي تستخدم superstatic) إذا كنت تفضل ذلك. في هذه الحالة، يمكنك تعديل scripts في ملف package.json واستبدال superstatic بأوامر firebase serve .

يستخدم هذا المشروع بشكل متزامن لتشغيل Refo في وضع المراقبة وخدمة الملفات بثبات فائق. يمكنك استخدام أي مكتبة مشابهة مثل npm-run-all لتشغيل Refo وخادم بالتوازي أو عدم وجود مكتبة على الإطلاق إذا لم تكن بحاجة إلى خادم ملفات.

يمكن تسمية الملف firebase.json باسم superstatic.json إذا كنت تفضل ذلك. لا يعتمد هذا القالب على Firebase نفسه. ومع ذلك، فهي توفر أحد حلول الاستضافة الثابتة، إن لم تكن الأسرع دائمًا.

القوالب

يتم استخدام القيم الحرفية لقالب JavaScript لصياغة مستندات HTML.

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

فيما يلي بعض السيناريوهات الشائعة الاستخدام في هذا المثال:

افتراضيًا، يمكنك عرض قيمة اختيارية واستخدام عامل شرطي لمنع عرض قيم خاطئة مثل undefined على سبيل المثال:

 module . exports = `
	${ item ? item : '' }
`

تقوم العلامات المشتركة بهذا نيابةً عنك. لذلك يمكنك استخدام بناء جملة أقصر مع قالب حرفي ذو علامات:

 const { html } = require ( 'common-tags' )

module . exports = html `
	${ item }
`

افتراضيًا، يمكنك عرض جزء قالب اختياري واستخدام عامل شرطي لمنع عرض قيم خاطئة مثل undefined على سبيل المثال:

 module . exports = `
	${ item ? `
		<div>
			` + item + `
		</div>
	` : '' }
`

باستخدام العلامات المشتركة، يمكنك استخدام شرط بسيط مع عامل تشغيل منطقي لتحقيق نفس الشيء:

 const { html } = require ( 'common-tags' )

module . exports = html `
	${ item && `
		<div>
			` + item + `
		</div>
	` }
`

افتراضيًا، يمكنك join النتيجة عند المرور عبر مصفوفة من العناصر لمنع عرض الفواصل بين العناصر التي تم إرجاعها:

 module . exports = `<section>
	${ items . map ( item => `
		<div>
			${ item }
		</div>
	` ) . join ( '' ) }
</section>`

تقوم العلامات المشتركة بهذا نيابةً عنك. لذلك يمكنك استخدام بناء جملة أقصر:

 const { html } = require ( 'common-tags' )

module . exports = html ` < section >
	${ items . map ( item => `
		<div>
			${ item }
		</div>
	` ) }
</ section > `

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

 module . exports = `
	<div>
		` + item + `
	</div>
`

أو يمكنك استخدام عنصر نائب مع بناء جملة ${expression} بدلاً من ذلك:

 module . exports = `
	<div>
		${ item }
	</div>
`

في بعض الحالات، يمكن أن يكون أحد هذين الأسلوبين أسهل في القراءة من الآخر، لذا يمكنك استخدام النمط وفقًا للسياق أو يمكنك اختيار أحدهما على الآخر والبقاء متسقًا. يستخدم هذا المثال كليهما.

تسليط الضوء على بناء الجملة

على سبيل المثال، تقوم بعض برامج تحرير الأكواد مثل Atom وGitHub بتمييز القيم الحرفية للنماذج ذات علامات html على أنها HTML كما ترون هذا أعلاه أيضًا.

نص سامية

قم بتثبيت التحكم في الحزمة وJS Custom.
انتقل إلى Preferencies / Package Settings / JS Custom / Settings .

قم بتحرير JS Custom.sublime-settings — User :

{
	"configurations" : {
		"jsx" : true
		, "custom_templates" : {
			"styled_components" : true
			, "lookaheads" : {
				" \ <" : " scope:text.html.basic "

				, " \ .|height|padding|margin" : " scope:source.js.css "

				, "import|minify|await|export|if|window| \ (|," : " scope:source.js "
			}
			, "tags" : {
				"injectGlobal" : " scope:source.js.css "
				, "css" : " scope:source.js.css "

				, "html" : " scope:text.html.basic "
			}
		}
	}
}

يمكنك الآن استخدام خيار تمييز بناء الجملة JS Custom - Default لملفات JavaScript.

الاستخدام

معالج JSON

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

يمكنك استخدامه كما ترى في المثال (asset/resume/getHandledJson.js) أيضًا:

 const handleJSON = require ( 'refo-handle-json' )

var json = JSON . parse ( JSON . stringify ( require ( './data' ) ) )

json = handleJSON ( json )

يوصى بإنشاء نسخة من JSON المطلوب باستخدام وظائف JSON.parse(JSON.stringify(json)) على سبيل المثال عند استخدام Refo في وضع watch (تعليق ذو صلة)، لأن معالج JSON يقوم بتغيير خصائص الكائن.

يقوم معالج JSON بتحليل قيم كائنات السلسلة كـ Markdown باستخدام markdown-it. مثال: example/asset/resume/data.json#L7

الخصائص التي تنتهي بـ -private هي ~~تمت إزالته~~ . مثال: example/asset/resume/data.json#L4
تتم أيضًا إزالة الكائنات التي لها خاصية تسمى private .

يتم تضمين الخصائص التي تنتهي بـ -full فقط عند تمرير معلمة قيمة حقيقية ثانية إلى وظيفة المعالج. مثال: example/asset/resume/data.json#L8، example/asset/resume/getHandledJson.js#L9
يتم تضمين الكائنات التي لها خاصية مسماة full فقط عند تمرير معلمة قيمة حقيقية ثانية إلى وظيفة المعالج.

فترة

عندما يحتوي كائن على خاصية startDate بدون خاصية endDate ، فيمكن استخدام خاصية hidePresent لإخفاء تسمية موجودة وإظهار السنة الحالية بدلاً من ذلك.
يمكن استخدام الخاصية hideEndDate لإخفاء السنة الحالية المعروضة بدلاً من التسمية الحالية.

يمكن استخدام خاصية hideDuration لإخفاء المدة المحسوبة. بخلاف ذلك، يتم تحديد خاصية duration بالمدة المحسوبة (أمثلة: 7 أشهر، سنة واحدة، 1.5 سنة، سنتان).