时间:2019-03-17 标签:c#AzureFunctions分离html和css

Question

我目前正在使用 Azure Functions 为内部系统生成 html 页面；所以它不需要托管在网络服务器上来满足我的需要。 Iv 目前正在将 html 复制并粘贴到字符串变量中并将其作为响应返回。然而，这意味着我必须将 CSS 和 html 组合成一个大的长字符串，并且很难组织和管理。

有没有办法将 html 和 css 分成单独的文件并将其链接到 azure 函数作为响应？

结构示例:

• \View\HomePage\HomePage.html、HomePageAzureFunction.cs
• \View\Style\Style.css
• \View\Javascript\Javascript.js

Answer 1

Is there way of separating the html and css into separate files and linking it to azure function as response?

您可以利用kudu或 ftp 工具访问您的 azure 函数文件，然后添加相关目录和文件(html、css 等)，如下所示:

run.csx:

#r "System.Web"

using System.Web;
using System.Net;
using System.Net.Http.Headers;

public static HttpResponseMessage Run(HttpRequestMessage req,TraceWriter log)
{ 
    var response = req.CreateResponse(HttpStatusCode.OK);
    var stream = new FileStream(@"d:\home\site\wwwroot\HttpTriggerCSharp4\view\Home\index.html", FileMode.Open);
    response.Content = new StreamContent(stream);
    response.Content.Headers.ContentType = new MediaTypeHeaderValue("text/html");
    return response;
}

注意: css 和 javascript 文件无法正确加载，如下所示:

https://<your-functionapp-name>.azurewebsites.net/<your-HttpTriggerName>/view/style/site.css

对于这种情况，您可能需要添加其他 HttpTrigger 端点来访问 css 和 javascript 文件。对我来说，我会使用 Azure Blob 存储来存储 CSS 和 javascript 文件，详细信息您可以关注 here 。您可以在 html 文件中添加 css 和 javascript 文件，如下所示:

<link rel="stylesheet" href="https://{your-storage-account}.blob.core.windows.net/{container-name}/view/style/site.css">

<script src="https://{your-storage-account}.blob.core.windows.net/{container-name}/view/javascript/site.js"></script>