iT邦幫忙

2021 iThome 鐵人賽

DAY 23
0
Modern Web

1995到2021,php到react網站開發歷程系列 第 23

DAY23-一般頁面設計

infopic.png

前言:

做完網站最基本的導覽功能後,接下來要進入的就是我們的頁面了!在製作頁面的同時,
阿森也會善用React的特性,也就是製造出重複利用性高的元件,像是製作一個Template,讓接下來的頁面可以快速套用不同資料,形成各種頁面。用最快的效率達到最大的變動,這就是React厲害的地方了!

那今天我會大概介紹兩種頁面型態,分別是用來顯示資料和圖片的Intro頁面;和用來放卡片資訊的card頁面。

Intro頁面:

廢話不多說,我們先看看效果如何:

截圖 2021-09-20 下午5.24.28.png

可以看到主要是由一個大個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頁面。

掰掰!


上一篇
DAY22-導覽設計之Sidebar
下一篇
DAY24-資訊卡頁面設計
系列文
1995到2021,php到react網站開發歷程30

尚未有邦友留言

立即登入留言