使用 gulp-file-include 构建前端静态页面

前言

虽然现在单页面很流行,但是在 PC 端多页面还是常态,所以构建静态页面的工具还有用武之地。最近也看到了一些询问如何 include HTML 文件的问题。

很多时候我们在写静态页面的时候也希望能和后台模板一样,将导航、页头、页脚等公用的部分分离出去,然后引入页面中。单纯的静态页面不具备这种功能,而使用 gulp 插件可以很容易的完成,比如 gulp-file-include 插件。

官网对于插件的基本使用已经说得很详细,但是对于一些具体的场景并没有举例,所以初次接触还是还是会有疑惑,比如具有选中状态的导航条怎么做、面包屑怎么做。本文的主要目的就是给出两个例子的解决方案。

目录及配置文件

基本的目录结构如下,实际项目可能需要更精细的结构。

作为引入文件的插件,并没有太多的配置参数,基本的 gulpfile 如下,更详细的配置参见官网。

var gulp = require('gulp'),
    fileinclude = require('gulp-file-include');

gulp.task('fileinclude', function() {
    gulp.src(['./src/*.html'])//主文件
        .pipe(fileinclude({
            prefix: '@@',//变量前缀 @@include
            basepath: './src/_include',//引用文件路径
            indent:true//保留文件的缩进
        }))
        .pipe(gulp.dest('./dist'));//输出文件路径
});

导航条

导航条是主要的引用内容,但是一般当前页面的导航都会有选中效果,那么就要使用 gulp-file-include 的判断功能。后台模板统一引入后也要考虑链接的选中问题。之前公司在用后台模板的时候就遇到过这个问题。其实无论是后台还是前台,在引入导航条这个问题上的解决方法差不多,都是在当前页面定义一个私有变量,通过这个变量来设置链接的选中效果,而 gulp-file-include 的变量通过传参实现。具体方法如下:

 index.html

<!DOCTYPE html>
<html>
  <body>
  @@include('./navbar.html',{
     "index": "active"
   })
  </body>
</html>

navbar.html

<ul class="navbar">
    <li @@if (context.index==='active' ) { class="active" }>
        <a href="index.html">首页</a>
    </li>
    <li @@if (context.about==='active' ) { class="active" }>
        <a href="about.html">关于</a>
    </li>
    <li @@if (context.contact==='active' ) { class="active" }>
        <a href="contact.html">联系我们</a>
    </li>
</ul>

 编译结果:

<!DOCTYPE html>
<html>
  <body>
  <ul class="navbar">
      <li  class="active" >
          <a href="index.html">首页</a>
      </li>
      <li >
          <a href="about.html">关于</a>
      </li>
      <li >
          <a href="contact.html">联系我们</a>
      </li>
  </ul>
  </body>
</html>

面包屑

面包屑也是常用的功能,不过有些时候并不需要前端构建的方式生成,在此作为一个案例来说明吧。生成面包屑的方法很多,我使用了传参的方法,通过传递一个导航路径数组,然后循环生成面包屑。因为面包屑的最后一项没有连接,所以循环要分两次执行。具体方法如下:

index.html

<!DOCTYPE html>
<html>
  <body>
    @@include('./breadcrumb.html',{
        "title":"首页",
        "breadcrumb":[{
            "url":"...",
            "text":"首页"
        },{
            "url":"...",
            "text":"链接一"
        },{
            "url":"",
            "text":"链接二"
        }]
    })
  </body>
</html>

breadcrumb.html

<div class="page-header">
    <h2>@@title</h2>
    <ol class="breadcrumb">
    @@for (var i = 0; i < (context.breadcrumb.length-1); i++) {
        <li><a href="`+context.breadcrumb[i].url+`">`+context.breadcrumb[i].text+`</a></li>
    }
    <!-- 面包屑最后一项无链接 -->
    @@for (var i = (context.breadcrumb.length-1); i < context.breadcrumb.length; i++) {
        <li><strong>`+context.breadcrumb[i].text+`</strong></li> 
    }
    </ol>
</div>

 编译结果:

<!DOCTYPE html>
<html>
  <body>
  <div class="page-header">
      <h2>首页</h2>
      <ol class="breadcrumb">
      
          <li><a href="...">首页</a></li>
      
          <li><a href="...">链接一</a></li>
      
      <!-- 面包屑最后一项无链接 -->
      
          <li><strong>链接二</strong></li> 
      
      </ol>
  </div>
  </body>
</html>

结论

gulp-file-include 插件的使用非常简单,如果实际项目中遇到更复杂的情况,还需要仔细阅读官方文档,也可以在 Github 的 Issues 中寻找答案!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏逆向技术

32位汇编第六讲,OllyDbg逆向植物大战僵尸,快速定位阳光基址

      32位汇编第六讲,OllyDbg逆向植物大战僵尸,快速定位阳光基址 一丶基址,随机基址的理解 首先,全局变量的地址,我们都知道是固定的,是在PE文件...

38170
来自专栏程序员八阿哥

小白Pycharm使用(4):PyCharm断点调试以及变量监测是怎么玩的?

PyCharm作为一款针对Python语言编程集成开发环境(IDE),功能方面已经做到极致了。虽然Visual Studio 2017已经添加了Python编程...

24410
来自专栏大内老A

谈谈基于OAuth 2.0的第三方认证 [中篇]

虽然我们在《上篇》分别讨论了4种预定义的Authorization Grant类型以及它们各自的适用场景的获取Access Token的方式,我想很多之前没有接...

26460
来自专栏高性能服务器开发

从零实现一个http服务器

我始终觉得,天生的出身很重要,但后天的努力更加重要,所以如今的很多“科班”往往不如后天努力的“非科班”。所以,我们需要重新给“专业”和“专家”下一个定义:所谓专...

34120
来自专栏Puppeteer学习

一步一步学Vue(七)

17030
来自专栏北京马哥教育

Linux 文件管理命令语法、参数、实例全汇总(一)

命令:cat cat 命令用于连接文件并打印到标准输出设备上。 使用权限 所有使用者 语法格式 cat [-AbeEnstTuv] [--help] [--v...

36260
来自专栏程序员八阿哥

王老板Python面试(9):整理的最全 python常见面试题(基本必考)

1)迭代器是一个更抽象的概念,任何对象,如果它的类有next方法和iter方法返回自己本身。对于string、list、dict、tuple等这类容器对象,使用...

21910
来自专栏Python攻城狮

MongoDB与python交互1.Pymongo2.安装3.使用4.mongoDB其它操作5.Mongodb与python交互6.完成命令行项目:学生信息管理(基于Python2.7)

PyMongo是Mongodb的Python接口开发包,是使用python和Mongodb的推荐方式。

16230
来自专栏飞雪无情的博客

一个简单的Golang实现的Socket5 Proxy

前两天,使用Golang实现了一个简单的HTTP Proxy,具体实现参见 http://www.flysnow.org/2016/12/24/golang-h...

16940
来自专栏破晓之歌

vue中axios处理http发送请求的示例(Post和get)

axios中文文档:https://github.com/mzabriskie/axios#using-applicationx-www-form-urlenc...

24930

扫码关注云+社区

领取腾讯云代金券