pwagenerator
v2.0.4
filesinctemplates وأدلة template-parts القالبfontsimgjsscss PWA Generator هو منشئ مواقع ثابتة يقوم بإنشاء مواقع ويب ثابتة بناءً على تكوين المشروع المحدد في projects.json . يمكنه إنشاء كل ما يلزم لموقع الويب ليعمل كتطبيق ويب تقدمي، على سبيل المثال، يعمل دون اتصال بالإنترنت ويكون قابلاً للتثبيت. ويمكنه أيضًا نشره على Netlify.
قم بإدراج جميع المشاريع التي تم تكوينها للبناء في projects.json
./pwagenerator.php projects
إنشاء ونشر و/أو إنشاء أيقونات لمشروع باستخدام تكوين المشروع في projects.json
./pwagenerator.php [project] [option]
options:
-v verbose
-b build
-i generate icons
-d deploy
على سبيل المثال:
./pwagenerator exampleproject.com -b
لإنشاء مشروع جديد، قم بإضافته إلى projects.json ثم قم بإنشائه.
-v ): يوفر مخرجات أكثر تفصيلاً للخيار الآخر المحدد ( -b أو -i أو -d ).-b ): يبني المشروع. خلال هذه العملية، يقوم PWA Generator بإنشاء كافة الملفات اللازمة لتشغيل المشروع. راجع عملية البناء لمزيد من المعلومات.-i ): إنشاء أيقونات للمشروع. أثناء هذه العملية، يقوم PWA Generator بإعداد مصفوفة تكوين وإنشاء مجموعة من الرموز المفضلة من ملف img/favicon.svg في دليل المشروع باستخدام الأيقونة الحقيقية.-d ): نشر المشروع. أثناء هذه العملية، يقوم PWA Generator بزيادة إصدار المشروع ونشر دليل المشروع إلى Netlify باستخدام مجموعة netlify_id في projects.json وnetlify-cli. files يحتوي دليل files على الملفات التي تم نسخها إلى المشروع عند إنشائه.
لن يتم نسخ الخطوط الموجودة في دليل fonts إلا إذا كانت مدرجة في كائن fonts في projects.json ، على سبيل المثال:
"fonts": {
"heading": "Roboto Slab",
"body": "Roboto"
}
لن يتم نسخ الملفات الموجودة في دليل opt إلا إذا كانت مدرجة في كائن opt_files في projects.json ، على سبيل المثال:
"opt_files": [
"opt/google_auth.js"
]
inc يحتوي دليل inc على الملفات المستخدمة لتنفيذ مهام المشروع.
class-build.php على وظائف لإنشاء ونشر وإنشاء الرموز المفضلة.class-cli.php على وظائف لعمليات سطر الأوامر.class-projects.php على وظيفة الحصول على المشاريع من projects.json .class-text.php على وظيفة تنسيق النص.templates وأدلة template-parts القالب تحتوي templates template-parts على ملفات تُستخدم لإنشاء الصفحات.
عند إنشاء مشروع لأول مرة، يتم إنشاء عدة ملفات وأدلة في دليل المشروع.
index.php : لن يتم استبداله بالإصدارات المستقبلية ويجب أن يحتوي على أي علامات ووظائف خاصة بالمشروع.js/main.ts : لن يتم استبداله بالإصدارات المستقبلية ويجب أن يحتوي على أي وظيفة خاصة بالمشروع.scss/style.scss : لن يتم استبداله بواسطة الإصدارات المستقبلية ويجب أن يحتوي على أي أنماط خاصة بالمشروع._redirects : ملف إعادة التوجيه Netlify. يمكن أن تحتوي على قواعد إعادة التوجيه وإعادة الكتابة..gitignore : بوابة تجاهل الملف. يحتوي على قائمة بالملفات والمجلدات التي لا ينبغي لـ Git تتبعها.manifest.json : ملف بيان تطبيق الويب. يحتوي على بيانات تخبر المتصفح عن تطبيق الويب التقدمي وكيف يجب أن يتصرف عند تثبيته.package.json : ملف بيانات المشروع npm . يحتوي على بيانات المشروع لمدير الحزم npm .package-lock.json : ملف إصدار تبعية npm . يحتوي على إصدارات التبعية للحزم المثبتة بواسطة مدير الحزم npm . يتم إنشاؤه تلقائيًا بواسطة npm عند تثبيت الحزمة.robots.txt : ملف الروبوتات. يحتوي على قائمة من القواعد لمساعدة محركات البحث في تحديد الصفحات التي يجب عليها الزحف إليها وتلك التي لا ينبغي لها الزحف إليها.sitemap.xml : ملف خريطة الموقع. يحتوي على قائمة من الصفحات لمساعدة محركات البحث في اكتشاف المحتوى وبالتالي تحسين تحسين محركات البحث (SEO).sw.js : ملف عامل الخدمة. يحتوي على وظيفة تقوم بتخزين الأصول مؤقتًا وتسمح بالتصفح في وضع عدم الاتصال وتجربة "شبيهة بالتطبيق" قابلة للتنزيل.tsconfig.json : ملف تكوين تجميع Webpack TypeScript.webpack.config.js : ملف تكوين Webpack لإنشاء bundle.[hash].js من ملفات js/*.ts و scss/*.scss .fonts يحتوي دليل fonts على ملفات الخطوط التي تم نسخها من files/fonts أثناء عملية الإنشاء. سيتم استبدال أي تغييرات يتم إجراؤها في هذا الدليل بواسطة الإصدارات المستقبلية.
img يحتوي دليل img على الصور والملفات التي تم إنشاؤها عبر الأمر -i . يجب وضع favicon.svg في هذا الدليل قبل تشغيل هذا الأمر.
ويجب أن يحتوي هذا الدليل أيضًا على:
cache_files في projects.json . إذا تم تضمينها في cache_files وفي كائن nav.image في projects.json ، فسيتم استخدام الصورة في شريط التنقل العلوي. إذا تم تضمينها في cache_files وفي كائن header.image في projects.json ، فسيتم استخدام الصورة في الرأس الرئيسي.share.jpg تُستخدم لمشاركة الوسائط الاجتماعية.posts.json ، والتي يجب تسميتها بعنوان URL للمنشور بامتداد ملف .jpg .screenshots في projects.json .js يحتوي دليل js على ملفات .ts التي تم نسخها من files/js أثناء عملية الإنشاء، بالإضافة إلى ملف bundle.[hash].js الذي تم إنشاؤه من ملفات .ts والملفات الموجودة في دليل scss .
يحتوي هذا الدليل أيضًا على ملف main.ts ، والذي سيتم إنشاؤه كملف فارغ عند البناء الأولي. لن يتم استبداله بالإصدارات المستقبلية ويجب أن يحتوي على أي وظيفة خاصة بالمشروع.
يمكن أيضًا أن يحتوي هذا الدليل اختياريًا على main.js ، إذا كانت هناك حاجة إلى ملف غير مترجم. إذا كان ذلك مطلوبًا، فيجب أيضًا تضمين هذا الملف في كائن cache_files في projects.json .
scss يحتوي دليل scss على ملفات .scss التي تم نسخها من files/scss أثناء عملية الإنشاء.
يحتوي هذا الدليل أيضًا على ملف style.scss ، والذي سيتم إنشاؤه في البنية الأولية كملف يحتوي فقط على تعريف :root {} الذي يحتوي على الخطوط والألوان من كائنات fonts colors في projects.json . لن يتم استبداله بالبنيات المستقبلية ويجب أن يحتوي على أي أنماط خاصة بالمشروع.
projects.json اعتمادًا على project الذي تم تمريره عبر سطر الأوامر.$this->project_data['files']['compile'] لتجميع الملفات في دليل المشروع.$this->project_data['files']['compile']$this->project_data['files']['copy'] لنسخ الملفات إلى دليل المشروع.files/scss files/js إلى $this->project_data['files']['copy'] .files/opt فقط إلى $this->project_data['files']['copy'] إذا كانت مدرجة أيضًا في كائن opt_files في projects.json ، على سبيل المثال: "opt_files": [
"opt/google_auth.js"
]
$this->project_data['files']['copy'] .$this->project_data['files']['cache'] لإضافة ملفات إلى ملف sw.js للتخزين المؤقت بواسطة عامل الخدمة.data.json (المستخدمة لإنشاء صفحات إضافية لإنشاء تجربة بحث تشبه التطبيق) و posts.json (المستخدمة لإنشاء منشورات المدونة)، إلى $this->project_data['files']['cache'] .cache_files في projects.json إلى $this->project_data['files']['cache'] ، على سبيل المثال: "cache_files": [
"img/logo_header.svg",
"img/logo_nav.svg",
"img/shortcut.png"
]
files/opt فقط إلى $this->project_data['files']['cache'] إذا كانت مدرجة أيضًا في كائن opt_files في projects.json ، على سبيل المثال: "opt_files": [
"opt/google_auth.js"
]
$this->project_data['files']['cache']post (على سبيل المثال، مستخرجة من posts.json )، فستتم إضافة صورة أيضًا إلى $this->project_data['files']['cache'] ، باستخدام عنوان URL للصفحة وامتداد الملف .jpg .$this->project_data['files']['cache']$this->project_data['sitemap']['urls'] لإنشاء ملف sitemap.xml لاحقًا.package.jsonindex.phpscss و scss/style.scss مع إعلان :root {} يحتوي على الخطوط والألوان من كائنات fonts colors في projects.json ، على سبيل المثال "fonts": {
"heading": "Roboto Slab",
"body": "Roboto"
},
"colors": {
"main": {
"normal": "92D7DA",
"dark": "489094"
},
"accent": {
"normal": "FA96C0",
"dark": "B34F78"
}
}
js و js/main.tsopt الدليل.gitignore مع node_modulessw.js$this->project_data['files']['copy'] إلى دليل المشروع.bundle.[hash].js من ملفات js/*.ts و scss/*.scss المتوفرة باستخدام Webpack عبر webpack-cli، ثم يستخدم أمر php مع project page و project_data التي تم تمريرها كوسيطات إلى قم بتجميع كل ملف في $this->project_data['files']['compile'] في ملف .html مصغر.manifest.json . يتم نسخ ملف manifest.json إلى دليل المشروع، ثم يتم تعديله وفقًا للقيم الموجودة في projects.json ( categories screenshots shortcuts و android_app_id و apple_app_id ).$this->project_data['files']['compile'] و $this->project_data['files']['copy'] :***FILES*** : الملفات من $this->project_data['files']['cache']***URLS*** : عناوين URL من $this->project_data['redirects'] و $this->project_data['sitemap']['urls']***REDIRECT_URLS*** : عناوين URL من $this->project_data['files']['compile'] و $this->project_data['redirects']***URL*** : عنوان URL للمشروع من $this->project_data['url']***TITLE*** : عنوان المشروع من $this->project_data['title']***DESCRIPTION*** : وصف المشروع من $this->project_data['description']***VERSION*** : إصدار المشروع من $this->project_data['version'] (مستخرج من sw.js )***DATE*** : التاريخ('Ym-d') هذه هي الخطوط المتاحة للاستخدام في كائن fonts في projects.json ، على سبيل المثال:
"fonts": {
"heading": "Roboto Slab",
"body": "Roboto"
}
تم إنشاء المشاريع مفتوحة المصدر التالية باستخدام PWA Generator. تحقق من موقع الويب، وGitHub repo، وتكوين المشروع لـ projects.json أدناه.
{
"url": "nicolefurlan.com",
"title": "Nicole Furlan",
"description": "Software engineer on a pursuit of equality, compassion, and justice for all.",
"keywords": "nicole furlan, nicole pitts",
"categories": [],
"netlify_id": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
"gtm_id": "G-XXXXXXXXXX",
"fbpixel_id": null,
"repixel_id": null,
"google_ads": false,
"amazon_ads": false,
"other_ads": false,
"google_api": {
"google_api_client_id": null,
"google_api_client_key": null,
"google_api_key": null,
"google_api_scope": null,
"google_api_url": null,
"google_api_callback": null
},
"fonts": {
"heading": "Playfair Display",
"body": "Raleway"
},
"fontawesome": true,
"android_app_id": {
"free": null,
"paid": null
},
"apple_app_id": {
"free": null,
"paid": null
},
"screenshots": [
"img/screenshot.png"
],
"shortcuts": null,
"links": [],
"nav": {
"image": "img/logo_nav.svg"
},
"header": {
"title": "Hi! I'm Nicole",
"description": "I'm a Software Engineer working on building a better world for us all",
"image": "img/background.webp",
"image_credit": "Photo by <a href="https://pbase.com/tclout/root" alt="Thomas Cloutier Photography">Thomas Cloutier Photography</a>"
},
"social": {
"mailto": "[email protected]",
"facebook": null,
"twitter": null,
"github": "nikkifurls",
"patreon": null,
"paypal": "donate?hosted_button_id=M7MMF3EWQTLKG",
"portfolio": null,
"yelp": null,
"tripadvisor": null,
"custom": [
{
"url": null,
"label": null,
"text": null,
"link": null
}
]
},
"author": {
"name": "Nicole Furlan",
"twitter": "nicolemfurlan"
},
"redirects": [
{
"from": "/donate",
"to": "https://www.paypal.com/donate?hosted_button_id=M7MMF3EWQTLKG"
}
],
"pages": [],
"cache_files": [
"img/background.webp",
"img/logo_nav.svg"
],
"opt_files": []
}
{
"url": "dogsafefoods.com",
"title": "Dog Safe Foods",
"description": "Sharing food with your dog? Make sure it's safe first",
"keywords": "dog safe foods, dog safe human food, dog safe human foods, safe for dogs to eat, can dogs eat, can my dog eat, can dogs have, can my dog have, good human food for dogs, food dog can eat",
"categories": [
"pets",
"food"
],
"netlify_id": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
"gtm_id": "G-XXXXXXXXXX",
"fbpixel_id": "xxxxxxxxxxxxxxx",
"repixel_id": "xxxxxxxxxxxxxxxxxxxxxxxx",
"google_ads": true,
"amazon_ads": false,
"other_ads": false,
"google_api": {
"google_api_client_id": null,
"google_api_client_key": null,
"google_api_key": null,
"google_api_scope": null,
"google_api_url": null,
"google_api_callback": null
},
"fonts": {
"heading": "Roboto Slab",
"body": "Roboto"
},
"fontawesome": true,
"android_app_id": {
"free": "com.dog_safe_foods.twa",
"paid": "com.dogsafefoods.twa"
},
"apple_app_id": {
"free": null,
"paid": null
},
"screenshots": [
"img/screenshot1.png",
"img/screenshot2.png",
"img/screenshot3.png"
],
"shortcuts": [
{
"name": "View Safe Foods",
"description": "View all foods that are safe for dogs to eat",
"url": "./safe",
"icons": [
{
"src": "img/icon-thumbs-up.png",
"sizes": "512x512"
}
]
},
{
"name": "View Unsafe Foods",
"description": "View all foods that are not safe for dogs to eat",
"url": "./unsafe",
"icons": [
{
"src": "img/icon-thumbs-down.png",
"sizes": "512x512"
}
]
}
],
"links": [],
"nav": {
"image": "img/logo_nav.svg"
},
"header": {
"title": null,
"description": null,
"image": "img/logo_header.svg",
"image_credit": null
},
"social": {
"mailto": "[email protected]",
"facebook": null,
"twitter": "dogsafefoods",
"github": "nikkifurls/dogsafefoods",
"patreon": null,
"paypal": "donate?hosted_button_id=M7MMF3EWQTLKG",
"portfolio": "nicolefurlan.com",
"yelp": null,
"tripadvisor": null,
"custom": [
{
"url": "https://catsafefoods.com",
"label": "Cat Safe Foods",
"text": null,
"link": "<i class='fas fa-cat'></i>"
}
]
},
"author": {
"name": "Nicole Furlan",
"twitter": "nicolemfurlan"
},
"redirects": [
{
"from": "/healthy",
"to": "/safe 301!"
},
{
"from": "/unhealthy",
"to": "/unsafe 301!"
},
{
"from": "/healthy.html",
"to": "/safe 301!"
},
{
"from": "/unhealthy.html",
"to": "/unsafe 301!"
},
{
"from": "/* food=:food",
"to": "/:food 301!"
}
],
"pages": {
"*": {
"url": "",
"title": "",
"description": "Sharing ***TITLE*** with your dog? Make sure it's safe first",
"keywords": "can dogs eat ***TITLE***, can dogs have ***TITLE***, dogs ***TITLE***, dogs and ***TITLE***, ***TITLE*** safe for dogs, ***TITLE*** bad for dogs, ***TITLE*** ok for dogs, is it safe for dogs to eat ***TITLE***, is it safe for dogs to have ***TITLE***"
},
"safe": {
"url": "safe",
"title": "Safe Foods for Dogs",
"description": "Sharing food with your dog? Make sure it's on this list of safe foods for dogs first",
"keywords": "healthy human food for dogs, safe human food for dogs, human food that dogs can eat, good human food for dogs"
},
"unsafe": {
"url": "unsafe",
"title": "Unsafe Foods for Dogs",
"description": "Sharing food with your dog? Make sure it's not on this list of unsafe foods for dogs first",
"keywords": "unhealthy human food for dogs, food not to feed dogs, bad food for dogs, bad human food for dogs"
}
},
"cache_files": [
"img/logo_header.svg",
"img/logo_nav.svg",
"img/icon-thumbs-up.png",
"img/icon-thumbs-down.png",
"ads.txt",
"sellers.json"
],
"opt_files": []
}
المساهمات هي موضع ترحيب! إذا اكتشفت مشكلة، أو كانت لديك فكرة للتحسين، فلا تتردد في إنشاء مشكلة.
