avatarMike Huang

Free AI web copilot to create summaries, insights and extended knowledge, download it at here

7884

Abstract

/cdn-images-1.readmedium.com/v2/resize:fit:800/1*1tHkgucReVim6B-O4CW1CQ.gif"><figcaption></figcaption></figure><p id="c942">📍 專案中使用的側邊導覽列：</p><ul><li>在 <code><ul></code> 加上 <code>.sidenav</code> 設定為側邊導覽列</li><li>在 <code><ul></code> 加上 <code>#side-nav</code>，這個 id 必須要和漢堡鈕上設定的 <code>data-target</code> 一致，才能對應到正確的漢堡按鈕</li><li>在列表中使用 <code>.divider</code> 創造導覽按鈕和下方外部連結間的分隔線</li></ul> <figure id="58c6"> <div> <div>

            <iframe class="gist-iframe" src="/gist/smallpaes/24e83ab67f60f305360cf326fabc8462.js" allowfullscreen="" frameborder="0" height="undefined" width="undefined">
          </div>
        </div>
    </figure></iframe></div></div></figure><p id="7f57">📍 初始化和設定選項</p><ul><li><code>edge</code> 選項：設定側邊導覽列從右邊展開</li><li><code>preventScrolling</code> 選項：設定側邊導覽列在開啟時，頁面仍可滑動</li></ul>
    <figure id="9f01">
        <div>
          <div>
            
            <iframe class="gist-iframe" src="/gist/smallpaes/ec824e4d681bf35b33ecd5d5034ad6d1.js" allowfullscreen="" frameborder="0" height="undefined" width="undefined">
          </div>
        </div>
    </figure></iframe></div></div></figure><p id="5706"><b>Part 3 全螢幕照片輪播（Fullscreen Slider）</b></p><p id="c117">Materialize 針對照片輪播（Slider/Carousel）提供不少客製化的地方，例如：可以選擇是否全螢幕、增加轉場效果的照片標題等。詳細可以參考這篇 👉<a href="https://materializecss.com/media.html#slider">官方文件</a></p><figure id="b008"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*nPMQXC0gf55Bh4tkNoWWHQ.gif"><figcaption></figcaption></figure><p id="bce5">📍 在專案中製作的全螢幕照片輪播中，置放兩張含有轉場效果標題的照片：</p><ul><li>在 <code>&lt;div&gt;</code> 加上 <code>.slider</code> 設定為照片輪播</li><li>在 <code>&lt;div&gt;</code>加上 <code>.fullscreen</code> 設定為全螢幕的照片輪播</li><li>在每張照片 <code>&lt;img&gt;</code> 後放入 <code>.caption</code> 的 <div> 元素，其中可以寫入想要呈現在照片上的標題</div></li><li>照片標題分別透過 <code>.canter-align</code> 和 <code>.left-align</code> 置中及置左，並各自帶有轉場效果</li></ul>
    <figure id="9a82">
        <div>
          <div>
            
            <iframe class="gist-iframe" src="/gist/smallpaes/c0fbd37a06cc7bb7cd4e046b4f82507d.js" allowfullscreen="" frameborder="0" height="undefined" width="undefined">
          </div>
        </div>
    </figure></iframe></div></div></figure><p id="df45">📍 初始化和設定選項</p><ul><li><code>indicators</code> 選項：設定照片下方不顯示操控的圓形按鈕</li><li><code>interval</code> 選項：設定每張照片播放五秒</li></ul>
    <figure id="894a">
        <div>
          <div>
            
            <iframe class="gist-iframe" src="/gist/smallpaes/4a32ea2f2a32e59c9a302c2df0b690f8.js" allowfullscreen="" frameborder="0" height="undefined" width="undefined">
          </div>
        </div>
    </figure></iframe></div></div></figure><h2 id="20f8">關於我 About Me</h2><figure id="e39b"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*52WRLGVETTKyH-KAeI9hUQ.png"><figcaption></figcaption></figure><p id="c7ca">📍 在這個區塊透過標題簡短自我介紹，並使用 Card 展示學習網頁開發三個不同的階段：</p><ul><li>在 <code>&lt;section&gt;</code> 上加入 <code>.section</code> 可以讓這個區塊的上方和下方增加一些 <code>padding</code> 。詳細可以參考 👉<a href="https://materializecss.com/grid.html#grid-layouts">官方文件</a></li><li>在 <code>&lt;section&gt;</code> 上加入 <code>.scrollspy</code> 和一個 id 名稱可以讓使用者在側邊導覽列點擊 About Me 時，滑順的被導引到此區外。詳細可以參考 👉<a href="https://materializecss.com/scrollspy.html">官方文件</a></li><li>在 <code>&lt;div&gt;</code> 上加入 <code>.card</code> 設定為 Card； Card 上的圖片和標題分別使用 <code>.card-image</code> 和 <code>.card-title</code> 就能擁有基本的尺寸和樣式設定。詳細可以參考 👉<a href="https://materializecss.com/cards.html">官方文件</a></li><li><code>.col</code> 是使用了 Materialize 的 Grid System：<code>.s12</code> 代表小尺寸螢幕佔 12 欄位、<code>.m4</code> 代表中尺寸以上螢幕佔 4 欄位。詳細可以參考 👉<a href="https://materializecss.com/grid.html">官方文件</a></li></ul>
    <figure id="2f97">
        <div>
          <div>
            
            <iframe class="gist-iframe" src="/gist/smallpaes/5511fe196a5688d026876157b8aca9db.js" allowfullscreen="" frameborder="0" height="undefined" width="undefined">
          </div>
        </div>
    </figure></iframe></div></div></figure><p id="3696">📍 初始化和設定選項</p>
    <figure id="c2f0">
        <div>
          <div>
            
            <iframe class="gist-iframe" src="/gist/smallpaes/8e7a28678c8cb4cb1e2106c8ec86a773.js" allowfullscreen="" frameborder="0" height="undefined" width="undefined">
          </div>
        </div>
    </figure></iframe></div></div></figure><h2 id="33c2">技能 Skills</h2><p id="f29f"><b>Part 1 技能展示</b></p><figure id="1ce0"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*px-nK572IUaOIkf2HN-7Rg.gif"><figcaption></figcaption></figure><p id="75a8">📍 在這個區塊將技能分成三個類型，以輪播（Carousel）分別展示：</p><ul><li>Materialize 的輪播（Carousel）不僅可以置放圖片，也可單純置放文字內容，輪播效果和樣式也有非常多選擇。詳細可以參考 👉<a href="https://materializecss.com/carousel.html">官方文件</a></li><li>在 <code>&lt;div&gt;</code> 上加入 <code>.carousel</code> 設定為輪播；加入<code>.carousel-slider</code>將圖片或文字內容寬度設定為 100%。</li><li>透過一個包含 <code>.carousel-item</code> 的 <code>&lt;div&gt;</code> 可以分別包裝不同的輪播內容</li></ul>
    <figure id="a0bb">
        <div>
          <div>
            
            <iframe class="gist-iframe" src="/gist/smallpaes/5eaa5228ab0d284c5cf58eedaf596cfb.js" allowfullscreen="" frameborder="0" height="undefined" width="undefined">
          </div>
        </div>
    </figure></iframe></div></div></figure><p id="d3d6">📍 初始化和設定選項</p><ul><li><code>fullWidth</code> 選項：設定輪播寬度為 100%</li><li><code>indicators</code> 選項：顯示輪播下方的控制圓點</li></ul>
    <figure id="0812">
        <div>
          <div>
            
            <iframe class="gist-iframe" src="/gist/smallpaes/b9ee200a133d5c921193361e6220b9a5.js" allowfullscreen="" frameborder="0" height="undefined" width="undefined">
          </div>
        </div>
    </figure></iframe></div></div></figure><p id="fecf"><b>Part 2 背景滑動圖片（Parallax）</b></p><figure id="51a4"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*e0V-fg1NYMvWE9XUyzcfPQ.gif"><figcaption></figcaption></figure><p id="fb66">📍 在這個區塊的背景圖片是透過 Parallax 來創造出頁面滑動時「背景圖和頁面本身移動的速度好像不同」的效果。詳細可以參考 👉<a href="https://materializecss.com/parallax.html">官方文件</a></p><ul><li>在 Skills 區塊 <code>&lt;section&gt;</code>上加入<code>.parallax-container</code>；在包覆背景圖片的<code>&lt;div&gt;</code> 上加入<code>.parallax-container</code>設定效果</li></ul>
    <figure id="6982">
        <div>
          <div>
            
            <iframe class="gist-iframe" src="/gist/smallpaes/e12095092c13c4d2d6762b74cffac1dd.js" allowfullscreen="" frameborder="0" height="undefined" width="undefined">
          </div>
        </div>
    </figure></iframe></div></div></figure><p id="02db">📍 初始化和設定選項</p>
    <figure id="b59b">
        <div>
          <div>
            
            <iframe class="gist-iframe" src="/gist/smallpaes/722bd9f65991c4f04382d695b6f572cb.js" allowfullscreen="" frameborder="0" height="undefined" width="undefined">
          </div>
        </div>
    </figure></iframe></div></div></figure><h2 id="a4ab">近期專案 Recent Project</h2><figure id="3968"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*GzCI4wwdzueE7DRymhtsUA.gif"><figcaption></figcaption></figure><p id="8284">📍在這個區塊左側透過 Card 來展示近期幾個實作專案；透過 Card Reveal 讓使用者在點擊作品後，能看到作品的技術說明與作品相關連結：</p><ul><li>透過 <code>.card</code> 設定元素為 Card；<code>.card-image</code> 設定為 Card 圖片。</li><li>在 Card 裡設定一個<code>.card-reveal</code>區塊，預設是隱藏起來的，一旦使用者觸發，將會顯示更多專案使用到的技術及連結。</li><li>在 Card 上加入 <code>.sticky-action</code> 讓 Card Reveal 在開啟時，不會蓋住下方的標題。</li><li>將 <code>.activator</code> 放置在圖片、下方標題等元素上，讓使用者在點擊該元素時，能開啟 Card Reveal 看到「更多資訊」。詳細可以參考 👉<a href="https://materializecss.com/cards.html#reveal">官方文件</a></li><li>在 Card 下方標題右

