baker example page template

نموذج صفحة الخباز

عرض توضيحي لكيفية إنشاء الصفحات ونشرها باستخدام أداة إنشاء الخباز.

تستخدم صحيفة Los Angeles Times الخباز لإنشاء الصفحات الثابتة المنشورة على latimes.com/projects. يعتمد نظام التايمز على نسخة خاصة من المستودع تشبه إلى حد كبير هذه النسخة. ينشر هذا المثال المبسط إصدارات التدريج والإنتاج إلى الحاويات العامة على Amazon S3.

سمات

• تحديث مباشر لخادم الاختبار المحلي

• قوالب HTML مع Nunjucks

• CSS الموسعة مع ساس

• تجميع JavaScript مع Rollup وBabel

• استيراد البيانات مع quaff

• إنشاء صفحة ديناميكية بناءً على المدخلات المنظمة

• النشر التلقائي لكل فرع في بيئة التدريج في كل حدث push عبر GitHub Action

• اضغط على زر النشر في بيئة الإنتاج في كل حدث release عبر GitHub Action

• رسائل Slack التي تنقل حالة كل عملية نشر عبر datadesk/notify-slack-on-build Github Action

متطلبات

• إصدار Node.js 12 أو 14 أو 16، على الرغم من أنه على الأقل 12.20 أو 14.14 أو 16.0.

• مدير حزمة العقدة

• بوابة

التوثيق

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

جدول المحتويات

• إنشاء صفحة جديدة

• استكشاف المستودع

• الوصول إلى الأصول

• الوصول إلى البيانات

• الصفحات الديناميكية

• النشر

• المتغيرات العالمية

• Baker.config.js

إنشاء صفحة جديدة

الخطوة الأولى هي النقر فوق زر "استخدام هذا القالب" الخاص بـ GitHub لعمل نسخة من المستودع بنفسك.

سيُطلب منك توفير سبيكة لمشروعك. بمجرد الانتهاء من ذلك، سيكون المستودع الجديد متاحًا على https://github.com/your-username/your-slug .

بعد ذلك، ستحتاج إلى استنساخه على جهاز الكمبيوتر الخاص بك للعمل مع الكود.

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

 استنساخ بوابة https://github.com/your-username/your-slug

إذا لم يعمل هذا الأمر بالنسبة لك، فقد يكون ذلك بسبب إعداد جهاز الكمبيوتر الخاص بك بشكل مختلف وتحتاج إلى النسخ إلى المستودع باستخدام SSH. حاول تشغيل هذا في المحطة الطرفية الخاصة بك:

 git clone [email protected]:your-username/your-slug.git

بمجرد الانتهاء من تنزيل المستودع، أدخل القرص المضغوط في your-slug وقم بتثبيت تبعيات Node.js.

 تثبيت npm

بمجرد تثبيت التبعيات، تصبح جاهزًا لمعاينة المشروع. قم بتشغيل ما يلي لبدء خادم الاختبار.

 بداية npm

انتقل الآن إلى localhost:3000 في متصفحك. من المفترض أن تشاهد صفحة معيارية جاهزة لتخصيصاتك.

البدء بالحرف

والطريق البديل هو إنشاء صفحة جديدة باستخدام مجسم، وهي أداة دعم سطر الأوامر التي طورها قسم الرسومات في رويترز.

 إضافة حرفية https://github.com/datadesk/baker-example-page-template
mkdir صفحتي الجديدة-pagecd صفحتي الجديدة
حرفي بداية بيكر-مثال-الصفحة

استكشاف المستودع

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

_بيانات

يحتوي مجلد البيانات على البيانات ذات الصلة بالمشروع. نستخدم هذا المجلد لتخزين المعلومات المطلوبة حول كل مشروع، مثل عنوان URL الذي يجب أن يعيش فيه. يمكنك أيضًا تخزين مجموعة متنوعة من أنواع البيانات الأخرى هنا، بما في ذلك .aml و .csv و .json .

meta.aml

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

_layouts

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

base.html

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

_مساحة العمل

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

أصول

