logo标签列表

使用gulp-file-include从HTML模板到文件的相对路径

javascripthtmlcsstemplatesgulp
4
什么是使用 gulp-file-include 在 HTML 模板中链接 CSS 和 JavaScript 文件的推荐方法？
示例：

index.html

@@include('templates/doc-begin.html')
<h1>Welcome</h1>
<p>Hello!</p>
@@include('templates/doc-end.html')

support/index.html

@@include('templates/doc-begin.html')
<h1>Support</h1>
<p>RTFM</p>
@@include('templates/doc-end.html')

templates/doc-begin.html

<!doctype html>
<html lang=en>
<head>
   <title>Website</title>
   <link rel=stylesheet href=?????/style.css>
</head>
<body>

这两个index.html文件位于不同的文件夹层级，因此在link标签中，样式表的相对路径不能被硬编码（绝对路径有其自身的问题，在这种情况下是不可取的）。
基本上第一个link标签需要像这样：
<link rel=stylesheet href=style.css>

而第二个则类似于：

<link rel=stylesheet href=../style.css>

在 gulp-file-include 中有没有方便的方法可以这样做？

注意：
我目前有一个解决方法，即在每个 @@include 调用中传递变量 "."、".." 或 "../.."，但这很麻烦且脆弱。

功能请求： https://github.com/coderhaoxin/gulp-file-include/issues/115 - Dem Pilafian
1个回答
1

由于没有回答，这是我的解决方法:

index.html

@@include('templates/doc-begin.html', { "webRoot": "." })
<h1>Welcome</h1>
<p>Hello!</p>
@@include('templates/doc-end.html', { "webRoot": "." })

support/index.html

@@include('templates/doc-begin.html', { "webRoot": ".." })
<h1>Support</h1>
<p>RTFM</p>
@@include('templates/doc-end.html', { "webRoot": ".." })

templates/doc-begin.html

<!doctype html>
<html lang=en>
<head>
   <title>Website</title>
   <link rel=stylesheet href=@@webRoot/style.css>
</head>
<body>


更新（2017年4月）：
webRoot 功能已添加到 gulp-file-include 中。
https://github.com/coderhaoxin/gulp-file-include#webroot-built-in-context-variable

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接