我們在 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 分享:
[圖解] 幫網站實現多國語系支援
教你如何實現「使用者可自行切換語系」功能。[圖解] 如何參加魔改大賽(主講:Nic)
Nic 老師的直播筆記,針對老師「如何使用別人的 GitHub commits 貼代碼」附上詳細圖解。我們該如何想像 HTML/CSS?
大腦無法用未知解釋未知,清楚的圖解跟比喻帶你入門。