يُستخدم هذا لتخزين الوسائط والأصول الأخرى مثل الصور ومقاطع الفيديو والصوت والخطوط وما إلى ذلك. ويمكن سحبها إلى الصفحة عبر علامات القالب static .

مخطوطات

يتم تخزين ملفات JavaScript في هذا المجلد. الملف الرئيسي لجافا سكريبت يسمى app.js ، والذي يمكنك كتابة التعليمات البرمجية الخاصة بك مباشرة. يمكن استيراد الحزم المثبتة عبر npm وتشغيلها مثل أي برنامج نصي Node.js آخر. يمكنك إنشاء ملفات أخرى لكتابة كود JavaScript الخاص بك في هذا المجلد، ولكن يجب عليك التأكد من تشغيل الملف من app.js .

الأنماط

تتم كتابة أوراق الأنماط الخاصة بنا بلغة SASS، وهي لغة أوراق أنماط قوية تمنح المطورين مزيدًا من التحكم في CSS. إذا لم تكن مرتاحًا مع SASS، فيمكنك كتابة CSS عادي في أوراق الأنماط.

يتكون مجلد الأنماط من ورقة أنماط ( app.scss ) حيث يمكنك إضافة جميع أنماطك المخصصة لمشروعك، على الرغم من أنك قد ترغب في بعض الأحيان في إنشاء أوراق أنماط إضافية واستيرادها إلى app.scss . يتضمن هذا المشروع النموذجي فقط الحد الأدنى الضروري لمحاكاة موقع بسيط. من المحتمل أنك تريد أن تبدأ بالكثير في التنفيذ في العالم الحقيقي.

Baker.config.js

ملف baker.config.js هو المكان الذي نضع فيه الخيارات التي يستخدمها Baker لخدمة المشروع وإنشائه. وقد تم توثيقه بالكامل في مكان آخر من هذا الملف. وباستثناء إعداد domain ، سيحتاج المستخدمون المتقدمون فقط إلى تغيير هذا الملف.

Index.html

القالب الافتراضي لصفحتك. هذا هو المكان الذي ستضع فيه صفحتك. يستخدم نظام قوالب Nujucks لإنشاء HTML.

package.json، package-lock.json

تتبع هذه الملفات تبعيات العقدة المستخدمة في مشاريعنا. عند تشغيل npm install سيتم تعقب المكتبات التي تضيفها تلقائيًا هنا نيابةً عنك.

.جيثب

هذا دليل خاص لتخزين الملفات التي يستخدمها GitHub للتفاعل مع مشاريعنا وأكوادنا. يحتوي دليل .github/workflows على إجراء GitHub الذي يتعامل مع عمليات نشر التطوير لدينا. لا تحتاج إلى تعديل أي شيء هنا.

الوصول إلى الأصول

يتم تحسين مخازن الملفات في دليل الأصول وتجزئتها كجزء من عملية النشر. للتأكد من أن مراجعك للصور والملفات الثابتة الأخرى، يجب عليك استخدام العلامة {% static %} . ويضمن ذلك تخزين الملف بشكل كبير عند نشره وأن الرابط الخاص بالصورة يعمل في جميع البيئات. سترغب في استخدامه لجميع الصور ومقاطع الفيديو.

 <الشكل>
  <img src="{% static 'assets/images/baker.jpg' %}" alt="شعار بيكر" width=200>
</الشكل>

الوصول إلى البيانات

يمكن الوصول إلى ملفات البيانات المنظمة المخزنة في مجلد _data الخاص بك عبر templatetags أو JavaScript. في هذا العرض التوضيحي، تم تضمين ملف يسمى example.json لتوضيح ما هو ممكن. يتم دعم تنسيقات الملفات الأخرى مثل CSV وYAML وAML.

عبر قوالب Nunjucks

تتوفر الملفات الموجودة في المجلد _data بأسمائها داخل القوالب الخاصة بك. لذلك، باستخدام _data/example.json ، يمكنك كتابة شيء مثل:

 {% للكائن في المثال %}
  {{ obj.year }}: {{ obj.wheat }}{% endfor %}

عبر جافا سكريبت

