详解在 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 相关文章推荐
jQuery中创建实例与原型继承揭秘
Dec 21 Javascript
jquery通过a标签删除table中的一行的代码
Dec 02 Javascript
js图片翻书效果代码分享
Aug 20 Javascript
javascript中闭包(Closure)详解
Jan 06 Javascript
CSS3 3D 技术手把手教你玩转
Sep 02 Javascript
浅谈jquery高级方法描述与应用
Oct 04 Javascript
关于Webpack dev server热加载失败的解决方法
Feb 22 Javascript
javascript标准库(js的标准内置对象)总结
May 26 Javascript
Node.js搭建WEB服务器的示例代码
Aug 15 Javascript
实现高性能javascript的注意事项
May 27 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
Nov 01 Javascript
react 项目中引入图片的几种方式
Jun 02 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 addslashes和mysql_real_escape_string
2010/01/24 PHP
纯php打造的tab选项卡效果代码(不用js)
2010/12/29 PHP
php输入数据统一类实例
2015/02/23 PHP
JS 非图片动态loading效果实现代码
2010/04/09 Javascript
IE8下关于querySelectorAll()的问题
2010/05/13 Javascript
jQuery实用基础超详细介绍
2013/04/11 Javascript
Eclipse去除js(JavaScript)验证错误
2014/02/11 Javascript
JavaScript cookie的设置获取删除详解
2014/02/11 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
2014/02/27 Javascript
21个JavaScript事件(Events)属性汇总
2014/12/02 Javascript
JQuery鼠标移到小图显示大图效果的方法
2015/06/10 Javascript
jquery图片滚动放大代码分享(1)
2015/08/25 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
2015/09/19 Javascript
javascript电商网站抢购倒计时效果实现
2015/11/19 Javascript
jQuery操作基本控件方法实例分析
2015/12/31 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
2016/04/27 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
2016/07/07 Javascript
JS动态给对象添加事件的简单方法
2016/07/19 Javascript
浅谈JavaScript中promise的使用
2017/01/11 Javascript
Avalonjs双向数据绑定与监听的实例代码
2017/06/23 Javascript
webpack踩坑之路图片的路径与打包
2017/09/05 Javascript
vue中mint-ui的使用方法
2018/04/04 Javascript
详解redux异步操作实践
2018/08/15 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
2018/11/20 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
2019/04/23 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
2019/06/26 Javascript
关于Vue中axios的封装实例详解
2019/10/20 Javascript
Python使用pydub库对mp3与wav格式进行互转的方法
2019/01/10 Python
python的time模块和datetime模块实例解析
2019/11/29 Python
keras的backend 设置 tensorflow,theano操作
2020/06/30 Python
韩国演唱会订票网站:StubHub韩国
2019/01/17 全球购物
Made in Design英国:设计家具、照明、家庭装饰和花园家具
2019/09/24 全球购物
金鑫耀Java笔试题
2014/09/06 面试题
2019年大学推荐信
2019/06/24 职场文书
JavaScript分页组件使用方法详解
2021/07/26 Javascript
Golang 实现 WebSockets 之创建 WebSockets
2022/04/24 Golang