详解在 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 相关文章推荐
ajax java 实现自动完成功能
Dec 19 Javascript
js网页版计算器的简单实现
Jul 02 Javascript
js 剪切板应用clipboardData详细解析
Dec 17 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
Dec 27 Javascript
JavaScript中输出标签的方法
Aug 27 Javascript
基于JS2Image实现圣诞树代码
Dec 24 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
Dec 29 Javascript
JavaScript实现鼠标点击导航栏变色特效
Feb 08 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
Jul 27 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
Moment.js实现多个同时倒计时
Aug 26 Javascript
Vuex实现简单购物车
Jan 10 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
php str_replace的替换漏洞
2008/03/15 PHP
PHP 中文处理技巧
2010/04/25 PHP
WampServer下安装多个版本的PHP、mysql、apache图文教程
2015/01/07 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
基于jQuery的倒计时插件代码
2011/05/07 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
2011/07/13 Javascript
js计算两个时间之间天数差的实例代码
2013/11/19 Javascript
Bootstrap三种表单布局的使用方法
2016/06/21 Javascript
基于WebUploader的文件上传js插件
2016/08/19 Javascript
jQuery焦点图轮播效果实现方法
2016/12/19 Javascript
原生JavaScript实现Tooltip浮动提示框特效
2017/03/07 Javascript
angular ng-click防止重复提交实例
2017/06/16 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
2018/01/26 Javascript
浅析vue深复制
2018/01/29 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
2018/07/13 Javascript
微信小程序按钮去除边框线分享页面功能
2018/08/27 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
2018/09/06 Javascript
vue.config.js中配置Vue的路径别名的方法
2020/02/11 Javascript
Javascript表单序列化原理及实现代码详解
2020/10/30 Javascript
详细介绍Ruby中的正则表达式
2015/04/10 Python
python使用urllib2实现发送带cookie的请求
2015/04/28 Python
wxPython窗体拆分布局基础组件
2019/11/19 Python
Django 允许局域网中的机器访问你的主机操作
2020/05/13 Python
keras.utils.to_categorical和one hot格式解析
2020/07/02 Python
Python中flatten( ),matrix.A用法说明
2020/07/05 Python
python通过cython加密代码
2020/12/11 Python
iHerb台湾:维生素、保健品和健康产品
2018/01/31 全球购物
MySQL面试题目集锦
2016/04/14 面试题
大学生旷课检讨书
2014/01/22 职场文书
公司经理任命书
2014/06/05 职场文书
2014年教师节红领巾广播稿
2014/09/10 职场文书
单位租房协议书范本
2014/12/04 职场文书
初中语文教师研修日志
2015/11/13 职场文书
2016年保险公众宣传日活动总结
2016/04/05 职场文书
浅谈如何提高PHP代码质量之端到端集成测试
2021/05/28 PHP
十大冰系宝可梦排名,颜值最高的阿罗拉九尾,第三使用率第一
2022/03/18 日漫