操縱查詢字符串以更好地允許您共享一個動態充電的頁面-js教程-PHP中文網

操縱查詢字符串以更好地允許您共享一個動態充電的頁面

DDD

發布： 2025-01-24 08:28:09

原創

162 人瀏覽過

深入探索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部署：

Manipulando query string para melhor permitir compartilhar uma página carregada dinamicamente

並行運行兩個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>

登入後複製