gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 13:07:10 25 4
gpt4 key购买 nike

使用 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 调用,但这既麻烦又脆弱。

最佳答案

由于没有发布答案,这是我的解决方法:

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

关于javascript - 使用 gulp-file-include 从 HTML 模板到文件的相对路径,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39418423/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com