동적으로 충전 된 페이지를 공유 할 수 있도록 쿼리 문자열 조작

Genomics Daily 심층 탐구: 향상된 날짜 공유 및 현지화된 운영

최근 Bluesky에서 Moreno Colaiacovo와 교류한 후 저는 그의 Genomics Daily 프로젝트를 탐색하기 시작했습니다. Jekyll을 사용하여 구축된 GitHub 페이지 기반의 이 정적 웹사이트와 그 아카이브 기능을 통해 저는 특정 뉴스의 날짜를 직접 공유할 수 없다는 문제를 발견했습니다. 그래서 저는 이를 개선하기 위해 Pull Request를 제출하기로 결정했습니다.

웹사이트 아키텍처

Genomics Daily는 GitHub Pages에서 호스팅하는 정적 웹사이트이며, 코드 베이스는 emmecola.github.io에 있습니다. 전통적인 GitHub 페이지 프로젝트로서 Jekyll을 SSG(정적 사이트 생성기)로 사용합니다.

GitHub Pages가 이제 GitHub Actions를 통한 배포를 지원한다는 사실을 발견했습니다.

두 개의 Jekyll 인스턴스를 병렬로 실행

로컬 개발과 디버깅을 원활하게 하기 위해서는 Genomics Daily와 블로그(Computaria)를 동시에 운영해야 합니다. Genomics Daily는 기본적으로 포트 4000을 사용합니다. Jekyll의 port 구성 매개변수를 수정하여 포트 충돌 문제를 해결했습니다. 이는 Jekyll 명령을 직접 수정하거나 Rakefile의 Rake 작업을 수정하여 수행할 수 있습니다.

Jekyll 실행을 관리하기 위해 Rake 작업을 사용하고 작업 이름을 정규 표현식과 일치시켜 포트 번호를 추출했습니다.

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

run_jekyll 함수는 포트 번호를 매개변수로 받아 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-4001(4001 포트)를 사용하여 Jekyll을 실행할 수 있습니다.

Rake 매개변수를 사용하여 포트 번호를 전달할 수도 있지만 더 나은 호환성을 위해 결국 선택적 매개변수를 사용하기로 결정했습니다. 마찬가지로 포트 번호 매개변수를 허용하도록 rake browser 작업도 수정했습니다.

<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을 수정하여 URL 매개변수를 변경하려고 시도했지만 이로 인해 Genomics Daily의 동적 로딩 메커니즘에 영향을 미칠 수 있었습니다. 그래서 대신 window.history.pushState API를 사용하여 페이지를 새로 고치지 않고 URL을 업데이트했습니다.

기사에는 클릭할 때마다 URL 매개변수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>

현지에서 Genomics Daily를 실행하세요

Genomics Daily 저장소를 복제한 후 Computaria의 Rakefile을 복사했습니다. Genomics Daily는 minima 테마를 사용하기 때문에 Gemfile에 해당 gem을 추가하고 bundle update을 실행해야 rake run이 성공적으로 실행됩니다.

또한 /genomics-daily/archive/을 상대 경로로 변경하여 내부 연결 문제를 해결했습니다.

마지막으로 페이지 로드 시 해당 날짜의 뉴스 콘텐츠가 URL 매개변수에 따라 로드되도록 날짜 선택 및 페이지 로딩 로직을 개선했습니다. 여기에는 window.onload 이벤트 또는 document.readyState을 사용하여 페이지 로드가 완료된 시기를 확인하고 URL 매개변수 date를 기반으로 콘텐츠를 동적으로 로드하는 작업이 포함됩니다.

요약하자면, 이러한 개선으로 Genomics Daily의 날짜 공유 기능이 향상되었으며, 로컬 개발 및 디버깅이 더욱 편리해졌습니다.

위 내용은 동적으로 충전 된 페이지를 공유 할 수 있도록 쿼리 문자열 조작의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!