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


Posted in Javascript onJuly 04, 2017

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

clean-blog 博客模板下载

clean-blog

或者在下面链接下载

startbootstrap-clean-blog-4-dev.zip

解压并拷贝

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

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

拷贝代码

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

<!--The whole content below can be removed with the new code.-->

<!-- Navigation -->
<nav class="navbar fixed-top navbar-toggleable-md navbar-light" id="mainNav">
 <div class="container">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
      data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
      aria-label="Toggle navigation">
   Menu <i class="fa fa-bars"></i>
  </button>
  <a class="navbar-brand" href="index.html">Start Bootstrap</a>
  <div class="collapse navbar-collapse" id="navbarResponsive">
   <ul class="navbar-nav ml-auto">
    <li class="nav-item">
     <a class="nav-link" href="index.html">Home</a>
    </li>
    <li class="nav-item">
     <a class="nav-link" href="../assets/clean-blog/about.html">About</a>
    </li>
    <li class="nav-item">
     <a class="nav-link" href="../assets/clean-blog/post.html">Sample Post</a>
    </li>
    <li class="nav-item">
     <a class="nav-link" href="../assets/clean-blog/contact.html">Contact</a>
    </li>
   </ul>
  </div>
 </div>
</nav>

<!-- Page Header -->
<header class="masthead" style="background-image: url('../assets/clean-blog/img/home-bg.jpg')">
 <div class="container">
  <div class="row">
   <div class="col-lg-8 offset-lg-2 col-md-10 offset-md-1">
    <div class="site-heading">
     <h1>Clean Blog</h1>
     <span class="subheading">A Blog Theme by Start Bootstrap</span>
    </div>
   </div>
  </div>
 </div>
</header>

<!-- Main Content -->
<div class="container">
 <div class="row">
  <div class="col-lg-8 offset-lg-2 col-md-10 offset-md-1">
   <div class="post-preview">
    <a href="../assets/clean-blog/post.html">
     <h2 class="post-title">
      Man must explore, and this is exploration at its greatest
     </h2>
     <h3 class="post-subtitle">
      Problems look mighty small from 150 miles up
     </h3>
    </a>
    <p class="post-meta">Posted by <a href="#">Start Bootstrap</a> on September 24, 2017</p>
   </div>
   <hr>
   <div class="post-preview">
    <a href="../assets/clean-blog/post.html">
     <h2 class="post-title">
      I believe every human has a finite number of heartbeats. I don't intend to waste any of mine.
     </h2>
    </a>
    <p class="post-meta">Posted by <a href="#">Start Bootstrap</a> on September 18, 2017</p>
   </div>
   <hr>
   <div class="post-preview">
    <a href="../assets/clean-blog/post.html">
     <h2 class="post-title">
      Science has not yet mastered prophecy
     </h2>
     <h3 class="post-subtitle">
      We predict too much for the next year and yet far too little for the next ten.
     </h3>
    </a>
    <p class="post-meta">Posted by <a href="#">Start Bootstrap</a> on August 24, 2017</p>
   </div>
   <hr>
   <div class="post-preview">
    <a href="../assets/clean-blog/post.html">
     <h2 class="post-title">
      Failure is not an option
     </h2>
     <h3 class="post-subtitle">
      Many say exploration is part of our destiny, but it's actually our duty to future generations.
     </h3>
    </a>
    <p class="post-meta">Posted by <a href="#">Start Bootstrap</a> on July 8, 2017</p>
   </div>
   <hr>
   <!-- Pager -->
   <div class="clearfix">
    <a class="btn btn-secondary float-right" href="#">Older Posts →</a>
   </div>
  </div>
 </div>
</div>

<hr>

<!-- Footer -->
<footer>
 <div class="container">
  <div class="row">
   <div class="col-lg-8 offset-lg-2 col-md-10 offset-md-1">
    <ul class="list-inline text-center">
     <li class="list-inline-item">
      <a href="#">
       <span class="fa-stack fa-lg">
         <i class="fa fa-circle fa-stack-2x"></i>
         <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
       </span>
      </a>
     </li>
     <li class="list-inline-item">
      <a href="#">
       <span class="fa-stack fa-lg">
         <i class="fa fa-circle fa-stack-2x"></i>
         <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
       </span>
      </a>
     </li>
     <li class="list-inline-item">
      <a href="#">
       <span class="fa-stack fa-lg">
         <i class="fa fa-circle fa-stack-2x"></i>
         <i class="fa fa-github fa-stack-1x fa-inverse"></i>
       </span>
      </a>
     </li>
    </ul>
    <p class="copyright text-muted">Copyright © Your Website 2017</p>
   </div>
  </div>
 </div>
