使用機車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）

回答

相關問題