详解在 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改变HTML元素的样式改变CSS及元素属性
Nov 12 Javascript
深入理解Javascript中的valueOf与toString
Jan 04 Javascript
vue2.0获取自定义属性的值
Mar 28 Javascript
简单快速的实现js计算器功能
Aug 17 Javascript
ES6解构赋值的功能与用途实例分析
Oct 31 Javascript
vue中路由参数传递可能会遇到的坑
Dec 07 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
浅谈js闭包理解
Apr 01 Javascript
小程序实现自定义导航栏适配完美版
Apr 02 Javascript
js原生map实现的方法总结
Jan 19 Javascript
JS 图片压缩原理与实现方法详解
Apr 29 Javascript
vue 函数调用加括号与不加括号的区别
Oct 29 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
PHP无刷新上传文件实现代码
2011/09/19 PHP
php分页函数示例代码分享
2014/02/24 PHP
php实现的太平洋时间和北京时间互转的自定义函数分享
2014/08/19 PHP
php类的扩展和继承用法实例
2015/06/20 PHP
基于thinkPHP3.2实现微信接入及查询token值的方法
2017/04/18 PHP
safari下载文件自动加了html后缀问题
2018/11/09 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
网站被黑的假象--ARP欺骗之页面中加入一段js
2007/05/16 Javascript
Javascript与flash交互通信基础教程
2008/08/07 Javascript
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
2010/08/13 Javascript
手机平板等移动端适配跳转URL的js代码
2014/01/25 Javascript
JS获取几种URL地址的方法小结
2014/02/26 Javascript
使用RequireJS优化JavaScript引用代码的方法
2015/07/01 Javascript
再谈JavaScript线程
2015/07/10 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
2016/04/13 Javascript
js中获取jsp表单中radio类型的值简单实例
2016/08/15 Javascript
单行 JS 实现移动端金钱格式的输入规则
2017/05/22 Javascript
对于Javascript 执行上下文的全面了解
2017/09/05 Javascript
如何编写一个d.ts文件的步骤详解
2018/04/13 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
2018/09/25 Javascript
基于vue的验证码组件的示例代码
2019/01/22 Javascript
layui-table获得当前行的上/下一行数据的例子
2019/09/24 Javascript
vue中使用[provide/inject]实现页面reload的方法
2019/09/30 Javascript
vue中@change兼容问题详解
2019/10/25 Javascript
vue 实现通过vuex 存储值 在不同界面使用
2019/11/11 Javascript
Python2.x版本中基本的中文编码问题解决
2015/10/12 Python
python 解决动态的定义变量名,并给其赋值的方法(大数据处理)
2018/11/10 Python
django解决跨域请求的问题
2018/11/11 Python
python3用PIL把图片转换为RGB图片的实例
2019/07/04 Python
Python列表元素常见操作简单示例
2019/10/25 Python
详解python如何引用包package
2020/06/07 Python
python Tornado框架的使用示例
2020/10/19 Python
Melijoe时尚童装德国官网:Melijoe德国
2016/09/03 全球购物
DOM和JQuery对象有什么区别
2016/11/11 面试题
可贵的沉默教学反思
2014/02/06 职场文书
民警忠诚教育心得体会
2016/01/23 职场文书