من المتطلبات الشائعة لأي شخص يقوم ببناء مشروع في Baker الوصول إلى البيانات الأولية داخل ملف JavaScript. غالبًا ما يتم تمرير هذه البيانات إلى تعليمات برمجية مكتوبة باستخدام d3 أو Svelte لرسم الرسومات أو إنشاء جداول HTML على الصفحة.

إذا كانت البيانات التي تصل إليها متاحة بالفعل على عنوان URL الذي تثق به، فستظل مباشرة، فهذا أمر سهل. ولكن ماذا لو لم تكن كذلك، وهي بيانات قمت بإعدادها بنفسك؟

من الممكن الوصول إلى السجلات الموجودة في مجلد _data الخاص بك. التحذير الوحيد هو أن مهمة تحويل هذا الملف إلى حالة قابلة للاستخدام هي مسؤوليتك. المكتبة الجيدة لهذا هي d3-fetch .

لإنشاء عنوان URL لهذا الملف بطريقة يفهمها بيكر، استخدم هذا التنسيق:

 import { json } from 'd3-fetch';// يجب أن تكون المعلمة الأولى هي المسار إلى الملف// يجب أن تكون المعلمة الثانية *يجب* أن تكون "import.meta.url"const url = new URL('../_data /example.json', import.meta.url);// أطلق عليه بيانات inconst = انتظار json(url);

هناك طريقة أخرى تتمثل في طباعة البيانات في القالب الخاص بك كعلامة script . يأخذ مرشح jsonScript المتغير الذي تم تمريره إليه، ويقوم بتشغيل JSON.stringify عليه، ويخرج JSON إلى HTML داخل علامة <script> مع المعرف الذي تم تعيينه عليه كمعلمة.

 {{ مثال|jsonScript('بيانات المثال') }}

وبمجرد الانتهاء من ذلك، يمكنك الآن استرداد JSON المخزن في الصفحة بواسطة المعرف في JavaScript.

 // احصل على العنصر jsonScript الذي تم إنشاؤه باستخدام نفس المعرف الذي قمت بتمريره inconst dataElement = document.getElementById('example-data');// قم بتحويل محتويات هذا العنصر إلى JSON// افعل ما تريد فعله باستخدام "البيانات" !const data = JSON.parse(dataElement.textContent);

على الرغم من أنه يوصى باستخدام طريقة URL، فقد تظل هذه الطريقة مفضلة عندما تحاول تجنب طلبات الشبكة الإضافية. كما أن لديها فائدة إضافية تتمثل في عدم الحاجة إلى مكتبة خاصة لتحويل بيانات .csv إلى JSON.

الصفحات الديناميكية

يمكنك إنشاء عدد غير محدود من الصفحات الثابتة عن طريق تغذية مصدر بيانات منظم إلى خيار createPages في ملف baker.config.js . على سبيل المثال، سيقوم هذا المقتطف بإنشاء صفحة لكل سجل في ملف example.json .

 التصدير الافتراضي {
 // ... تم استبعاد جميع الخيارات الأخرى المذكورة أعلاه لتوضيح هذه النقطة
 createPages: createPages(createPage, data) {// احصل على البيانات من مجلد _dataconst pageList = data.example;// قم بالتكرار خلال السجلات for (const d of pageList) { // قم بتعيين القالب الأساسي الذي سيتم استخدامه لكل كائن . إنه موجود في مجلد _layouts const template = 'year-detail.html';  // قم بتعيين عنوان URL للصفحة const url = `${d.year}`;  // قم بتعيين المتغيرات التي سيتم تمريرها إلى سياق القالب const context = { obj: d };  // استخدم الوظيفة المتوفرة لعرض الصفحة createPage(template, url, context);}
  },};

يمكن استخدام ذلك لإنشاء عناوين URL مثل /baker-example-page-template/1775/ و /baker-example-page-template/1780/] باستخدام قالب واحد.

النشر

تكوين حسابك

قبل أن تتمكن من نشر صفحة تم إنشاؤها بواسطة هذا المستودع، ستحتاج إلى تكوين حساب Amazon AWS الخاص بك وإضافة مجموعة من بيانات الاعتماد إلى حساب GitHub الخاص بك.

