MVC をよりよく理解する方法として、この CSS テンプレート ( http://www.csstemplateheaven.com/demo/bigshot ) を MVC 4 プロジェクトに移植する作業を行っています。私が取り組んでいる最初のステップは、このページをデモから変換することです ( http://www.csstemplateheaven.com/demo/bigshot/portfolio.html、何らかの理由で jquery の「フィルター」オプションを機能させることができません以下にマークアップを投稿しましたが、いくつかの注意事項があります。
- MVC 4 内でバンドル機能を使用しようとしましたが、機能していなかったため、ビューに javascript と css への直接リンクを配置しました。バンドリングと縮小化については後で取り組むことにしました。
- デモの各ページには関連する css ファイルが異なるため、個々のビューからヘッド セクションを取得する _Layout.cshtml ファイルで @RenderSection を使用しました。
- ポートフォリオが結果をフィルタリングしないことを除いて、css と js に関連する他のすべて (フィルタリングを除く) はサイトで正常に機能しています。サイトをプレビューすると、さまざまな css および js ファイルへのリンクが表示され、すべて有効です。
あなたが提供できる助けや提案をありがとう！
_Layout.cshtml のコード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<title>Test Site</title>
@RenderSection("head", required: false)
<script>
jQuery.noConflict()(function ($) {
$('#ei-slider').eislideshow({
animation: 'center',
autoplay: true,
slideshow_interval: 3000,
titlesFactor: 0
});
});
</script>
</head>
<body style="background: #FFF">
<div style="width:100%; background: #FFF">
<div class="header">
<!-- Logo/Title -->
<div id="site_title"><a href="#">
<img src="~/Content/img/logo.png" alt="My Site Title" /></a>
</div>
<ol id="menu">
<li><a href="#">Home</a>
<!-- sub menu -->
<ol>
<li><a href="#">Nivo Slider</a></li>
<li><a href="#">EI Slider</a></li>
<li><a href="#">Fullscreen Slider</a></li>
<li><a href="#">Static Image</a></li>
</ol>
</li><!-- end sub menu -->
<li><a href="#">Pages</a>
<!-- sub menu -->
<ol>
<li><a href="#">Magazine</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Full Width Page</a></li>
<li><a href="#">Columns</a></li>
</ol>
</li><!-- end sub menu -->
<li><a href="#">Elements</a></li>
<li><a href="#">Galleries</a>
<!-- sub menu -->
<ol>
<li><a href="#">Simple</a></li>
<li><a href="~/Home/Hardware">Filterable</a></li>
<li><a href="#">Fade Scroll</a></li>
<li><a href="#">Video</a></li>
<li class="last"><a href="#">PhotoGrid</a></li>
</ol>
</li><!-- end sub menu -->
<li><a href="#">Contact</a></li>
</ol>
</div>
<!-- END header -->
</div>
@RenderSection("picturecycle", required: false)
<div id="container">
@RenderBody()
</div>
<div id="footer">
<!-- First Column -->
<div class="one-fourth">
<h3>Useful Links</h3>
<ul class="footer_links">
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Ellem Ciet</a></li>
<li><a href="#">Currivitas</a></li>
<li><a href="#">Salim Aritu</a></li>
</ul>
</div>
<!-- Second Column -->
<div class="one-fourth">
<h3>Terms</h3>
<ul class="footer_links">
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Ellem Ciet</a></li>
<li><a href="#">Currivitas</a></li>
<li><a href="#">Salim Aritu</a></li>
</ul>
</div>
<!-- Third Column -->
<div class="one-fourth">
<h3>Information</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet enim id dui tincidunt vestibulum rhoncus a felis.
<div id="social_icons">
Theme by <a href="http://www.csstemplateheaven.com">CssTemplateHeaven</a><br /> Photos © <a href="http://dieterschneider.net" title="Dieter Schneider Photography">Dieter Schneider</a>
</div>
</div>
<!-- Fourth Column -->
<div class="one-fourth last">
<h3>Socialize</h3>
<img src="~/Content/img/icon_fb.png" alt="Facebook">
<img src="~/Content/img/icon_twitter.png" alt="Facebook">
<img src="~/Content/img/icon_in.png" alt="Facebook">
</div>
<div style="clear:both"></div>
</div> <!-- END footer -->
</body>
</html>
Hardware.cshtml のコード (表示)
@{
ViewBag.Title = "Hardware Page";
}
@section head {
<!-- CSS Files -->
<link rel="stylesheet" type="text/css" media="screen" href="~/Content/style.css">
<link rel="stylesheet" type="text/css" media="screen" href="~/Content/menu/css/simple_menu.css">
<link rel="stylesheet" href="~/Content/css/prettyPhoto.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="~/Content/css/nivo-slider.css" type="text/css" media="screen"/>
<!-- JS Files -->
<script type="text/javascript" src="~/Scripts/js/jquery.min.js"></script>
<script type="text/javascript" src="~/Scripts/js/custom.js"></script>
<script type="text/javascript" src="~/Scripts/js/slides/slides.min.jquery.js"></script>
<script type="text/javascript" src="~/Scripts/js/cycle-slider/cycle.js"></script>
<script type="text/javascript" src="~/Scripts/js/nivo-slider/jquery.nivo.slider.js"></script>
<script type="text/javascript" src="~/Scripts/js/tabify/jquery.tabify.js"></script>
<script type="text/javascript" src="~/Scripts/js/prettyPhoto/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="~/Scripts/js/twitter/jquery.tweet.js"></script>
<script type="text/javascript" src="~/Scripts/js/scrolltop/scrolltopcontrol.js"></script>
<script type="text/javascript" src="~/Scripts/js/portfolio/filterable.js"></script>
<script type="text/javascript" src="~/Scripts/js/modernizr/modernizr-2.0.3.js"></script>
<script type="text/javascript" src="~/Scripts/js/easing/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="~/Scripts/js/kwicks/jquery.kwicks-1.5.1.pack.js"></script>
<script type="text/javascript" src="~/Scripts/js/swfobject/swfobject.js"></script>
<!-- FancyBox -->
<link rel="stylesheet" type="text/css" href="~/Scripts/js/fancybox/jquery.fancybox.css" media="all">
<script type="text/javascript" src="~/Scripts/js/fancybox/jquery.fancybox-1.2.1.js"></script>
}
<div id="portfolio">
<ul id="filterable">
<li class="first">
<h5>Sort by:</h5>
</li>
<li class="current"><a class="all" href="#all">All</a></li>
<li><a class="web" href="#web">Webdesign</a></li>
<li><a class="logos" href="#logos">Logo</a></li>
<li><a class="branding" href="#branding">Branding</a></li>
<li><a class="stupid" href="#stupid">Stupid</a></li>
<li><a class="video" href="#video">Video</a></li>
</ul>
<!--END filtering-nav-->
<div class="portfolio-container" id="columns">
<ul>
<li class="one-fourth web">
<p>
<a href="slideshow/slide_1.jpg" class="portfolio-item-preview" data-rel="prettyPhoto" title="Scream"><img src="~/Content/img/portfolio/portfolio-img-01.jpg" alt="" width="210" height="145" class="portfolio-img pretty-box"/></a>
</p>
<h4><a href="#">Worpdress Design</a></h4>
<p>
Lorem ipsum dolor sit amet, tollite fit manibus individuationis omnibus civitas ad quia.
</p>
</li>
<li class="one-fourth logos">
<p>
<a href="slideshow/slide_1.jpg" class="portfolio-item-preview" data-rel="prettyPhoto"><img src="~/Content/img/portfolio/portfolio-img-01.jpg" alt=" " width="210" height="145" class="portfolio-img pretty-box"/></a>
</p>
<h4><a href="#">Logo Design</a></h4>
<p>
Lorem ipsum dolor sit amet, tollite fit manibus individuationis omnibus civitas ad quia.
</p>
</li>
<li class="one-fourth stupid">
<p>
<a href="http://www.youtube.com/watch?v=pyOyBVXDJ9Qfeature=relmfu" class="portfolio-item-preview" data-rel="prettyPhoto"><img src="~/Content/img/portfolio/portfolio-img-01.jpg" alt=" " width="210" height="145" class="portfolio-img pretty-box"/></a>
</p>
<h4><a href="#">Watch Video</a></h4>
<p>
Lorem ipsum dolor sit amet, tollite fit manibus individuationis omnibus civitas ad quia.
</p>
</li>
<li class="one-fourth web">
<p>
<a href="images/slideshow/slide-01.jpg" class="portfolio-item-preview" data-rel="prettyPhoto"><img src="~/Content/img/portfolio/portfolio-img-01.jpg" alt=" " width="210" height="145" class="portfolio-img pretty-box"/></a>
</p>
<h4><a href="#">Wordpress Master</a></h4>
<p>
Lorem ipsum dolor sit amet, tollite fit manibus individuationis omnibus civitas ad quia.
</p>
</li>
<li class="one-fourth logos">
<p>
<a href="images/slideshow/slide-01.jpg" class="portfolio-item-preview" data-rel="prettyPhoto"><img src="~/Content/img/portfolio/portfolio-img-01.jpg" alt=" " width="210" height="145" class="portfolio-img pretty-box"/></a>
</p>
<h4><a href="#">Endless Logo Design</a></h4>
<p>
Lorem ipsum dolor sit amet, tollite fit manibus individuationis omnibus civitas ad quia.
</p>
</li>
<li class="one-fourth web">
<p>
<a href="images/slideshow/slide-01.jpg" class="portfolio-item-preview" data-rel="prettyPhoto"><img src="~/Content/img/portfolio/portfolio-img-01.jpg" alt=" " width="210" height="145" class="portfolio-img pretty-box"/></a>
</p>
<h4><a href="#">Worpdress Widgets</a></h4>
<p>
Lorem ipsum dolor sit amet, tollite fit manibus individuationis omnibus civitas ad quia.
</p>
</li>
<li class="one-fourth web">
<p>
<a href="images/slideshow/slide-01.jpg" class="portfolio-item-preview" data-rel="prettyPhoto"><img src="~/Content/img/portfolio/portfolio-img-01.jpg" alt=" " width="210" height="145" class="portfolio-img pretty-box"/></a>
</p>
<h4><a href="#">Magento Development</a></h4>
<p>
Lorem ipsum dolor sit amet, tollite fit manibus individuationis omnibus civitas ad quia.
</p>
</li>
<li class="one-fourth web">
<p>
<a href="images/slideshow/slide-01.jpg" class="portfolio-item-preview" data-rel="prettyPhoto"><img src="~/Content/img/portfolio/portfolio-img-01.jpg" alt=" " width="210" height="145" class="portfolio-img pretty-box"/></a>
</p>
<h4><a href="#">Joomla Shopping</a></h4>
<p>
Lorem ipsum dolor sit amet, tollite fit manibus individuationis omnibus civitas ad quia.
</p>
</li>
<li class="one-fourth branding">
<p>
<a href="images/slideshow/slide-01.jpg" class="portfolio-item-preview" data-rel="prettyPhoto"><img src="~/Content/img/portfolio/portfolio-img-01.jpg" alt=" " width="210" height="145" class="portfolio-img pretty-box"/></a>
</p>
<h4><a href="#">T-Shirts Designs</a></h4>
<p>
Lorem ipsum dolor sit amet, tollite fit manibus individuationis omnibus civitas ad quia.
</p>
</li>
<li class="one-fourth video">
<p>
<a href="http://www.youtube.com/watch?v=pyOyBVXDJ9Q&feature=relmfu" class="portfolio-item-preview" data-rel="prettyPhoto"><img src="~/Content/img/portfolio/portfolio-img-01.jpg" alt=" " width="210" height="145" class="portfolio-img pretty-box"/></a>
</p>
<h4><a href="#">Youtube Video</a></h4>
<p>
Lorem ipsum dolor sit amet, tollite fit manibus individuationis omnibus civitas ad quia.
</p>
</li>
<li class="one-fourth branding">
<p>
<a href="images/slideshow/slide-01.jpg" class="portfolio-item-preview" data-rel="prettyPhoto"><img src="~/Content/img/portfolio/portfolio-img-01.jpg" alt=" " width="210" height="145" class="portfolio-img pretty-box"/></a>
</p>
<h4><a href="#">Brand Everything</a></h4>
<p>
Lorem ipsum dolor sit amet, tollite fit manibus individuationis omnibus civitas ad quia.
</p>
</li>
<li class="one-fourth video">
<p>
<a href="http://www.youtube.com/watch?v=pyOyBVXDJ9Q&feature=relmfu" class="portfolio-item-preview" data-rel="prettyPhoto"><img src="~/Content/img/portfolio/portfolio-img-01.jpg" alt=" " width="210" height="145" class="portfolio-img pretty-box"/></a>
</p>
<h4><a href="#">Another Video</a></h4>
<p>
Lorem ipsum dolor sit amet, tollite fit manibus individuationis omnibus civitas ad quia.
</p>
</li>
</ul>
<!--END ul-->
</div>
<!--END portfolio-wrap-->
</div>
<div style="clear:both; height: 40px"></div>