ng static site generator

ng-generator situs-statis

ng-static-site-generator adalah alat untuk membangun aplikasi Angular dan entri blog ke situs web html dan css statis. Membangun aplikasi klien untuk mendukung fungsionalitas dinamis di browser juga didukung.

Ada proyek awal yang tersedia. Lihat kevinphelps/kevinphelps.me untuk contoh lainnya.

Fitur

• Bangun aplikasi Angular dan entri blog ke situs web html dan css statis.
• Bangun aplikasi klien untuk mendukung fungsionalitas dinamis di browser.
• Tonton mode build untuk membangun kembali situs secara otomatis setelah perubahan.
• Hasilkan halaman blog dari file sumber yang ditulis dalam penurunan harga.
• Dukungan build AOT untuk aplikasi klien guna mengurangi ukuran paket.
• Server untuk menguji situs web saat mengembangkan dan menulis entri blog. ( firebase serve adalah alternatif yang baik.)

Instalasi

Kloning proyek awal untuk memulai dengan cepat!

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

peerDependencies berikut diperlukan:

{
  "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 "
  }
}

Perintah CLI

• ng-static-site-generator build : Membangun situs statis.
• ng-static-site-generator build --prod : Membangun situs statis untuk produksi (kompilasi AOT, minify js dan html).
• ng-static-site-generator watch : Membangun situs statis dan membangun kembali setelah perubahan.

Konfigurasi

ng-static-static-generator dikonfigurasi melalui file bernama ng-static-static-generator.json di root proyek.

 {
  "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.
} 

Menggunakan NgStaticSiteGeneratorModule

ng-static-static-generator memperlihatkan fungsionalitas melalui 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 ) { }
} 

File sumber entri blog

ng-static-site-generator menggunakan file bergaya jekyll untuk entri blog. File ditempatkan di folder blogPath yang ditentukan dalam ng-static-static-generator.json . (Catatan: Folder bertumpuk dalam jalur blog belum didukung.)

• nama file: YYYY-MM-DD-url-slug.html atau YYYY-MM-DD-url-slug.md (misalnya 2017-06-26-this-is-a-blog-entry.html )
• isi file: Metadata diberikan di bagian atas file yang dibatasi oleh baris yang berisi --- . Segala sesuatu setelah yang kedua --- adalah konten isi yang ditulis dalam html atau penurunan harga.

Contoh:

 ---
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 >