个人中心
文章发布
退出
作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
25
4
我是一名前端开发人员。当我编写 html 代码时，我会通过复制和粘贴(页眉部分、页 footer 分等)重复自己的很多内容。
我如何编写模块化我的 html 文件？就像单独的 header.html 和 footer.html 一样，然后在 index.html 中调用它们...与 erb 在 Ruby on rails 中？ (我不喜欢jade lang)
最佳答案
在 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或等等。
关于javascript - 我如何模块化静态 HTML 文件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34577569/
25
4
0
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题？ 更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 5 年前。 Improve
在 C# 静态方法中是否有一种方法可以引用定义该方法的类型？ 在实例方法中，您可以通过以下方式确定类型: public void Foo() { Type type = this.GetTyp
WPF:静态、动态资源以及资源词典 静态资源与动态资源 我们常常会使用样式或者控件模板放在Window.Resources中，比如这样： 静态资源与动态资源使用如下： <Window
任何人都知道如何在共享/静态函数中动态加载控件？该函数本身位于 mustinherit/abstract 类中。 (这是 VB 中的 ASP.NET 项目)我想做这样的事情: VB: Publ
在我看来，静态/强类型编程语言最宝贵的一点是它有助于重构:如果/当您更改任何 API，那么编译器会告诉您该更改破坏了什么。 我可以想象用运行时/弱类型语言编写代码......但我无法想象没有编译器的帮
正如我的名字所暗示的，我是一名 .NET 开发人员，但我对 Java 的兴趣越来越大，并且我有兴趣学习更多其他语言，因为这有助于我学习更多关于编程的知识。 无论如何，我的问题是:不带参数/不使用状态的
我在java中使用WireMock来 stub POST请求。该请求返回一个存储在我本地的 json 正文文件。 stub 看起来像这样: wireMockServer.stubFor(get(url
Python 是否有类构造函数的机制，即每当首次引用类时(而不是创建该对象的实例时)调用的函数？我知道其他一些语言中也存在这种情况，但我还没有在 Python 中遇到过。 基本上，我想初始化该函数中的
Python 是否有类构造函数的机制，即每当首次引用类时(而不是创建该对象的实例时)调用的函数？我知道其他一些语言中也存在这种情况，但我还没有在 Python 中遇到过。 基本上，我想初始化该函数中的
这个问题已经有答案了: What is the difference between dynamic and static polymorphism in Java? (14 个回答) 已关闭 4 年
这个问题已经有答案了: 已关闭10 年前。 Possible Duplicate: Static initializer in Java 我想知道这个静态的东西(抱歉，这是我第一次遇到这个)对一个类有
如果c++应用程序是按以下方式组织的 //file1.cpp static Y sgObj = X::getInitObject(0); //declared in file scope //fil
我有一个抽象类(AvergedDataRecord)，我需要进一步抽象(DataRecord)，这样我就可以将它扩展到原始类和一个新的具体类(SummedDataRecord)，并且我在获取某些方法时
我正在尝试制作一个字符串枚举。这是我到目前为止所得到的， private class TypedEnum : IEnumerable { public IEnumerator GetEnume
我选修了一门名为“安全代码”的类(class)，在下一个作业中，我们应该对一些 C 文件和 JavaEE Web 项目进行静态/动态分析。 我检查了“源监视器”并在 C 文件上运行它，但是(除非我不知
我有两个类，一个是登录类，一个是用户类。在 loggedIn 类中，我想显示我在用户登录时所做的共享首选项。 loginPrefs = getSharedPreferences("loginprefe
我在同一个 Activity 中有两个静态 fragment ，在“fragmentA”中我有一个自定义列表，当一个项目被点击时必须在“fragmentB”中出现一个细节，细节只在我改变屏幕方向时出现
在 Java 中是未修改方法变量，缺少final，每次都重新初始化限定符 静态方法 实例方法 如果 1. 或 2.(或两者)的答案是 final 限定符允许 Java 执行优化并存储方法变量只有一次？
我有两个类相互交互。第一个是中心的，如下: public class Datenbank { double winkelPanel = 0; double groessePanel = 0; doub
我有一个 mysql 数据库，它连接基于 Web 的 php 应用程序和 FoxPro 应用程序(是的，foxpro)。在之前的“开发人员”被解雇后开始处理这个问题。 无论如何，我熟悉 AES_Enc
我是一名优秀的程序员,十分优秀！