优化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

1
2
3
4
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文章里面直接使用!!!! 比如下面这个例子亲测成功, 注意就是要将插入的网页居中就是了!!

1
2
3
4
5
<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链接

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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()

Further Reading (more useful links)

一起加油!