nextjs-制作官网
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.propsif(ua.isMobile) { const { ua } = this.propsconst isMobile = ua.isMobile || ua.isIpad || ua.isAndroid || ua.isAndroidsessionStorage.setItem("isMobile", isMobile)setRem()window?.addEventListener('resize',setRem)return ()=>{window?.removeEventListener('resize',setRem)}}else {sessionStorage.removeItem("isMobile")}}render() {const { ua } = this.propsconst isMobile = ua.isMobile || ua.isIpad || ua.isAndroid || ua.isAndroidreturn (<>{ 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";本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！