威❤ itspcool 一起交流学习

.
│
├─config // 构建配置
├─public // html 入口
├─scripts // 我的项目脚本
└─server // 后端

├─config            // 我的项目配置 github、email、database、token-secret 等等├─controllers       // 业务管制层├─middlewares       // 中间件├─models            // 数据库模型├─router            // 路由├─utils             // 工具包├─  app.js          // 后端主入口文件├─  initData.js     // 初始化根底数据脚本└─...

│
└─src // 前端我的项目源码
├─assets // 动态文件
├─components // 专用组件
├─layout // 布局组件
├─redux // redux 目录
├─routes // 路由
├─styles // 款式
├─utils // 工具包
├─views // 视图层
├─ App.jsx // 后端主入口文件
├─ config.js // 我的项目配置 github 个人主页、集体介绍等等
├─ index.js // 主入口文件
└─...
blog革新流程一览
页面的客制化革新
性能的修复与增加
个人信息的填充
小彩蛋
页面的客制化革新
为了更加实用于本人的应用场景，对页面进行了一些客制化的革新

页面背景（写成了可配置可拆卸的）

史上最强合影（压缩过了）
页面动效 加上了很多博客都有的翻转滚动的小棒！是不是很棒！
千方百计找到了一个可用的

性能的修复与增加
为了将博客所有者与阅读者隔离开，退出了role字段进行管制。

公开与私密文章：
博客不单单是展现本人、记录笔记的中央，更是集体情感的树洞，是回顾编织的大网，所以必定是须要将公开和私密的文章隔离开啦，依据用户角色鉴权来返回对应的数据。这样更好的爱护了隐衷，也让博客所有者穿上了本人的底裤~

Markdown 编辑器 mathjax 反对
因为博主是一个强大的科研爱好者，所以写公式更是必须的啦，之前找的这个React-blog在这个性能上存在一些瑕疵，不能无效的反对mathjax，所以进行了一些改变，对 react-simplemde-editor 进行了一些简略的封装，使其反对MathJax预览，在文章显示上实用marked进行编码，使mathjax能够无效显示。

具体实现

export const translateMarkdown2html = (plainText, isGuardXss = false) => {
const marked_render = new marked.Renderer()
marked_render.old_paragraph = marked_render.paragraph
// 重写paragraph()办法
marked_render.paragraph = function(text) {

 // isTeXInline - 该文本是否有行内公式 var isTeXInline = /\$(.*)\$/g.test(text) // isTeXLine - 该文本是否有行间公式 var isTeXLine = /^\$\$(\s*.*\s*)\$\$$/.test(text) if (!isTeXLine && isTeXInline) {   // 如果不是行间公式，然而行内公式，则应用<span class="marked_inline_tex">包裹公式内容，打消$定界符   text = text.replace(/(\$([^\$]*)\$)+/g, function($1, $2) {     // 防止和行内代码抵触     if ($2.indexOf('<code>') >= 0 || $2.indexOf('</code>') >= 0) {       return $2     } else {       return '<span class=\'marked_inline_tex\'>' + $2.replace(/\$/g, '') + '</span>'     }   }) } else {   // 如果是行间公式，则应用<div class='marked_tex'>包裹公式内容，打消$$定界符   // 如果不是LaTex公式，则间接返回原文本   text = (isTeXLine) ? '<div class=\'marked_tex\'>' + text.replace(/\$/g, '') + '</div>' : text } // 应用渲染器原有的`paragraph()`办法渲染整段文本 text = this.old_paragraph(text) return text

}
// 配置marked.js的渲染器为marked_render，应用highlight.js来主动高亮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 }

})
}

文章置顶
置顶文章是一个必须的性能，当你有一些得意之作时，更心愿它能有更高的优先级，能帮忙到更多的人，所以减少了该性能

一键评论
这是为了不便敌人们可能更疾速的进行评论，因为让敌人们注册的话有持有明码和明码透露的危险，所以间接应用用户名和qq邮箱（不便拿到头像）进行疾速评论即可，后盾将主动注册登录该用户。