أولاً، ستحتاج إلى إنشاء مجموعتين في خدمة تخزين Amazon S3. واحد لموقع التدريج الخاص بك. والآخر لموقع الإنتاج الخاص بك. في هذا المثال البسيط، يجب أن يسمح كل منها بالوصول العام وأن يتم تهيئته لخدمة موقع ويب ثابت. وفي ترتيب أكثر تعقيدًا، مثل ذلك الذي نديره في صحيفة لوس أنجلوس تايمز، يمكن ربط المجموعات بأسماء النطاقات المسجلة وحماية موقع التدريج من العرض العام عبر نظام المصادقة.

يجب بعد ذلك تخزين أسماء هذه المجموعات باعتبارها "أسرار" على GitHub ويمكن الوصول إليها من خلال الإجراءات التي تنشر الموقع. يجب عليك زيارة لوحة الإعدادات الخاصة بحسابك أو مؤسستك. ابدأ بإضافة هذين السرين.

اسم	قيمة
BAKER_AWS_S3_STAGING_BUCKET	اسم دلو التدريج الخاص بك
BAKER_AWS_S3_STAGING_REGION	منطقة S3 حيث تم إنشاء حاوية التدريج الخاصة بك
BAKER_AWS_S3_PRODUCTION_BUCKET	اسم دلو الإنتاج الخاص بك
BAKER_AWS_S3_PRODUCTION_REGION	منطقة S3 حيث تم إنشاء حاوية الإنتاج الخاصة بك

بعد ذلك، يجب عليك التأكد من أن لديك زوج مفاتيح من AWS لديه القدرة على تحميل الملفات العامة إلى مجموعتي البيانات. يجب أيضًا إضافة القيم إلى أسرارك.

اسم	قيمة
BAKER_AWS_ACCESS_KEY_ID	مفتاح وصول AWS
BAKER_AWS_SECRET_ACCESS_KEY	المفتاح السري لـ AWS

تنظيم عملك

سيقوم إجراء GitHub المتضمن في هذا المستودع تلقائيًا بنشر نسخة مرحلية لكل فرع. على سبيل المثال، سيظهر الكود المدفوع إلى الفرع main الافتراضي على https://your-staging-bucket-url/your-repo/main/ .

إذا كنت تريد إنشاء فرع git جديد يسمى bugfix ودفع التعليمات البرمجية الخاصة بك، فسترى قريبًا إصدارًا مرحليًا جديدًا على https://your-staging-bucket-url/your-repo/bugfix/ .

نشر عملك

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

الخطوة الأولى هي إدخال الارتباط الثابت لعنوان URL الخاص بك في ملف التكوين _data/meta.aml .

 سبيكة: صفحتك-سبيكة

إنها ليست فكرة سيئة أبدًا أن تتأكد من أن البزاقة الخاصة بك لم يتم أخذها بالفعل. يمكنك القيام بذلك عن طريق زيارة https://your-production-bucket-url/your-slug/ والتأكد من أنه يعرض خطأ لم يتم العثور على الصفحة.

إذا كنت تريد نشر صفحتك في جذر مجموعتك، فيمكنك ترك الارتباط الثابت فارغًا.

 سبيكة:

بعد ذلك، عليك تنفيذ التغيير الذي أجريته على ملف التكوين والتأكد من دفعه إلى الفرع الرئيسي على GitHub.

 بوابة إضافة _data/meta.aml
git الالتزام -m "تعيين سبيكة الصفحة"
بوابة دفع الأصل الرئيسي

قم بزيارة قسم الإصدارات في صفحة المستودع الخاص بك على GitHub. يمكنك العثور عليه على الصفحة الرئيسية للريبو.

قم بصياغة إصدار جديد.

هناك ستقوم بإنشاء رقم علامة جديد. الأسلوب الجيد هو البدء برقم تنسيق xxx الذي يتبع معايير الإصدار الدلالي. 1.0.0 بداية جيدة.

أخيرًا، اضغط على الزر الأخضر الكبير في الأسفل وأرسل الإصدار.

انتظر بضع دقائق وستظهر صفحتك على https://your-production-bucket-url/your-slug/ .

تصحيح الأخطاء