Options

側使用 Badge 來呈現該作品是什麼類型的應用程式：在 <code><span></code> 加入 <code>.badge</code> 設定、<code>.new</code> 能為 Badge 加上背景色、<code>data-badge-caption</code>能客製化 Badge 顯示的訊息。詳細可以參考 👉<a href="https://materializecss.com/badges.html">官方文件</a></li></ul> <figure id="c0f9"> <div> <div>

            <iframe class="gist-iframe" src="/gist/smallpaes/9c594fa0b1446a33fa187da89efe13ff.js" allowfullscreen="" frameborder="0" height="undefined" width="undefined">
          </div>
        </div>
    </figure></iframe></div></div></figure><h2 id="6612">了解更多 Discover More</h2><figure id="95e9"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*eTvl6zpTPgSSbhHeVeE76A.png"><figcaption></figcaption></figure><p id="ae4c">📍 此區塊透過兩個按鈕提供外部連結到其他作品與文章：</p><ul><li>背景圖片使用 Parallax 效果</li><li>按鈕添加 <code>.waves-effect</code> 讓使用者在點擊時背景有波浪效果；添加 <code>.waves-light</code> 設定波浪為白色</li><li>Medium 的背景透過 <code>.orange</code> 設定為橘色（色碼：<code>#ff9800</code>）、<code>.darken-4</code> 設定橘色要深四個階級（如下圖）。詳細可以參考 👉<a href="https://materializecss.com/color.html">官方文件</a></li><li>標題和按鈕區塊加上 .white-text 將文字設定為白色</li></ul><div id="4576"><pre>😃 Materialize 中顏色設定很彈性</pre></div><div id="8dcf"><pre><span class="hljs-number">1.</span> 背景顏色的調配通常是先有「一個基底色」，再透過 lighten / darkern 變化深淺

