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 >