Prestige ❤ Exchange and learn together with itspcool

.
│
- config / / build configuration
- public / / HTML entry
- scripts / / Project scripts
└ - server / / backend

├─config            // The project configures github, email, database, token secret, etc
├─controllers       // Business control layer
├─middlewares       // middleware 
├─models            // database model
├─router            // route
├─utils             // tool kit
├─  app.js          // Back end main entry file
├─  initData.js     // Initialize basic data script
└─...

│
└ - src / / front end project source code
- assets / / static file
- components / / common components
- Layout / / layout component
- Redux / / Redux directory
- routes / / routes
- styles / / styles
utils / / Toolkit
- views / / view layer
App.jsx / / backend main entry file
♪ config.js / / configure github personal homepage, personal introduction, etc
index.js / / main entry file
└─...
blog transformation process list
Customized transformation of page
Repair and addition of functions
Filling of personal information
Small colored egg
Customized transformation of page
In order to be more suitable for their own use scenarios, the page has been customized

Page background (written as configurable and removable)

The strongest group photo in history (compressed)
Page dynamic effect plus the flip and scroll stick that many blogs have! Isn't it great!
Every effort was made to find an available one

Repair and addition of functions
In order to separate the blog owner from the reader, the role field is added for control.

Public and private articles:
Blog is not only a place to show yourself and take notes, but also a tree hole of personal emotion. It is a big network woven by memories. Therefore, it must be necessary to separate public and private articles and return the corresponding data according to user role authentication. This better protects privacy and allows blog owners to wear their own pants~

Markdown editor mathjax support
Because the blogger is a weak scientific research enthusiast, it is even more necessary to write formulas. The react blog found earlier has some defects in this function and can not effectively support mathjax. Therefore, some changes have been made to encapsulate the react simpledmde editor to support mathjax preview, and the article display can be coded with marked, So that mathjax can be displayed effectively.

Concrete implementation

export const translateMarkdown2html = (plainText, isGuardXss = false) => {
const marked_render = new marked.Renderer()
marked_render.old_paragraph = marked_render.paragraph
//Override the paragraph() method
marked_render.paragraph = function(text) {

 // isTeXInline - whether the text has an inline formula
 var isTeXInline = /\$(.*)\$/g.test(text)
 // isTeXLine - does the text have an interline formula
 var isTeXLine = /^\$\$(\s*.*\s*)\$\$$/.test(text)

 if (!isTeXLine && isTeXInline) {
   // If it is not an inter line formula but an intra line formula, use < span class = "marked_inline_tex" > to wrap the formula content and eliminate the $delimiter
   text = text.replace(/(\$([^\$]*)\$)+/g, function($1, $2) {
     // Avoid conflicts with inline code
     if ($2.indexOf('<code>') >= 0 || $2.indexOf('</code>') >= 0) {
       return $2
     } else {
       return '<span class=\'marked_inline_tex\'>' + $2.replace(/\$/g, '') + '</span>'
     }
   })
 } else {
   // If it is an interline formula, use < div class ='marked_ Tex '> wrap the formula content and eliminate the $$delimiter
   // If it is not a LaTex formula, the original text is returned directly
   text = (isTeXLine) ? '<div class=\'marked_tex\'>' + text.replace(/\$/g, '') + '</div>' : text
 }
 // Use the original 'paragraph()' method of the renderer to render the whole text
 text = this.old_paragraph(text)
 return text

}
//Configure the renderer of marked.js as marked_render, use highlight.js to automatically highlight the code in MarkDown

return marked(isGuardXss ? xss(plainText) : plainText, {

 renderer: marked_render,
 pedantic: false,
 gfm: true,
 tables: true,
 breaks: false,
 sanitize: false,
 smartLists: true,
 smartypants: false,
 xhtml: false,
 highlight: function(code) {
   /*eslint no-undef: "off"*/
   return hljs.highlightAuto(code).value
 }

})
}

Sticky Posts
Top article is a necessary function. When you have some satisfactory works, you hope it can have a higher priority and help more people, so this function is added

One click comment
This is to make it easier for friends to comment more quickly. If friends register, they will have the risk of password and password leakage. Therefore, they can directly use the user name and qq email (easy to get the avatar) to comment quickly. The background will automatically register and log in to the user.