終於跳脫 header 的部分來到了下面文章列表啦，總覺得光是上半部就做了好久，不知道完賽前能不能把整個畫面刻完ＸＤＤ

先來新增 component 吧！

// Post.js

import React from "react";

export default function Article() {
  return <div>Article Content</div>;
}

-----------------------------------------

// App.js

import "../src/assets/sass/main.sass";
import Header from "./components/Header";
import Article from "./components/Article";
function App() {
  return (
    <div className="container">
      <Header />
      <Article />
    </div>
  );
}

export default App;

然後也在 sass 的部分也新增一個 partial，現在用起來也挺習慣這種模組化的方式了！

// main.sass

@import "variable"
@import "basic"
@import "typography"
@import "header"
@import "dropdown"
@import "modal"
@import "article"

今天的難題！

第一位挑戰選手是——廣告版位！這個感覺不難，一起來動手玩創意吧！（？？？？

//article.sass

.ads
    padding: 24px
    text-align: center
    background-color: $gray

    img
        max-height: 150px

// Post.js

import React from "react";

export default function Article() {
  return (
    <div>
      <div className="ads">
        <a href="/">
          <img
            alt="ads"
            src="https://tpc.googlesyndication.com/simgad/4418991333586357163"
          />
        </a>
      </div>
    </div>
  );
}

恩⋯⋯對，廣告的部分大概就是這樣，應該用看的就蠻懂了ＸＤ，圖片的部分就直接抓官網上的 link來實作～

第二個難題！

首頁頭條文章的部分！第一篇文章帶的圖會是最大張的，而圖片的效果會有 hover 紅色的樣式

首先我們把內容都先擺上去，來慢慢修它～～

// Post.js

import React from "react";

export default function Article() {
  return (
    <div>
      <div className="ads">
        <a href="/">
          <img
            alt="ads"
            src="https://tpc.googlesyndication.com/simgad/4418991333586357163"
          />
        </a>
      </div>
      <div className="post">
        <div className="post-headline">hot now</div>
        <div className="post-img-wrapper">
          <img
            className="post-img"
            alt="post-img"
            src="https://media.vogue.com.tw/photos/60b9a4fcf37df9e2f39b0216/2:3/w_2880%2cc_limit/29711-1_V.jpg"
          />
        </div>
        <div className="post-body">
          ENTERTAINMENT
          <div className="post-title">
            寶藏男孩持修：「對我來說男子氣概無關外表，而是要負責任。」
          </div>
          BY NICOLE LEE 2021年6月7日
        </div>
      </div>
    </div>
  );
}

針對每個要修改的內容，也都加上 className 並且順便排版～

// article.sass

.ads
    // ...
.post
    padding: 0 5vw
    border-top: 1px solid $primary-color
    @extend %link-font
    font-weight: 100

    &-headline
        width: 17vw
        border-top: 10px solid $primary-color
        margin: 0
        margin-right: auto
        padding: 0
        font-family: $logo-font
        font-size: 64px
        font-weight: 200
        text-transform: capitalize

    &-img-wrapper
        width: 90vw
        height: 700px
        overflow: hidden
        margin-top: 64px

    &-img
        max-width: 90vw

    &-body
        margin: 0 0 0 240px
        border-left: 1px solid $primary-color
        padding: 32px 200px 0 64px

    &-title
        @extend %logo-font
        font-size: 48px
        padding: 16px 0

排玩版後的 class 樣式大概是這樣，這邊可以看到有 @extend 去快速套用了字型！之前我們已經設定好的就不用重複編寫囉～

第三個難題！

這個我真的找超久才找到解法，就是 vogue 上圖片 hover 的樣式，原本想說應該簡單套上 overlay 就可以了吧，但結果不是，overlay 雖然可以使用 opacity 讓圖片淡化來顯示背景色，但這樣就不是紅色濾鏡的感覺，會有粉白色的樣式，所以搜尋了很久，才發現原來要使用 svg filter 的做法來改變圖片的 RGB 顏色

作法如下：

首先在 html 的地方新增 svg, filter 以及 feColorMatrix 的 tag，feColorMatrix 就是濾鏡本身，透過矩陣計算過圖片顏色後來套用新的濾鏡顏色，可以在這個網站上來練習看看用法

SVG Color Matrix Mixer

<svg xmlns="http://www.w3.org/2000/svg">
    <filter id="red-filter">
      <feColorMatrix
        type="matrix"
        values="
        1 0 0 0 0
        0 0 0 0 0
        0 0 0 0 0
        0 0 0 1 0"
      ></feColorMatrix>
    </filter>
  </svg>

之後我們先把紅色的 svg filter 放入 html 中

// article.sass

// ...
.post
    padding: 0 5vw
    border-top: 1px solid $primary-color
    @extend %link-font
    font-weight: 100

    // ...

    &-img
        max-width: 90vw

        &:hover
            color: $dark-gray
            cursor: pointer
            transition: .1s ease
            filter: url(#red-filter)

hover 的部分在指定 filter 的 id 來套用，就大功告成啦！沒想到短短幾行花了我好久在找做法⋯⋯

大概就是醬！我們的 banner 也差不多了～總覺得後面幾篇都在飆車ＸＤ

明天見啦～～～

除此之外，也歡迎大家走走逛逛關於我們團隊夥伴的文章

lu23770127 - SASS 基礎初學三十天

10u1 - 糟了！是世界奇觀！

juck30808 - Python - 數位行銷分析與 Youtube API 教學

HLD - 淺談物件導向與Design Pattern介紹

SiQing47 - 前端？後端？你早晚都要全端的，何不從現在開始？