---

前几天学长 ntzyz 也开始写一个博客框架，然后他是前后端分开的，后端用 Node.js，前端用 Vue.js，源码在 这里，然后我看了也心痒了，于是决定把之前的 BlogA 改一改，让它支持作为独立的后端，然后再写个前端，于是就有了 BlogA 的 API 模式和 BlogNG。

BlogA API 模式

这个其实是得益于 Flask 里面使用模板的方式，BlogA 在处理请求时是把数据全部收集到一个字典对象，然后传给 render_template 函数来渲染模板，因此我直接在配置项里面加了一个模式选项，可以选择「web-app」「api」「mixed」三种模式，然后在原来调用 render_template 的前面判断当前的模式，如果是开启了「api」模式，那就不调用 render_template，而是调用 jsonify 来把字典转换成 JSON 返回，而如果是「web-app」模式那就像以前那样返回 HTML，如果是「mixed」模式就通过 HTTP 请求头的「Accept」选项或者 URL 里面的「format」参数来确定是返回 JSON 还是 HTML，于是基本上在不修改以前的使用方式和 URL 路径的情况下，做到了完美的 API 支持。

BlogNG

然后后端弄好就弄前端了，看学长那个博客前端用 Vue.js，然后去了解了一下，感觉挺不错的，配合 vue-router 可以比较轻松地做到整站无刷新。然后页面的整体框架肯定是用 Bootstrap 了，先是用 Pingendo 拖了个大致的模板，然后去把左边的主要内容和右边的侧边栏抽成模板，这样基本的结构就出来了。因为用了 vue-router 和 vue-resource，处理页面切换很方便，直接在 BaseComponent 里面让它在访问每个 URL 的时候都直接请求相对应的 API 地址，然后具体的不同内容比如博文、自定义页面、分类和标签归档去基于 BaseComponent 分别写模板。因为其实每个页面的处理逻辑都是一样的：请求 API、渲染模板，所以这些基础性的东西都抽离在 BaseComponent 来做会清楚很多。然后这么一下整体样子就基本出来了。

但是在写侧边栏时遇到坑，因为想弄一个音乐播放器，尝试网易云音乐的外链，不好用，不仅没有完全 HTTPS，而且很多歌因为版权原因会导致播放器停住点播放没反应，于是另外找了一个播放器，但是播放器初始化显然是需要跑 JavaScript 代码的，Vue 的模板里面插入 <script> 标签是没有效果的，于是折腾了不少时间找到一个 workaround：在 Component 的 ready 和 beforeDestroy 回调里面调用三个固定的方法 handleReady()、handleLoadedAll()、handleBeforeDestroy()，分别在页面切换完成、请求 API 完成、即将销毁时候调用，于是就在 index.html 里面包含一个 custom.js 在这里面去实现那三个函数就好了。

前后配合

JavaScript 里面不能直接跨站请求，但是 BlogA 的 API 模式跟普通模式的 URL 是一样的（这可能是个问题，也许要去改一下让 API 模式处理 /api/ 下的 URL），所以得在 Web 服务器的配置文件里面去把 /api/ 开头的请求反代到 BlogA 的地址。并且，因为是用 vue-router 做成了单页应用，所以还需要改一下 rewrite 规则，来把所有除 /api/ 以外的链接全部引导到 index.html 来处理。全部弄完，就大功告成了。

这里给一下 GitHub 上的项目链接：BlogA、BlogNG，觉得不错的话，求个 star。

新域名

全写完，一兴奋，就买了个新域名 stdrc.cc（其实一年才 16 块钱），这域名配合博客副标题 #include <stdrc.h> 简直完美哈哈（cc 是 C++ 的一种文件后缀）。