<span class="hljs-number">2.</span> 文字的基底色設定：基底色＋「-<span class="hljs-built_in">text</span>」，例如：.orange-<span class="hljs-built_in">text</span> <span class="hljs-number">3.</span> 文字的深淺變化設定：「<span class="hljs-built_in">text</span>-」+ lignten / darken，例如：.<span class="hljs-built_in">text</span>-lighten<span class="hljs-number">-4</span></pre></div><figure id="46b4"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*7hs-xvyv662qdGEZP3nLBA.png"><figcaption></figcaption></figure> <figure id="3e90"> <div> <div>

            <iframe class="gist-iframe" src="/gist/smallpaes/aef83ed9f5732ce00c273521f9340c27.js" allowfullscreen="" frameborder="0" height="undefined" width="undefined">
          </div>
        </div>
    </figure></iframe></div></div></figure><h2 id="c4fe">聯繫 Contact</h2><figure id="8daf"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*hzWjbGncHB3NEYAi3TG7QQ.gif"><figcaption></figcaption></figure><p id="a3c0">📍 此區塊將設計一個表單，讓使用者在填寫送出後，將表單內容寄送到我的信箱。表單使用的詳細說明可以參考 👉<a href="https://materializecss.com/text-inputs.html">官方文件</a></p><ul><li>表單的 <code>&lt;input&gt;</code> 和 <code>&lt;label&gt;</code> 需要透過帶有 <code>.input-field</code> 的 <code>&lt;div&gt;</code> 元素包覆，提供欄位樣式和功能上的設定</li><li>在 <code>&lt;input&gt;</code> 上加入<code>.validate</code>會偵測該欄位是否通過驗證，並根據結果自動加上 <code>.valid</code> 或 <code>.invalid</code>，同時會呈現綠色或紅色的樣式</li><li>在欄位下方加上帶有 <code>.helper-text</code> 的<code>&lt;span&gt;</code> 為該欄位增加輔助訊息，並透過 <code>data-error</code> 設定該欄位未通過驗證時的訊息</li><li>在欄位中前加上帶有 <code>.prefix</code> 的圖形，讓該欄位左側顯示特定的圖形</li><li>Materialize 提供了許多圖形，使用時，需在 <code>&lt;i&gt;</code> 元素加上 <code>.material-icons</code> 並寫入圖形的名稱，例如：<code>&lt;i class="material-icons"&gt;add&lt;/i&gt;</code>。詳細圖形列表可以參考 👉<a href="https://materializecss.com/icons.html">官方文件</a></li><li><code>&lt;textarea&gt;</code> 必須加上 <code>.materialize-textarea</code> 才會擁有如 <code>input</code> 欄位的樣式和效果</li></ul>
    <figure id="cf1d">
        <div>
          <div>
            
            <iframe class="gist-iframe" src="/gist/smallpaes/0f03a5dc36cec3edc3ebc52491985f7d.js" allowfullscreen="" frameborder="0" height="undefined" width="undefined">
          </div>
        </div>
    </figure></iframe></div></div></figure><h2 id="7ee7">頁腳 Footer</h2><figure id="1870"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*J4zi6xLeyH2eBv1nyETzCw.png"><figcaption></figcaption></figure><p id="898c">📍 頁腳區塊將放上我的相關連結與版權資訊</p><ul><li>在<code>&lt;footer&gt;</code>上加入 <code>.page-footer</code> 增添頁腳樣式</li><li>由於預設樣式中，背景色為粉紅色，因此透過 <code>.grey</code> 和 <code>.lighten-1</code> 改為灰色系背景</li><li>版權區塊可以透過 <code>.footer-copyright</code> 快速增添樣式，例如：背景色將自動加深</li></ul>
    <figure id="b229">
        <div>
          <div>
            
            <iframe class="gist-iframe" src="/gist/smallpaes/34788dafc97eff2e3c2f3c5ef685b802.js" allowfullscreen="" frameborder="0" height="undefined" width="undefined">
          </div>
        </div>
    </figure></iframe></div></div></figure><h2 id="8282">置底連結按鈕 Floating Action Button</h2><figure id="7c34"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*Oy0mzz5jcTr4ya7m7xB-qw.gif"><figcaption></figcaption></figure><p id="a347">📍 置底連結按鈕是使用 Floating Action Button，此按鈕將被固定放置在螢幕右下角的位置，當滑鼠點擊此按鈕時，將會顯示隱藏的按鈕。顯示隱藏按鈕的樣式和效果蠻多種的，詳細說明可以參考 👉<a href="https://materializecss.com/floating-action-button.html">官方文件</a></p><ul><li>透過一個帶有 <code>.fixed-action-btn</code> 的 <code>&lt;div&gt;</code> 包覆所有按鈕</li><li>在同一個 <code>&lt;div&gt;</code> 上加入 <code>.toolbar</code> 讓隱藏按鈕顯示的效果，是展開在螢幕最下方。詳細說明可以參考 👉<a href="https://materializecss.com/floating-action-button.html#toolbar">官方文件</a></li><li>置底顯示的單一按鈕需加上 <code>.btn-floating</code></li><li>置底顯示的單一按鈕透過 <code>.hide-on-med-and-up</code> 設定只在小尺寸螢幕顯示</li><li>透過撰寫 JavaScript 讓置底按鈕在頁面向下滑行一段距離後才顯示，並透過使用 <code>.scale-transition</code> 和 <code>.scale-out</code> 增加顯示按鈕時，縮放的轉場效果。詳細說明可以參考 👉<a href="https://materializecss.com/css-transitions.html">官方文件</a></li></ul>
    <figure id="1264">
        <div>
          <div>
            
            <iframe class="gist-iframe" src="/gist/smallpaes/874c54fd55edcd9e16fe5523dfc4b543.js" allowfullscreen="" frameborder="0" height="undefined" width="undefined">
          </div>
        </div>
    </figure></iframe></div></div></figure><p id="4d69">📍 初始化和設定選項</p><ul><li><code>toolbarEnabled</code> 選項：設定顯示隱藏按鈕的效果是在螢幕最下方展開</li></ul>
    <figure id="caf7">
        <div>
          <div>
            
            <iframe class="gist-iframe" src="/gist/smallpaes/378705dddbd4853e7b6f3f7667606280.js" allowfullscreen="" frameborder="0" height="undefined" width="undefined">
          </div>
        </div>
    </figure></iframe></div></div></figure><h1 id="2e23">個人頁面成果</h1><h2 id="387a">GitHub 程式碼 👇</h2><div id="da5e" class="link-block">
      <a href="https://github.com/smallpaes/portfolio">
        <div>
          <div>
            <h2>Mike’s Portfolio</h2>
            <div><h3>點擊前往 GitHub 查看個人頁面程式碼</h3></div>
            <div><p>github.com</p></div>
          </div>
          <div>
            <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/0*y4GAmBfDSfP_ahga)"></div>
          </div>
        </div>
      </a>
    </div><h2 id="3d05">個人頁面 👇</h2><p id="2ceb"><a href="https://smallpaes.github.io/portfolio/">https://smallpaes.github.io/portfolio/</a></p><figure id="c71b"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*VBDjOiTw8zwM5FBXouM4aQ.png"><figcaption></figcaption></figure><h1 id="5bd1">心得</h1><p id="cc52">自從使用 Bootstrap 以來，都還沒機會接觸這類型的其他前端框架，這次很開心認識了 Materialize，甚至在透過資料查找和 <a href="https://www.udemy.com/materialize-css-from-scratch-with-5-projects/">Udemy 上的課程</a>自學後，直接實作了個人頁面，真的是蠻爽快的！</p><p id="42d0">在接觸新的框架時，總是需要花點時間適應 — 尤其 Materialize 提供開發者很多能客製化的地方，因此，更需要花時間去了解其運作方式，才能依照自己的需求順利地套用在專案中，甚至發揮自己的魔法，做出許多客製化的效果。</p><p id="9f9a">使用過 Bootstrap 再來接觸 Materialize 的確能較快上手 — 大方向的使用和操作方式都蠻相似的，兩個框架也都非常注重 RWD 的網頁設計。然而，兩者的強項還是有些差異的，這次在使用完 Materialize 後，能特別感受到它在「使用者體驗和互動」上的設計，有更多的著墨和用心、在許多元件和功能上，也讓開發者有不少客製化的彈性（例如顏色的調配）、以 Google 提出和使用的 Material Design 作為核心也它是很大的優勢之一。</p><p id="c74e">雖然 Materialize 很年輕，社群相對 Bootstrap 來說還沒有這麼廣，但其本身帶有非常多的優點，在近期也有越來越多的討論度，很期待它接下來的發展，也期待自己未來能透過 Materialize 有更多發揮。</p><p id="47cf">在接觸新的框架時，都需要花點時間適應 — 尤其 Materialize 提供開發者很多能客製化的地方，更需要花時間了解運作方式，才能依照自己的需求順利地套用在專案中，甚至發揮自己的魔法，做出許多客製化的效果！</p></article></body>

