阅读量：
评论数：
某个不起眼的博客网站
更新注记
| 日期 | 作者 | 更新内容 |
|---|---|---|
| 2017-11-01 | Frankie | HelloWorld |
| 2017-11-02 | Frankie | 增加网站源代码链接 |
| 2017-11-06 | Frankie | 改用了仿Cmd Markdown Style的CSS |
| 2017-11-14 | Frankie | 使用summernote富文本代替原先的textarea |
| 2017-11-15 | Frankie | 修复XSS注入漏洞 |
| 2018-02-09 | Frankie | 增加页面加载优化思路（TODO） |
| 2018-04-01 | Frankie | 升级nginx，使用服务器推送，压缩部分图片 |
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
使用summernote富文本编辑器
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的话，请务必联系我哦(ฅ>ω<*ฅ)
然后偶尔会在这上面写一些笔记。
最后，我的心愿是，世界和平。