У меня есть HTML-шаблон, на котором есть много ссылок jQuery, CSS на каждой странице, я пытаюсь использовать мастера, но мне сложно найти, что положить и куда помещать эти ссылки, хорошо, что шаблон сообщает нам которые являются глобальным уровнем и которые являются требованиями к уровню страницы.
Я попытался поместить эти глобальные вещи в главную страницу и те вспомогательные вещи на странице контента, но они не сработали (по-видимому, эти " STYLE " в главном теге работают, но те " SCRIPT " в нижней части тега тела не используются (я использовал "консоль" "в режиме разработчика веб-браузера и получил" Uncaught ReferenceError: jQuery не определен "), еще одна вещь - есть много избыточных ссылок как в SCRIPT, так и в STYLE, пожалуйста, посоветуйте мне найти лучший способ для создания главной страницы и child page, если вы можете дать мне пример структуры на главной странице и странице контента, которая была бы замечательной.
Вот пример из двух исходных страниц шаблона HTML: (я удалил ненужные части тела), чтобы вы могли понять, что я пытаюсь архивировать.
homepage.html
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
<meta charset="utf-8" />
<title>Home</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<meta content="" name="description" />
<meta content="" name="author" />
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN PAGE LEVEL PLUGIN STYLES -->
<link href="assets/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet" />
<link rel="stylesheet" href="assets/plugins/revolution_slider/css/rs-style.css" media="screen">
<link rel="stylesheet" href="assets/plugins/revolution_slider/rs-plugin/css/settings.css" media="screen">
<link href="assets/plugins/bxslider/jquery.bxslider.css" rel="stylesheet" />
<!-- END PAGE LEVEL PLUGIN STYLES -->
<!-- BEGIN THEME STYLES -->
<link href="assets/css/style-metronic.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/style.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/themes/blue.css" rel="stylesheet" type="text/css" id="style_color"/>
<link href="assets/css/style-responsive.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/custom.css" rel="stylesheet" type="text/css"/>
<!-- END THEME STYLES -->
<link rel="shortcut icon" href="favicon.ico" />
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body>
<!-- SOME BODY CONTENTS -->
<!-- Load javascripts at bottom, this will reduce page load time -->
<!-- BEGIN CORE PLUGINS(REQUIRED FOR ALL PAGES) -->
<!--[if lt IE 9]>
<script src="assets/plugins/respond.min.js"></script>
<![endif]-->
<script src="assets/plugins/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript" src="assets/plugins/hover-dropdown.js"></script>
<script type="text/javascript" src="assets/plugins/back-to-top.js"></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN PAGE LEVEL JAVASCRIPTS(REQUIRED ONLY FOR CURRENT PAGE) -->
<script type="text/javascript" src="assets/plugins/fancybox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="assets/plugins/revolution_slider/rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="assets/plugins/revolution_slider/rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<script type="text/javascript" src="assets/plugins/bxslider/jquery.bxslider.min.js"></script>
<script src="assets/scripts/app.js"></script>
<script src="assets/scripts/index.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
App.init();
App.initBxSlider();
Index.initRevolutionSlider();
});
</script>
<!-- END PAGE LEVEL JAVASCRIPTS -->
</body>
<!-- END BODY -->
</html>
contact.html
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
<meta charset="utf-8" />
<title>Contacts</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<meta content="" name="description" />
<meta content="" name="author" />
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN PAGE LEVEL PLUGIN STYLES -->
<link href="assets/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet" />
<!-- END PAGE LEVEL PLUGIN STYLES -->
<!-- BEGIN THEME STYLES -->
<link href="assets/css/style-metronic.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/style.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/themes/blue.css" rel="stylesheet" type="text/css" id="style_color"/>
<link href="assets/css/style-responsive.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/custom.css" rel="stylesheet" type="text/css"/>
<!-- END THEME STYLES -->
<link rel="shortcut icon" href="favicon.ico" />
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body>
<!-- SOME BODY CONTENTS -->
<!-- Load javascripts at bottom, this will reduce page load time -->
<!-- BEGIN CORE PLUGINS(REQUIRED FOR ALL PAGES) -->
<!--[if lt IE 9]>
<script src="assets/plugins/respond.min.js"></script>
<![endif]-->
<script src="assets/plugins/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript" src="assets/plugins/hover-dropdown.js"></script>
<script type="text/javascript" src="assets/plugins/back-to-top.js"></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN PAGE LEVEL JAVASCRIPTS(REQUIRED ONLY FOR CURRENT PAGE) -->
<script type="text/javascript" src="assets/plugins/fancybox/source/jquery.fancybox.pack.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
<script src="assets/plugins/gmaps/gmaps.js" type="text/javascript"></script>
<script src="assets/scripts/contact-us.js"></script>
<script src="assets/scripts/app.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
App.init();
ContactUs.init();
});
</script>
<!-- END PAGE LEVEL JAVASCRIPTS -->
</body>
<!-- END BODY -->
</html>
БОЛЬШАЯ проблема в том, что я НЕ понял ПОРЯДОК кодов MATTER, BIG MATTER, независимо от того, где вы помещаете эти STYLE и SCRIPT на главную или дочернюю страницу, они должны быть в точно упорядоченном порядке (например: глобальные вещи должны быть представлены до этой страницы -level things...), как в вашем шаблоне HTML. Я последовал за ним, и он РАБОТАЕТ сейчас.
Вот базовая структура главной страницы, которую я сделал:
<!-- BEGIN HEAD -->
<head id="Head1" runat="server">
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="~/assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="~/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- END GLOBAL MANDATORY STYLES -->
<asp:ContentPlaceHolder ID="Head" runat="server">
//Put your PAGE REQUIRED STYLE HERE in your content (child page)
</asp:ContentPlaceHolder>
<!-- BEGIN THEME STYLES -->
<link href="~/assets/css/style-metronic.css" rel="stylesheet" type="text/css" />
<link href="~/assets/css/style.css" rel="stylesheet" type="text/css" />
<link href="~/assets/css/themes/red.css" rel="stylesheet" type="text/css" id="style_color" />
<link href="~/assets/css/style-responsive.css" rel="stylesheet" type="text/css" />
<link href="~/assets/css/custom.css" rel="stylesheet" type="text/css" />
<!-- END THEME STYLES -->
<link rel="shortcut icon" href="favicon.ico" />
<!-- END HEAD -->
</head>
<!-- BEGIN BODY -->
<body>
// PUT WHAT EVER YOU WANT TO PUT HERE
// PUT WHAT EVER YOU WANT TO PUT HERE
<!-- Load javascripts at bottom, this will reduce page load time -->
<!-- BEGIN CORE PLUGINS(REQUIRED FOR ALL PAGES) -->
<!--[if lt IE 9]>
<script src="/assets/plugins/respond.min.js"></script>
<![endif]-->
<script src="/assets/plugins/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="/assets/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="/assets/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/assets/plugins/hover-dropdown.js"></script>
<script type="text/javascript" src="/assets/plugins/back-to-top.js"></script>
<!-- END CORE PLUGINS -->
<div>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
//Put your PAGE REQUIRED SCRIPT HERE in your content (child page)
</asp:ContentPlaceHolder>
</div>
// PUT WHAT EVER YOU WANT TO PUT HERE
// PUT WHAT EVER YOU WANT TO PUT HERE
</body>
<!-- END BODY -->
</html>
HTML
разметку, где находятся ваша фактическая главная страница.aspx
и страница содержимого, чтобы мы могли увидеть, что вы пробовали ??.