[筆記] 從零學習 Materialize 打造個人頁面

使用 Bootstrap 到接觸 Materialize

從接觸 Bootstrap 到現在至少半年的時間，大大小小的專案不時都會透過這個前端框架來完成網路應用程式的前端切版。的確很多開發者會使用 Bootstrap 就是因為能快速打造一個前端樣板，但這也可能導致一個現象 — 不少網站看起來都很相似。這現象沒有所謂的好壞，但在製作自己的作品時，總是期許自己能以「好的切版」為目標，而不是求快 — 有了這種想法後，在套用 Bootstrap 時，就更偏向是「借助」他的優勢，完成自己理想的切版，而非一塵不變地直接套用現成的版型和功能。

最近在逛 GitHub 時，不小心看到 Materialize 這個前端框架，發現在整體的設計風格、使用者體驗、功能等都蠻吸引我想去多了解一番的，因此決定來自學一下，順便借助這個框架來做個「個人頁面」好了 😃

由於功能太多，官方文件大部分也都撰寫的蠻清楚的，因此本篇就簡單介紹 Materiallize、說明設定到使用的流程、展示這次專案各部分的成果與紀錄使用上的重點！

Materialize & Material Design

Material Design 是 Google 在 2014 年所提出的設計語言，結合了成功的設計原則、創新和科技，志在藉由一個設計系統，讓所有用戶在使用 Google 所有的產品和平台時能有一致的用戶體驗 — Materialize 是一個前端 CSS 框架，它的開發基本上就是根據這套設計語言。因此在使用時，就會發現許多熟悉的面孔，例如：用過手機版的 Google Map App 或 Gmail App 的朋友應該就會覺得下圖的 FAB 按鈕特別熟悉啊！（ App 右下角很常出現，也是個方便的按鈕設計）

