详解在 Angular 项目中添加 clean-blog 模板

在 Angular 项目中添加 clean-blog 模板

clean-blog 博客模板下载

clean-blog

或者在下面链接下载

startbootstrap-clean-blog-4-dev.zip

解压并拷贝

解压下载的文件,将所有文件拷贝到 assets/clean-blog 目录下

拷贝代码

将 clean-blog 的 index.html 内容拷贝到 app.component.html

 
  
   
    
     Clean Blog
     A Blog Theme by Start Bootstrap
    
   
  
 




 
  
   
    
     

      Man must explore, and this is exploration at its greatest
     
     

      Problems look mighty small from 150 miles up
     
    
    
Posted by Start Bootstrap on September 24, 2017
   
   

   
    
     

      I believe every human has a finite number of heartbeats. I don't intend to waste any of mine.
     
    
    
Posted by Start Bootstrap on September 18, 2017
   
   

   
    
     

      Science has not yet mastered prophecy
     
     

      We predict too much for the next year and yet far too little for the next ten.
     
    
    
Posted by Start Bootstrap on August 24, 2017
   
   

   
    
     

      Failure is not an option
     
     

      Many say exploration is part of our destiny, but it's actually our duty to future generations.
     
    
    
Posted by Start Bootstrap on July 8, 2017
   
   

   
   
    Older Posts →
   
  
 

styles.css 添加代码

@import "assets/clean-blog/vendor/font-awesome/css/font-awesome.min.css";
@import "https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic";
@import "https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800";
@import "assets/clean-blog/css/clean-blog.min.css";

.navbar-toggler {
 z-index: 1;
}

@media (max-width: 576px) {
 nav > .container {
  width: 100%;
 }
}

index.html 添加 JS 引用

结果

提示: 文中的配置只是把 clean-blog 给搭建在 Angular4 的项目中，但是并没有大改其中的东西，比如链接等，现在还是一个静态的网页，后期才会添加自己的代码上去

示例代码

angular + clean-blog

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。