feat: 完善blog页面

src/app/pages/blog/article/article.component.html

@@ -0,0 +1,29 @@
+<stbui-base-layout>
+    <div class="main">
+        <p>Angular Ivy change detection execution: are you prepared?</p>
+        <p>Let’s see what Angular cooks for us</p>
+        <p>While new Ivy renderer is not feature completely yet, many people wonder how it will work and what changes it prepares
+            for us.
+        </p>
+        <p>In this article I am going to visualize Ivy change detection mechanism, show some things I am really excited about
+            and also build simple app based on instructions, similar to angular Ivy instructions, from scratch.</p>
+
+        <p>First, let’s introduce the app I’m going to investigate here:</p>
+        <p>
+            <img src="https://cdn-images-1.medium.com/max/1600/1*APIvDKSWiiMY3EZlxM5epQ.png" alt="">
+        </p>
+        <p>I created online demo that I use to understand how it works under the hood:
+
+        </p>
+        <p> https://alexzuza.github.io/ivy-cd/ 👈</p>
+        <p>
+            <img src="https://cdn-images-1.medium.com/max/2000/1*3BVrVntaULzadpLVVjpEhg.gif" alt="">
+        </p>
+
+        <p>The demo uses angular 6.0.1 aot compiler. You can click on any lifecycle block to go to the definition.</p>
+
+        <p>In order to run change detection process just type something in one of those inputs that are below Sub-Child.</p>
+
+        https://blog.angularindepth.com/angular-ivy-change-detection-execution-are-you-prepared-ab68d4231f2c
+    </div>
+</stbui-base-layout>

src/app/pages/blog/article/article.component.scss

@@ -0,0 +1,5 @@
+.main {
+  img {
+    max-width: 100%;
+  }
+}

src/app/pages/blog/article/article.component.ts

@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-blog-article',
+  templateUrl: './article.component.html',
+  styleUrls: ['./article.component.scss']
+})
+export class BlogArticleComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}

src/app/pages/blog/blog.component.html

@@ -1,26 +1,61 @@
-<stbui-base-layout>
-  <mat-card>
-    <mat-card-content>
-      <textarea class="textarea" placeholder="说说看?"></textarea>
-    </mat-card-content>
-    <mat-card-actions fxLayout="row" fxLayoutAlign="space-between center">
-      <div fxLayout="row" fxLayoutAlign="start center">
-
-        <button mat-icon-button matTooltip="添加照片">
-          <mat-icon>photo</mat-icon>
-        </button>
-
-        <button mat-icon-button matTooltip="@他">
-          <mat-icon>person</mat-icon>
-        </button>
-
-        <button mat-icon-button matTooltip="显示位置">
-          <mat-icon>location_on</mat-icon>
-        </button>
-
-      </div>
-      <button mat-raised-button color="accent" class="post-button">发送</button>
-
-    </mat-card-actions>
-  </mat-card>
-</stbui-base-layout>
+<div class="header" fxLayout="column" fxLayoutAlign="center start">
+    <h1>Stbui's Blog</h1>
+    <h5 class="header-desc">学习弯道超车的技巧！</h5>
+</div>
+
+<mat-card>
+    <div class="timer">2018年04月17日</div>
+    <mat-card-title>
+        <a class="title" href="/pages/blog/1" target="blank">Angular Ivy change detection execution: are you prepared?</a>
+    </mat-card-title>
+    <mat-card-content>
+        <p>Angular Ivy change detection execution: are you prepared?</p>
+        <p>Let’s see what Angular cooks for us</p>
+        <p>While new Ivy renderer is not feature completely yet, many people wonder how it will work and what changes it prepares
+            for us.
+        </p>
+        <p>In this article I am going to visualize Ivy change detection mechanism, show some things I am really excited about
+            and also build simple app based on instructions, similar to angular Ivy instructions, from scratch.</p>
+        <button mat-button color="primary">阅读全文...</button>
+    </mat-card-content>
+</mat-card>
+
+<mat-card>
+    <mat-card-title>
+        <a class="title" href="/pages/blog/2" target="blank">What you always wanted to know about Angular Dependency Injection tree
+        </a>
+    </mat-card-title>
+    <mat-card-content>
+        <p>If you didn’t dive deep into angular dependency injection mechanism, your mental model should be that in angular
+            application we have some root injector with all merged providers, every component has its own injector and lazy
+            loaded module introduces new injector.</p>
+        <p>But maybe there is some more you should be aware of?
+
+        </p>
+        <p>Also a while ago, so-called Tree-Shakeable Tokens feature was merged into master branch. If you are like me, you
+            probably want to know what has changed.</p>
+        <p>So it’s time to examine all these things and maybe find something new...
+        </p>
+        <button mat-button color="primary">阅读全文...</button>
+    </mat-card-content>
+</mat-card>
+
+
+<mat-card>
+    <mat-card-title>
+        <a class="title" href="/pages/blog/3" target="blank">Everything you need to know about change detection in Angular
+        </a>
+    </mat-card-title>
+    <mat-card-content>
+        If like me and want to have a comprehensive understanding of the change detection mechanism in Angular you’ll have to explore
+        the sources since there is not much information available on the web. Most articles mention that each component has
+        its own change detector which is responsible for checking the component, but they don’t go beyond that and mostly
+        focus on use cases for immutables and change detection strategy. This article provides you with the information required
+        to understand why use cases with immutables work and how change detection strategy affects the check. Also, what
+        you will learn from this article will enable you to come up with various scenarios for performance optimization on
+        your own.
+        <button mat-button color="primary">阅读全文...</button>
+    </mat-card-content>
+</mat-card>
+
+<stbui-pagination total="5" align="center"></stbui-pagination>