Materialize 優點

的確說到最多開發者使用的 CSS 框架非 Bootstrap 莫屬，但從 GitHub 觀察Materialize 也是前三名熱門的 CSS 框架，使用起來的優點：

  1. 讓專案能實踐 Material Design 設計風格
  2. 響應式的網頁設計
  3. 搭配互動性的 CSS 元件和 JavaScript 創造出好的使用者體驗和設計 — 包含動畫和轉場效果
  4. 提供開發者很大的客製化空間
  5. 輕量型的框架：29kb

個人頁面

在簡單認識 Materialize 的背景後，開始來介紹和製作個人頁面。個人頁面包含以下幾個區塊：

  • 首頁 Home：上方和側方導覽列及封面照片輪播
  • 關於我 About Me：簡短自我介紹並附上學習歷程
  • 技能 Skills：展示目前在網頁開發所培養的技能
  • 近期專案 Recent Project：展示近期幾個實作專案與專案資訊
  • 了解更多 Discover More：提供外部連結到其他作品與文章
  • 聯繫 Contact：提供留言的表單（送出後將寄送至我的信箱）
  • 頁腳 Footer：我的相關連結與版權資訊
  • 置底連結按鈕 Floating Action Button：我的相關連結

設定到使用 Materialize

要在專案中設定並使用 Materialize 大致需要經過五個步驟

