嗨，今天來完成底下文章的部分，金嗨，內容越寫越多，因為快要完賽了節奏沒抓好ＸＤ，前面都是分開解析的，結果後面變成一個 section 一大包，真是抱歉ＱＱ

再放一個廣告版位

乳題，接下來再放一個廣告版位，這邊就複製之前寫好的內容即可

// Article.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>
      <div className="ads">
        <a href="/">
          <img
            alt="ads"
            src="https://tpc.googlesyndication.com/simgad/4418991333586357163"
          />
        </a>
      </div>
    </div>
  );
}

Attention 文章

基本上版位的配置也跟 Hot Now 相似，只有文章的排列方式不同，這邊出現的其他文章圖片，一樣會有紅色的 filter，所以我更改一下之前設定的做法，改在 post 下的 img 來統一設定

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

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

接下來排版內容，會有四篇～分別是長方跟正方形的圖片

// Article.js

import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronRight } from "@fortawesome/free-solid-svg-icons";

export default function Article() {
  return (
    <div>
      // ...
      <div className="post">
        <h2 className="post-headline">attention</h2>
        <div className="post-section">
          <div className="post-column">
            <div className="rectangle-img">
              <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-paper">
              ENTERTAINMENT
              <div className="post-subtitle">
                寶藏男孩持修：「對我來說男子氣概無關外表，而是要負責任。」
              </div>
              <hr className="brown-hr" />
              BY NICOLE LEE 2021年6月7日
            </div>
          </div>
          <div className="post-column">
            <div className="square-img">
              <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-paper">
              ENTERTAINMENT
              <div className="post-subtitle">
                寶藏男孩持修：「對我來說男子氣概無關外表，而是要負責任。」
              </div>
              <hr className="brown-hr" />
              BY NICOLE LEE 2021年6月7日
            </div>
          </div>
						// ...
        </div>
      </div>
    </div>
  );
}

// article.sass

.post
    padding: 0 5vw 64px
    border-top: 1px solid $primary-color
    @extend %link-font
    font-weight: 100
    //...
    &-section
        display: flex
        justify-content: space-between

    &-column
        width: (100vw-20vw)/4
        display: inline-block
        overflow: hidden

        &:hover
            @extend %text-hover

        img
            max-width: 100%
            overflow: hidden

        .square-img
            width: 340px
            height: 340px
            overflow: hidden

        .rectangle-img
            width: 340px
            height: 460px
            overflow: hidden

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

    &-subtitle
        @extend %logo-font
        font-size: 22px
        padding: 4px 0

    &-paper
        position: relative
        padding: 24px
        margin-left: 24px
        top: -40px
        background-color: $primary-background-color

.brown-hr
    margin: 24px 0 12px 0
    border-top: 5px solid #b89a6a
    width: 40px
    &:hover
        border-top: 5px solid $secondary-color

.more-info
    text-align: center
    margin: auto
    border-top: 2px solid $gray

button
    cursor: pointer
    border: none
    background-color: $primary-background-color
    margin: 8px 32px
    padding: 32px
    text-transform: uppercase
    @extend %link-font
    .red-icon
        color: $primary-background-color
        background-color: $secondary-color
        border-radius: 50%
        padding: 16px 18px
        margin: 16px
    &:hover
        color: $secondary-color

一下子爆產好多 code XD，待我細細解釋！

1. post-section 是為了套用 flex 屬性而包的 container
2. column 則是 section 中四篇文章的位置，透過 flew 的做法來完成平均分配欄寬，寬度則是透過 sass 的計算方式來扣掉編框比例的 vw 後所獲得的寬，overflow: hidden 的部分主要是遮蓋掉圖片超出的範圍
3. title、subtitle 的部分一樣沿用之前 extend 設定過的字型
4. paper 利用 relative 屬性將整體文字區塊往上抬，形成覆蓋的樣式

內容大概是這樣～比較細節基本的地方就不介紹了，有問題歡迎底下留言～

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

lu23770127 - SASS 基礎初學三十天

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

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

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

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