某个不起眼的博客网站

更新注记

TODO List

• 接入QQ、微信等第三方登录账号系统
• 支持分享微信公众号

1.设计

没有设计师 我就是设计师

2.前端

基本的框架

用Bootstrap作脚手架
用jQuery API代替原生JavaScript

套用的脚手架模板有：

• 主页：http://www.ghostchina.com/
• 主页的carousel：http://v3.bootcss.com/examples/carousel/
• 登录页面UI：http://v3.bootcss.com/examples/signin/
• about/home：http://v3.bootcss.com/examples/dashboard/
• 评论区：https://bootsnipp.com/snippets/459K9
• 页面注脚/footer：http://v3.bootcss.com/examples/blog/

以及，使用了 Font Awesome 图标库

Markdown 插件

使用的 Editor.md 插件

Github地址：pandao/editor.md - Github

但实际上这个项目已年久失修，我用的时候发现一个bug。
注：不要在使用#作分级标题符的同时使用任何样式，比如

### `I'm code` *斜体字* **粗体字** 等等

像这样才会正常显示：

### 我是三级标题

附：（11月6号加）改用了仿Cmd Markdown Style的CSS：https://github.com/wakaryry/editorMd

用法

HTML 页面

    # Hi
    $(function() {
        var testEditor = editormd("test-editormd", {
            // width: "100%",
            // height: "100%",
            // markdown: "# Hello", // dynamic set Markdown text
            path : "editor.md/lib/" // Autoload modules mode, codemirror, marked... dependents libs path
        });
    });

Jquery 动态加载 Markdown Code，以及获取 HTML code

// 将 Markdown Code 填充到 editormd 编辑器中
$('#mdtextarea').html(markdownCode); // 适合在 editormd 编辑器还未加载时
testEditor.setMarkdown(markdownCode); // 适合 editormd 编辑器已经加载完成
// 获取编辑更新后的 Markdown Code
markdownCode = $('#mdtextarea').html(); // 获取到的 Markdown Code 不准确，因为这是经过编码的
markdownCode = testEditor.getMarkdown(); // 推荐用法
// 获取预览显示的 HTML Code
htmlCode = $("#test-editormd .editormd-preview-container").html(); // test-editormd 为编辑器主体的 ID，editormd-preview-container 则是预览内容主体（在编辑器主体层级之下）的类名
htmlCode = testEditor.getPreviewedHTML(); // 推荐用法

富文本编辑器

使用 summernote 作为富文本编辑器。官网：https://summernote.org/

Summernote 是一个简单，灵活，所见即所得（WYSIWYG）的编辑器，基于 jQuery 和 Bootstrap 构建。Summernote 所有主要的操作都支持快捷键，有一个功能强大的 API，它提供了大量的自定义选项的设计（宽，高，有效的项目等等）和功能。

防XSS注入

11月15号引用 http://jsxss.com/zh/index.html 修复XSS注入漏洞
详见：关于防XSS和SQL注入 - 网站安全

3.后台

语言：PHP

使用了 MeepoPS 框架写websocket（部署的时候因不支持wss协议，已打入冷宫，换用Workerman）

使用 Worderman 框架写websocket （详见另一篇博客：使用PHP处理websocket）

使用 swiftmailer 插件发邮件

4.优化

（待填坑）
首屏性能非常差，第一次加载的时候页面空白延迟时间很大。
解决思路：

• 前端资源CDN处理
• 页面资源静态化
• 页面加载使用加载动画，避免空白屏
• 换用带宽大的服务器（

优化过程：

• 2018-03-31：jQuery、Bootstrap、toastr等文件cdn化
• 2018-04-01：升级到最新nginx，配置了服务器主动推送和部分图片压缩，性能提升不高，加载速度瓶颈在于gif/图片传输
• 2018-04-01：升级服务器带宽1M => 2M，首页无缓存完全加载时间从 50s 降至 23s-25s
• 2018-04-01：使用又拍云cdn服务，博客全站cdn处理，首页无缓存完全加载时间降至7s以内！
• 2021-05-10：已上腾讯云轻量应用服务器，峰值带宽 30Mbps，是真的香！

5.最后

代码已托管在Github上：传送门

前端界面简陋，毕竟我只是个后台，轻喷Ծ ̮ Ծ
以及，发现Bug的话，请务必联系我哦(ฅ>ω<*ฅ)

然后偶尔会在这上面写一些笔记。

最后，我的心愿是，世界和平。