在 HTML 檔案中載入 Materialize

  1. 下載 Materialize CSS & Javascript 檔案 / 使用 CDN
  2. 載入 Materialize 字型和圖形樣式
  3. 載入 jQuery （Optional）

認識文件架構

Materialize 提供的樣式、元件、功能等非常多元，初次學習和使用可能需要花一些時間翻找和適應文件。以下大致簡述四個部分的內容並舉幾個功能：

CSS

  • 找尋有關 CSS 樣式：Color 顏色、Shadow 陰影、Grid 排版、Table 表格
  • 找尋有關 CSS 動畫：Pulse 按鈕心跳效果、Transition 元素縮放效果

Components

找尋實用的元件：Buttons 按鈕、Icons 圖形、Navbar 導覽列

JavaScript

找尋透過 JavaScript 產生互動性的元件或效果：Waves 按鈕波浪效果

Forms

尋找表單相關的元件、功能、效果、樣式

選定及使用元件

在文件中找到需要的元件、樣式、功能後，就是依照文件撰寫符合規格的 HTML 或 CSS。例如：要製作按鈕時，先參考完該元件的說明，再參照下方 language-markup 中的程式碼範例，製作出自己理想樣式的按鈕。

初始化及相關設定

  1. 初始化

在使用 Materialize 的許多效果和功能時，背後是需要借助 JavaScript 來達成的，因此需要根據官方文件的說明，透過 jQuery 或 JavaScript 進行初始化。

以下範例中是讓用戶在點擊圖片時，滑順的放大並置中該圖片（位置：JavaScript -> Media -> Material Box）要產生此效果，需要在專案中，根據下方 Initialization 區塊的程式碼初始化

📍 在程式碼中實際初始化 Material Box — 以 jQuery 為例

2. 元件設定

選定要使用的元件並初始化後，元件其實就已經可以正常呈現，基本的效果也都能順利運作。然而，Materiallize 在這方面還提供開發者客製化的選項 Options，讓元件的運用和效果的設定可以有更多的彈性。

延續上面 Material Box 的範例，我們可以發現在文件中該元件頁面下方的 Options 區塊，提供了不少選項（如下圖）。例如可以透過 inDuration 和 outDuration 更改照片縮放的轉場時間；透過 onOpenEnd 甚至可以設定在 Material Box 開啟完成後，要執行的函式，相當便利。

📍 將所有要客製化的設定放在 options 物件上帶入初始化的函式中

使用屬性

完成元件的設定和初始化後，元件上將帶有特定的屬性可以拿來運用，以下範例延續上面 Material Box ，並使用onOpenEnd選項，在 Material Box 開啟完成後，印出該元件讓我們來觀察它帶有的屬性有哪些：

許多的屬性其實在文件中該元件頁面的 Properties 區塊都能找得到（如下圖）。例如：originalWidth 能找到該圖片原始寬度；options 能找到初始化時設定了哪些選項。

製作個人頁面

以下將依照頁面上不同的區塊做展示與重點說明

首頁 Home

Part 1 上方導覽列（Navbar）

首先來製作上方導覽列， 導覽列大部分包含 logo 和連結。Materialize 提供非常多樣式和變化，詳細可以參考這篇 👉官方文件。

📍 在專案中使用的上方導覽列中，為了讓畫面看起來更簡單和乾淨，只放了一個 logo 和右方漢堡按鈕（用來觸發側邊導覽列）：

  • 透過在 nav 的父元素加上 .navbar-fixed 讓導覽列可以固定置頂
  • .container 的預設寬度為 70% 的螢幕尺寸寬，因此用來包覆 logo 和漢堡按鈕時，可以讓左右兩邊保留一些空間，視覺上較舒適
  • 在 logo 加上 .brand-logo 讓 logo 在中小尺寸的螢幕置中，大尺寸以上螢幕則置左
  • 漢堡鈕的顯示，是需要在 <a> 元素上放入 .sidenav-trigger，它的預設是在中小螢幕尺寸時才顯示。但透過 .show-on-medium-and-up 能讓漢堡按鈕得以在大尺寸以上的螢幕也顯示。

Part 2 側邊導覽列（Sidenav）

接著來製作點擊漢堡按鈕會開啟的側邊導覽列，大致上是透過一個 unordered list（無序列表）達成。當然還可以置入照片、分隔線、下拉式選單等樣式和功能，詳細可以參考這篇 👉官方文件

📍 專案中使用的側邊導覽列：

  • 在 <ul> 加上 .sidenav 設定為側邊導覽列
  • 在 <ul> 加上 #side-nav，這個 id 必須要和漢堡鈕上設定的 data-target 一致，才能對應到正確的漢堡按鈕
  • 在列表中使用 .divider 創造導覽按鈕和下方外部連結間的分隔線

