gatsby.js 架構靜態網站技術要點

gatsby.js 架構靜態網站技術要點

靜態資源加載

通過 gatsby / gatsby-image / gatsby-plugin-sharp 實現圖片靜態資源的加載以及渲染，支持 fluid | fixed 兩種 type。

使用實例如下：

import { graphql, useStaticQuery } from 'gatsby';
import Img from 'gatsby-image';

// 加載資源
const imagesData = useStaticQuery(graphql`
query {
	fixedImg: file(relativePath: { eq: "index/banner.png" }) {
		childImageSharp {
			fixed(width: 125, height: 125) {
			...GatsbyImageSharpFixed
			}      
		}    
	}
	fluidImg: file(relativePath: { eq: "index/banner-desktop.png" }) {
		childImageSharp {
			fluid(maxWidth: 1920) {
				...GatsbyImageSharpFluid
			}      
		}    
	}
	images: allFile(filter: { relativePath: { regex: "/index/banner/desktop/" } } sort: { fields: name }) {
		edges {
			node {
				childImageSharp {
					fluid(maxWidth: 1920) {
						...GatsbyImageSharpFluid
					}
				}
			}
		}
	}
`);

使用

<Img fixed={imagesData.fixedImg.childImageSharp.fixed} />
<Img fluid={imagesData.fluidImg.childImageSharp.fluid} />
{
imagesData.images.edges.map(({ node }, index) => (
<Img fluid={node.childImageSharp.fluid} key={index} />))
}

媒體查詢

break-points media-size
{children} // PC 端展示
{children} // 移動端展示
@Media

css-in-js(vw佈局)

styled-components / styled-px2vw

// 全局樣式 覆蓋 | css-reset
import { createGlobalStyle } from 'styled-components';
const GlobalStyle = createGlobalStyle``;
<Layout>
<GlobalStyle />
<OtherComponent />
</Layout>

錨點跳轉緩動效果

gatsby-plugin-anchor-links
gatsby-config.js

{
  resolve: `gatsby-plugin-anchor-links`,  
  options: {
    offset: 0,  
  },
},

react 百度地圖

react-baidu-map 文檔

import { APILoader, Map, Marker } from '@uiw/react-baidu-map';
import CustomIcon from '../../images/index/location.png';
const CustomMapIcon = props => {
      const { position } = props;  const icon = new window.BMap.Icon(
        CustomIcon, new window.BMap.Size(38 / 3, 50 / 3)
 );  
return (
     <Map zoom={18} center={position} enableScrollWheelZoom={true}>
		<Marker position={position} icon={icon} />
	</Map>
);
};

<APILoader akay="hwNeVg8yPDmLLHcwFq0iE7l5S09akIdu">
<CustomMapIcon position={{ lng: 116.410436, lat: 39.915209 }}/>
</APILoader>

輪播

react-id-swiper

import Swiper from 'react-id-swiper';
const params = {
  navigation: {
nextEl: '.swiper-button-next',    
prevEl: '.swiper-button-prev',  
  },  
  slidesPerView: 1,  
  spaceBetween: 0,  
  centeredSlides: true,  
  freeMode: false,  
  grabCursor: true,  
  mousewheel: {
forceToAxis: true,
invert: true,  
  },  
  slideToClickedSlide: true,
};

<Swiper {...params}>  {data.desktopBanner.edges.map(({ node }, index) => (
    <Img fluid={node.childImageSharp.fluid} key={index} />  ))}
</Swiper>

code style

通過 prettier 統一前端代碼格式。
.prettierrc 文件配置：

{
"endOfLine": "lf",  
"semi": true,  
"singleQuote": true,  
"tabWidth": 2,  
"trailingComma": "es5"
}