DAY23-一般页面设计

前言：

做完网站最基本的导览功能後，接下来要进入的就是我们的页面了！在制作页面的同时，
阿森也会善用React的特性，也就是制造出重复利用性高的元件，像是制作一个Template，让接下来的页面可以快速套用不同资料，形成各种页面。用最快的效率达到最大的变动，这就是React厉害的地方了！

那今天我会大概介绍两种页面型态，分别是用来显示资料和图片的Intro页面；和用来放卡片资讯的card页面。

Intro页面：

废话不多说，我们先看看效果如何：

可以看到主要是由一个大个Title、图片和一段文字组成，接下来就是这个页面的架构了，

index.js：

import React from 'react'
import { InfoContainer, InfoRow, Column1, TextWrapper, Column2, ImgWrap, TopLine, Subtitle } from './InfoElements'
import Infopic from '../../images/infopic.png'
import './info.css'
import AOS from 'aos'
import 'aos/dist/aos.css'
import { useEffect } from 'react'

const Info1 = ({topLine, description}) => {
    useEffect(()=>{
        AOS.init();
    });
    
    return (
        <InfoContainer id="Intro">
            <TopLine>{topLine}</TopLine>
            
            <InfoRow imgStart={true}>
                
                        <Column1>
                        <TextWrapper>
                            <Subtitle data-aos="fade-up" data-aos-delay="200" darkText={false}>{description}</Subtitle>
                        </TextWrapper>
                        </Column1>
                        <Column2>
                            <ImgWrap>
                                <img src={Infopic} className="infopic"></img>
                            </ImgWrap>
                        </Column2>
                    </InfoRow>
        </InfoContainer>
    )
}

export default Info1

这里我们先看到这一行

const Info1 = ({topLine, description}) => {

表示他会在props中寻找这两个项目，然後传入这Info1的函式中，进一步的运用我们会留到後面说。

在return中可以看到整个页面是由InfoContainer这个Tag包覆起来的，再来是TopLine，也就是大标题的部分。

内容则是分成Column1和Column2，一个用来放文字；另一个用来放图片，这样的好处除了好排版外，之後要做顺序的调换也相对容易，像是要图片在左或是文字在左，都可以透过 imgStart 这个boolean传入InfoRow中，并快速做出变化。

再来文字和图片的部分我习惯用一个Wrap做包覆，纯属个人习惯，我觉得这样做之後调整画面也会较为方便。

这个页面的最後，有些人可能不知道AOS是什麽，这里阿森跟大家介绍一下这个很好用的插件，全名叫Animation of scroll，他们的示范网站在这：

https://michalsnik.github.io/aos/

使用这个插件就可以简单达到一些滑动的效果，有需要的人可以直接去install并使用喔！下面这几行通常会和AOS一起出现：

import AOS from 'aos'
import 'aos/dist/aos.css'
import { useEffect } from 'react'

还有在return上面的：

useEffect(()=>{
        AOS.init();
    });

有这几个指令才能让AOS顺利运作喔。

那就让我们看看style components是怎麽补完的吧！

InfoElements.js：

import styled from "styled-components";

export const InfoContainer = styled.div`
height: 100vh;
background: black;
padding-top: 10vh;

@media screen and (max-width: 768px) {
    height: fit-content;
}
`

export const InfoWrapper = styled.div`
    display: grid;
    height: 860px;
    width: 100%;
    max-width: 1100px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 24px;
    justify-content: center;
    z-index: 20;
    
`

export const InfoRow = styled.div`
    
    display: grid;
    grid-auto-columns: minmax(auto, 1fr);
    align-items: center;
    grid-template-areas: ${({imgStart}) => 
    (imgStart? `'col2 col1'` : `'col1 col2'`)};

    @media screen and (max-width: 768px) {
    grid-template-areas: ${({imgStart}) => 
    (imgStart? `'col1' 'col2'`: `'col1 col1' 'col2 col2'`)};
    }
`

export const Column1 = styled.div`
    margin-bottom: 15px;
    padding: 0 15px;
    grid-area: col1;
    margin-left: 15px;
    margin-right: 15px;
`

export const Column2 = styled.div`
    margin-bottom: 15px;
    padding:  0 15px;
    grid-area: col2;
    
`

export const TextWrapper = styled.div`
    max-width: 540px;
    display: flex;
    margin: 0 auto;
    padding-top: 0;
    padding-bottom: 0px;
    justify-content: center;
    text-align: center;
    
`

export const TopLine = styled.p`
    display: flex;
    justify-content: center;
    color: #fff;
    font-size: 3em;
    line-height: 100%;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-left: 10%;
    margin-bottom: 3%;
    @media screen and (max-width: 768px) {
    font-size: 2em;
}
`

export const Subtitle = styled.p`
    max-width: 440px;
    margin-top: 20%;
    font-size: 25px;
    line-height: 35px;
    color: ${({darkText}) => (darkText ? '#010606' : "#fff")};
`

export const ImgWrap = styled.div`
    max-width: 555px;
    height: 100%;
    margin-bottom: 50px;
    margin-left: 30%;

    @media screen and (max-width: 768px) {
    display: flex;
    justify-content: center;
    margin: 0 auto;
}
`

比较值得注意的是里面会出现一些$符号，我们举这段为例：

grid-template-areas: ${({imgStart}) => 
    (imgStart? `'col1' 'col2'`: `'col1 col1' 'col2 col2'`)};

他的意思简单来说就是会从传入的parameters中找一个叫imgStart的boolean，进入三元运算子，如果是true，grid-template-areas就会采用左边，也就是先图片再文字的顺去，反之亦然，

再来就是显示资料的部分，前面有讲到他会传入TopLine和Description两个项目，这些其实都写在一个叫做Data.js的档案中。

Data.js：

export const ObjOne = {
    lightBg: false,
    lightText: true,
    lightTextDesc: true,
    topLine: 'What is Dinomension',
    description: 'Dinomension NFTs are  10,000 algorithmically-generate art pieces based on ERC-721. Each NFT is unique and  hand-drawn by our talented artist -WhiteBridge.     The NFT also qualify us as a citizen  of The Dinomension. You will have an access to the citizen-only area  and attend events exclusively for the citizens.',
    imgStart: true,
    alt: 'Coding',
    dark: true,
    primary: true,
    darkText: false
}

我们主要从掌管所有页面的pages资料夹里的index.js中做呼叫：

...
import { ObjOne } from '../components/Info/Data'

...
return (
        <>
        <Sidebar isOpen={isOpen} toggle = { toggle }/>
        <HeroSection toggle = { toggle }/>
        <Info1 {...ObjOne}/>
...

之後到react就会去读这个ObjOne里的TopLine和Description两项的内容，并显示在页面上。同理，当今天需要再次使用这个模板，但资料内容不同时，就可以写一个新的物件，可能叫ObjTwo之类的，在里面写入你要显示的资料，再透过相同方法引入就完成了！

是不是好明白又有效率呢！

小结：

那关於基本的资讯页面我们今天就介绍到这边，希望对各位想写网页的人有所帮助，能减少大家写code过程所花费的时间。

明天我们会继续介绍第二种版型，也就是card页面。

掰掰！