هذا منشئ صفحات ثابتة مع دعم أساسي للتوجيه. الفكرة وراء هذه الأداة هي تبسيط تطوير صفحات الويب الثابتة باستخدام أفضل Webpack والأدوات ذات الصلة.
تشغيل هذا أمر بسيط حقًا. ستحتاج إلى هذا المولد yo
.
npm install -g yo generator-infinitely-static
mkdir my-project
cd my-project
git init
yo infinitely-static
ملاحظة : بعد تهيئة المشروع، قم بتشغيل npm install husky --save-dev
.
عندما ينتهي يومان يكون لديك مشروع عمل.
npm start
npm run build
إضافة المسارات أمر بسيط أيضًا. ستجد في جذر المشروع routes.json
، الذي يحتوي على مسار index
الأولي. يدعم تكوين المسار أيضًا بيانات التداخل والقالب.
{
"index" : { // points to the template file in app/templates/pages/index.hbs
"route" : "/" , // don't forget the trailing slash
"context" : { // data that you can use in the page
"user" : {
"name" : "Super user"
}
}
} ,
"contact" : {
"route" : "contact/me/" // will generate nested routes
}
}
}
بعد ذلك، في القوالب الخاصة بك، يمكنك استخدام المساعد المضمن {{linkTo}}
مثل هذا:
< a href =" {{linkTo 'index'}} " > Home </ a >
وبالنسبة لبيانات المستخدم، يمكنك استخدام المساعد getDataAsString
:
< h1 > {{getDataAsString 'user.name'}} </ h1 >
إذا كانت البيانات بسيطة (مصفوفة، سلسلة، رقم، وما إلى ذلك) فسيتم عرضها كالمعتاد، ولكن إذا قمت بالإشارة إلى كائن فستحصل على JSON مقيد. لكن تذكر أنه يمكن الوصول إلى البيانات مباشرةً باستخدام كائن htmlWebpackPlugin.options
الموجود في القالب:
< h1 > {{htmlWebpackPlugin.options.context.user.name}} </ h1 >
بهذه الطريقة يمكنك التكرار من خلال مصفوفة محددة في السياق باستخدام المساعدين المضمنين.
رخصة معهد ماساتشوستس للتكنولوجيا
© 2016 شركة إنفينوم.