在本地运行 HTML 站点时声明 ROOT 文件夹

Posted

技术标签:

【中文标题】在本地运行 HTML 站点时声明 ROOT 文件夹【英文标题】:Declaring the ROOT folder when running HTML site locally 【发布时间】:2014-05-02 18:17:44 【问题描述】:

我有一个简单的静态站点,html 页面位于不同的目录中,并且经常通过在浏览器中打开文件在本地运行该站点。

我遇到的问题是浏览器无法识别哪个文件夹是根文件夹,因此任何指向根文件夹 (href="/about.html") 的相对 url 都不起作用。

例如。

我在浏览器中打开这个:file:///X:/DOCS/MySite/Directory1/page.html

在这个“page.html”中我有这个链接:href="/about.html"

我希望链接指向:file:///X:/DOCS/MySite/about.html

但相反,它指向:file:///about.html

我的问题是:我如何告诉浏览器哪个文件夹是根目录?...或者...还有其他方法可以更好地在本地运行我的网站吗?

注意:直到现在,我一直在我的链接结构中使用很多上层目录(“../”)作为解决方法,但这很复杂并导致其他问题,因此能够基于root ("/") 会容易得多。

【问题讨论】:

如果您的周围 html 有一个模板,您可以考虑使用 base 【参考方案1】:

您可以使用 jQuery/javascript 解决它。

$("[href^='root:']").each(function() 
  var newRoot = "http://google.com/";
  $(this).attr("href", newRoot+$(this).attr("href").substr(5))
  return false;
);

这会更改以root: 开头的所有链接,因此使用上面的代码,href="root:index.html" 会变成href="http://google.com/index.html"

但是,这不适用于您稍后使用 JavaScript 添加到页面的任何链接。

http://jsfiddle.net/ptarun/5rztY/1/

【讨论】:

这需要在每个开发链接之前添加root:,并且需要在生产代码中删除,那么与在开发代码中使链接绝对本地路径相比有什么好处? @t.niese 是的。我曾假设您可能不希望更改所有链接,因为有些链接可能是外部链接。我认为以任何其他方式检测链接是否是外部的对于可以通过在任何旧文本编辑器中使用 "Find root: and Replace with /" 来删除的东西来说太费力了. 因为它只有在 javascript 处于活动状态并且会阻止搜索引擎索引该站点时才有效?

以上是关于在本地运行 HTML 站点时声明 ROOT 文件夹的主要内容,如果未能解决你的问题,请参考以下文章

ini 将缺少的本地资产重定向到实时环境。 (将其放在特定于站点的conf文件中的服务器声明中)。

XAMPP Apache 站点根相关链接在本地工作,通过 LAN 上的远程计算机访问开发站点时失败

如何获取安装在远程服务器上的 Wordpress 站点的本地运行副本?

无法在 IE 或 Edge 中打开本地 IIS 站点

django1.10使用本地静态文件

在 Razor 中使用站点根目录相对链接