深入探索Genomics Daily：改進(jìn)日期共享及本地化運行

最近在Bluesky上與Moreno Colaiacovo交流後，我開始探索他的Genomics Daily項目。這個基於GitHub Pages的靜態(tài)網(wǎng)站，使用Jekyll構(gòu)建，其存檔功能讓我發(fā)現(xiàn)了一個問題：無法直接分享特定新聞的日期。因此，我決定提交一個Pull Request來改進(jìn)它。

網(wǎng)站架構(gòu)

Genomics Daily是一個由GitHub Pages託管的靜態(tài)網(wǎng)站，其代碼庫位於emmecola.github.io。作為一個經(jīng)典的GitHub Pages項目，它使用了Jekyll作為靜態(tài)站點生成器(SSG)。

我發(fā)現(xiàn)GitHub Pages現(xiàn)在支持通過GitHub Actions部署：

並行運行兩個Jekyll實例

為了方便本地開發(fā)和調(diào)試，我需要同時運行Genomics Daily和我的博客(Computaria)。 Genomics Daily默認(rèn)使用4000端口。我通過修改Jekyll的port配置參數(shù)解決了端口衝突問題。這可以通過直接修改Jekyll命令或在Rakefile中修改Rake任務(wù)來實現(xiàn)。

我使用了Rake任務(wù)來管理Jekyll的運行，並通過正則表達(dá)式匹配任務(wù)名來提取端口號：

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

run_jekyll函數(shù)接收端口號作為參數(shù)，並啟動Jekyll：

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

這樣，可以使用rake run (默認(rèn)端口) 和 rake run-4001 (4001端口) 來運行Jekyll。

雖然可以使用Rake參數(shù)來傳遞端口號，但為了更好的兼容性，我最終選擇了使用可選參數(shù)的方式。類似地，我也修改了rake browser任務(wù)，使其可以接受端口號參數(shù)。

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

URL修改

最初嘗試修改location.search來改變URL參數(shù)，但這會影響Genomics Daily的動態(tài)加載機(jī)制。因此，我改用window.history.pushState API來更新URL，而無需刷新頁面。

在文章中，我添加了一個按鈕，每次點擊都會增加URL參數(shù)marmota的值。代碼如下：

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());
}

本地運行Genomics Daily

克隆Genomics Daily倉庫後，我複制了Computaria的Rakefile。由於Genomics Daily使用了minima主題，我需要在Gemfile中添加相應(yīng)的gem，並執(zhí)行bundle update才能成功運行rake run。

此外，我還修復(fù)了內(nèi)部鏈接問題，將/genomics-daily/archive/改為相對路徑。

最後，我完善了日期選擇和頁面加載邏輯，確保在頁面加載時根據(jù)URL參數(shù)加載相應(yīng)日期的新聞內(nèi)容。 這涉及到使用window.onload事件或document.readyState來判斷頁面加載完成時機(jī)，並根據(jù)URL參數(shù)date動態(tài)加載內(nèi)容。

總而言之，通過這些改進(jìn)，Genomics Daily的日期共享功能得到增強(qiáng)，並且本地開發(fā)和調(diào)試也更加便捷。

以上是操縱查詢字符串以更好地允許您共享一個動態(tài)充電的頁面的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！