操纵查询字符串以更好地允许您共享一个动态充电的页面

深入探索Genomics Daily：改进日期共享及本地化运行

最近在Bluesky上与Moreno Colaiacovo交流后，我开始探索他的Genomics Daily项目。这个基于GitHub Pages的静态网站，使用Jekyll构建，其存档功能让我发现了一个问题：无法直接分享特定新闻的日期。因此，我决定提交一个Pull Request来改进它。

网站架构

Genomics Daily是一个由GitHub Pages托管的静态网站，其代码库位于emmecola.github.io。作为一个经典的GitHub Pages项目，它使用了Jekyll作为静态站点生成器(SSG)。

我发现GitHub Pages现在支持通过GitHub Actions部署：

并行运行两个Jekyll实例

为了方便本地开发和调试，我需要同时运行Genomics Daily和我的博客(Computaria)。Genomics Daily默认使用4000端口。我通过修改Jekyll的port配置参数解决了端口冲突问题。这可以通过直接修改Jekyll命令或在Rakefile中修改Rake任务来实现。

我使用了Rake任务来管理Jekyll的运行，并通过正则表达式匹配任务名来提取端口号：

<code class="language-ruby">rule(/^run-[0-9]+$/) do |t|
    port = t.name["run-".length() ..]
    run_jekyll port: port
end</code>

run_jekyll函数接收端口号作为参数，并启动Jekyll：

<code class="language-ruby">def run_jekyll(port: nil)
    require "jekyll"
    opts = {
        'show_drafts' => true,
        'watch' => true,
        'serving' => true
    }
    opts['port'] = port unless port.nil?
    conf = Jekyll.configuration(opts)
    Jekyll::Commands::Build.process conf
    Jekyll::Commands::Serve.process conf
end</code>

这样，可以使用rake run (默认端口) 和 rake run-4001 (4001端口) 来运行Jekyll。

虽然可以使用Rake参数来传递端口号，但为了更好的兼容性，我最终选择了使用可选参数的方式。类似地，我也修改了rake browser任务，使其可以接受端口号参数。

<code class="language-ruby">task :run,[:port] do |t, args|
    require "jekyll"
    opts = { ... }
    opts['port'] = args.port unless args.port.nil?
    ...
end

task :browser,[:port] do |t, args|
    port = args.port || 4000
    sh "open ... http://localhost:#{port}/blog/"
end</code>

URL修改

最初尝试修改location.search来改变URL参数，但这会影响Genomics Daily的动态加载机制。因此，我改用window.history.pushState API来更新URL，而无需刷新页面。

在文章中，我添加了一个按钮，每次点击都会增加URL参数marmota的值。代码如下：

<code class="language-javascript">function alteraQueryParam() {
    const url = new URL(window.location.href);
    if (!window.history) return;
    const paramName = 'marmota';
    let x = url.searchParams.get(paramName) || 0;
    x++;
    url.searchParams.set(paramName, x);
    window.history.pushState(null, '', url.toString());
}</code>

本地运行Genomics Daily

克隆Genomics Daily仓库后，我复制了Computaria的Rakefile。由于Genomics Daily使用了minima主题，我需要在Gemfile中添加相应的gem，并执行bundle update才能成功运行rake run。

此外，我还修复了内部链接问题，将/genomics-daily/archive/改为相对路径。

最后，我完善了日期选择和页面加载逻辑，确保在页面加载时根据URL参数加载相应日期的新闻内容。 这涉及到使用window.onload事件或document.readyState来判断页面加载完成时机，并根据URL参数date动态加载内容。

总而言之，通过这些改进，Genomics Daily的日期共享功能得到增强，并且本地开发和调试也更加便捷。

以上是操纵查询字符串以更好地允许您共享一个动态充电的页面的详细内容。更多信息请关注PHP中文网其他相关文章！