📍 初始化和設定選項

  • edge 選項：設定側邊導覽列從右邊展開
  • preventScrolling 選項：設定側邊導覽列在開啟時，頁面仍可滑動

Part 3 全螢幕照片輪播（Fullscreen Slider）

Materialize 針對照片輪播（Slider/Carousel）提供不少客製化的地方，例如：可以選擇是否全螢幕、增加轉場效果的照片標題等。詳細可以參考這篇 👉官方文件

📍 在專案中製作的全螢幕照片輪播中，置放兩張含有轉場效果標題的照片：

  • 在 <div> 加上 .slider 設定為照片輪播
  • 在 <div>加上 .fullscreen 設定為全螢幕的照片輪播
  • 在每張照片 <img> 後放入 .caption 的
    元素，其中可以寫入想要呈現在照片上的標題
  • 照片標題分別透過 .canter-align 和 .left-align 置中及置左，並各自帶有轉場效果

📍 初始化和設定選項

  • indicators 選項：設定照片下方不顯示操控的圓形按鈕
  • interval 選項：設定每張照片播放五秒

關於我 About Me

📍 在這個區塊透過標題簡短自我介紹，並使用 Card 展示學習網頁開發三個不同的階段：

  • 在 <section> 上加入 .section 可以讓這個區塊的上方和下方增加一些 padding 。詳細可以參考 👉官方文件
  • 在 <section> 上加入 .scrollspy 和一個 id 名稱可以讓使用者在側邊導覽列點擊 About Me 時，滑順的被導引到此區外。詳細可以參考 👉官方文件
  • 在 <div> 上加入 .card 設定為 Card； Card 上的圖片和標題分別使用 .card-image 和 .card-title 就能擁有基本的尺寸和樣式設定。詳細可以參考 👉官方文件
  • .col 是使用了 Materialize 的 Grid System：.s12 代表小尺寸螢幕佔 12 欄位、.m4 代表中尺寸以上螢幕佔 4 欄位。詳細可以參考 👉官方文件

📍 初始化和設定選項

技能 Skills

Part 1 技能展示

📍 在這個區塊將技能分成三個類型，以輪播（Carousel）分別展示：

  • Materialize 的輪播（Carousel）不僅可以置放圖片，也可單純置放文字內容，輪播效果和樣式也有非常多選擇。詳細可以參考 👉官方文件
  • 在 <div> 上加入 .carousel 設定為輪播；加入.carousel-slider將圖片或文字內容寬度設定為 100%。
  • 透過一個包含 .carousel-item 的 <div> 可以分別包裝不同的輪播內容

📍 初始化和設定選項

  • fullWidth 選項：設定輪播寬度為 100%
  • indicators 選項：顯示輪播下方的控制圓點

Part 2 背景滑動圖片（Parallax）

📍 在這個區塊的背景圖片是透過 Parallax 來創造出頁面滑動時「背景圖和頁面本身移動的速度好像不同」的效果。詳細可以參考 👉官方文件

  • 在 Skills 區塊 <section>上加入.parallax-container；在包覆背景圖片的<div> 上加入.parallax-container設定效果

📍 初始化和設定選項

近期專案 Recent Project

📍在這個區塊左側透過 Card 來展示近期幾個實作專案；透過 Card Reveal 讓使用者在點擊作品後，能看到作品的技術說明與作品相關連結：

  • 透過 .card 設定元素為 Card；.card-image 設定為 Card 圖片。
  • 在 Card 裡設定一個.card-reveal區塊，預設是隱藏起來的，一旦使用者觸發，將會顯示更多專案使用到的技術及連結。
  • 在 Card 上加入 .sticky-action 讓 Card Reveal 在開啟時，不會蓋住下方的標題。
  • 將 .activator 放置在圖片、下方標題等元素上，讓使用者在點擊該元素時，能開啟 Card Reveal 看到「更多資訊」。詳細可以參考 👉官方文件
  • 在 Card 下方標題右側使用 Badge 來呈現該作品是什麼類型的應用程式：在 <span> 加入 .badge 設定、.new 能為 Badge 加上背景色、data-badge-caption能客製化 Badge 顯示的訊息。詳細可以參考 👉官方文件

了解更多 Discover More

📍 此區塊透過兩個按鈕提供外部連結到其他作品與文章：

  • 背景圖片使用 Parallax 效果
  • 按鈕添加 .waves-effect 讓使用者在點擊時背景有波浪效果；添加 .waves-light 設定波浪為白色
  • Medium 的背景透過 .orange 設定為橘色（色碼：#ff9800）、.darken-4 設定橘色要深四個階級（如下圖）。詳細可以參考 👉官方文件
  • 標題和按鈕區塊加上 .white-text 將文字設定為白色
