Build the front-end infrastructure environment of the project

Front-end page production, divided into article list and article details page GitHub

  • In order to facilitate SEO, Next. Js framework is selected to assist development
  • Ant Design was chosen as the UI interaction library

Create-next-app creates the project

Create-next-app is the scaffolding tool for next.js, installed globally first

npm i -g create-next-app
Copy the code

Once the installation is complete, select a location to start creating the project

npx create-next-app
Copy the code

Run the project as prompted after it is created

npm run dev
Copy the code

Type http://localhost:3000/ in your browser and see Welcome to next.js! Indicates that the project is successfully initialized

Put your Blog project on Github

  1. Create a new repository on Github
  2. Establish a link between the local repository and the remote repository
Git remote add origin + /Copy the code
  1. Submit the initialized project Blog to Github
git push -u origin master
Copy the code
  1. Switch branches (optional)
Dev git push -u origin dev:dev(local branch: remote branch) // Create and submit to remote branches (remote branches are not created automatically)Copy the code

Create a Blog front page

After the project is created, the home page is the default and we need to change it to our own style

import React from 'react'
import Head from 'next/head'
const Home = () => (
  <>
    <Head>
      <title>MyBlog</title>
    </Head>
 </>
)
export default Home
Copy the code

Install @zeit/ Next-css to make Next-.js support CSS files

Its main function is to enable Next-js to load CSS files

npm install --save @zeit/next-css
Copy the code

After installation, create next. Config.js (the general configuration file next. Js) in the blog root directory

const withCss = require('@zeit/next-css')
if(typeof require! = ='undefined') {require.extensions['.css'] =file= >{}}module.exports = withCss({})
Copy the code

Install Ant Design and load it as needed

To install using NPM, enter the following command

npm install antd --save
Copy the code

Install babel-plugin-import for on-demand loading

npm install babel-plugin-import --save-dev
Copy the code

Create a. Babelrc file in the root directory of the project and configure it as follows:

{
    "presets": ["next/babel"].// Next.js's total configuration file inherits all of its own configuration
    "plugins": [// This plugin allows antD to be introduced on demand, including CSS
        [
            "import",
            {
                "libraryName":"antd"}}]]Copy the code

In the Pages directory, create a style.js file and import CSS globally

import App from 'next/app'
import 'antd/dist/antd.css'
export default App
Copy the code

At this point, Ant Design can be introduced on demand

import React from 'react'
import Head from 'next/head'
import {Button} from 'antd'
const Home = (a)= > (
  <>
    <Head>
      <title>Home</title>
    </Head>
    <div><Button>I am a button</Button></div>
 </>
)
export default Home
Copy the code

Write common components like Header, Footer, Author, and so on

GitHub

Blog details page – Parsing Markdown syntax

Write articles using Markdown and parse articles using React-markdown

  • React-markdown is a markdown resolution component for React
  • React-markdown installation and introduction
npm i --save react-markdown
Copy the code
  • Introduced in components that require markdown
import ReactMarkdown from 'react-markdown'
Copy the code
  • Use in a component and mock out a piece of data

let markdown='# P01: Course Introduction and Environment building \n' +
  '[ **M** ] arkdown + E [ **ditor** ] = **Mditor** \n' +
  '> Mditor is a clean, easy to integrate, easy to extend, comfortable editor for writing Markdown, nothing more... \n\n' +
  '** This is bold text **\n\n' +
  '* This is slanted text * '\n\n' +
  '*** * This is italic bold ***\n\n' +
  '~~ This is the strikeout text ~~ \n\n'+
  '\`console.log(111)\` \n\n'+
  '# p02: Hello World initial Vue3.0\n' +
  '> aaaaaaaaa\n' +
  '>> bbbbbbbbb\n' +
  '>>> cccccccccc\n'+
  '***\n\n\n' +
  '# p03:Vue3.0 basics \n' +
  '> aaaaaaaaa\n' +
  '>> bbbbbbbbb\n' +
  '>>> cccccccccc\n\n'
  / /...
<div className="detailed-content" >
    <ReactMarkdown
    // sourceThe data sourcesource={markdown} 
      escapeHtml={false}  
    />
</div>
// Now you can preview parsed articles in your browser
Copy the code
  • Make markdown navigation

Use the third-party plugin Markdown-navbar

  1. ClassName: Modify the default style
  2. Source: To parse markdown content
  3. Ordered: The numeric encoding is displayed by default, false is not displayed

Markdown installation and use

npm install --save markdown-navbar
Copy the code

Import and CSS in the components used

import MarkNav from 'markdown-navbar'
import 'markdown-navbar/dist/navbar.css'
Copy the code

Use MarkNav in the component

<div className="detailed-nav comm-box">
  <div className="nav-title">The article directories</div>
  <MarkNav
    className="article-menu"
    source={markdown}
    ordered={false} / ></div>
// Now you can see the effect
Copy the code