Usage of Frontend Template Environment for Development and Production in ASP.NET Core 2.1 and Above with Bootstrap 4

2019年12月15日 3178点热度 0人点赞 0条评论

内容目录

The author's front-end files are as follows:

The author adds Bootstrap 4 and Font Awesome (icon fonts) because Bootstrap 4 no longer includes icons.

In ASP.NET Core, global CSS and JS files are usually set in the _Layout.cshtml file.

There are two tags:

<environment include="Development">
</environment>

<environment exclude="Development">
</environment>

environment include="Development" means that if the website is running in the development environment, it will use the files inside.

environment exclude="Development" means that when the website is not in the development environment, it will use the files inside.

So what are their functions?

Generally speaking, in the development environment, it uses local, uncompiled (uncompressed, etc.) front-end files.

After the website is deployed, it uses front-end files accelerated by CDN.

。

Examples are as follows

In _Layout.cshtml, the included css and js files are set as follows

CSS

    <environment include="Development">
        <link rel="stylesheet" href="~/bootstrap4/css/bootstrap.css" />
        <link rel="stylesheet" href="~/FontAwesome/css/font-awesome.css" />
        <link rel="stylesheet" href="~/css/site.css" />
    </environment>
<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">environment </span><span style="color: #ff0000;">exclude</span><span style="color: #0000ff;">="Development"</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"</span><span style="color: #ff0000;">
          asp-fallback-href</span><span style="color: #0000ff;">="~/bootstrap4/css/bootstrap.min.css"</span><span style="color: #ff0000;">
          asp-fallback-test-class</span><span style="color: #0000ff;">="sr-only"</span><span style="color: #ff0000;"> asp-fallback-test-property</span><span style="color: #0000ff;">="position"</span><span style="color: #ff0000;"> asp-fallback-test-value</span><span style="color: #0000ff;">="absolute"</span><span style="color: #ff0000;">
          integrity</span><span style="color: #0000ff;">="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"</span><span style="color: #ff0000;"> crossorigin</span><span style="color: #0000ff;">="anonymous"</span> <span style="color: #0000ff;">/&gt;</span>
    <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="~/FontAwesome/css/font-awesome.min.css"</span> <span style="color: #0000ff;">/&gt;</span>
    <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="~/css/site.min.css"</span><span style="color: #ff0000;"> asp-append-version</span><span style="color: #0000ff;">="true"</span> <span style="color: #0000ff;">/&gt;</span>
<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">environment</span><span style="color: #0000ff;">&gt;</span></pre>

JS Files

  <environment include="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/bootstrap4/js/bootstrap.js"></script>
        <script src="~/bootstrap4/js/bootstrap.bundle.js"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>
    </environment>
    <environment exclude="Development">
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery"
                crossorigin="anonymous"
                integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT">
        </script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
                asp-fallback-src="~/bootstrap4/js/bootstrap.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                crossorigin="anonymous"
                integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy">
        </script>
        <script src="~/bootstrap4/js/bootstrap.bundle.min.js"></script>
        <script src="~/js/site.min.js" asp-append-version="true"></script>
    </environment>