Question

HTML支持在多个文件上拆分源吗？我正在寻找一些相当于C ++的#include;或者像C＃partial这样的东西;一个可以获取源路径并在该位置注入文件内容的元素。

如果之前有人问过，请道歉。谷歌和搜索引擎优化搜索没有多少回报。我不是网络人，但我找到的唯一解决方案是使用iframe，许多人因各种原因不喜欢这种解决方案。

只是我的html源变得越来越大，我想通过拆分成多个文件来管理它。

Answer 1

如果您正在运行PHP，很容易实现：

PHP语言内置了“include”命令。因此，您可以拥有“index.php”（注意您必须更改后缀，以便PHP解析器启动）并使用以下语法。

<html>
  <head>
    [...] (header content you want to set or use)
  </head>
  <body>
    <?php
      include "relative/path/to/your/firstfile.html";
      include "relative/path/to/your/secondfile.html";
      include "relative/path/to/your/evenwithothersuffix/thirdfile.php";
      include "relative/path/to/your/fourth/file/in/another/folder.html";
    ?>
    [...] (other source code you whish to use in the HTML body part)
  </body>
</html>

基本上使你的主要index.php文件成为容器文件和包含的html文件组件，你喜欢单独维护。

如需进一步阅读，我建议使用PHP Manual和W3Schools Include页。

Answer 2

你不能，至少不能用平面HTML。您可以做的是使用Javascript加载和放置代码段。 iframe也不理想，因为与#include和partial等指令相反，这些代码段永远不会在一个页面中编译。

但是，我认为了解如何提供您的网页非常重要。这是一个静态网站吗？因为在这种情况下，我会用您选择的语言编写一个简单的脚本来编译页面。假设您有这样的基础：

<html>
    <head>
        <!-- ... -->
    </head>

    <body>
        {{ parts/navigation.html }}
        <!-- ... -->
    </body>
</html>

您可以逐行编写一个贯穿此文件的脚本，并将内容加载到名为compiled_html的变量中。当它找到{{ file }}时，会打开file，读取其内容并将其附加到compiled_html。当它到达最后时，它将变量的内容写入HTML文件。如何实现它取决于您所知道的语言。我确信在C＃中这样做非常简单。

通过这种方式，您可以将HTML页面的源代码拆分为多个文件（如果需要，可以重复使用某些部分），但最终还是会得到功能齐全的单个文件。

Answer 3

一般来说，这个问题是用模板处理器解决的

例如 posthtml 和 posthtml-expressions

/*
build-html.js
bundle a static html file from multiple smaller html files (pages, chapters)

npm init -y
npm install -D fast-glob posthtml posthtml-expressions posthtml-custom-elements
node build-html.js
*/

const fs = require('fs')
const glob = require('fast-glob') // https://github.com/mrmlnc/fast-glob
const posthtml = require('posthtml') // https://github.com/posthtml/posthtml
// https://github.com/posthtml/posthtml#plugins
const expressions = require('posthtml-expressions')
const customElements = require('posthtml-custom-elements')
//const extend = require('posthtml-extend')
//const modules = require('posthtml-modules')

const is_demo = 1;
const do_write = 0;

function posthtmlRun(entryHtml, expressionsData) {
  const result = posthtml()
    .use(expressions(expressionsData)) // must run before customElements
    .use(customElements()) // <custom> -> <div class="custom">
    .process(entryHtml, { sync: true })
  if (do_write)
    fs.writeFileSync('output.html', result.html, 'utf8')
  else
    console.log('result:\n\n' + result.html)
}

const expressionsData = {
  locals: {
    someHtml: '<span>hello</span>',
    pageHtmlArray: [
      '<h2>page 1</h2>',
      '<h2>page 2</h2>',
    ],
  },
}

if (is_demo) {
  // triple curly braces: insert the unescaped value from `expressionsData.locals`
  const entryHtml = `\
<!doctype html>
<html>
<body>
<div>{{{ someHtml }}}</div>
<each loop="pageHtml, pageNumber in pageHtmlArray">
  <page>{{{ pageHtml }}}</page>
</each>
<nw>nowrap custom element</nw>
</body>
</html>
`
  posthtmlRun(entryHtml, expressionsData)
}

else {
  const entryHtmlFile = 'src/index.html'
  expressionsData.locals.pageHtmlArray = (
    glob.sync(['src/pages/*.html'])
    .map(pageFile => {
      console.log(`reading ${pageFile}`)
      return fs.readFileSync(pageFile, 'utf8')
    })
  )
  const entryHtml = fs.readFileSync(entryHtmlFile, 'utf8')
  posthtmlRun(entryHtml, expressionsData)
}

示例结果：

<!doctype html>
<html>
<body>
<div><span>hello</span></div>

  <div class="page"><h2>page 1</h2></div>

  <div class="page"><h2>page 2</h2></div>

<div class="nw">nowrap custom element</div>
</body>
</html>

您也可以使用 xslt，但 javascript 更简单、更灵活

将html源拆分为多个文件

3 个答案: