hexo/next常见插件使用技巧

hexo plugins 上面一些喜欢的 plugin 插件在 next 主题上面进行测试,以及一些 hexo 的常用写作方法。 没有特殊说明,前面是在写文章时候的代码,后面是显示的效果,插件系列的需要先安装相应的插件才行。

插件系列

好用的插件列表推荐

github-emojis

微笑表情 😄

hexo-footnotes 角标用法

你好,这是角标1 ^1 hi,角标2 ^2

hexo-pdf

Normal PDF

1
{% pdf http://7xov2f.com1.z0.glb.clouddn.com/bash_freshman.pdf %}

Google drive

1
{% pdf https://drive.google.com/file/d/0B6qSwdwPxPRdTEliX0dhQ2JfUEU/preview %}

Slideshare

1
{% pdf http://www.slideshare.net/slideshow/embed_code/key/8Jl0hUt2OKUOOE %}

hexo-qiniu-sync

写博客时候,经常会在博客中插入一些图片,使得整篇文章阅读起来效果更好一些。 最初始的都是通过放到 static/images 目录下,然后在博客中引用相对路径 ![图片](../static/images/*.jpg) 来达到效果,但这种图片的加载太慢,后来将博客的图床放到七牛上面,每次都需要先上传到七牛 buket 空间里,拷贝出 url 来,在 ![图片](http://qiniu.com/*.jpg) 来达到效果,但文章写的多了,难免过于繁琐。所以此插件就出现了,配置好后,一句话 {\% qnimg test/demo.png title:图片标题 alt:图片说明 'class:class1 class2' extend:?imageView2/2/w/600 %\} 就可以自动将目录中的图片上传到七牛存储中,并自动引用其完整路径,非常省心,最终渲染成的完整为 <img title="图片标题" alt="图片说明" class="class1 class2" src="http://gyk001.u.qiniudn.com/images/test/demo.png?imageView2/2/w/600"> 。如何配置参考其 github 主页 https://github.com/gyk001/hexo-qiniu-sync

常见技巧

适配手机版本的视频分享

1
<iframe class="iframe-video" src="http://v.qq.com/iframe/player.html?vid=g0167043an5&tiny=0&auto=0" allowfullscreen></iframe>

slide share 分享ppt文章,并控制大小

1
<iframe src="//www.slideshare.net/slideshow/embed_code/key/e4wEkRJuatBp7w" width="425" height="355" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="//www.slideshare.net/kaiyannju/hbase-11999745" title="Hbase介绍" target="_blank">Hbase介绍</a> </strong> from <strong><a href="//www.slideshare.net/kaiyannju" target="_blank">kaiyannju</a></strong> </div>

table 的使用方法

1
2
3
4
5
| Tables | Are | Cool |
|:-------------:|:-------------:|:-----:|
| col 3 is | right-aligned | 1600|
|col2is|centered|12 |
| zebra stripes | are neat | $1 |
Tables Are Cool
col 3 is right-aligned 1600
col2is centered 12
zebra stripes are neat $1

手写html 的table

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
<table>
<thead>
<tr>
<th style="text-align:right">vpn</th>
<th style="text-align:center">shadowsocks</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:right">简单,一键翻墙</td>
<td style="text-align:center">简单,一键翻墙</td>
</tr>
<tr>
<td style="text-align:right">全局,代理浏览器、各种app、所有走网络的都经过vpn服务器</td>
<td style="text-align:center">只有浏览器(可以手动设置代理其他app)</td>
</tr>
<tr>
<td style="text-align:right">免费、收费服务商很多</td>
<td style="text-align:center">免费、收费服务商很多</td>
</tr>
<tr>
<td style="text-align:right">速度可以</td>
<td style="text-align:center">速度很快,香港、新加坡几十毫秒</td>
</tr>
<tr>
<td style="text-align:right">平台性稍差,有些做的也不错了,总体跨平台性差</td>
<td style="text-align:center">支持各平台客户端,跨平台性强</td>
</tr>
</tbody>
</table>

效果:

vpn shadowsocks
简单,一键翻墙 简单,一键翻墙
全局,代理浏览器、各种app、所有走网络的都经过vpn服务器 只有浏览器(可以手动设置代理其他app)
免费、收费服务商很多 免费、收费服务商很多
速度可以 速度很快,香港、新加坡几十毫秒
平台性稍差,有些做的也不错了,总体跨平台性差 支持各平台客户端,跨平台性强
xirong wechat
我在公众号与你分享更多内容