将阮一峰老师的《ES6入门教程》的源码拷贝本地运行和发布

devtools/2024/11/15 1:23:01/

你好同学,我是沐爸,欢迎点赞、收藏、评论和关注。

阮一峰老师的《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 后什么也没改的话,就不用动:

javascript">http {server {listen       80;server_name  localhost;location / {# root   html;index  index.html index.htm;}
}

效果预览:

既然代码可以本地运行和发布服务器了,那么就可以放心的研究《ES6入门教程》是怎么运行的了。教程的源码是一个轻量级的文档管理模板,其中对路由的处理很有借鉴意义,值得一看。

好了,分享结束,谢谢点赞,下期再见。


http://www.ppmy.cn/devtools/114892.html

相关文章

用SpringBoot进行通义千问接口调用同步方法和异步流式多轮回复方法

同步效果就不展示了,这里展示更常用的异步,多轮异步流式效果展示如下: 第一轮回答,此时没有会话id,需要雪花算法生成插入数据库 第二轮问题以及结果内容组合 1、同步版本环境准备以及代码 需要开通阿里大模型服务,如果没有开通服务,单独的去生成 key 是无效的。 阿里…

代码随想录刷题day32丨动态规划理论基础,509. 斐波那契数, 70. 爬楼梯, 746. 使用最小花费爬楼梯

代码随想录刷题day32丨动态规划理论基础,509. 斐波那契数, 70. 爬楼梯, 746. 使用最小花费爬楼梯 1.动态规划理论基础 动态规划,英文:Dynamic Programming,简称DP,如果某一问题有很多重叠子问题…

企业如何使用数据分析管理系统

在数字化时代,数据成为企业发展新的增长方向,如何利用数据分析管理系统高效管理和运用这些数据,已成为企业决策者们亟待解决的关键所在。数聚股份将通过多年的实践经验来深入探讨企业如何通过数据分析管理系统实现智能决策,增强竞…

[网络][知识]TCP-IP各协议的RFC编号和RFC原始文档的获取地址

TCP/IP协议族包括很多个子协议,下面是TCP/IP 协议和支持服务所支持的 RFC。 RFC768 用户数据报协议 (UDP) RFC783 简单文件传输协议 (TFTP) RFC791 Internet 协议 (IP) RFC792 Internet 控制消息协议 (ICMP) RFC793 传输控制协议 (TCP) RFC816 故障隔离和恢复 RFC…

Python Flask网页开发基本框架

注:Flask详细学习请见Flask学习合集。 直接上代码: app.py from flask import Flaskapp Flask(__name__)app.route("/") def hello():return "Hello, World!"if __name__ "__init__":app.run(host "127.0.0.1", port…

LDD学习2--Scull(TODO)

《Linux Device Drivers》(LDD)书籍中的 scull(Simple Character Utility for Loading Localities)是一个用于演示 Linux 字符设备驱动程序编写的示例代码。它为理解 Linux 内核模块和字符设备驱动程序的编写提供了基础实践平台&a…

SpringBoot 数据库表结构文档生成

官方地址&#xff1a;https://github.com/pingfangushi/screw screw 螺丝钉&#xff0c;支持以下数据库 MySQL MariaDB TIDB Oracle SqlServer PostgreSQL Cache DB&#xff08;2016&#xff09; 生产文档支持 html word markdown 开始 添加依赖 <!-- 螺丝钉 --><…

QTCreator 调试:unknown debugger type “No engine“

QTCreator 调试&#xff1a;unknown debugger type "No engine" - kaizenly - 博客园 (cnblogs.com) 一开始Debuggers---Auto-detected这里第一row第一个项是标红的&#xff0c;然后没改东西&#xff0c;点完应用Apply以后&#xff0c;就可以调试了...&#xff08;不…