ng static site generator

ng-static-site-generator

ng-static-site-generator هي أداة لإنشاء تطبيق Angular وإدخالات مدونة في موقع ويب ثابت بتنسيق html وcss. يتم أيضًا دعم إنشاء تطبيق عميل لدعم الوظائف الديناميكية في المتصفح.

هناك مشروع بداية متاح. راجع kevinphhelps/kevinphhelps.me للحصول على مثال آخر.

سمات

• أنشئ تطبيقًا Angular وإدخالات مدونة في موقع ويب ثابت بتنسيق html وcss.
• أنشئ تطبيق عميل لدعم الوظائف الديناميكية في المتصفح.
• شاهد وضع البناء لإعادة بناء الموقع تلقائيًا بعد التغييرات.
• قم بإنشاء صفحات مدونة من الملفات المصدر المكتوبة بتخفيض السعر.
• تقوم AOT ببناء الدعم لتطبيق العميل لتقليل حجم الحزمة.
• خادم لاختبار الموقع عند تطوير وكتابة إدخالات المدونة. (تعد firebase serve بديلاً جيدًا.)

تثبيت

استنساخ المشروع المبدئي للبدء بسرعة!

yarn add [--exact] ng-static-site-generator أو npm install --save-dev [--save-exact] ng-static-site-generator

مطلوب peerDependencies التالية:

{
  "dependencies" : {
    "@angular/animations" : " >4.0.0 " ,
    "@angular/common" : " >4.0.0 " ,
    "@angular/core" : " >4.0.0 " ,
    "@angular/http" : " >4.0.0 " ,
    "@angular/platform-browser" : " >4.0.0 " ,
    "@angular/platform-server" : " >4.0.0 " ,
    "@angular/router" : " >4.0.0 " ,
    "reflect-metadata" : " >0.1.0 " ,
    "rxjs" : " >5.0.0 " ,
    "typescript" : " >2.3.0 " ,
    "zone.js" : " >0.8.0 "
  }
}

أوامر سطر الأوامر

• ng-static-site-generator build : يبني الموقع الثابت.
• ng-static-site-generator build --prod : يبني الموقع الثابت للإنتاج (تجميع AOT وتصغير js وhtml).
• ng-static-site-generator watch : يبني الموقع الثابت ويعيد البناء بعد التغييرات.

إعدادات

يتم تكوين ng-static-static-generator عبر ملف يسمى ng-static-static-generator.json في جذر المشروع.

 {
  "distPath" : "./dist" , // This is where the site will be generated.
  "blogPath" : "./src/blog" , // This is the folder where your blog entries are located.
  "stylesPath" : "./src/styles.scss" , // This is the file that contains your global styles.
  "templatePath" : "./src/index.html" , // This is your template html file. This is passed to HtmlWebpackPlugin.
  "appModule" : "./src/app/app.module#AppModule" , // This is the path and class name of your AppModule.
  "appRoutes" : "./src/app/app-routing.module#routes" , // This is the path and export name or your routes.
  "appComponent" : "./src/app/app.component#AppComponent" , // This is the path and name or your root component.

  // Options for building an optional client app.
  "mainPath" : "./src/main.ts" , // This is the file that contains the browser bootstrap code.
  "polyfillsPath" : "./src/polyfills.ts" // Include this is you need a polyfills bundle.
} 

باستخدام NgStaticSiteGeneratorModule

يعرض ng-static-static-generator الوظائف عبر NgStaticSiteGeneratorModule .

 // app.module.ts
import { ModuleOptions , NgStaticSiteGeneratorModule } from 'ng-static-site-generator' ;

const ngStaticSiteGeneratorModuleOptions : ModuleOptions = {
  openExternalLinksInNewTab : false // Automatically add target="_blank" to external links. Default false.
} ;


@ NgModule ( {
  imports : [
    ...
    NgStaticSiteGeneratorModule . forRoot ( ngStaticSiteGeneratorModuleOptions )
  ] ,
  ...
} )
export class AppModule { }

// my-component.component.ts
import { BlogService } from 'ng-static-site-generator' ;

@ Component ( {
  selector : 'app-my-component' ,
  templateUrl : './my-component.component.html' ,
  styleUrls : [ './my-component.component.scss' ]
} )
export class MyComponent {
  constructor ( private blogService : BlogService ) { }
} 

ملفات مصدر إدخال المدونة

يستخدم ng-static-site-generator ملفات بنمط jekyll لإدخالات المدونة. يتم وضع الملفات في مجلد blogPath المحدد في ng-static-static-generator.json . (ملاحظة: دمج المجلدات داخل مسار المدونة غير مدعوم حتى الآن.)

• اسم الملف: YYYY-MM-DD-url-slug.html أو YYYY-MM-DD-url-slug.md (على سبيل المثال 2017-06-26-this-is-a-blog-entry.html )
• محتويات الملف: يتم تقديم البيانات الوصفية في أعلى الملف، ويتم تحديدها بواسطة أسطر تحتوي على --- . كل شيء بعد الثانية --- هو محتوى نصي مكتوب بلغة html أو تخفيض السعر.

مثال:

 ---
title : This is the Title of the Blog Entry
description : This is a short description of the blog entry.
customProperty : This is a custom property. (Optional, of course.)
---

##This is the Title of the Blog Entry

This is the content of the blog entry.

< p >You can also write content in html if you want.</ p >