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

prevjs

فئات أخرى

1.0.0

تنزيل

الشعار

عن

PrevJS هو منشئ مواقع ويب ثابت وسهل للغاية مبني على قوالب EJS. هدفها الرئيسي هو إنشاء مواقع ويب ثابتة وتحسينها ونشرها بجهد أقل بكثير.

سمات

إنشاء - تم إنشاؤه للأشخاص الذين يرغبون في البرمجة بلغة html وjs وcss العادية . مما يعني أيضًا أنه يمكنك تحويل موقع الويب الثابت الموجود لديك إلى موقع prevjs بسهولة
⏱ البناء - تصدير محسّن لتحسين محركات البحث من خلال إنشاء خريطة الموقع، والجلب المسبق للصفحة، وتحويل webp، وتصغيره. حصل على 99 نقطة في أداة سرعة الصفحات من Google.
؟ النشر - قم باستضافة شبكة CDN الخاصة بك بنقرة واحدة. دعم جاهز لـ AWS CloudFront
؟ القوالب الديناميكية - قم بإنشاء صفحات ويب ثابتة ديناميكيًا من بيانات JSON باستخدام قالب واحد. مفيد للمدونة، وثيقة
؟ معاينة القالب الديناميكي بدون تصدير. ما عليك سوى إدخال المسار الديناميكي في متصفحك وسيقوم PrevJS تلقائيًا بتحميل الصفحة بالبيانات ذات الصلة
؟ يمكن أن تكون مواقع PrevJS جزءًا من موقع الويب الحالي الخاص بك . نظرًا لأن موقع prevjs لا يحتوي تقريبًا على أي تبعيات أو وحدات عقدة. يمكن أن يكون جزءًا من موقع الويب الحالي الخاص بك حتى لو كان موقع JSP أو PHP.
؟ معاينة مباشرة للموقع - لا يوجد إعادة تحميل لصفحات الويب بعد التحرير
؟ مقاومة للمستقبل ، التعليمات البرمجية في كل من التطوير والتصدير هي أصلية على الويب لأنها لا تتطلب أي تعديلات أو مكتبات خاصة (باستثناء ejs). مما يعني أنه حتى في حالة عدم صيانة PrevJS، وهو حدث غير محتمل، فإن الكود الخاص بك لن ينهار مثل مولدات المواقع الأخرى التي لم تتم صيانتها.
Ⓜ️ يدعم مواقع تخفيض السعر أصلا. قم بتحويل موقع الويب الذي يحتوي على ملفات .md إلى html مع التصميم والبرنامج النصي. مثال: https://prevjs.com

المتطلبات الأساسية

برمجة

قم بتثبيت Nodejs وnpm من http://nodejs.org/.
(اختياري - بديل لـ NPM) مدير حزم الغزل، قم بتثبيت https://yarnpkg.com/getting-started/install

معرفة

المطلوب: HTML وCSS أساسيان لتصميم صفحات الويب
اختياري: تعد معرفة قوالب https://ejs.co/ ميزة إضافية كبيرة
اختياري: Jquery، Bootstrap من شأنه أن يساعد كثيرًا
لا توجد معرفة مطلوبة بأي أطر تطبيقات متقدمة مثل رد الفعل.

كيفية الاستخدام

الخطوة 1: تثبيت أمر prevjs CLI من سجل NPM

npm install @produle/prevjs -g

(اختياري - بديل لـ NPM) أمر الغزل: yarn --global add @produle/prevjs

الخطوة 2: إنشاء موقع prevjs أساسي جدًا (اختياري)

prevjs --create /path-to-where-my-website-folder-should-be/

الخطوة 3: لمعاينة موقع الويب الخاص بك في الجهاز المحلي

prevjs --run /path-to-my-website-folder/recipe.json

الخطوة 4: لتحسين وتصدير موقع الويب الخاص بك للإنتاج

prevjs --export /path-to-my-website-folder/recipe.json

الخطوة 5: لنشر موقع الويب الخاص بك الذي تم تصديره في واجهة AWS السحابية للإنتاج

prevjs --deploy /path-to-my-website-folder/recipe.json (يتطلب إعداد أمر aws)

لسرد وصفات الموقع المتاحة محليا

prevjs --list-recipes local

لتثبيت وصفة معينة

prevjs --create business1 /path-to-my-site/recipe.json

نموذج لبنية موقع PrevJS

 website/recipe.json => Stores configuration of this website for PrevJS
website/index.ejs => Index page of the website
website/about/index.ejs => Example route of another page in site

website/DRAFTS => Any page that should not be deployed, are placed inside this folder
website/DRAFTS/working.ejs => Example drafts page

website/PARTIALS => All re-used components and sections of website used in multiple pages
website/PARTIALS/header.ejs => Example partial for header in all pages

website/TEMPLATES => Contains templates for dynamically generating pages from json data
website/TEMPLATES/example-template/template.ejs => HTML page with data variables of an example template
website/TEMPLATES/example-template/template.json => Contains array of page data each with unique dynamic route

website/STATIC => All static files like images,js and css are stored here
website/STATIC/css/external => All third party css files
website/STATIC/css/internal => All internal styles written for this site
website/STATIC/js/external => All third party JS files and libraries
website/STATIC/js/internal => All internal js code written for this site
website/STATIC/images => Images used in this website, can be nested like webpages
website/STATIC/favicon.ico => Website Favicon

نموذج لملف description.json

 {
  "recipe_ver": "0.0.1",
  "name": "business-website",
  "description": "Business - Product site",
  "author": "Business Inc",
  "production_url": "https://business.com",
  
   "optimize": {
    "webp": "true",
    "minify_js": "true",
    "minify_css": "true",
    "minify_html": "true"
  },
  "deploy": {
    "domain": "https://business.com",
    "type": "aws",
    "aws_bucket": "",
    "aws_cfdistributions": ""
  }
}

إنشاء صفحات ديناميكية باستخدام القوالب

يتم استخدام مجلد "النماذج" هذا لإنشاء صفحات تحتوي على بيانات ديناميكيًا. يمكن أن تكون البيانات مضمنة داخل template.json أو من عنوان URL بعيد لـ JSON. يكون مفيدًا عندما لا يتغير تصميم صفحة الويب ولكن تختلف بياناتها فقط لكل صفحة.

يجب أن يحتوي كل مجلد قالب داخل TEMPLATS على الملفات التالية بهذه الأسماء المحددة:

template.ejs = يحتوي على بنية قالب html المليئة بمتغيرات البيانات

template.json = يحتوي على مجموعة من بيانات الصفحة المستخدمة لإنشاء الصفحات باستخدام template.ejs

نموذج القالب.json

 {
  "generate": true,
  "pages": [
    {
      "path": "doc/article1",
      "source": "inline",
      "data": {
        "title": "Doc Title 1",
        "post": "Post article 1"
      }
    },
    {
      "path": "doc/article2",
      "source": "jsonurl",
      "dataurl": "https://recipes.prevjs.com/examples/basic/article2.json"
    
    }
  ]
}

نصائح

لإعداد مسارات مطلقة للأصول داخل ملفات ejs، استخدم هذا المتغير <%= siteobj.urlpath => ويأتي مزودًا بشرطة مائلة لاحقة ويكتشف تلقائيًا بين البيئات المحلية وبيئات الإنتاج.