DAY 26 首页文章

终於跳脱 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"

今天的难题！

Untitled

第一位挑战选手是——广告版位！这个感觉不难，一起来动手玩创意吧！（？？？？

//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 来套用，就大功告成啦！~~没想到短短几行花了我好久在找做法⋯⋯~~

Untitled