😃 Materialize 中顏色設定很彈性
1. 背景顏色的調配通常是先有「一個基底色」，再透過 lighten / darkern 變化深淺 
2. 文字的基底色設定：基底色＋「-text」，例如：.orange-text
3. 文字的深淺變化設定：「text-」+ lignten / darken，例如：.text-lighten-4

聯繫 Contact

📍 此區塊將設計一個表單，讓使用者在填寫送出後，將表單內容寄送到我的信箱。表單使用的詳細說明可以參考 👉官方文件

  • 表單的 <input> 和 <label> 需要透過帶有 .input-field 的 <div> 元素包覆，提供欄位樣式和功能上的設定
  • 在 <input> 上加入.validate會偵測該欄位是否通過驗證，並根據結果自動加上 .valid 或 .invalid，同時會呈現綠色或紅色的樣式
  • 在欄位下方加上帶有 .helper-text 的<span> 為該欄位增加輔助訊息，並透過 data-error 設定該欄位未通過驗證時的訊息
  • 在欄位中前加上帶有 .prefix 的圖形，讓該欄位左側顯示特定的圖形
  • Materialize 提供了許多圖形，使用時，需在 <i> 元素加上 .material-icons 並寫入圖形的名稱，例如：<i class="material-icons">add</i>。詳細圖形列表可以參考 👉官方文件
  • <textarea> 必須加上 .materialize-textarea 才會擁有如 input 欄位的樣式和效果

頁腳 Footer

📍 頁腳區塊將放上我的相關連結與版權資訊

  • 在<footer>上加入 .page-footer 增添頁腳樣式
  • 由於預設樣式中，背景色為粉紅色，因此透過 .grey 和 .lighten-1 改為灰色系背景
  • 版權區塊可以透過 .footer-copyright 快速增添樣式，例如：背景色將自動加深

置底連結按鈕 Floating Action Button

📍 置底連結按鈕是使用 Floating Action Button，此按鈕將被固定放置在螢幕右下角的位置，當滑鼠點擊此按鈕時，將會顯示隱藏的按鈕。顯示隱藏按鈕的樣式和效果蠻多種的，詳細說明可以參考 👉官方文件

  • 透過一個帶有 .fixed-action-btn 的 <div> 包覆所有按鈕
  • 在同一個 <div> 上加入 .toolbar 讓隱藏按鈕顯示的效果，是展開在螢幕最下方。詳細說明可以參考 👉官方文件
  • 置底顯示的單一按鈕需加上 .btn-floating
  • 置底顯示的單一按鈕透過 .hide-on-med-and-up 設定只在小尺寸螢幕顯示
  • 透過撰寫 JavaScript 讓置底按鈕在頁面向下滑行一段距離後才顯示，並透過使用 .scale-transition 和 .scale-out 增加顯示按鈕時，縮放的轉場效果。詳細說明可以參考 👉官方文件

📍 初始化和設定選項

  • toolbarEnabled 選項：設定顯示隱藏按鈕的效果是在螢幕最下方展開

個人頁面成果

GitHub 程式碼 👇

個人頁面 👇

https://smallpaes.github.io/portfolio/

心得

自從使用 Bootstrap 以來，都還沒機會接觸這類型的其他前端框架，這次很開心認識了 Materialize，甚至在透過資料查找和 Udemy 上的課程自學後，直接實作了個人頁面，真的是蠻爽快的！

在接觸新的框架時，總是需要花點時間適應 — 尤其 Materialize 提供開發者很多能客製化的地方，因此，更需要花時間去了解其運作方式，才能依照自己的需求順利地套用在專案中，甚至發揮自己的魔法，做出許多客製化的效果。

使用過 Bootstrap 再來接觸 Materialize 的確能較快上手 — 大方向的使用和操作方式都蠻相似的，兩個框架也都非常注重 RWD 的網頁設計。然而，兩者的強項還是有些差異的，這次在使用完 Materialize 後，能特別感受到它在「使用者體驗和互動」上的設計，有更多的著墨和用心、在許多元件和功能上，也讓開發者有不少客製化的彈性（例如顏色的調配）、以 Google 提出和使用的 Material Design 作為核心也它是很大的優勢之一。

雖然 Materialize 很年輕，社群相對 Bootstrap 來說還沒有這麼廣，但其本身帶有非常多的優點，在近期也有越來越多的討論度，很期待它接下來的發展，也期待自己未來能透過 Materialize 有更多發揮。

在接觸新的框架時，都需要花點時間適應 — 尤其 Materialize 提供開發者很多能客製化的地方，更需要花時間了解運作方式，才能依照自己的需求順利地套用在專案中，甚至發揮自己的魔法，做出許多客製化的效果！

Materialize
Material Design
Front End Development
Portfolio
Notes
Recommended from ReadMedium