nextjs-制作官网

肥肥呀呀呀

已于 2023-08-19 11:25:26 修改

阅读量470

点赞数

分类专栏： react 文章标签： react.js 前端

于 2023-07-01 09:28:40 首次发布

本文链接：https://blog.csdn.net/weixin_43575775/article/details/130536867

版权

react 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

nextjs官网

nextjs

导入本地字体

global.scss

@font-face {
  font-family: 'HYk2gj';
  src: url('/static/fonts/Montserrat-Light-6.otf');
  font-style: normal;
}

设置头部icon和标题

 <Head>
      <title>Konnect</title>
      <link rel="shortcut icon" href="/static/logo_s.png" type="image/x-icon" />
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"></meta>
    </Head>

设置移动端和pc端共存

使用了next相关的库next-useragent

一、可以使用屏幕的宽度来适配

window.innerWidth <= 1000

二、通过ua来适配

import React from 'react'
import {  withUserAgent } from 'next-useragent'
import DesktopContent from "../view/pc"
import MobileContent from "../view/h5"
import { setRem } from "../utils/rem"
// import VConsole from 'vconsole';

// const vConsole = new VConsole();

class IndexPage extends React.Component {

  static async getInitialProps(ctx) {
    return { useragent: ctx.ua.source }
  }
  componentDidMount() {
    const { ua } = this.props
    if(ua.isMobile) { 
      const { ua } = this.props
      const isMobile = ua.isMobile || ua.isIpad ||  ua.isAndroid || ua.isAndroid
      sessionStorage.setItem("isMobile", isMobile)
      setRem()
      window?.addEventListener('resize',setRem)
      return ()=>{
        window?.removeEventListener('resize',setRem)
      }
    }else {
      sessionStorage.removeItem("isMobile")
    }
  }

  render() {
    const { ua } = this.props
    const isMobile = ua.isMobile || ua.isIpad ||  ua.isAndroid || ua.isAndroid
    return (
      <>
        { isMobile ? (
        <MobileContent />
        ) : (
        <DesktopContent />
        ) }
      </>
    )
  }
}

export default withUserAgent(IndexPage)

移动端使用 postcss-px-to-viewport-8-plugin

next.config.js

module.exports = {
    plugins: {
      "postcss-px-to-viewport-8-plugin": {
        unitToConvert: "px",
        viewportWidth: 375,
        unitPrecision: 3,
        propList: ["*"],
        viewportUnit: "vw",
        fontViewportUnit: "vw",
        selectorBlackList: [],
        minPixelValue: 1,
        mediaQuery: false,
        replace: true,
        include: /\src\/h5Styles/,
        exclude: [
          /node_modules/
        ],
        landscape: false
      }
    },
  };

// module.exports = {
//   plugins: {
//     'postcss-pxtorem': {
//       rootValue: 100,
//       replace: true,
//       propList: ["*"],
//       exclude: /node_modules|^(\/src\/h5Styles\/)$|styles/i
//     }
//   }
// }

因为会作用于全局 pc的页面没有使用scss 使用style-js

next-seo 进行seo优化

https://www.npmjs.com/package/next-seo

import { NextSeo } from "next-seo";
 <NextSeo title="konnect" description="Build The Web3" />

肥肥呀呀呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
nextjs-制作官网

因为会作用于全局 pc的页面没有使用scss 使用style-js。使用了next相关的库。
复制链接

扫一扫

专栏目录