0

我一直在尝试使用 Locomotive CMS 创建一个基本的投资组合,例如这个(www.tommyblue.it),我已经设法设置了所有需要的 gem 和所需的程序、mongodb、自制软件等......但是由于在网上找到像样的 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>
4

2 回答 2

1

您可能希望使用 twitter bootstrap 作为您的主题,因为它包含一个非常漂亮且轻量级的轮播,并创建一个带有文件和描述字段的照片模型,然后在您的页面中在机车中实现类似这样的东西:

{% 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-10T14:53:33.373 回答
0

我认为您应该仔细阅读这些内容
http://doc.locomotivecms.com/installation/getting_started

我也知道你此刻正在混合两件事:

  • CMS 被解释为内容管理系统,因此您将能够使用此系统管理您的内容;)

  • Ruby on rails 是您用来在所谓的服务器端和客户端构建网站外壳的主要 Web 开发工具。

所以先试着用 Ruby on Rails 做一个网站。然后将您的 CMS 系统添加到其中,这样就可以了。

于 2012-08-01T15:42:45.867 回答