ng static site generator

ng-靜態站點產生器

ng-static-site-generator是一個用於將 Angular 應用程式和部落格條目建置到靜態 html 和 css 網站中的工具。還支援建立客戶端應用程式以支援瀏覽器中的動態功能。

有一個可用的入門項目。另一個例子請參見 kevinphelps/kevinphelps.me。

特徵

• 將 Angular 應用程式和部落格條目建置到靜態 html 和 css 網站中。
• 建立客戶端應用程式以支援瀏覽器中的動態功能。
• 監視建置模式以在變更後自動重建網站。
• 從用 Markdown 編寫的來源檔案產生部落格頁面。
• 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 "
  }
}

CLI 指令

• 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 風格的檔案作為部落格條目。檔案放置在ng-static-static-generator.json中指定的blogPath資料夾中。 （注意：尚不支援在部落格路徑中嵌套資料夾。）

• 檔案名稱： YYYY-MM-DD-url-slug.html或YYYY-MM-DD-url-slug.md （例如2017-06-26-this-is-a-blog-entry.html ）
• 文件內容：元資料在文件頂部給出，由包含---行分隔。第二個---之後的所有內容都是用 html 或 markdown 寫的正文內容。

例子：

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