hexo-plugin-showcase v1.0.2
hexo-plugin-showcase
在编写前端教程的时候通常要提供代码和可执行的实例，但没有好的工具可以结合 hexo 做整合，本插件可以将 HTML 代码（含JS、CSS）在博客页面运行起来。
When editing course of JavaScript we need provide code and enviroment for run it, there's no tools can help us doing this. so I have made the plugin to take it including JavaScript and CSS code.
安装 Install
npm install hexo-plugin-showcase然后在 root/source/ 路径下创建 _examples 目录，在这个目录下放置源代码文件（*.html）
when finish making the path in root/source named _examples, you can put source code file here whose extension is .html.
配置 Configuration
如果不想使用 _examples 目录，也可以自定义配置：在 _config.yml 增加 showcase 选项。
if you'll not use default path, the better way is customize and add relative configuration in _config.yml such as the below:
showcase:
dir: custome修改完配置重启服务即可，当然要在 root/source 路径下创建对应的目录。
this's the last step, but not forget to make relative directory as you like.
使用 Usage
我们在 markdown 里正常使用hexo提供的 tag 标签就可以了，代码如下：
we can use tag plugin to mix code into blog,just as:
{% showcase event.html event %}第一个参数代表的是源代码文件名，第二个参数是对应的模块名。我们支持多个模块在同一个源文件，而展示的时候互不影响。
the first parameter means the source file name, the second parameter means the code module in the source filename. we provide multiple code module in the same file,but the showcase is independent.
完整的源文件代码格式如下：
the complete source code like this:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>事件处理</title>
</head>
<body>
<section class="module event">
<button type="button" name="button">点击</button>
<script type="text/javascript">
const btn = document.querySelector("button[name=button]")
btn.addEventListener('click', e => {
console.log(e.timeStamp)
}, false)
</script>
</section>
<section class="module input">
<input type="input" name="input" placeholder="用户名" autocomplete="off"></input>
</section>
</body>
</html>License
Apache-2.0