Question

我被要求为电子商务网站开发一些简单的视图，但我不能使用任何框架，只是原始的HTML和CSS。我的问题是我不想在每个视图中重复导航栏和页脚代码。我习惯使用Ruby on Rails进行开发，在那里我可以使用partial来解决这个问题。

这种情况有什么相似之处，还是我必须在每个视图中包含相同的代码（仅仅因为HTML是一种静态语言）？

先谢谢

Answer 1

这就是拥有像gulp这样的构建脚本非常有用的地方。通常，静态网页等过程使用的是Jade或Handlebars等模板语言。有了Jade，你可以写下这样的东西：

html
   body
      include ./includes/header.jade

然后使用gulp

编译它

var jade = require('gulp-jade');

gulp.task('templates', function() {
  var YOUR_LOCALS = {};

  gulp.src('./lib/*.jade')
    .pipe(jade({
      locals: YOUR_LOCALS
    }))
    .pipe(gulp.dest('./dist/'))
});

然而，除了构建步骤之外，无法使用纯HTML和CSS重复静态内容。

Answer 2

你可以创建一个单独的页脚和标题html文件，然后使用php <?php include 'header.html';?>和<?php include 'footer.html';?>

将它们包含在你的页面上

只需和他们内联你的main.html页面，无论你想在哪里添加它们。

或者您可以像这样使用Jquery：

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#includedContent").load("footer.html"); 
    });
    </script> 
  </head> 

  <body> 
     <div id="includedContent"></div>
  </body> 
</html>

将相同的导航栏和页脚添加到多个HTML视图

2 个答案: