Bearbeiten der Abfragezeichenfolge, um die Freigabe einer dynamisch geladenen Seite besser zu ermöglichen

Eingehende Untersuchung von Genomics Daily: verbesserte Datenfreigabe und lokalisierter Betrieb

Nachdem ich kürzlich mit Moreno Colaiacovo auf Bluesky interagiert hatte, begann ich, sein Genomics Daily-Projekt zu erkunden. Diese statische Website auf Basis von GitHub Pages, die mit Jekyll erstellt wurde, und ihre Archivfunktion haben mich auf ein Problem aufmerksam gemacht: Das Datum einer bestimmten Nachricht kann nicht direkt geteilt werden. Daher habe ich beschlossen, eine Pull-Anfrage einzureichen, um es zu verbessern.

Website-Architektur

Genomics Daily ist eine statische Website, die von GitHub Pages gehostet wird und deren Codebasis sich unter emmecola.github.io befindet. Als klassisches GitHub Pages-Projekt verwendet es Jekyll als Static Site Generator (SSG).

Ich habe festgestellt, dass GitHub Pages jetzt die Bereitstellung über GitHub Actions unterstützt:

Zwei Jekyll-Instanzen parallel ausführen

Um die lokale Entwicklung und das Debuggen zu erleichtern, muss ich Genomics Daily und meinen Blog (Computaria) gleichzeitig ausführen. Genomics Daily verwendet standardmäßig Port 4000. Ich habe das Portkonfliktproblem gelöst, indem ich die port-Konfigurationsparameter von Jekyll geändert habe. Dies kann durch direktes Ändern des Jekyll-Befehls oder durch Ändern der Rake-Aufgabe in der Rakefile erreicht werden.

Ich habe eine Rake-Aufgabe verwendet, um die Ausführung von Jekyll zu verwalten, und die Portnummer extrahiert, indem ich den Aufgabennamen mit einem regulären Ausdruck abgeglichen habe:

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

Die Funktion

run_jekyll erhält die Portnummer als Parameter und startet 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>

Auf diese Weise können Sie rake run (Standardport) und rake run-4001 (4001-Port) verwenden, um Jekyll auszuführen.

Obwohl es möglich ist, Rake-Parameter zur Übergabe der Portnummer zu verwenden, habe ich mich aus Gründen der besseren Kompatibilität schließlich für die Verwendung optionaler Parameter entschieden. In ähnlicher Weise habe ich auch die Aufgabe rake browser geändert, um einen Portnummernparameter zu akzeptieren.

<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-Änderung

Zuerst wurde versucht, location.search zu ändern, um die URL-Parameter zu ändern, aber dies hätte Auswirkungen auf den dynamischen Lademechanismus von Genomics Daily. Daher habe ich stattdessen die API window.history.pushState verwendet, um die URL zu aktualisieren, ohne die Seite zu aktualisieren.

Im Artikel habe ich eine Schaltfläche hinzugefügt, die den Wert des URL-Parameters marmota bei jedem Klick erhöht. Der Code lautet wie folgt:

<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>

Führen Sie Genomics Daily lokal aus

Nachdem ich das Genomics Daily-Repository geklont hatte, kopierte ich das Rakefile von Computaria. Da Genomics Daily das minima-Design verwendet, muss ich das entsprechende Gem in Gemfile hinzufügen und bundle update ausführen, um rake run erfolgreich auszuführen.

Darüber hinaus habe ich das Problem mit der internen Verlinkung behoben, indem ich /genomics-daily/archive/ in einen relativen Pfad geändert habe.

Schließlich habe ich die Datumsauswahl und die Seitenladelogik verbessert, um sicherzustellen, dass der Nachrichteninhalt des entsprechenden Datums beim Laden der Seite gemäß den URL-Parametern geladen wird. Dazu gehört die Verwendung des window.onload-Ereignisses oder document.readyState, um festzustellen, wann die Seite vollständig geladen wurde, und das dynamische Laden von Inhalten basierend auf dem URL-Parameter date.

Kurz gesagt, durch diese Verbesserungen wurde die Date -Sharing -Funktion von Genomics Daily verbessert, und die lokale Entwicklung und Debugging sind bequemer.

Das obige ist der detaillierte Inhalt vonBearbeiten der Abfragezeichenfolge, um die Freigabe einer dynamisch geladenen Seite besser zu ermöglichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!