keystone ssg
1.0.0
يبدو Keystone قديمًا هذه الأيام، وأنصحك بإلقاء نظرة على Astro أو Vite بدلاً من ذلك.
Keystone هو منشئ مواقع ثابتة مثالي لبناء مواقع الويب الصغيرة بسرعة. لا يلزم أي إعداد، ويتم تمكين مجموعة من الميزات المفيدة افتراضيًا.
/public وستكون جاهزًا للانطلاققم بإنشاء دليل جديد وقم بتشغيل الأمر التالي لإعداد Keystone وpackage.json وgit. العقدة 14.xx مطلوبة.
$ npm install keystone-ssg
عظيم، لقد تم تثبيتك!
قم بتشغيل خادم تطوير Keystone، ثم انتقل إلى http://localhost:8080 لرؤية موقع الويب النموذجي.
$ npm run dev
تم إنشاء المشروع داخل المجلد /public بعد تشغيل الأمر، وهو جاهز للتحميل.
$ npm run build
هناك ستة أدلة مهمة ضمن مشروع Keystone، ولكل منها غرض خاص بها:
كل ملف HTML .html وmarkdown .md في مجلد الصفحات يتوافق مع صفحة على موقع الويب الخاص بك. يوجد ملفان في المشروع النموذجي هنا، حاول فتح ملف index.html . سيقوم التوجيه التلقائي بتجميع الملفات في المجلد /public عند تشغيل npm run build كما يلي:
/pages/index.html -> /public/index.html
/pages/example.md -> /public/example/index.html
ربما لاحظت أن index.html يحتوي على العلامة التالية: <_template basic.html /> . يؤدي هذا إلى وضع محتويات ملف index.html داخل ملف القالب المثبت على /templates/basic.html . يعمل تنسيق علامة HTML المخصص هذا داخل ملفات .md أيضًا.
يمكن استخدام القوالب مع /pages لتوفير إطار عمل جاهز لصفحاتك. استخدم علامة <_slot /> داخل ملف القالب لتوفير نقطة دخول للمحتوى الخاص بك. افتح /templates/basic.html وابحث عن:
< _var title default="Keystone default title" /> هذه فتحة متغيرة، تسمى title ، في ملف قالب، بقيمة افتراضية اختيارية.
سيسمح لك استخدام ما يلي كعلامة قالب داخل /pages بإدخال قيمة مخصصة في القالب، من صفحة المحتوى:
< _template basic.html title="A custom title" /> يتم استخدام المجلد /components ببساطة للمكونات القابلة لإعادة الاستخدام. يتم استخدام العلامة <_import> لاستيراد المكونات إلى ملفات HTML أخرى، ويوجد مثال لها داخل /templates/basic.html .
< _import header.html /> يمكن أيضًا استخدام العلامة <_import> لاستيراد محتويات أي نوع آخر من الملفات (JS، SCSS، إلخ)، بعد تجميع المصدر أولاً.
ضع ملفات Javascript داخل المجلد /src . سيتم تحويل العلامة التالية إلى علامة استيراد <script> عادية، مرتبطة بملفك /src/main.js :
< _script main.js />يتم دعم عمليات استيراد ES6 بشكل كامل، وسيتم نقل الملف الناتج باستخدام Babel، وتجميعه مع مجموعة التحديثات، وتصغيره.
يتم استخدام المجلد /styles لـ CSS/SCSS الخاص بك. سيتم تحويل العلامة التالية إلى علامة استيراد CSS <link> عادية، مرتبطة بملف /styles/main.scss المترجم الخاص بك:
< _style main.scss /> جميع ميزات node-sass مدعومة بالكامل، بما في ذلك @import .
يتم وضع الأصول الثابتة هنا، مثل الخطوط والصور والأيقونات. سيتم نقل كل شيء هنا إلى المجلد المقابل له في الدليل الجذر، على سبيل المثال:
/assets/favicon.ico -> /public/favicon.ico
/assets/fonts/fontname.ttf -> /public/fonts/fontname.ttf
<_template src='myfolder/myfile.html' /> .package.json ، فلا تستخدم شرطة مائلة أولية إلا إذا كنت ترغب في الوصول إلى ملف خارج المشروع..keystone-page-loading display: block . إذا تم تعيين الفئة display: none في CSS، فيمكن استخدام ذلك لإنشاء مؤشر تحميل.search.json ، في الدليل الجذر. هذا عبارة عن مصفوفة JSON تحتوي على كائن لكل صفحة، مع إدراج محتوى النص والعنوان ومسار الصفحة.public بواسطة Git، قم بإزالة السطر public من .gitignore إذا كنت ترغب في استخدامه لإلزامه بـ Git. package.json بالإصدار الذي تقوم بالتحديث إليه وقم بتشغيل npm install keystone-ssg للترقية السريعة.| علامة | وصف | صفات |
|---|---|---|
<_template> | يستورد الملف الحالي إلى <_slot> داخل ملف القالب | [اسم الملف]، [اسم المتغير]، src |
<_slot> | يُستخدم داخل ملف القالب كنقطة إدخال للملف المستورد | لا أحد |
<_var> | يستخدم داخل ملف القالب ليتم استبداله بمتغير مأخوذ من <_template> | [اسم المتغير]، الافتراضي |
<_import> | استيراد مكون | [اسم الملف]، سرك |
<_script> | ينشئ علامة <script> مرتبطة بالبرنامج النصي المجمع | [اسم الملف]، سرك |
<_style> | ينشئ علامة <link> مرتبطة بملف CSS المجمع | [اسم الملف]، سرك |
| يأمر | وصف | اختلافات الإخراج |
|---|---|---|
npm run dev | يبني موقع الويب للتطوير، ثم يبدأ تشغيل خادم تطوير Keystone. |
|
npm run build | يبني الموقع للإنتاج. |
|
ملف التكوين هو keystone.config.js
| خيار | وصف | تقصير |
|---|---|---|
| روابط ديناميكية | تمكين الروابط المحلية المحملة ديناميكيًا على موقع Keystone الخاص بك، دون الحاجة إلى التحديث | حقيقي |
| ملف البحث | يولد search.json في الدليل الجذر | حقيقي |
| com.indexPath | الدليل الجذر لموقع الويب الخاص بك | '/' |
| ميناء | منفذ خادم التطوير، المضيف المحلي: 8080 | 8080 |
| منفذWs | المنفذ الثاني المستخدم لخادم التطوير | 8081 |
| devServerIp | موقع خادم التطوير، المضيف المحلي : 8080. استبدل عنوان IP المحلي لجهازك لعرض خادم التطوير على الأجهزة المحلية (مثال: "192.168.1.103"). | "المضيف المحلي" |
| شاهد | الدلائل التي يشاهدها خادم Keystone dev، والتي ستفرض إعادة الترجمة وتحديث الصفحة عند تحرير الملفات | ["القوالب"، "الصفحات"، "الأصول"، "المكونات"، "src"، "الأنماط"] |
| يبني | دليل صفحة المحتوى | "الصفحات" |
| خدم | الدليل الذي يحتوي على موقع الويب الذي تم إنشاؤه | 'عام' |
| fullRecompile | فرض إعادة ترجمة كاملة لجميع الملفات بعد كل تغيير للملف في وضع التطوير | خطأ شنيع |
| empty-keystone-project
--| .git/
--| assets/
--| components/
--| pages/
--| src/
--| styles/
--| templates/
--| keystone.config.js
--| package.json
--| package-lock.json
إذا كان لديك خطأ PLUGIN_ERROR بعد تثبيت المثال وتشغيله، فهذه مشكلة في Babel، قم بتشغيل الأمر التالي لإصلاحها:
npm install @babel/core @babel/preset-env --save-dev
