Memanipulasi rentetan pertanyaan untuk membolehkan perkongsian halaman yang dimuatkan secara dinamik dengan lebih baik

dalam penjelajahan genomik setiap hari: perkongsian tarikh yang lebih baik dan operasi setempat

Selepas berkomunikasi dengan Moreno Colaiacovo baru -baru ini di Bluesky, saya mula meneroka Projek Harian Genomiknya. Laman web statik ini berdasarkan halaman GitHub dibina menggunakan Jekyll. Oleh itu, saya memutuskan untuk mengemukakan permintaan tarik untuk memperbaikinya.

Arkitek Laman Web

Genomics Daily adalah laman web statik yang dihoskan oleh halaman GitHub, yang terletak di emmecola.github.io. Sebagai projek halaman GitHub klasik, ia menggunakan Jekyll sebagai penjana tapak statik (SSG).

Saya mendapati bahawa halaman GitHub kini menyokong penempatan melalui tindakan GitHub:

Jalankan dua contoh Jekyll secara selari

Untuk memudahkan pembangunan dan penyahpepijatan tempatan, saya perlu menjalankan Genomics Daily dan Computaria pada masa yang sama. Genomics Daily menggunakan 4000 port secara lalai. Saya menyelesaikan masalah konflik pelabuhan dengan mengubah suai parameter konfigurasi Jekyll. Ini boleh dilaksanakan dengan secara langsung mengubahsuai arahan Jekyll atau mengubah tugas rake di Rakefile.

port Saya menggunakan tugas rake untuk menguruskan operasi Jekyll dan mengekstrak nombor port melalui nama tugas yang sepadan dengan ekspresi biasa:

Fungsi menerima nombor sampingan sebagai parameter, dan mulakan Jekyll:

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

run_jekyll Dengan cara ini, anda boleh menggunakan (port lalai) dan

(port 4001) untuk menjalankan 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>

Walaupun parameter rake boleh digunakan untuk lulus nombor port, untuk lebih serasi, saya akhirnya memilih kaedah menggunakan parameter pilihan. Begitu juga, saya juga mengubahsuai tugas rake run supaya ia dapat menerima parameter nombor port. rake run-4001

url mengubah suai rake browser

Pada mulanya cuba mengubah suai

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

untuk menukar parameter URL, tetapi ini akan menjejaskan mekanisme pemuatan dinamik genomik setiap hari. Oleh itu, saya menggunakan

API untuk mengemas kini URL tanpa menyegarkan halaman.

Dalam artikel, saya menambah butang, dan setiap klik akan meningkatkan nilai parameter URL

. Kodnya adalah seperti berikut: <:> location.search window.history.pushState Genomics Run Local Daily

Selepas Gudang Harian Clonomics, saya menyalin Rakefile of Computaria. Kerana Genomics Daily menggunakan tema marmota, saya perlu menambah permata yang sepadan untuk

dan melaksanakan

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

untuk berjaya menjalankan

.

Di samping itu, saya juga menetapkan masalah pautan dalaman dan menukar minima ke jalan relatif. Gemfile bundle update Akhirnya, saya dengan sempurna memilih pemilihan tarikh dan logik pemuatan halaman untuk memastikan bahawa kandungan tarikh yang sama pada tarikh yang sepadan dimuatkan mengikut parameter URL apabila halaman dimuatkan. Ini melibatkan penggunaan peristiwa atau rake run untuk menentukan masa halaman pemuatan, dan memuatkan kandungan berdasarkan parameter URL

.

Singkatnya, melalui penambahbaikan ini, fungsi perkongsian tarikh Genomics Daily telah dipertingkatkan, dan pembangunan dan debug tempatan lebih mudah.

Atas ialah kandungan terperinci Memanipulasi rentetan pertanyaan untuk membolehkan perkongsian halaman yang dimuatkan secara dinamik dengan lebih baik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!