JasonFF 静态博客的一些总结

一、将 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的总结，我将会有另外的笔记。