ng static site generator
1.0.0
ng-static-site-generator เป็นเครื่องมือสำหรับสร้างแอป Angular และรายการบล็อกลงในเว็บไซต์ html และ css แบบคงที่ นอกจากนี้ยังรองรับการสร้างแอปไคลเอ็นต์เพื่อรองรับฟังก์ชันการทำงานแบบไดนามิกในเบราว์เซอร์อีกด้วย
มีโครงการเริ่มต้นพร้อมอยู่ ดู kevinphelps/kevinphelps.me สำหรับตัวอย่างอื่น
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.
} 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 หรือ 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 >