يمكن لخادم اختبار الخباز تسجيل الدخول بمزيد من التفاصيل من خلال البدء بالخيار التالي.

 DEBUG = 1 npm بداية

لتقييد السجلات بتشغيل الخباز:

 DEBUG=baker:* npm start

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

 بناء تشغيل npm

المتغيرات العالمية

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

NODE_ENV

سيكون المتغير NODE_ENV دائمًا إحدى القيمتين: development أو production . وهو يتوافق مع نوع البناء الذي يتم تشغيله على الصفحة.

عندما تقوم بتشغيل npm start ، فأنت في وضع development . عندما تقوم بتشغيل npm run build ، فأنت في وضع production .

يعد هذا مفيدًا للغاية لإضافة أشياء إلى الصفحات فقط عندما تكون في وضع development .

 {% if NODE_ENV == 'development' %}<p>لن ترى هذا مطلقًا على الموقع المباشر!</p>{% endif %}

DOMAIN

سيكون المتغير DOMAIN دائمًا هو نفس خيار domain الذي تم تمريره في baker.config.js ، أو سلسلة فارغة إذا لم يتم تمريره.

PATH_PREFIX

سيكون المتغير PATH_PREFIX دائمًا هو نفس خيار pathPrefix الذي تم تمريره في baker.config.js ، أو شرطة مائلة واحدة للأمام ( / ) إذا لم يتم تمريرها.

page.url

عنوان URL المتعلق بالمشروع للصفحة الحالية. سيتضمن pathPrefix إذا تم توفيره في ملف baker.config.js - بمعنى آخر، سيأخذ في الاعتبار أي مسار مشروع يتم تنفيذه ويشير إلى الصفحة الصحيحة في المشروع.

page.absoluteUrl

عنوان URL المطلق للصفحة الحالية. يجمع هذا بين domain و pathPrefix والمسار الحالي في عنوان URL كامل. يُستخدم هذا حاليًا لإخراج عنوان URL الأساسي وجميع عناوين URL لعلامات <meta> الاجتماعية.

 <link rel="canonical" href="{{ page.absoluteUrl }}">

page.inputUrl

هذا هو المسار إلى القالب الأصلي المستخدم لإنشاء هذه الصفحة بالنسبة لدليل المشروع الحالي. إذا كان لديك ملف HTML موجود في page-two/index.html ، فسيكون page.inputUrl هو page-two/index.html .

page.outputUrl

هذا هو المسار إلى ملف HTML الذي تم إخراجه لإنشاء هذه الصفحة المتعلقة بالمجلد _dist . إذا كان لديك ملف HTML موجود في page-two.html ، فسيكون page.outputUrl هو page-two/index.html .

Baker.config.js

يتضمن كل مشروع من مشاريع Baker التي نعمل عليها ملف baker.config.js في الدليل الجذر. هذا الملف مسؤول عن تمرير المعلومات إلى Baker حتى يتمكن من بناء مشروعك بشكل صحيح.

 التصدير الافتراضي {
  // الدليل الذي توجد به الأصول
  الأصول: "الأصول"،

  // إنشاء الصفحات
  إنشاء الصفحات: غير محدد،

  // دليل البيانات
  البيانات: '_بيانات'،

  // مجال مخصص اختياري لاستخدامه في بناء المسارات
  المجال: غير محدد،

  // مسار أو مجموعة من المسارات لكل نقطة دخول لجافا سكريبت
  نقاط الدخول: "البرامج النصية/app.js"،

  // دليل الإدخال العام، عادةً المجلد الحالي
  الإدخال: معالجة.cwd ()،

  // حيث توجد تخطيطات القالب ووحدات الماكرو والتضمينات
  التخطيطات: '_layouts'،

  // كائن يحتوي على مفاتيح وقيم المتغيرات العامة
  // تم تمريره إلى كافة قوالب Nunjucks
  متغيرات نونجوكس: غير محددة،

  // كائن المفتاح (الاسم) + القيمة (الوظيفة) لإضافة مخصص
  // المرشحات إلى Nunjucks
  مرشحات nunjucks: غير محددة،

  // كائن المفتاح (الاسم) + القيمة (الوظيفة) لإضافة مخصص
  // العلامات إلى Nunjucks
  العلامات: غير محدد,

  // مكان إخراج الملفات المترجمة
  الإخراج: '_dist'،

  // بادئة لإضافتها إلى بداية كل مسار تم حله، كيف
  // عمل الرخويات
  بادئة المسار: '/'،

  // دليل اختياري لوضع جميع الأصول فيه، نادرًا ما يستخدم
  staticRoot: '',};

