将阮一峰老师的《ES6入门教程》的源码拷贝本地运行和发布
你好同学，我是沐爸，欢迎点赞、收藏、评论和关注。
阮一峰老师的《ES6入门教程》应该是很多同学学习 ES6 知识的重要参考吧，应该也有很多同学在看该文档的时候，想知道这个教程的前端源码是怎么实现的，也可能有同学下载了源码，发现运行起来不能正常切换，然后放弃了。
今天分享下《ES6入门教程》源码的本地分享和发布服务器。不知道是不是全网第一个这么做的？！😁
第一步、拷贝源码
源码地址：https://github.com/ruanyf/es6tutorial/，文档左下角这里也有地址：
在 github 页面点击下载代码包，解压之后使用 vscode 打开代码包。注意：直接双击 index.html 不能运行该项目。
第二步、本地运行
本地运行可采用以下两种方式。首先点击 index.html 页面，然后右键选择：Open In Default Browser 和 Open with Live Server，前提是你的 vscode 安装了 Open In Default Browser 和 Live Server 插件。
运行后是这样的（注意看地址栏）：
或者下面这样：
它们都存在共同的问题：
- 图片不能正常加载
- 左侧目录点击跳转无效
原因在于 js/ditto.js 文件中的 router() 函数：
if (location.pathname === "/index.html") {
path = location.pathname.replace("index.html", ditto.index);
normalize_paths();
} else if (path === "") {
path = location.pathname + ditto.index;
normalize_paths();
} else {
path = path + ".md";
}
因为 location.pathname 是 ‘/index.html’，所以即便切换了路由，也会一直加载默认文件README.md。
其实解决的方法也超级简单，把地址栏中的 index.html 删除即可。删除 index.html 后的效果如下：
第三步、发布 Nginx 服务器
将所有代码拷贝到 html 文件夹下，nginx.cong 采用默认配置即可，如果你下载 Nginx 后什么也没改的话，就不用动：
http {
server {
listen 80;
server_name localhost;
location / {
# root html;
index index.html index.htm;
}
}
效果预览：
既然代码可以本地运行和发布服务器了，那么就可以放心的研究《ES6入门教程》是怎么运行的了。教程的源码是一个轻量级的文档管理模板，其中对路由的处理很有借鉴意义，值得一看。
好了，分享结束，谢谢点赞，下期再见。