优化hexo博客

在搭建hexo博客的时候遇到的各种坑，留下一些最棒的博文和大家分享!

常用功能

添加豆瓣读书插件

每一次如果hexo g会报错，通常都是因为我系统的node的版本不对；需要用nvm use system来改成node 4.5来运行操作。

GitHub - ForbesLindesay/sync-request: Make synchronous web requests with cross platform support. 用sync-request来修改hexo-douban，实现爬去书籍消息的功能。

demo: https://blog.mythsman.com/books/

开发的组件博客 https://blog.mythsman.com/
github： hexo-douban/book.ejs at master · mythsman/hexo-douban · GitHub

类似的但是样式上差一点的另一个组件 GitHub - Yikun/hexo-generator-douban: Douban page generator plugin for Hexo.

添加微博组件

在Hexo博客中添加微博秀 | The Bloom of Youth | 锦瑟华年

Hexo有用的工具和插件汇总 | suarezzz’s blog

怎样使用七牛云服务来存储静态资源

个人的话，我其实用的是微博图床，也很方便。类似的服务还有dropbox, google drive等等。

Edit: 16.3.12更新，现在我自己通过自己写的scripts来自动化将博文中的image上传的任务了，所有的图片都将上传到leancloud然后得到一个external url可以在md博客中直接展示，这样做更加的自动化和节省我的时间!! 具体操作方法看下面的介绍。

关于hexo _config文件的配置细节

推荐博文：

关于hexo基础的command

hexo new "article name"
hexo new page "about" # 给blog添加一个新的main entry endpoint. 比如/about等
hexo generate
hexo deploy

可以利用这个hexo new page "about"这个想法来收集很多的放在collection里面的东西，比如自己的photography, 自己的bookreview等等，就是那些不适合放在单独的博客文章中的东西，都可以尝试整理在这里面，然后在一个portal里面留下入口，比如在”/life”里面留下我的”/photography”和”/bookreview”等等，这样会更加的organized。

在hexo博客里面内嵌html静态网页

我们有将静态网页展示出来作为example的需求，尤其是在介绍新技术的时候，首先将该静态网站部署在服务器上，无论是github上利用gh-pages的静态前端网页，还是elastic beanstalk的后端serve的前端(利用express的app.use(express.static(__dirname + '/public'));可以将public文件夹下面的html文件都serve出来!!!!)，这么做的好处是我们可以得到external URL，可以将这个URL插入在iframe里面，然后在md文章里面直接使用!!!! 比如下面这个例子亲测成功，注意就是要将插入的网页居中就是了!!

<div style='text-align:center' markdown='1'>
	<iframe src="https://mdn-samples.mozilla.org/snippets/html/iframe-simple-contents.html" width="100%" height="400">
		<p>Your browser does not support iframes.</p>
	</iframe>
</div>

居中文本\图片样式

具体效果参考这篇博文的样式，其中在第一段添加了居中文本作为开头。特别适合在段落间插入，作为章节的小结，很优雅~

使用方法<blockquote class="blockquote-center">blah blah blah</blockquote>

将图片居中方法<img src="http://ac-TC2Vc5Tu.clouddn.com/6ceefbf6929babac.png" style="display: block; margin: 0 auto;">，直接添加inline styling，在markdown中插入html image tag。

将图片突破通常边际大小的样式<img src="/image-url" class="full-image" />。

关于怎样自动化博文图片上传

参考自动化替换 Markdown 中的本地图片引用。我已经在我的.zshrc文件里面配置好了，之后写一些多图的博客文章的时候，可以先放一个img/demo.jpg这样的路径占位，之后在从quiver export出md文件后在那个文件夹目录下创建img文件夹和要用的图片执行lzmd source.md target.md即可。github链接

参考将markdown文章中的图片居中。还需要做的事是，把这个做法加入到lzmd的scripts里面，做到一起的自动化。github链接

def replace_img(source_md, target_md, conn):
    image_list = get_image_list_from_md(source_md)
    md_content = open(source_md).read()
    fb = open(target_md, 'w')

    print 'start >>>>>\n'

    for image in image_list:
        source_img = os.path.join(os.path.split(source_md)[0], image[1])
        if not os.path.exists(source_img):
            continue

        db_data = find_in_db(conn, calc_hash(source_img))
        if db_data:
            print("[%s] >>> url: %s" % (os.path.split(source_img)[1], db_data[1]))
            url = db_data[1]
            // 重点在添加一个子元素align的div wrapper
            md_content = md_content.replace(image[0], "<div style='text-align:center' markdown='1'>" + image[0].replace(image[1], str(url)) + "</div>")

        elif os.path.isfile(source_img):
            compressed_img = os.path.join(os.path.split(source_img)[0], 'cp_' + os.path.split(source_img)[1])
            compress(source_img, compressed_img)
            url = upload(compressed_img)
            // 重点在添加一个子元素align的div wrapper
            md_content = md_content.replace(image[0], "<div style='text-align:center' markdown='1'>" + image[0].replace(image[1], str(url)) + "</div>")
            write_db(conn, calc_hash(source_img), url)

        else:
            print source_img + "is not exit or not a file"

    print '\n<<<<< end'

    fb.write(md_content)
    fb.close()