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

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

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

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

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

并行運(yùn)行兩個(gè)Jekyll實(shí)例

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

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

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

run_jekyll函數(shù)接收端口號(hào)作為參數(shù)，并啟動(dòng)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端口) 來運(yùn)行Jekyll。

雖然可以使用Rake參數(shù)來傳遞端口號(hào)，但為了更好的兼容性，我最終選擇了使用可選參數(shù)的方式。類似地，我也修改了rake browser任務(wù)，使其可以接受端口號(hào)參數(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ù)，但這會(huì)影響Genomics Daily的動(dòng)態(tài)加載機(jī)制。因此，我改用window.history.pushState API來更新URL，而無需刷新頁(yè)面。

在文章中，我添加了一個(gè)按鈕，每次點(diǎn)擊都會(huì)增加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());
}

本地運(yùn)行Genomics Daily

克隆Genomics Daily倉(cāng)庫(kù)后，我復(fù)制了Computaria的Rakefile。由于Genomics Daily使用了minima主題，我需要在Gemfile中添加相應(yīng)的gem，并執(zhí)行bundle update才能成功運(yùn)行rake run。

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

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

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

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