使用机车CMS创建基本投资组合网站（Ruby on rails，haml）

我一直在尝试使用机车CMS创建基本投资组合（如www.tommyblue.it），我设法设置了所有需要的宝石和所需的程序，mongodb，自制软件等... 但是由于在网上找到像样的haml或机车CMS文档（对于一个新手）的极端困难，我坚持使用它。我的目标是在本月底之前运行应用程序，疯狂呃？使用机车CMS创建基本投资组合网站（Ruby on rails，haml）

任何帮助是真正的赞赏。

基本上这就是我卡与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>

来源

2012-08-01 aurinko

你见过Github上的[HAML文档]（https://github.com/haml/haml/blob/master/REFERENCE.md）吗？ – 2012-08-01 19:21:50

@皮特，是的，我看到了，虽然现在我试图使用液体模板语言实现这个模板，我有一个html主题，我想适应它在机车CMS内使用它，我尝试使用哈姆，但它didn没有工作... – aurinko 2012-08-02 08:06:25

请参阅上面的模板实现。 – aurinko 2012-08-02 08:21:58

我想你应该读这种东西是认真
http://doc.locomotivecms.com/installation/getting_started

我也有你在这个非常时刻，混合2对事物的线索：

CMS作为内容管理系统为此，你将能够管理你的解释康特nt与这个系统;）
Ruby on rails是您用来在所谓的服务器端和客户端建立您的网站的住房的主要Web开发工具。

因此，请先尝试在Ruby on Rails中制作网站。然后添加您的CMS系统，它应该这样做。

来源

2012-08-01 15:42:45 dennis

:)机车内容管理系统是准备全功能的内容管理系统用红宝石写在轨道中，只是试图发展我的网站与它www.locomotive.com btw我完全知道在轨道上的红宝石是什么（只是没有很多经验）以及什么是CMS确实，谢谢输入;）但是这并不真正回答我的问题。 – aurinko 2012-08-01 16:16:17

比现在好，我必须感谢你的信息有关机车真棒！ – dennis 2012-08-02 15:03:46

不客气;） – aurinko 2012-08-02 15:41:30

你可能想使用Twitter的引导作为主题，它包括一个相当不错的和lighweight旋转木马，并创建一个文件，并说明字段一个图片模型，然后在你的页面执行财产以后这样的机车：

{% for photo in contents.photos %} 
     <li> 
      <a href='{{ photo.fichier.url | resize: '800x600' }}' title="{{ photo.legende }}">{{ photo.fichier.url | image_tag }}</a> 
     </li> 
{% endfor %}

这是一个例子，不要只是复制和粘贴，因为我用这个基金会作为主题和照片的灯箱。让我知道你是否需要进一步的解释（我现在没有时间）。

来源

2012-08-10 14:53:33 Manuite

谢谢Manuite我其实尝试了twitter引导主题，虽然我有困难的时候想弄清楚如何编辑它，其次我喜欢使用上述布局，我仍然努力整合它进入机车。基本上我需要将液态模板语言混合到我的html布局中。事实是，我在网上发现了关于液体模板语言的文档太少，至少对我来说不够，所以我被困在集成过程中。 – aurinko 2012-08-16 08:07:06

使用机车CMS创建基本投资组合网站（Ruby on rails，haml）

回答

相关问题