next blog 다운로드 - next blog 소스 코드 다운로드

다음 블로그

프로젝트 소개

React Server Framework Next.js 블로그를 사용합니다. 마음에 드는 경우 스타 지원을 제공합니다. https://github.com/weibozzz/next-blog 온라인 주소 : http://www.liuweibo.cn이 프로젝트는 다음에 사용합니다. https://github.com/weibozz/weibozz.github.io

소프트웨어 아키텍처

소프트웨어 아키텍처 설명 react.js next.js antd mysql node koa2 fetch

웹 사이트 사용 기술

프론트 엔드 : React (16.x) Next.js Antd-Design Fetch가 적습니다
백엔드 : 노드 프레임 워크 KOA 및 MySQL (현재, 프론트 엔드 및 백엔드가 분리되어 있으며 여기에는 인터페이스를 작성하는 데 책임이 있습니다. 일반적인 AJAX 획득 인터페이스와 동일하므로 소스 코드가 여기에서 열리지 않습니다).
웹 사이트 목적 : 아마추어 연구, 기술 기사 기록 및 배운 내용을 적용하십시오.
웹 사이트 기능
- 마크 다운 포스트
- 기사 수정 (추가, 삭제, 수정 및 확인)
- 사용자 댓글
- 사진을 Qiniu Cloud Storage에 업로드하십시오
- 이미지 미리보기 기능을 클릭하십시오
- 휴대폰 적응을 지원합니다

설치 자습서

서버 측 렌더링이지만 인터페이스를 호출해야하므로 백엔드 인터페이스를 호출해야합니다.

구성 폴더 아래에 ENV.JS의 ISSHOW를 입력하여 true로 설정하십시오 . 여기서 나는 단지 내 자신의 온라인 인터페이스를 호출합니다. 물론, 당신은 그것을보고 인터페이스를 수정할 수는 없습니다. False 인 경우 인터페이스를 조정할 수 없으며 인터페이스를 직접 작성해야합니다.

달리다

cnpm i
npm run dev

배포

cnpm i
npm run build
npm start

사용 지침

데모와 관련하여, 사진을 업로드하지 않거나 기사를 게시하지 않거나 수정하는 것은 정상입니다.
도로에서 출판 된 기사를 보지 못하는 것은 정상입니다. 라우팅 효과를 표시하기 위해 코드를 수정할 수 있습니다.

웹 사이트 스크린 샷

세부
목록 페이지
페이지 편집 및 기사 편집, Qiniu Cloud에 사진 업로드

웹 사이트 기술 소개

우리는 Next.js의 도움으로 전적으로 개발 된 개인 웹 사이트와 온라인 주소 http://www.liuweibo.cn을 사용하여 완료 후 개발 사용 경험과 경험을 요약합니다. gtihub 소스 코드 https://github.com/weibozzz/next-blog. 당신이 그것을 좋아한다면, 스타를 지원하십시오.

SSR (Server-Side Rendering)을 사용하는 이유는 무엇입니까?

웹 사이트를 홍보해야하므로 더 나은 SEO가 필요하며 검색 엔진은 전체 페이지를 크롤링 할 수 있습니다.
액세스 속도, 정적 페이지의 빠른로드

웹 사이트 사용 기술

프론트 엔드 : React (16.x) Next.js Antd-Design Fetch가 적습니다
백엔드 : 노드 프레임 워크 KOA 및 MySQL (현재, 프론트 엔드 및 백엔드가 분리되어 있으며 여기에는 인터페이스를 작성하는 데 책임이 있습니다. 일반적인 AJAX 획득 인터페이스와 동일하므로 소스 코드가 여기에서 열리지 않습니다).
웹 사이트 목적 : 아마추어 연구, 기술 기사 기록 및 배운 내용을 적용하십시오.
웹 사이트 기능
- 기사 게시
- 기사 수정 (추가, 삭제, 수정 및 확인)
- 사용자 댓글

소스 코드 분석

여기서 핵심 사항에 대해 이야기합시다

Entry File `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 )
  } )

페이지 루트 component_app.js

Redux 데이터를 전달하는 데 사용되며 Store는 일반 React 사용과 동일하며 헤더 및 바닥 글을 여기에 배치 할 수 있으며 _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 : //***.com을 변경하는 데 사용됩니다. ID = 1은 아름다운/id/1으로 변경합니다.
head SEO에 대한 메타 태그를 둥지 할 수 있습니다
SEO가 필요하지 않은 구성 요소를 구성하십시오

 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 } &raquo; { 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 및 테마를 구성하고 주문형으로로드하십시오

테마 구성

Antd-Custom

 @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 ,

    }
  }
)

페이지 CSS

vue 의 scope , style jsx , global 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
} ) ;

다음 .js 구성 관련

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
            }
          }
        ]
      }
    )

CSS를 지원합니다

 config = withCSS()
      .webpack(config, ...args)
    config = withLess()
      .webpack(config, ...args)

일부 파일에서 CSS 모듈을 활성화하는 것이 적습니다

 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
          }
        }
      }
    )

Bundleanalyzer를 지원하십시오

 const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true'
})

    config = withBundleAnalyzer({})
      .webpack(config, ...args)