By

文章目录
  1. 1. 目标
  2. 2. 步骤：
    1. 2.1. Step 0:建立新分支
    2. 2.2. Step 4:将变更 commit 进去 git 里面。
  3. 3. 本章详解

大家好，本系列文章主要是对我参加全栈营JDstore魔改大赛作品「季风 & MONSOON」的复盘。由于本人也是新手，文章中一定有很多幼稚的错误或代码，希望大家帮忙指出，可反馈至我的邮箱kerzzi@outlook.com，我会持续完善本系列。非常感谢。
本系列是在全栈营JDstore教程基础之上进行魔改，本系列第1-11章节为全栈营JDstore教程，请在完成全栈营JDstore教程的基础上进行测试。

目标

建立静态页面

步骤：

Step 0:建立新分支

在终端执行

checkout -b story08```。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
### Step 2:
在终端执行```rails g controller static_pages about help```。
### Step 3:
打开_navbar.html.erb，完整代码如下
```ruby _navbar.html.erb
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <a class="navbar-brand" href="/"> MONSOON </a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
             <li class="active">
               <%= link_to("首页", products_path) %>
             </li>
             <li><%= link_to "分类浏览", "#" %></li>
             <li><%= link_to "帮助", static_pages_help_path %></li>
             <li><%= link_to "关于", static_pages_about_path %></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
               <li>
                   <%= link_to carts_path do  %>
                      购物车 <i class="fa fa-shopping-cart"> </i> ( <%= current_cart.products.count %> )
                   <% end %>
               </li>
                <% if !current_user %>
                  <li><a href="#" data-toggle="modal" data-target="#signup-modal">注册</a></li>
                  <li><a href="#" data-toggle="modal" data-target="#login-modal">登入</a></li>
                <% else %>
                  <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        Hi!, <%= current_user.email %>
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                         <% if current_user.admin? %>
                           <li>
                              <%= link_to("后台管理", "admin_products_path" ) %>
                           </li>
                           <li role="separator" class="divider"></li>
                           <li>
                              <%= link_to("我的订单", account_orders_path ) %>
                           </li>
                           <li>
                             <a href="#">我的收获地址</a>
                           </li>
                           <li>
                             <a href="#">我的收藏</a>
                           </li>
                           <li role="separator" class="divider"></li>
                           <li>
                             <a href="#">个人信息</a>
                           </li>
                           <li role="separator" class="divider"></li>
                         <% end %>
                        <li> <%= link_to(content_tag(:i, '登出', class: 'fa fa-sign-out'), destroy_user_session_path, method: :delete) %> </li>
                    </ul>
                  </li>
                <% end %>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>
<!-- 以下代码实现登入登出的弹窗效果 -->
<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
  <div class="modal-dialog" role="document">
    <div class="loginmodal-container">
       <h2>Log in</h2>
       <%= simple_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
         <div class="form-inputs">
           <%= f.input :email, required: false, autofocus: true %>
           <%= f.input :password, required: false %>
           <%= f.input :remember_me, as: :boolean if devise_mapping.rememberable? %>
         </div>
         <div class="form-actions">
           <%= f.button :submit, "Log in" %>
         </div>
       <% end %>
    </div>
  </div>
</div>
<div class="modal fade" id="signup-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
  <div class="modal-dialog">
    <div class="loginmodal-container">
      <h2>Sign up</h2>
        <%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
        <%= f.error_notification %>
        <div class="form-inputs">
          <%= f.input :email, required: true, autofocus: true %>
          <%= f.input :password, required: true, hint: ("#{@minimum_password_length} characters minimum" if @minimum_password_length) %>
          <%= f.input :password_confirmation, required: true %>
        </div>
        <div class="form-actions">
            <%= f.button :submit, "Sign up" %>
        </div>
      <% end %>
    </div>
  </div>
</div>

在navbar中我增加了不少链接，但是目前仅做占位用，按照Xdite老师的指导，先把路径和页面给开出来，后面我们再填充内容，进行美化。这些链接我这里用了多种写法，你可以选择你喜欢的使用。

Step 4:将变更 commit 进去 git 里面。

1
2
3
4
5
6
git add .
git commit -m "Create static pages"
git push origin story08
git checkout master
git merge story08
git push origin master

本章详解

努力更新中，上班族请理解。。。。。

文章目录
  1. 1. 目标
  2. 2. 步骤：
    1. 2.1. Step 0:建立新分支
    2. 2.2. Step 4:将变更 commit 进去 git 里面。
  3. 3. 本章详解