خيارات

أصول

الافتراضي: ”assets”

وهذا يخبر بيكر بالمجلد الذي يجب التعامل معه كدليل الأصول. من المحتمل أنك لن تضطر إلى تغيير هذا.

createPages

الافتراضي: undefined

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

 التصدير الافتراضي {
  // ...

  // createPage - قم بتمرير القالب واسم الإخراج وسياق البيانات
  // البيانات - البيانات المعدة في المجلد `_data`
  createPages(createPage, data) {for (const title of data.titles) { createPage('template.html', `${title}.html`, {context: { title }, });}
  },};

بيانات

الافتراضي: ”_data”

يخبر خيار data بيكر بالمجلد الذي يجب التعامل معه كمصدر بياناته. من المحتمل أنك لن تحتاج إلى تغيير هذا.

اِختِصاص

الافتراضي: undefined

يخبر خيار domain بيكر بما يجب استخدامه عند إنشاء عناوين URL مطلقة. يقوم bakery-template بإعداد هذا مسبقًا على https://www.latimes.com .

نقاط الدخول

الافتراضي: ”scripts/app.js”

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

مدخل

الافتراضي: process.cwd()

يخبر خيار input بيكر بالمجلد الذي يجب التعامل معه باعتباره الدليل الرئيسي للمشروع بأكمله. افتراضيًا، هذا هو المجلد الذي يوجد به ملف baker.config.js . ومن المحتمل أنك لن تحتاج إلى تعيين هذا.

تخطيطات

الافتراضي: ”_layouts”

يخبر خيار layouts بيكر بمكان وجود القوالب والتضمينات ووحدات الماكرو. افتراضيًا، هذا هو المجلد _layouts . من المحتمل أنك لن تحتاج إلى تعيين هذا.

nunjucksFilters

الافتراضي: undefined

يمكنك استخدام nunjucksFilters لتمرير عوامل التصفية المخصصة الخاصة بك. في الكائن، كل مفتاح هو اسم عامل التصفية، وقيمة الوظيفة هي ما يتم استدعاؤه عند استخدام عامل التصفية.

 التصدير الافتراضي {
  // ...

  // قم بتمرير كائن من المرشحات لإضافته إلى Nunjucks
  مرشحات nunjucks: {square(n) { n = +n;  العودة ن * ن؛}
  },}

 {{ القيمة|مربع }}

nunjucksTags

الافتراضي: undefined

يمكنك استخدام nunjucksTags لتمرير العلامات المخصصة الخاصة بك. تختلف هذه عن المرشحات من حيث أنها تسهل إخراج كتل نصية أو HTML.

 التصدير الافتراضي {
  // ...

  // قم بتمرير كائن من المرشحات لإضافته إلى Nunjucks
  nunjucksTags: {doubler(n) { return `<p>${n} المضاعفة هي ${n * 2}</p>`;}
  },};

 {% قيمة مضاعفة %}

الإخراج

الافتراضي: ”_dist”

يخبر خيار output بيكر بمكان وضع الملفات عند تشغيل npm run build . افتراضيًا، هذا هو المجلد _dist . من المحتمل أنك لن تحتاج إلى تعيين هذا.

pathPrefix

تقصير: ”/”

يخبر pathPrefix بيكر ببادئة المسار التي يجب إضافتها إلى أي عناوين URL يقوم بإنشائها. إذا تم تمرير domain أيضًا، فسيتم دمجه مع pathPrefix عند إنشاء عناوين URL مطلقة. عادةً لن تقوم بتعيين هذا يدويًا — فهو يُستخدم أثناء عمليات النشر لإنشاء عناوين URL باستخدام الارتباطات الثابتة للمشروع.

staticRoot

تقصير: ””

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