CINXE.COM
作品 - 叶子岛（叛道的个人网站）
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <meta name="renderer" content="webkit" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> <meta name="description" content="Plane UI" /> <meta name="keywords" content="Plane UI" /> <meta name="author" content="Pandao, pandao@vip.qq.com"/> <meta name="robots" content="index,follow" /> <!-- 禁止百度转码 --> <meta http-equiv="Cache-Control" content="no-siteapp"/> <!-- 添加到主屏后的标题 iOS6+ --> <meta name="apple-mobile-web-app-title" content="Plane UI" /> <!-- 是否启用 WebApp 全屏模式 --> <meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 设置状态栏的背景颜色，只有在 `"apple-mobile-web-app-capable" content="yes"` 时生效 --> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <!-- for iOS icons --> <link rel="apple-touch-icon-precomposed" href="/icons/icon-57x57.png" /> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/icons/icon-72x72.png" /> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/icons/icon-114x114.png" /> <link rel="apple-touch-icon-precomposed" sizes="120x120" href="/icons/icon-120x120.png"> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/icons/icon-144x144.png" /> <link rel="apple-touch-icon-precomposed" sizes="180x180" href="/icons/icon-180x180.png"> <!-- for Android 5 --> <meta name="theme-color" content="#0098DF" /> <!-- Windows 8 metro color --> <meta name="msapplication-TileColor" content="#0098DF" /> <!-- Windows 8 metro icon --> <meta name="msapplication-TileImage" content="favicon.png" /> <!-- closed google auto translate --> <meta name="google" value="notranslate" /> <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 --> <meta name="HandheldFriendly" content="true" /> <!-- 微软的老式浏览器 --> <meta name="MobileOptimized" content="320" /> <!-- uc 强制竖屏 --> <!-- <meta name="screen-orientation" content="portrait" /> --> <!-- QQ 强制竖屏 --> <!-- <meta name="x5-orientation" content="portrait" /> --> <!-- UC 强制全屏 --> <meta name="full-screen" content="yes" /> <!-- QQ 强制全屏 --> <meta name="x5-fullscreen" content="true" /> <!-- UC 应用模式 --> <meta name="browsermode" content="application" /> <!-- QQ 应用模式 --> <meta name="x5-page-mode" content="app" /> <!-- windows phone 点击无高光 --> <meta name="msapplication-tap-highlight" content="no" /> <link rel="icon" type="image/png" href="/favicon.png" /> <link rel="stylesheet" type="text/css" href="/bower_components/planeui/dist/css/planeui.min.css" /> <link rel="stylesheet" href="/bower_components/editor.md/css/editormd.preview.css" /> <link rel="stylesheet" type="text/css" href="/css/style.css" /> <title>作品 - 叶子岛（叛道的个人网站）</title> </head> <body> <!--[if lte IE 10]> <div class="pui-layout pui-browsehappy"> <div> <h1><i class="icon-yezi primary-color" style="font-size: 120px;"></i></h1> <p>您正在使用 <strong class="primary-color pui-text-xl">过时</strong> 的非现代浏览器，<strong class="primary-color pui-text-xl">91.23%</strong> 的人选择 <a href="http://browsehappy.com/" target="_blank" class="pui-text-success pui-text-xl"><strong>升级浏览器</strong></a>，获得了更好、更安全的浏览体验！</p> </div> </div> <![endif]--> <a name="top"></a> <div class="pui-tooltip pui-tooltip-viewer pui-tooltip-arrow-lt pui-z-depth-1 pui-unbordered" id="profile-tooltip"> <div class="pui-tooltip-context"> <header class="pui-text-center"> <p><img src="/images/avatar.jpg" class="pui-img-circle pui-img-md" /></p> <strong class="pui-h4">叛道 Pandao</strong> <p class="pui-text-grey-400">Web Designer & Developer<br/><i class="fa fa-map-marker"></i> Xiamen, China</p> <p><a href="https://github.com/pandao" target="_blank" class="pui-btn pui-btn-success pui-btn-xsmall">关注我</a></p> </header> <ul class="pui-menu pui-menu-simple pui-menu-inline pui-menu-justify"> <li><a href="http://weibo.com/ipandao" class="fa fa-weibo fa-2x" target="_blank"></a></li> <li><a href="https://twitter.com/ipandao" class="fa fa-twitter fa-2x" target="_blank"></a></li> <li><a href="https://github.com/pandao" class="fa fa-github fa-2x" target="_blank"></a></li> </ul> <ul class="pui-menu pui-menu-simple pui-menu-inline pui-menu-justify pui-text-md"> <li><a href="http://my.oschina.net/pandao" class="fa pui-font-zh-cn" target="_blank">开源中国</a></li> <li><a href="http://huaban.com/pandao" class="fa pui-font-zh-cn" target="_blank">花瓣</a></li> <li><a href="http://www.douban.com/people/pandao/" class="fa pui-font-zh-cn" target="_blank">豆瓣</a></li> </ul> </div> </div> <!-- 整体布局 start --> <div class="pui-layout" id="layout"> <!-- 页面主体 start --> <div class="pui-flexbox" id="main"> <!-- 页面侧边栏 start --> <div class="pui-grid-xs-2 pui-flexbox pui-flex-column" id="aside"> <header class="pui-animation-fade-in"> <p><img src="/images/avatar.jpg" class="pui-img-circle avatar" /></p> <div class="title"></div> </header> <nav class="pui-flex"> <menu> <ul class="pui-menu pui-padding-none" id="menu"> <li> <a href="/">首页</a> </li> <li> <a href="/articles">文章笔记</a> </li> <li> <a href="/favorites">收集</a> </li> <li> <a href="/works" class="active">作品</a> </li> <li> <a href="/about">关于我</a> </li> </ul> </menu> <span id="menu-active"></span> </nav> <footer> <i class="icon-yezi primary-color"></i> <p class="pui-right">代码如诗，设计如画， 此中有禅意。</p> </footer> </div> <!-- 页面侧边栏 end --> <!-- 页面内容层 start --> <div class="pui-flex" id="main-container"> <a href="#top" class="pui-btn pui-btn-success pui-btn-xsmall primary-bg-color" id="title-goto-top" style="top: 1.5rem;">TOP</a> <div class="page-wrapper page-wrapper-toc"> <div class="pui-card pui-card-padding-none article-view"> <div class="pui-card-title"> <h1>作品</h1> </div> <div class="pui-card-box"> <div id="article-toc"></div> <div class="pui-text-sm" id="article-content"> <textarea style="display: none;">[TOC] ##### 开源作品 [Editor.md](https://pandao.github.io/editor.md/) 开源的、可嵌入的在线 Markdown 编辑器     [Plane UI](https://pandao.github.io/planeui/) HTML5 跨终端响应式前端界面框架    [tileTemplate](https://pandao.github.io/tiletemplate/) 简单的高性能 JavaScript 模板引擎   [Slimore](https://github.com/slimore/slimore) 基于 Slim 框架的 PHP 完全 (H)MVC 框架   [Prefixes.scss](https://github.com/pandao/prefixes.scss) CSS(3) 前缀处理的 Sass/Scss mixins 库   [Drv.js](https://github.com/pandao/drv.js) 组合式前端 MVVM / MVC / SPA 开发框架，基于 Director.js + Require.js + Vue.js 等组件构建   [httpx.js](https://github.com/pandao/httpx.js) 一个简单的 JavaScript HTTP / RESTful 请求库   </textarea> </div> <div class="pui-text-center pui-hide"> <a href="#top" class="pui-btn pui-btn-default">TOP <i class="fa fa-long-arrow-up" style="margin-top: -5px;"></i></a> </div> </div> </div> <!-- 多说评论框 start --> <div class="ds-thread" data-thread-key="http://www.ipandao.com/works" data-title="作品" data-url="http://www.ipandao.com/works"></div> <!-- 多说评论框 end --> <!-- 多说公共JS代码 start (一个网页只需插入一次) --> <script type="text/javascript"> var duoshuoQuery = {short_name:"pandao"}; (function() { var ds = document.createElement('script'); ds.type = 'text/javascript';ds.async = true; ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js'; ds.charset = 'UTF-8'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ds); })(); </script> <!-- 多说公共JS代码 end --> <footer> <p>Copyright © 2015 ipandao.com 版权所有 <script src="http://s9.cnzz.com/stat.php?id=3291836&web_id=3291836&show=pic" type="text/javaScript"></script></p> <p>Powered by <a href="https://github.com/slimore/slimore" class="pui-link" target="_blank" title="基于 Slim 的 PHP 完全 （H）MVC 框架">Slimore</a> & <a href="https://github.com/pandao/planeui" class="pui-link" target="_blank" title="HTML5 跨终端响应式前端界面框架">Plane UI</a> & <a href="https://github.com/pandao/planeui" class="pui-link" target="_blank" title="Editor.md 是一款开源的、可嵌入的在线 Markdown 编辑器">Editor.md</a> , Design & Develop : <a href="github.com/pandao" class="pui-link" target="_blank">Pandao</a> .</p> <p>本站运行在 <a href="https://www.digitalocean.com/?refcode=776e55510753" target="_blank" class="pui-link">DigitalOcean</a> 提供的 VPS 上</p> </footer> <div class="pui-text-center"> <br/> <a href="#top" class="pui-btn pui-btn-default pui-btn-small"> TOP <i class="fa fa-long-arrow-up" style="margin-top: -5px;"></i> </a> </div> </div> </div> <!-- 页面内容层 end --> </div> <!-- 页面主体 end --> <footer> <i class="icon-yezi primary-color"></i> <p class="pui-right">代码如诗，设计如画， 此中有禅意。</p> </footer> <script data-ad-client="ca-pub-5041957353250087" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> </div> <!-- 整体布局 end --> <!--[if (gte IE 9) | !(IE)]><!--> <script type="text/javascript" src="/bower_components/jquery/dist/jquery.min.js"></script> <!--<![endif]--> <!--[if lt IE 9]> <script type="text/javascript" src="/js/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="/bower_components/planeui/dist/js/planeui.patch.ie8.js"></script> <![endif]--> <!--[if lt IE 10]> <script type="text/javascript" src="/bower_components/planeui/dist/js/planeui.patch.ie9.js"></script> <![endif]--> <script type="text/javascript" src="/bower_components/planeui/dist/js/planeui.js"></script> <script type="text/javascript" src="/js/page.js"></script> <!--<script src="http://192.168.1.3:8080/target/target-script-min.js#anonymous"></script>--> <script src="/bower_components/editor.md/lib/marked.min.js"></script> <script src="/bower_components/editor.md/lib/prettify.min.js"></script> <script type="text/javascript" src="/bower_components/editor.md/editormd.min.js"></script> <script src="/js/view.js"></script> <script> $(function() { parseMarkdown(); if (!Modernizr.touch) { $('#article-content a[href]').addClass('pui-link').attr("target", "_blank").append('<i class="fa fa-external-link"></i>'); } $("#article-content img").addClass("pui-img-responsive"); $("#article-content img[src^=\"uploads/\"").each(function() { var src = $(this).attr("src"); $(this).attr("src", "/" + src); }); }); </script> </body> </html>