Manipulation de la chaîne de requête pour mieux permettre le partage d'une page chargée dynamiquement

Exploration approfondie de Genomics Daily : partage de dates amélioré et fonctionnement localisé

Après avoir récemment interagi avec Moreno Colaiacovo sur Bluesky, j'ai commencé à explorer son projet Genomics Daily. Ce site statique basé sur GitHub Pages, construit avec Jekyll, et sa fonction d'archive m'a fait découvrir un problème : la date d'une actualité précise ne peut pas être directement partagée. Par conséquent, j'ai décidé de soumettre une Pull Request pour l'améliorer.

Architecture du site Web

Genomics Daily est un site Web statique hébergé par GitHub Pages, et sa base de code est située sur emmecola.github.io. En tant que projet GitHub Pages classique, il utilise Jekyll comme générateur de site statique (SSG).

J'ai découvert que GitHub Pages prend désormais en charge le déploiement via GitHub Actions :

Exécuter deux instances Jekyll en parallèle

Afin de faciliter le développement et le débogage locaux, je dois exécuter Genomics Daily et mon blog (Computaria) en même temps. Genomics Daily utilise le port 4000 par défaut. J'ai résolu le problème de conflit de port en modifiant les paramètres de configuration port de Jekyll. Ceci peut être réalisé en modifiant directement la commande Jekyll ou en modifiant la tâche Rake dans le Rakefile.

J'ai utilisé une tâche Rake pour gérer le fonctionnement de Jekyll et j'ai extrait le numéro de port en faisant correspondre le nom de la tâche avec une expression régulière :

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

La fonction

run_jekyll reçoit le numéro de port en paramètre et démarre 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>

De cette façon, vous pouvez utiliser rake run (port par défaut) et rake run-4001 (port 4001) pour exécuter Jekyll.

Bien qu'il soit possible d'utiliser les paramètres Rake pour passer le numéro de port, pour une meilleure compatibilité, j'ai finalement choisi d'utiliser des paramètres optionnels. De même, j'ai également modifié la tâche rake browser pour accepter un paramètre de numéro de port.

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

Modification d'URL

J'ai initialement essayé de modifier location.search pour changer les paramètres d'URL, mais cela affecterait le mécanisme de chargement dynamique de Genomics Daily. J'ai donc utilisé l'API window.history.pushState pour mettre à jour l'URL sans actualiser la page.

Dans l'article, j'ai ajouté un bouton qui va incrémenter la valeur du paramètre URL marmota à chaque clic. Le code est le suivant :

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

Exécutez Genomics Daily localement

Après avoir cloné le référentiel Genomics Daily, j'ai copié le Rakefile de Computaria. Étant donné que Genomics Daily utilise le thème minima, je dois ajouter la gemme correspondante dans Gemfile et exécuter bundle update pour exécuter rake run avec succès.

De plus, j'ai résolu le problème de liaison interne en remplaçant /genomics-daily/archive/ par un chemin relatif.

Enfin, j'ai amélioré la logique de sélection de date et de chargement de page pour garantir que le contenu d'actualité de la date correspondante est chargé en fonction des paramètres d'URL lors du chargement de la page. Cela implique d'utiliser l'événement window.onload ou document.readyState pour déterminer quand la page a fini de se charger et de charger dynamiquement le contenu en fonction du paramètre URL date.

En bref, grâce à ces améliorations, la fonction de partage des dattes de Genomics Daily a été améliorée, et le développement local et le débogage sont plus pratiques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!