next blog
1.0.0
يمكنني استخدام مدونة React Server Framework Next.js ، إذا أعجبك ذلك ، فاحرص على دعم النجوم. https://github.com/weibozzz/next-blog العنوان عبر الإنترنت: http://www.liuweibo.cn يستخدم هذا المشروع تجربة next.js مشاركة: http://www.liuweibo.cn/p/206 هناك أيضًا ويب لتأسيس نظام المعرفة الخاص به: https://github.com/weibozz/weibozz.github.io
بنية البرمجيات الوصف react.js next.js antd mysql node koa2 fetch
أدخل isshow of env.js ضمن مجلد التكوين وقم بتعيينه على True . هنا فقط أتصل بواجهة عبر الإنترنت. بالطبع ، يمكنك مشاهدته فقط وعدم تعديل الواجهة. إذا كان هذا خطأ ، فلا يمكن ضبط الواجهة وتحتاج إلى كتابة الواجهة بنفسك.
cnpm i
npm run devcnpm i
npm run build
npm startسنستخدم موقع الويب الشخصي الذي تم تطويره بالكامل بمساعدة Next.js ، وعنوانه عبر الإنترنت http://www.liuweibo.cn لتلخيص تجربة وتجربة استخدام التطوير بعد الانتهاء. GTIHub Code Https://github.com/weibozzz/next-blog. إذا أعجبك ذلك ، فأعطير دعم النجوم.
دعنا نتحدث فقط عن النقاط الرئيسية هنا
server.js استخدم الرسمي express هنا ، وتمكين ضغط gzip في نفس الوقت
const express = require ( 'express' )
const next = require ( 'next' )
const compression = require ( 'compression' )
const dev = process . env . NODE_ENV !== 'production'
const app = next ( { dev } )
const handle = app . getRequestHandler ( )
let port = dev ? 4322 : 80
app . prepare ( )
. then ( ( ) => {
const server = express ( )
if ( ! dev ) {
server . use ( compression ( ) ) //gzip
}
//文章二级页面
server . get ( '/p/:id' , ( req , res ) => {
const actualPage = '/detail'
const queryParams = { id : req . params . id }
app . render ( req , res , actualPage , queryParams )
} )
server . get ( '*' , ( req , res ) => {
return handle ( req , res )
} )
server . listen ( port , ( err ) => {
if ( err ) throw err
console . log ( '> Ready on http://localhost ' port )
} )
} )
. catch ( ( ex ) => {
process . exit ( 1 )
} ) يستخدم لتمرير بيانات Redux ، وهو نفس الاستخدام العادي للتفاعل ، ويمكن وضع رأس وتذييل هنا ، ويتم استخدام _err.js لمعالجة 404 صفحات
import App , { Container } from 'next/app'
import React from 'react'
import { withRouter } from 'next/router' // 接入next的router
import withReduxStore from '../lib/with-redux-store' // 接入next的redux
import { Provider } from 'react-redux'
class MyApp extends App {
render ( ) {
const { Component , pageProps , reduxStore , router : { pathname } } = this . props ;
return (
< Container >
< Provider store = { reduxStore } >
< Component { ... myPageProps } />
</ Provider >
</ Container >
)
}
}
export default withReduxStore ( withRouter ( MyApp ) ) link للقفز إلى الصفحات ، ويستخدم لتغيير http: //***؟ id = 1 إلى معرف جميل/1head أن يعشش علامات META لسيو import dynamic from 'next/dynamic' ;
//不需要seo
const DynasicTopTipsNoSsr = dynamic ( import ( '../../components/TopTips' ) , {
ssr : false
} )
import React , { Component } from 'react'
import { connect } from 'react-redux'
import Router from 'next/router'
import 'whatwg-fetch' // 用于fetch请求数据
import Link from 'next/link' ; // next的跳转link
import Head from 'next/head' // next的跳转head可用于seo
class Blog extends Component {
render ( ) {
return (
< div className = "Blog" >
< Head >
< title > { BLOG_TXT } » { COMMON_TITLE } </ title >
</ Head >
< MyLayout >
< Link as = { `/Blog/ ${ current } ` } href = { `/Blog?id= ${ current } ` } >
< a onClick = { this . onClickPageChange . bind ( this ) } > { current } </ a >
</ Link >
</ MyLayout >
</ div >
)
}
}
//这里才是重点，getInitialProps方法来请求数据进行渲染，达到服务端渲染的目的
Blog . getInitialProps = async function ( context ) {
const { id = 1 } = context . query
let queryStringObj = {
type : ALL ,
num : id ,
pageNum
}
let queryTotalString = { type : ALL } ;
const pageBlog = await fetch ( getBlogUrl ( queryStringObj ) )
const pageBlogData = await pageBlog . json ( )
return { pageBlogData }
}
// 这里根据需要传入redux
const mapStateToProps = state => {
const { res , searchData , searchTotalData } = state
return { res , searchData , searchTotalData } ;
}
export default connect ( mapStateToProps ) ( Blog ) إنشاء مجلد static في دليل الجذر. هذا مطلب إلزامي ، وإلا فلن يتم تحميل المورد الثابت.
antd-custom.less
@primary-color : # 722ED0;
@layout-header-height : 40px;
@border-radius-base : 0px;الأنماط
@import "~antd/dist/antd.less" ;
@import "./antd-custom.less" ; أخيرًا ، التكوين موحد على head العام
< Head >
< meta charSet =" utf-8 " />
< meta httpEquiv =" X-UA-Compatible " content =" IE=edge, chrome=1 " />
< meta name =" viewport "
content =" width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no " />
< meta name =" renderer " content =" webkit " />
< meta httpEquiv =" description " content ="刘伟波-伟波前端" />
< meta name =" author " content ="刘伟波,liuweibo " />
< link rel =' stylesheet ' href =' /_next/static/style.css ' />
< link rel =' stylesheet ' type =' text/css ' href =' /static/nprogress.css ' />
< link rel =' shortcut icon ' type =' image/x-icon ' href =' /static/favicon.ico ' />
</ Head > .babelrc ملف
{
"presets" : [ " next/babel " ],
"plugins" : [
" transform-decorators-legacy " ,
[
" import " ,
{
"libraryName" : " antd " ,
"style" : " less "
}
]
]
}
next.config.js تكوين ملف
const withLess = require ( '@zeit/next-less' )
module . exports = withLess (
{
lessLoaderOptions : {
javascriptEnabled : true ,
cssModules : true ,
}
}
) يبدو الأمر وكأنه scope vue ، style jsx ، أضف global على أنه عالمي ، وإلا فإنه لن يسري إلا هنا.
render ( ) {
return (
< Container >
< Provider store = { reduxStore } >
< Component { ... myPageProps } />
</ Provider >
< style jsx global > { `
.fl{
float: left;
}
.fr{
float: right;
}
` } </ style >
</ Container >
) import Router from 'next/router'
import NProgress from 'nprogress'
Router . onRouteChangeStart = ( url ) => {
NProgress . start ( )
}
Router . onRouteChangeComplete = ( ) => NProgress . done ( )
Router . onRouteChangeError = ( ) => NProgress . done ( ) استخدام فقط تحتاج إلى marked('放入markdown字符串');
import marked from 'marked'
import hljs from 'highlight.js' ;
hljs . configure ( {
tabReplace : ' ' ,
classPrefix : 'hljs-' ,
languages : [ 'CSS' , 'HTML, XML' , 'JavaScript' , 'PHP' , 'Python' , 'Stylus' , 'TypeScript' , 'Markdown' ]
} )
marked . setOptions ( {
highlight : ( code ) => hljs . highlightAuto ( code ) . value ,
gfm : true ,
tables : true ,
breaks : false ,
pedantic : false ,
sanitize : true ,
smartLists : true ,
smartypants : false
} ) ; next.config.js تكوين ملف
module . exports = {
webpack ( config , ... args ) {
return config ;
}
} config.resolve.alias = {
...config.resolve.alias,
'@': path.resolve(__dirname, './'),
}
config.plugins.push(
new webpack.DefinePlugin({
'process.env.NODE_ENV': process.env.NODE_ENV
})
)
config.module.rules.push(
{
test: /.svg(?v=d+.d+.d+)?$/,
use: [
{
loader: 'babel-loader'
},
{
loader: '@svgr/webpack',
options: {
babel: false,
icon: true
}
}
]
}
)
config = withCSS()
.webpack(config, ...args)
config = withLess()
.webpack(config, ...args)
const loaderUtils = require('loader-utils')
const fs = require('fs')
const path = require('path')
const cssModuleRegex = /.module.less$/
config = withLess(
// 开启 css module 自定义
{
cssModules: true,
cssLoaderOptions: {
importLoaders: 1,
minimize: !args[0].dev,
getLocalIdent: (loaderContext, _, localName, options) => {
const fileName = path.basename(loaderContext.resourcePath)
if (cssModuleRegex.test(fileName)) {
const content = fs.readFileSync(loaderContext.resourcePath)
.toString()
const name = fileName.replace(/.[^/.]+$/, '')
const hash = args[0].dev ? `${name}___[hash:base64:5]` : '[hash:base64:5]'
const fileNameHash = loaderUtils.interpolateName(
loaderContext,
hash,
{ content }
)
return fileNameHash
}
return localName
}
}
}
)
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true'
})
config = withBundleAnalyzer({})
.webpack(config, ...args)
)
عندما تكون هناك زيارات كبيرة ، فأنت بحاجة إلى ذاكرة التخزين المؤقت
عرض عقدة CDN تاريخ الصورة
وصف صورة التكوين والتغييرات
لا يدعم تحميل الصور عالية الجودة التحميل بعد ، وتحميل تحسينات التعليمات البرمجية
تم الرفع على أنه حشرة 1M بالضبط
بعد تسجيل الدخول ، دعم المقالات المفضلة وتعديل التعليقات
إذا تم حذف المقالة السابقة ، فإن معرف التذكير الذاتي ليس بالزراعة الذاتية 1 ، وتحتاج إلى الاستعلام عن قاعدة البيانات
املأ رمز Markdown لتمييزه ، على غرار شذرات
إصدارات للاندماج في ذلك اليوم
contentEditableGithub: https: //github.com/weibozzz
المدونة الشخصية: http://www.liuweibo.cn
SegmentFault: https: //segmentfault.com/u/weibozzz
المنصة العامة: Weibo Frontend
المؤلف: ليو ويبو
الرابط: http://www.liuweibo.cn/p/206
المصدر: مدونة Liu Weibo
حقوق الطبع والنشر الأصلية لهذه المقالة تنتمي إلى ليو ويبو. يرجى الإشارة إلى المصدر عند إعادة الطباعة. شكرا لك على تعاونك.
