Saj*_*jad 7 html javascript ruby-on-rails erb gulp
我是一名前端开发人员.当我编写html代码时,我通过复制和粘贴(标题部分,页脚部分等)重复我自己.
我怎么写模块化我的html文件？像独立的header.html和footer.html,都在通话后index.html...一样erb的Ruby on rails？(我不喜欢jade郎)
在PHP中我们会这样做:
的index.php
<?php
include 'inc/head.inc.php'; //DOCTYPE and <head> stuff
include 'inc/header.inc.php'; //NAV or other top-of-page boilerplate
?>
<div id="uniqueDIV">
//Your unique page-specific divs can go here
</div>
<?php include 'inc/footer.inc.php'; ?>
因此,在您的head.inc.php文件中,您只有通常的DOCTYPE和<head>页面文件的一部分.
在Ruby中,看起来等效指令是这样的:
load "inc/head_inc.rb" -- OR --
require_relative "inc/head_inc.rb"
https://practicingruby.com/articles/ways-to-load-code
另一种选择是使用一些js/jQuery来填充文档的各个部分.如果您没有PHP,这是第二个最佳选择.它不如PHP优化,因为js/jQ代码将在页面完全呈现后运行,这可能会在代码出现之前导致一个微小(但明显)的延迟.
例如:
HTML
<div id="navbarDIV"></div>
JS/jQuery的:
<script type="text/javascript">
$(function(){
$('#navbarDIV').load( 'inc/navbar.inc.html' );
});
</script>
请注意,您需要加载jQuery才能使用上面的代码.简单如下<head>:
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
最后的注意事项:脚本标记可以<head>作为外部文件包含在您的文件中,也可以将其与html的其余部分一起放在文档的任何位置.无论什么有效.但是<head>作为外部文件,或者正文中的最后一个元素(也作为外部文件)是首选.
最后的最后一点:".inc." 命名约定不是必需的,这只是我自己的做法.包含文件可以被命名为head.html或head.php或等.
小智 3
您可以考虑使用Swig之类的东西，它不需要服务器（您可以在本地编译模板）。
\n\nSwig 的语法很像 Mustache 或 Handlebars，它使用大括号并在普通 HTML 中工作，因此您可以保留所需的 HTML 语法（与 Jade 不同）。
\n\n要将 HTML 分离为可重用的文件，您可以查看模板继承。您还可以看到文件包含和文件导入。
\n\n这是一个小例子：
\n\n{% include "./header.html" %}\n\n<div id="body">Hello world</div>\n\n{% include "./footer.html" %}\n\n\n\n我使用 gulp，我想要将文件编译为标准 html 文件的工具。像玉一样。\xe2\x80\x93 萨贾德·阿贝迪
\n
为此，您可以使用gulp-swig并在任务中本地构建模板。
\n| 归档时间： |
|
| 查看次数： |
3204 次 |
| 最近记录： |