ng static site generator

ng-статический-сайт-генератор

ng-static-site-generator — это инструмент для создания приложения Angular и записей блога в статическом веб-сайте HTML и CSS. Также поддерживается создание клиентского приложения для поддержки динамических функций в браузере.

Имеется стартовый проект. Другой пример см. на kevinphelps/kevinphelps.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 "
  }
}

Команды 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 для записей в блоге. Файлы помещаются в папку 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 >