クエリ文字列を操作して、動的に読み込まれるページをより適切に共有できるようにする

- ゲノミクスのデイリーの詳細な調査：日付の共有とローカライズされた操作の改善

最近BlueskyでMoreno Colaiacovoと通信した後、私は彼のGenomics Daily Projectを探求し始めました。 Githubページに基づくこの静的なWebサイトは、Jekyllを使用して構築されています。したがって、私はそれを改善するためにプルリクエストを送信することにしました。

ウェブサイトアーキテクチャ

Genomics Dailyは、emmecola.github.ioにあるGithub Pagesがホストする静的なWebサイトです。古典的なGithub Pagesプロジェクトとして、Jekyllを静的サイトジェネレーター（SSG）として使用します。

GitHubページがGitHubアクションを通じて展開をサポートしていることがわかりました：

並列で2つのJekyllインスタンスを実行します

地元の開発とデバッグを促進するために、毎日ゲノミクスとコンピューターを同時に実行する必要があります。 Genomics Dailyは、デフォルトで4000ポートを使用しています。 Jekyllの構成パラメーターを変更することにより、ポート競合の問題を解決しました。これは、Jekyllコマンドを直接変更するか、RakeFileのRakeタスクを変更することで実装できます。

portレーキタスクを使用してジキルの操作を管理し、正規表現マッチングタスク名を介してポート番号を抽出します。

パラメーターとして副次番号を受信する関数、そしてJekyllを開始します：

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

この方法では、（デフォルトポート）と

（ポート4001）を使用してJekyllを実行できます。 run_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-4001url修正

最初にrake browserを変更してURLパラメーターを変更しようとしていますが、これはゲノミクスの動的荷重メカニズムに毎日影響します。したがって、

APIを使用して、ページを更新せずにURLを更新します。

<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 Clonomics Daily Warehouseの後、ComputariaのRakefileをコピーしました。ゲノミクスは毎日window.history.pushStateのテーマを使用しているため、対応するgemを

に追加し、

を実行して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>

を相対パスに変更しました。

最後に、ページがロードされているときに、対応する日付の対応する日付コンテンツがURLパラメーターに従ってロードされるように、日付の選択とページの読み込みロジックを完全に選択します。 これには、イベントまたは

の使用が含まれて、ロードページのタイミングを決定し、URLパラメーターminimaに基づいてコンテンツをロードします。 Gemfile要するに、これらの改善を通じて、ゲノミクスの毎日の日付共有機能が強化され、ローカル開発とデバッグがより便利になりました。

以上がクエリ文字列を操作して、動的に読み込まれるページをより適切に共有できるようにするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。