Locomotive CMS を使用して、このような基本的なポートフォリオ (www.tommyblue.it) を作成しようとしてきました。必要なすべての gem と必要なプログラム、mongodb、homebrew などをセットアップすることができました。適切な haml または Locomotive CMS のドキュメント (初心者向け) をオンラインで見つけるのが非常に困難であることに悩まされています。私の目標は、月末までにアプリを実行することです。
どんな助けでも本当に感謝しています。
基本的に、これは私がatmで立ち往生しているものです：
{{ 'js.js' | javascript_tag }}
{{ 'main.js' | javascript_tag }}
{{ 'custom.js' | javascript_tag }}
{{ 'jquery-1.7.1.min.js' | javascript_tag }}
{{ 'jquery.easing.1.3.js' | javascript_tag }}
{{ 'jquery.masonry.min.js' | javascript_tag }}
{{ 'jquery.prettyPhoto.js' | javascript_tag }}
{{ 'jquery.quicksand.js' | javascript_tag }}
{{ 'jquery.tweet.js' | javascript_tag }}
{{ 'modernizr.js' | javascript_tag }}
{{ 'style.css' | stylesheet_tag }}
{{ 'font.css' | stylesheet_tag }}
{{ 'prettyPhoto.css' | stylesheet_tag }}
{{ 'reset.css' | stylesheet_tag }}
{{ 'typography.css' | stylesheet_tag }}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
{{ Design.Diverso }}
</head>
<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie7"> <![endif]-->
<!--[if IE 8 ]> <body class="ie8"> <![endif]-->
<!--[if IE 9 ]> <body class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <body> <!--<![endif]-->
<div class="body-inside">
<!-- begin header -->
<header id="header">
<!-- begin slider -->
<div id="f_slider">
<div class="slider">
<ul>
<li>
<div class="row">
<h5>HELLO,</h5>
<h2>WELCOME TO <span class="h_black">NONAME</span></h2>
</div>
<div class="row">
<h4>
Enjoy our company For the design & production of all manner of digital creative.
</h4>
</div>
</li>
<li>
<div class="row text-center">
<h2>Enjoy <span class="h_black"> our </span>company </h2>
</div>
<div class="row one-half text-right">
<h4>Who we are</h4>
<div class="content_big">
Lorem ipsum dolor sit amet, consecadipiscing elit. Duis nec purus tellus, quis pulvinar tortor.
Lorem ipsum dolor sit amet, consecadipiscing elit.
</div>
</div>
<div class="row one-half last">
<h4>What we've done</h4>
<div class="content_big">
Lorem ipsum dolor sit amet, consecadipiscing elit. Duis nec purus tellus, quis pulvinar tortor.
Lorem ipsum dolor sit amet, <a href="#">consecadipiscing</a> elit.
</div>
</div>
<span class="clear"></span>
</li>
<li>
<div class="row one-half text-right">
<h2> we make </h2>
<h2> it <span class="h_black">better</span></h2>
</div>
<div class="row one-half last">
<h4>Lorem ipsum dolor</h4>
<div class="content_big">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar, odio eu consectetur porta, libero orci tempor felis, a adipiscing diam ipsum in enim. Donec hendrerit dictum quam, a tincidunt neque vulputate nec.
<div>
{{ 'html5_logo.png' | theme_image_tag }}
{{ 'css3_logo.png' | theme_image_tag }}
{{ 'jquery_logo.png' | theme_image_tag }}
</div>
<span class="clear"></span>
</li>
</ul>
</div>
</div>
<!-- end slider -->
<!-- begin navigation -->
<nav id="top_menu">
<div class="inside">
<!-- logo -->
<a href="#" class="logo">
{{ 'logo.png' | theme_image_tag }}
</a>
<!-- begin menu -->
<ul class="menu">
<li>
<a href="index.html">
Home
</a>
</li>
<li>
<a href="works.html">
Works
</a>
</li>
<li>
<a href="blog.html">
Blog
</a>
<ul>
<li><a href="blog_post.html" title="Single Post">Single Post</a></li>
</ul>
</li>
<li>
<a href="services.html">
Services
</a>
</li>
<li>
<a href="about.html">About Us</a>
</li>
<li>
<a href="#">
Features
</a>
<!-- begin sub menu -->
<ul>
<li>
<a href="typography.html">
Typography
</a>
</li>
<li>
<a href="columns.html">
Columns
</a>
</li>
<li>
<a href="elements.html">
Elements
</a>
</li>
<li>
<a href="team.html">
Our Team
</a>
</li>
</ul>
</li>
<li>
<a href="contact.html">
Contact
</a>
</li>
</ul>
<!-- end menu -->
</div>
</nav>
<!-- end navigation -->
</header>
<!-- end header -->
<!-- begin main -->
<article id="main">
<!-- Begin ajax menu -->
<nav id="to-top-menu">
<span></span>
</nav>
<!-- end ajax menu -->
<ul class="fast_link">
<li class="">
<div class="link_wrap" data-link="works">
<div class="link_title">
<h2>OUR WORKS</h2>
<p>Recent Projects</p>
</div>
{{ 'a_works.png' | theme_image_tag }}
{{ 'a_works_hover.png' | theme_image_tag }}>
<span class="call_ajax"></span>
</div>
</li>
<li class="">
<div class="link_wrap" data-link="blog">
<div class="link_title">
<h2>BLOG</h2>
<p>From the Blog</p>
</div>
{{ 'a_blog.png' | theme_image_tag }}
{{ 'a_blog_hover.png' | theme_image_tag }}
<span class="call_ajax"></span>
</div>
</li>
<li class="">
<div class="link_wrap" data-link="services">
<div class="link_title">
<h2>SERVICES</h2>
<p>What we do</p>
</div>
{{ 'a_service.png' | theme_image_tag }}
{{ 'a_service_hover.png' | theme_image_tag }}
<span class="call_ajax"></span>
</div>
</li>
<li class="">
<div class="link_wrap" data-link="team">
<div class="link_title">
<h2>THE TEAM</h2>
<p>Meat the team </p>
</div>
{{ 'a_team.png' | theme_image_tag }}
{{ 'a_team_hover.png' | theme_image_tag }}
<span class="call_ajax"></span>
</div>
</li>
<li class="last">
<div class="link_wrap" data-link="contact">
<div class="link_title">
<h2>CONTACT</h2>
<p>Get in touch</p>
</div>
{{ 'a_contact.png' | theme_image_tag }}
{{ 'a_contact_hover.png' | theme_image_tag }}
<span class="call_ajax"></span>
</div>
</li>
</ul>
<span class="clear"></span>
<!-- home page title -->
<nav class="page_title displaynone">
<h2>
<span class="title">PLACE SELECT A PAGE</span>
<span class="loading_link"></span>
</h2>
</nav>
<!-- callback ajax content -->
<section id="content">
</section>
<span class="clear"></span>
</article>
<!-- end main -->
</div>
<!-- end body inside -->
<!-- begin footer -->
<footer id="footer">
<div class="inside">
<div class="footer-widget">
<div class="one-third">
<h2>Follow Us</h2>
<p>
Omnes enim peccaverunt et egent gloriam Dei. In principio creavit Deus caelum et terram.
</p>
<ul class="footer-socials">
<li class="rss"><a href="#" title="Rss"></a></li>
<li class="twitter"><a href="#" title="Twitter"></a></li>
<li class="facebook"><a href="#" title="Facebook"></a></li>
<li class="dribbble"><a href="#" title="Dribbble"></a></li>
<li class="vimeo"><a href="#" title="Vimeo"></a></li>
<li class="skype"><a href="#" title="Skype"></a></li>
</ul>
<span class="clear"></span>
</div>
<div class="one-third">
<h2>About Us</h2>
<p>{{ 'logo.png' | theme_image_tag }}Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar, odio eu consectetur porta, libero orci tempor felis, a adipiscing diam ipsum in enim. Donec hendrerit dictum quam, a tincidunt neque vulputate nec. Proin nec sollicitudin augue. Donec hendrerit</p>
</div>
<div class="one-third last">
<h2>Join our newsletter</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar, odio eu consectetur porta, libero orci tempor felis.</p>
<form id="form_newslatter">
<input type="text" name="newslatter" id="newslatter" placeholder="Email Address..." />
</form>
</div>
<span class="clear"></span>
</div>
<div class="footer-bottom">
<span class="copyright">© 2012 · AGT NoName ( <a href="http://validator.w3.org/check?uri=http://demo.agtheme.com/noname" title="Valid html5"> Valid html5 </a> ) All Rights Reserved</span>
<nav id="footer_menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Works</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</div>
</footer>
<!-- end footer -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
</body>
</html>