src/app/pages/blog/blog.component.scss

@@ -1,11 +1,62 @@
-.textarea {
-  min-height: 150px;
-  max-height: 150px;
-  font-size: 16px;
-  color: #333;
-  padding: 10px;
-  outline: 0;
-  border: 0;
-  box-shadow: 0 0 1px 1px #999 inset;
-  width: 100%;
+:host {
+  display: block;
+}
+
+mat-card {
+  margin: 20px;
+}
+
+.header {
+  height: 200px;
+  background: linear-gradient(0, #3f51b5, #3f51b5);
+  color: #fff;
+  padding: 20px;
+
+  h1, h5 {
+    margin: 0
+  }
+
+  &-desc {
+    padding-top: 6px;
+    font-weight: 300;
+    color: #c5cae9;
+  }
+}
+
+.timer {
+  margin: 0 0 10px;
+  line-height: 14px;
+  font-size: 13px;
+  font-weight: bold;
+  color: #727272;
+  overflow: hidden;
+}
+
+.title {
+  color: #3f51b5;
+  position: relative;
+  display: inline-block;
+  text-decoration: none;
+
+  &::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 2px;
+    bottom: 0;
+    left: 0;
+    background-color: #3f51b5;
+    visibility: hidden;
+    transform: scaleX(0);
+    transition: 0.4s ease-in-out;
+  }
+
+  &:hover {
+    text-decoration: none;
+
+    &::after {
+      visibility: visible;
+      transform: scaleX(1);
+    }
+  }
 }

src/app/pages/pages.module.ts

@@ -1,31 +1,36 @@
 import { NgModule } from '@angular/core';
 import { SharedModule } from '../shared/shared.module';
+import { PaginationModule } from '../component/pagination';
+import { BaseLayoutModule } from '../layouts/index';
 
 import { PagesRoutingModule } from './pages.routing';
 import { PagesComponent } from './pages.component';
 import { AboutComponent } from './about/about.component';
 import { ContactComponent } from './contact/contact.component';
 import { ServicesComponent } from './services/services.component';
 import { BlogComponent } from './blog/blog.component';
+import { BlogArticleComponent } from './blog/article/article.component';
 import { ProfileComponent } from './profile/profile.component';
-
 import { UserComponent } from './user/user.component';
 import { UserService } from './user/user.service';
-
 import { FileManagerComponent } from './file-manager/file-manager.component';
 import { FileManagerFirebase } from './file-manager/file-manager.firebase';
-
 import { ProjectComponent } from './project/project.component';
-import { BaseLayoutModule } from '../layouts/index';
 
 @NgModule({
-  imports: [SharedModule, PagesRoutingModule, BaseLayoutModule],
+  imports: [
+    SharedModule,
+    PaginationModule,
+    PagesRoutingModule,
+    BaseLayoutModule
+  ],
   declarations: [
     PagesComponent,
     AboutComponent,
     ContactComponent,
     ServicesComponent,
     BlogComponent,
+    BlogArticleComponent,
     ProfileComponent,
     UserComponent,
     FileManagerComponent,

src/app/pages/pages.routing.ts

@@ -8,6 +8,7 @@ import { ServicesComponent } from './services/services.component';
 import { UserComponent } from './user/user.component';
 import { ProfileComponent } from './profile/profile.component';
 import { BlogComponent } from './blog/blog.component';
+import { BlogArticleComponent } from './blog/article/article.component';
 import { FileManagerComponent } from './file-manager/file-manager.component';
 import { ProjectComponent } from './project/project.component';
 
@@ -40,6 +41,10 @@ const routes: Routes = [
     path: 'blog',
     component: BlogComponent
   },
+  {
+    path: 'blog/:id',
+    component: BlogArticleComponent
+  },
   {
     path: 'file-manager',
     component: FileManagerComponent