一、将 markdown 编译为json格式
var fs = require('fs');
var path = require('path');
var marked = require('marked');
var request = require('request');
var downloadPic = require('./widgets/downloadPic');
function MarkdownReader(options) {
this.from = options.from;
this.to = options.to;
this.rule = /\.md$/;
}
MarkdownReader.prototype.apply = function() {
var that = this;
try {
fs.readdirSync(path.resolve(__rootPath,'./dist'))
} catch (e) {
fs.mkdirSync(path.resolve(__rootPath,'./dist'))
}
fs.readdir(that.from, function(error, files) {
if (error) {
console.error(error)
}
var mddata = new Array();
var notebook = new Array();
for (var i = 0; i < files.length; i++) {
if (that.rule.test(files[i])) {
var article;
try {
article = that._getArticle(files[i], i);
mddata.push(article)
} catch (e) {
console.log(e)
}
}
}
fs.writeFileSync(path.join(that.to, 'data.json'), JSON.stringify(mddata.reverse()))
fs.writeFileSync(path.join(that.to, 'notebook.json'), JSON.stringify(that._getNotebook(mddata)))
})
}
MarkdownReader.prototype._getArticle = function(files, index) {
var that = this;
var fileInfo;
var _path = path.join(that.from, files);
var fileText = fs.readFileSync(path.join(that.from, files)).toString()
var configText = fileText.substring(0, fileText.indexOf('}') + 1)
var markdownText = fileText.substring(fileText.indexOf('}') + 1);
var markdownText = this._getPic(markdownText,files)
var fileInfo = fs.statSync(_path)
try {
var config = JSON.parse(configText)
} catch (e) {
console.error(e);
}
if (!config) {
console.error(files + " 编译失败了！！" + files + " 编译失败了！！" + files + " 编译失败了！！" + files + " 编译失败了！！" + files + " 编译失败了！！")
console.log("请在 " + files + " 开头添加JSON格式的信息！参照栗子！请注意JSON的语法！请不要在JSON中写对象！！")
console.log("你看看你写的什么 " + configText)
return false
}
config._key = index;
config.id = files.replace('.md', '');
var markdownHTML = marked(markdownText);
config.html = markdownHTML;
return config
}
MarkdownReader.prototype._getNotebook = function(config) {
var result = new Array();
var nid = 0;
for (var i = 0; i < config.length; i++) {
for (var m = 0; m < result.length; m++) {
var ifMatch = false;
if (result[m].notebook == config[i].notebook) {
result[m].data.push(config[i]);
ifMatch = true;
break
}
}
if (!ifMatch) {
result.push({
nid: nid,
notebook: config[i].notebook,
data: [config[i]]
})
nid++
}
}
return result;
}
MarkdownReader.prototype._getPic = function(md,filename) {
var result,urls;
var _md = md;
try {
result = _md.match(/\!\[[^\]]+\]\([^\)]+\)/ig)
} catch (e) {}
if (result) {
urls = result.map(function(item,i){
return /\([^\)]+\)/ig.exec(item)[0].replace(/^\(/,'').replace(/\)$/,'')
})
}
if (urls) {
var basePath = path.join(__rootPath,'/dist');
for (var i = 0; i < urls.length; i++) {
var imgName = filename.replace('.md','')+'_'+i+'.png';
downloadPic(urls[i],basePath,imgName)
_md = _md.replace(urls[i],'http://api.jasonff.top/dist/'+imgName)
}
}
return _md
}
module.exports = MarkdownReader;
- 图片插入的解决方案
如果按照markdown的语法进入插入图片，显得太麻烦了，人活着就是为了偷懒，怎么样才能快速将图片插入我的markdown文档中呢？
我发现的插入图片特别的方便，直接在编辑器中粘贴就把图片给插入进去了。但是我的编辑环境是atom 啊。难不成自己写个atom插件？
atom插件貌似也是可行的。但是我发现一个特别偷懒的办法，我不是可以获取的图片地址吗？我可以把图片借助给下到指定文件夹。
下面就是代码
var path = require('path');
var request = require('request');
var fs = require('fs');
var download = function(uri, dir,filename){
console.log('start+++'+uri)
request.head(uri, function(err, res, body){
request(uri).pipe(fs.createWriteStream(dir + "/" + filename));
});
};
module.exports = download;
这个就是写的下载图片到本地文件夹的一个方法。插入到markdown文件中已经在最上面的代码中体现。
二、nginx 静态代理
这个时候，我已经把markdown文档转为了json格式，并且进行了编译。我把图片也已经下载到了指定的文件夹。我现在就需要将这些资源给送出去给我的前端web app。这里用依靠nginx啦！
server {
listen 80;
server_name api.jasonff.top 127.0.0.1;
root /home/ubuntu/github/jasonff-api;
gzip on;
location ~ \.json$ {
if ($request_method = 'OPTIONS') {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
return 200;
}
if ($request_method = 'POST') {
add_header 'Access-Control-Allow-Origin' *;
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
}
if ($request_method = 'GET') {
add_header 'Access-Control-Allow-Origin' *;
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
}
}
}
三、博客前端部分
前端部分没什么好说的，主要是react的一些东西。有关于react的总结，我将会有另外的笔记。