zoukankan      html  css  js  c++  java
  • js,css引用顺序设定

    遇到的困难

    在ASP .NET MVC里面,会使用_Layout.cshtml来绘制一些全局的公共页面,以及引用相关的css和js
    而在每个独立的页面中,也有自己独立的js
    一般来说,希望公共的js放在独立的js之前
    css同理

    作法

    方案1

    使用@RenderSection-@section XXX的方法
    在_Layout.cshtml里定义一个放置@section里面内容的地方,再在独立页面中使用@section XXX放置相关引用
    保证XXX名字相同,则加载的时候,会放置到_Layout.cshtml的对应位置
    下面例子中定义了"Styles"和"Scripts"两个section,展示了"Scripts"的使用
    _Layout.cshtml

    <!DOCTYPE html>
    <html>
    <head id="Head1">
        <title>
            
        </title>
        <link href="~/css/common/style.css" rel="stylesheet" type="text/css">
        <link href="~/lib/kkpager/kkpager_orange.css" rel="stylesheet" type="text/css">
        <link href="~/lib/swiper/dist/css/swiper.min.css" rel="stylesheet" type="text/css">
        <link href="~/lib/layer/theme/default/layer.css" rel="stylesheet" type="text/css">
        
        @RenderSection("Styles", required: false)
    </head>
    <body>
        
    
        @RenderBody()
    
        <script type="text/javascript" src="~/js/common/jquery.js"></script>
        <script type="text/javascript" src="~/lib/angular/angular.min.js"></script>
        <script type="text/javascript" src="~/lib/kkpager/kkpager.min.js"></script>
        <script type="text/javascript" src="~/lib/swiper/dist/js/swiper.min.js"></script>
        <script type="text/javascript" src="~/lib/layer/layer.js"></script>
        <script type="text/javascript" src="~/js/common/common.js"></script>
        <script type="text/javascript" src="~/js/common/jquery.jslides.js"></script>
    
        @RenderSection("Scripts", required: false)
    
    </body>
    </html>
    

    独立页面中,这样写

    @section Scripts
    {
        <!--这里的内容会放置在@RenderSection("Scripts", required: false)的位置-->
        <script type="text/javascript" src="~/js/news/index.js"></script>
    }
    

    方案2(不推荐)

    把公共的js放在Head里面,像这样

    <!DOCTYPE html>
    <html>
    <head id="Head1">
        <title>
            
        </title>
        <link href="~/css/common/style.css" rel="stylesheet" type="text/css">
        <link href="~/lib/kkpager/kkpager_orange.css" rel="stylesheet" type="text/css">
        <link href="~/lib/swiper/dist/css/swiper.min.css" rel="stylesheet" type="text/css">
        <link href="~/lib/layer/theme/default/layer.css" rel="stylesheet" type="text/css">
        <script type="text/javascript" src="~/js/common/jquery.js"></script>
        <script type="text/javascript" src="~/lib/angular/angular.min.js"></script>
        <script type="text/javascript" src="~/lib/kkpager/kkpager.min.js"></script>
        <script type="text/javascript" src="~/lib/swiper/dist/js/swiper.min.js"></script>
        <script type="text/javascript" src="~/lib/layer/layer.js"></script>
        <script type="text/javascript" src="~/js/common/common.js"></script>
        <script type="text/javascript" src="~/js/common/jquery.jslides.js"></script>
        @RenderSection("Styles", required: false)
    </head>
    <body>
        
    
        @RenderBody()
    
        @RenderSection("Scripts", required: false)
    
    </body>
    </html>
  • 相关阅读:
    使用Python连接redis(redis作MQ使用)_Tister的空间_百度空间
    LTTng 2.0 Downloads | LTTng Project
    How to capture stdout in realtime with Python « SaltyCrane Blog
    python的线程锁机制_dominic_80ChinaUnix博客
    Collective Intelligence实战/阿拉克(Satnam Alag)图书卓越亚马逊 [集体智慧编程]
    查IP
    沃尔玛控股中国1号店
    HeidiSQL MySQL made easy
    groovy学习7groovy sql 雪霁霜飞 博客园
    数据集 (DataSet) groovy
  • 原文地址:https://www.cnblogs.com/Lulus/p/8117547.html
Copyright © 2011-2022 走看看