威❤ 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 邮箱（不便拿到头像）进行疾速评论即可，后盾将主动注册登录该用户。