</footer>

styles.css 添加代码

/* clean-blog */
@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 -->
<script src="assets/clean-blog/js/clean-blog.min.js"></script>

结果

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

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

示例代码

angular + clean-blog

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
QQ登录简单实现代码
Mar 09 Javascript
JS 自动完成 AutoComplete(Ajax 查询)
Jul 07 Javascript
JavaScript中也使用$美元符号来代替document.getElementById
Jun 19 Javascript
Jquery注册事件实现方法
May 18 Javascript
javascript动态添加删除tabs标签的方法
Jul 06 Javascript
javascript文件加载管理简单实现方法
Jul 25 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
Aug 12 Javascript
基于jQuery实现的扇形定时器附源码下载
Oct 20 Javascript
JavaScript体验异步更好的解决办法
Jan 08 Javascript
微信小程序定义和调用全局变量globalData的实现
Nov 01 Javascript
vue子传父关于.sync与$emit的实现
Nov 05 Javascript
vue 动态创建组件的两种方法
Dec 31 Vue.js
Node.js使用gm拼装sprite图片
Jul 04 #Javascript
JavaScript中document.referrer的用法详解
Jul 04 #Javascript
基于hover的用法实例(推荐)
Jul 04 #Javascript
js学习总结_基于数据类型检测的四种方式(必看)
Jul 04 #Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
Jul 04 #Javascript
javascript 初学教程及五子棋小程序的简单实现
Jul 04 #Javascript
基于Bootstrap分页的实例讲解(必看篇)
Jul 04 #Javascript
You might like
第八节--访问方式
2006/11/16 PHP
2014年10个最佳的PHP图像操作库
2014/07/14 PHP
Smarty模板简单配置与使用方法示例
2016/05/23 PHP
thinkPHP微信分享接口JSSDK用法实例
2017/07/07 PHP
PHP常用函数之获取汉字首字母功能示例
2019/10/21 PHP
js判断一个元素是否为另一个元素的子元素的代码
2012/03/21 Javascript
javascript小数四舍五入多种方法实现
2012/12/23 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
2013/06/25 Javascript
javascript从右边截取指定字符串的三种实现方法
2013/11/29 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
2014/05/29 Javascript
jQuery实现验证年龄简单思路
2016/02/24 Javascript
浅谈js键盘事件全面控制
2016/12/01 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
2017/02/21 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
2017/06/26 jQuery
在vue中,v-for的索引index在html中的使用方法
2018/03/06 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
2020/08/18 Javascript
一文秒懂nodejs中的异步编程
2021/01/28 NodeJs
[02:54]DOTA2英雄基础教程 暗影牧师戴泽
2013/12/05 DOTA
[36:16]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.19
2020/12/24 DOTA
python实现代理服务功能实例
2013/11/15 Python
Python+MongoDB自增键值的简单实现
2016/11/04 Python
Python入门_浅谈for循环、while循环
2017/05/16 Python
Python基于回溯法子集树模板解决m着色问题示例
2017/09/07 Python
python 字符串只保留汉字的方法
2018/11/16 Python
Python程序包的构建和发布过程示例详解
2019/06/09 Python
python匿名函数用法实例分析
2019/08/03 Python
使用pyqt5 tablewidget 单元格设置正则表达式
2019/12/13 Python
Django-silk性能测试工具安装及使用解析
2020/11/28 Python
Origins悦木之源香港官网:雅诗兰黛集团高端植物护肤品牌
2018/03/21 全球购物
英国第一的市场和亚马逊替代品:OnBuy
2019/03/16 全球购物
武汉世纪畅想数字传播有限公司.NET笔试题
2014/07/22 面试题
员工自我鉴定
2013/10/09 职场文书
护士节演讲稿开场白
2014/08/25 职场文书
我与祖国共奋进演讲稿
2014/09/13 职场文书
创业项目大全(适合在家创业的项目)
2019/08/15 职场文书
如何解决php-fpm启动不了问题
2021/11/17 PHP