文件夹`a`的index.html

Question

我想使用Azure blob文件存储来托管静态网站。

如果html页位于$ web-storage的根文件夹中，则此方法很好。

但是，如果我将网页放在子文件夹中，则相对链接（例如，指向CSS文件）不再起作用-因为它们被解释为基于根的链接

<link href="css/bootstrap.css" rel="stylesheet">

index.html位于“ subfolder1”中

但不是

https://blablabla.web.core.windows.net/subfolder1/css

已解决

https://blablabla.web.core.windows.net/css

这是Azure的错误还是我的html中的误解/错误？

Answer 1

实际上，$web是Azure通用存储V2上的一个特殊容器，它是根路径，例如Apache HTTP服务器的www或IIS的wwwroot的根路径，用于承载所有静态文件夹和文件。必须在$web容器中创建所有文件夹及其子文件夹。您可以在Azure门户上看到其信息，如下图。

这是我的示例，在Azure存储资源管理器的a容器下创建两个文件夹b和index.html，并在其$web下创建两个文件夹。

如果访问我的主要端点https://<account name>.z7.web.core.windows.net，则我的静态网站的索引网页为Angular示例网页，如下所示

然后，根据需要访问子文件夹a和b，如下所示这些子文件夹的索引页。

文件夹`a`的index.html

<html>
<body>
<h2>A</h2>
</body>
</html>

希望它有助于了解Azure General Purpose Storage V2上的静态网站的结构。

更新您的评论：

我更新了a/index.html文件并添加了一个新文件a/a.css，其代码如下。

a / index.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="a.css">
</head>
<body>
<h2>A</h2>
<span id='test'>Hello</span>
</body>
</html>

a / a.css

#test {
    color: red;
}

浏览器工具有一些行为。

问：http://host/a和http://host/a/有什么区别？答：要在Chrome中访问它们，这两个URL将响应来自a/index.html的相同内容。但是，它们的基本路径是不同的：/的{{1}}，而http://host/a的{{1}}则将导致加载/a/的相对路径资源的行为不同，如下图。

图1.

图2。

静态Azure托管中的子文件夹

1 个答案:

文件夹`a`的index.html

a / index.html

a / a.css

静态Azure托管中的子文件夹

1 个答案:

文件夹a的index.html

a / index.html

a / a.css

文件夹`a`的index.html