[分享] flash 提示訊息 — 顯示位置問題解決辦法（圖解）

我們在 Rails 101 以及 Job Listing 兩個專案開始就把「flash 提示訊息」給裝上了，然而這個訊息，在有了美美的 Landing Page 之後，看起來竟是如此不堪入目 —每當登入、登出等提示訊息出現，便搞出一個大空隙。這篇分享文提供一個簡單的解決辦法供有需要的同學參考，如果覺得這篇教程有用、想給予鼓勵支持，歡迎至：我的作品頁面 點下「支持TA」。

  • 修改前的提示訊息，硬是插在導航欄跟首頁圖中間：

為什麼只要提示訊息出現就會有這個縫隙？讓我們回想一下，我們當初是把 flash 安插在哪。

  • app/views/layouts/application.html.erb
<!-- 前面代碼省略... -->

<body>
    <div class="container-fluid">
        <!-- 導航欄 -->
        <div class="row">
            <%= render "common/navbar" %>
        </div>

        <!-- flash 提示訊息 -->
        <%= render "common/flashes" %>

        <!-- 載入網頁內容 -->
        <%= yield %>
    </div>
  
        <!-- footer -->
    <%= render "common/footer" %>
</body>

<!-- 後面代碼省略... -->

是的，在設定網站的通用版面時，我們把「flash 提示訊息」放在「導航欄」跟「網頁內容」之間，也因此，只要一有提示訊息，自然從兩者中間冒出來。

如果你也看這個空隙不順眼，可以照著下方步驟作作看。（以下示範使用全棧營「Rails 實戰：招聘網站」的章節：「13 - 招聘网站 PK 魔改大赛」。）

Step 1. 解決礙眼的空隙

刪除 application.html.erb 中的 <%= render "common/flashes" %>。

  • app/views/layouts/application.html.erb
<body>
    <div class="container-fluid">
        <!-- 導航欄 -->
        <div class="row">
            <%= render "common/navbar" %>
        </div>
                
        <!-- 載入網頁內容 -->
        <%= yield %>
    </div>
            
        <!-- footer -->
    <%= render "common/footer" %>
</body>

接著，我們改把 <%= render "common/flashes" %> 改放在首頁（welcome/index.html.erb）試試看。

  • app/views/welcome/index.html.erb
<div class="jumbotron">
    <!-- 提示訊息放這 -->
    <%= render "common/flashes" %>
      
    <!-- Landing Page 首頁圖的標題、宣傳語、按鈕 -->
    <h1 class="title">18K Offer</h1>
    <p class="slogan">18K Offer 是一个提供18K薪水工作机会的求职网站。
    <br>
    我们希望藉由这个网站，能让大家找到且应征上高薪且优质的工作。
    <br>
    凭借自己的努力和天份也会变 Winner
    </p>
    <p class="lead"><a class="btn btn-lg btn-danger" href="/jobs">马上应征</a></p>
</div>

存檔後刷新。

位置雖然不太理想，但至少我們把空隙給解決了！現在 flash 提示訊息會蓋在首頁圖上，而不是把圖擠開。

Step 2. 移動 flash 提示訊息的位置

我們可以幫提示訊息新添一個屬性（class）來移動提示訊息的位置。具體作法是，先在剛剛的 index.html.erb 中，用 class 把 <%= render "common/flashes" %> 包起來。

  • app/views/welcome/index.html.erb
<div class="customed-flash" >
    <%= render "common/flashes" %>
</div>

最後，只要在 application.scss 檔中設定 margin。把 margin-top 設為負值（例如範例代碼設 -50px），便能將訊息向上移。

  • app/assets/stylesheets/application.scss
.customed-flash {
  margin: -50px 0px 21px 0px; // 會將 flash 訊息往上移。
}

刷新頁面，看看結果如何。

不但沒有白白一大塊空隙，訊息也貼著 navbar 顯示。完成！完成。

當然，目前這樣還有非常大的優化空間，同學可以再透過調整 class、修改 Bootstrap 樣式（例如到 吉米 和 瑞杏 介紹的 Bootwatch 下載簡單的 Bootstrap 模板），讓你的提示訊息變得更好看！

  • 運用在作品中便可以達到以下效果：

本次大賽我的網站主題是：Quick Hunt。作品持續優化中，歡迎投票或留言給予反饋。

目前進行中 & 過往 Logdown 分享：

Posted by Anndo

Comments

comments powered by Disqus