preface

This blog project is based on react Family bucket + Ant Design. The project is open source, and the project address is on Github.

Effect of 1.

Effect:

  • PC

  • Mobile adaptation

Full effect see: biaochenxuying. Cn/main. HTML

2. Function Description

2.1 Functions have been implemented

  • The login
  • registered
  • The article lists
  • tag
  • Personal introduction
  • Likes and comments
  • Leave a message
  • The timeline
  • Post (MarkDown syntax supported)
  • Article details (support code syntax highlighting)

2.2 Functions to be implemented

  • The article archive
  • The article classification
  • A table of contents with article details
  • Mobile adaptation
  • Upgrade the Webpack version to 4.x

3. Front-end technology

3.1 Main Technologies

  • React: 16.5.2
  • Antd: 3.9.3
  • The react to the router: : 4.3.1
  • Webpack: 3.8.1
  • Axios: 0.18.0
  • Story: 4.0.0
  • Highlight. Js: 9.12.0
  • Marked: 0.5.1

4. Project construction

  • The project was built with antD’s recommended tutorial: ANTD is used in create-React-app to load component code and styles on demand.

5. Main project structure

- components - article Article details - articles Article list - Comments - loadEnd Loading completed - Loading - Login Login - Message message - nav Navigation - Register - Slider - Right bar (blogger logo, links, labels, etc.) - timeLine - Router - Store redux status management - Utils package common methods - Views frame pageCopy the code

6. Markdown rendering

Markdown rendering:

React supports markdown syntax, but does not support table rendering, so it is useless.

The markdown rendering is marked with open source, and the code is highlighted with highlight.js.

Usage:

NPM I marked highlight.js –save

npm i marked highlight.js --save
Copy the code

Step 2: Import

import marked from 'marked';
import hljs from 'highlight.js';
Copy the code

Step 3: Setup

componentWillMountRenderer({renderer: new renderer (), GFM:true,
			tables: true,
			breaks: true,
			pedantic: false,
			sanitize: true,
			smartLists: true,
			smartypants: false,
			highlight: function(code) {
				returnhljs.highlightAuto(code).value; }}); }Copy the code

Step 4:

<div className="content">
	<div
		id="content"
		className="article-detail"
		dangerouslySetInnerHTML={{
		      __html: this.state.articleDetail.content ? marked(this.state.articleDetail.content) : null,
			}}
		/>
	</div>
Copy the code

Step 5: Introduce the CSS style of Monokai_sublime

<link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet">
Copy the code

Step 6: Supplement the Markdown style

If you do not add styles, there will be no black background, the font size will be small, and the image will not be centered

/* Complement to markdown */ pre {display: block; padding: 10px; margin: 0 0 10px; font-size: 14px; The line - height: 1.42857143; color:#abb2bf;
    background: #282c34;
    word-break: break-all;
    word-wrap: break-word;
    overflow: auto;
}
h1,h2,h3,h4,h5,h6{
    margin-top: 1em;
    /* margin-bottom: 1em; */
}
strong {
    font-weight: bold;
}

p > code:not([class]) {
    padding: 2px 4px;
    font-size: 90%;
    color: #c7254e;
    background-color: #f9f2f4;border-radius: 4px; } p img{/* image center */ margin: 0; display: flex; }#content {
    font-family: "Microsoft YaHei".'sans-serif';
    font-size: 16px;
    line-height: 30px;
}

#content .desc ul,#content .desc ol {
    color: # 333333;Margin: 1.5em 0 0 25px; }#content .desc h1, #content .desc h2 {
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

#content .desc a {
    color: #009a61;
}

Copy the code

6. The effect of floating flowers on the home page

As you can see, the effect of the full screen of the home page is great. I also found this effect online, which is in a separate main. HTML file, the code link is as follows:

The effect of the full screen of the home page

7. Pay attention to the point

7.1 Packaged Configuration

Since the project was packaged with react-app-Rewired, a community solution for customizing-create-React-app, So if you want to change the configuration of webpack.config.dev.js and webpack.config.prod.js, you may not see the desired effect after packaging, because when react-app-rewired is packaged, It is packaged according to the config-overrides. Js of the root directory, so to modify the configuration of webpack, please modify config-overrides.

For example: turn off sourceMap and support decorators

config.devtool = false; / / closesourceMap 
config = injectBabelPlugin('babel-plugin-transform-decorators-legacy', config); // Support decoratorsCopy the code

7.2 About the Page

For the page about, in fact, is an article, according to the article type type to decide, the database of type 3 articles, there can only be one is the introduction of the blogger; You can change the content whenever you want.

So when this. Props. The location. The pathname = = = ‘/ about is the type of request for blogger is introduced.

type: 3, // Type of passage: 1: normal passage; 2. the resume of the blogger. 3. Profile of the blogger;Copy the code

8. Build Setup

# install dependencies
npm install 

# serve with hot reload at localhost: 3000NPM start or YARN start# build for production with minificationNPM run build or YARN run buildCopy the code

If you want to see the full effect, you need to run it with the background project blog- Node, otherwise the interface request will fail.

Despite the introduction of the mock up, but there’s no time to do simulation data, want to see the specific effect, steadily to my website, please check the biaochenxuying. Cn/main HTML

The last

Other specific business code, which are common requirements, will not be covered here.

If you think this article is good, welcome to my Github, star, thank you.

Project Address:

The front desk display: https://github.com/biaochenxuying/blog-react

Management background: https://github.com/biaochenxuying/blog-react-admin

The backend: https://github.com/biaochenxuying/blog-node

blog：https://github.com/biaochenxuying/blog

Series of articles on this blog system:

    1. React + Node + Express + Ant + mongodb
    1. React + Ant Design + Supports Markdown’s blog-React project documentation
    1. Blog-node project documentation based on Node + Express + mongodb
    1. How did I deploy the Node +mongodb project on the server and optimize its performance

You think that’s the end of this article? Wonderful behind!!

Github.com/biaochenxuy…