DEV Community
·
Manipulating query strings to better enable sharing a dynamically loaded page
原文约1800字/词，阅读约需7分钟。
📝
内容提要
在与Moreno Colaiacovo交流后，我发现了Genomics Daily网站，并通过Jekyll和Rake改进了其功能，实现了在不同端口运行网站，并探索了通过API更新URL而不重新加载页面的方式，最终成功根据查询参数在页面加载时更新内容。
🎯
关键要点
-
与Moreno Colaiacovo交流后发现Genomics Daily网站。
-
Genomics Daily是一个静态页面，使用GitHub Pages和Jekyll构建。
-
通过Rake和Jekyll实现了在不同端口运行网站的功能。
-
使用API更新URL而不重新加载页面，允许根据查询参数更新内容。
-
实现了通过history API来改变URL的查询参数。
-
在本地克隆Genomics Daily并解决了依赖问题。
-
调整了内部链接以确保在本地运行时正常工作。
-
实现了在页面加载时根据URL查询参数加载内容的功能。
❓
延伸问答
Genomics Daily网站是如何构建的？
Genomics Daily是一个静态页面，使用GitHub Pages和Jekyll构建。
如何在Genomics Daily中实现动态加载内容？
通过使用API更新URL而不重新加载页面，允许根据查询参数更新内容。
如何在本地运行Genomics Daily？
需要克隆其仓库并解决依赖问题，确保安装所需的Jekyll主题和gem。
如何使用history API更新URL？
可以通过调用window.history.pushState方法来更新URL的查询参数，而不重新加载页面。
在Genomics Daily中如何处理表单提交？
在表单提交时，阻止默认行为并更新URL的查询参数，然后加载相应的内容。
如何调整内部链接以确保本地运行正常？
将内部链接转换为相对URL，以确保在本地运行时能够正确访问。
🏷️
