在看技术文档的时候发现使用选项卡来呈现示例代码是个很不错的方式，既可以节约版面空间还清晰明了，比如下面这个简单的vue声明式渲染demo

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

明显比顺序排下来好多了，刚开始在网上搜索typecho此类插件一直没有找到，所以干脆自己动手撸一个，最后就在typecho的默认HelloWorld插件基础上完成了这个Typecho-Tabs插件，由于自己不是做php开发的中间也遇到了很多的问题，不过通过不断调试查文档资料，最后还是将这个插件写出来了。

【一个想法不一定对】：编程其实是一种思维方式和用什么编程语言关系不是很大（语言只是一种工具），当你掌握了编程思维后即使让你用从没用过的语言你也可以在了解它的语法基础后快速上手开发。

使用方法

1、下载插件后解压放在typecho插件目录

2、后台开启插件

3、在文章中使用

[tabs ]
[tab name="选项卡名称1"]内容1[/tab]
[tab name="选项卡名称2"]内容2[/tab]
[tab name="选项卡名称3"]内容3[/tab]
[/tabs]