详解在 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 相关文章推荐
javascript 对象的定义方法
Jan 10 Javascript
十分钟打造AutoComplete自动完成效果代码
Dec 26 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
Jul 10 Javascript
Bootstrap每天必学之附加导航(Affix)插件
Apr 25 Javascript
node.js中的事件处理机制详解
Nov 26 Javascript
JavaScript之RegExp_动力节点Java学院整理
Jun 29 Javascript
详解Node项目部署到云服务器上
Jul 12 Javascript
微信小程序自定义模态对话框实例详解
Aug 16 Javascript
React中上传图片到七牛的示例代码
Oct 10 Javascript
Angular服务Request异步请求的实例讲解
Aug 13 Javascript
bootstrap table实现iview固定列的效果实例代码详解
Sep 30 Javascript
js作用域及作用域链工作引擎
Jul 07 Javascript
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
shopex主机报错误请求解决方案(No such file or directory)
2011/12/27 PHP
解析posix与perl标准的正则表达式区别
2013/06/17 PHP
解析MySql与Java的时间类型
2013/06/22 PHP
PHP将身份证正反面两张照片合成一张图片的代码
2017/04/08 PHP
PHP多个图片压缩成ZIP的方法
2020/08/18 PHP
PHP面向对象程序设计之多态性的应用示例
2018/12/19 PHP
PHP中rename()函数的妙用讲解
2019/02/28 PHP
PHP7新增函数
2021/03/09 PHP
用JavaScript实现仿Windows关机效果
2007/03/10 Javascript
input+select(multiple) 实现下拉框输入值
2009/05/21 Javascript
Jquery作者John Resig自己封装的javascript 常用函数
2009/11/09 Javascript
基于jquery的商品展示放大镜
2010/08/07 Javascript
javascript Array对象基础知识小结
2010/11/16 Javascript
jQuery :first选择器使用介绍
2013/08/09 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
2014/04/29 Javascript
jQuery的animate函数实现图文切换动画效果
2015/05/03 Javascript
原生js的RSA和AES加密解密算法
2016/10/08 Javascript
javascript数组定义的几种方法
2017/10/06 Javascript
基于node下的http小爬虫的示例代码
2018/01/11 Javascript
AngularJs分页插件使用详解
2018/06/30 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
2018/10/29 Javascript
[49:40]2018DOTA2亚洲邀请赛小组赛 A组加赛 TNC vs Newbee
2018/04/03 DOTA
Python3实现并发检验代理池地址的方法
2016/09/18 Python
Python判断变量是否为Json格式的字符串示例
2017/05/03 Python
深入理解Django自定义信号(signals)
2018/10/15 Python
python判断字符串或者集合是否为空的实例
2019/01/23 Python
Python的条件表达式和lambda表达式实例
2019/01/31 Python
解决python执行较大excel文件openpyxl慢问题
2020/05/15 Python
Numpy中的数组搜索中np.where方法详细介绍
2021/01/08 Python
美国Randolph太阳镜官网:美国制造的飞行员太阳镜和射击眼镜
2018/06/15 全球购物
国际商务专业毕业生自我鉴定2014
2014/09/27 职场文书
财务务虚会发言材料
2014/10/20 职场文书
班级管理经验交流材料
2015/11/02 职场文书
2016年小学植树节活动总结
2016/03/16 职场文书
Go语言基础函数基本用法及示例详解
2021/11/17 Golang
golang生成并解析JSON
2022/04/14 Golang