여기의 여정이 주제가 아니라 요점이기 때문에 전체적인 배경 이야기로 이것을 시작해야 한다는 것이 두렵습니다.
한 친구가 얼마 전에 자신이 처한 상황을 간략하게 설명하는 편지를 보냈습니다. 그의 회사에는 공영 라디오용 WordPress 사이트가 많이 있는데, 그 중 다수는 본질적으로 팟캐스트를 위한 곳입니다. 그가 생각하기에 그들 모두에게 이상적이라고 생각한 특정 기능이 하나 있습니다. 바로 "고정된" 오디오 플레이어를 갖는 것입니다. 팟캐스트를 재생할 수 있는 것처럼 해당 팟캐스트를 중단하지 않고 사이트를 계속 탐색할 수 있습니다.
WordPress에서는 링크 처리나 기록 조작과 관련하여 특별한 작업을 수행하지 않고 다른 일반 웹사이트처럼 전체 페이지를 다시 로드하기 때문에 WordPress에서 실행하기가 다소 까다롭습니다. 페이지가 다시 로드되면 페이지의 모든 오디오 재생이 중지됩니다. 이것이 바로 웹이 작동하는 방식입니다.
그렇다면 WordPress 사이트에서 어떻게 작업을 수행하시겠습니까? 글쎄요, 헤드리스 WordPress 사이트로 만들고 전체 프런트 엔드를 단일 페이지 앱으로 다시 구축할 수 있습니다. 재미있을 것 같지만 전화를 걸기가 꺼려요 다만 이것에 대한 한 맡은 일.
또 무엇을 할 수 있나요? 페이지가 다시 로드되지 않도록 하는 방법을 찾을 수 있습니다. 이 일을 했던 기억이 나네요 10년 전의 약간 정적인 사이트, 그러나 그것은 완전한 WordPress 사이트가 아니었고 그 당시에는 URL을 업데이트하는 데 신경도 쓰지 않았습니다.
이런 짓을 했다면 어떡하지...
- 내부 링크 클릭 차단
- 해당 URL의 콘텐츠를 Ajax로 처리했습니다.
- 페이지의 콘텐츠를 새 콘텐츠로 대체했습니다.
나중에 jQuery에서 빠르게 이 작업을 수행하겠습니다.
$("a").on("click", () => { const url = $(this).attr("href"); $.get(url + " main", (data) => { $("main").html(data); history.pushState({}, "", url); });
});이는 말 그대로 기능적인 것과 크게 다르지 않습니다. 당신은 지켜보고 싶어 할 것입니다 a popstate event 뒤로 버튼을 처리해야 하는데 몇 줄밖에 안 남았습니다.
이 가상 세계에서는 다음과 같이 사이트를 배치합니다.
<html>
<!-- ... --> <body> <main></main> <audio src="" controls ...></audio>
</body>
</html>그래서 그 모든 것 <main> 콘텐츠가 교체되고 URL이 변경되지만 <audio> 플레이어는 혼자 남겨져 계속해서 평화롭게 플레이합니다. 사람들이 재생 중인 팟캐스트 등을 업데이트할 수 있는 방법을 제공하기 위해 더 많은 JavaScript를 작성하게 됩니다.
하지만 여기서 더 생각해 볼 것이 있다는 것이 밝혀졌습니다. 콘텐츠에 인라인 스크립트가 실행되나요? 업데이트는 어떻습니까? <title> 도? 아마도 당신이 그것을 처리하는 데 짜증을 낼 충분한 가장자리 문제가 있습니다.
나는 이런 것들을 가지고 놀고 싶었기 때문에 WordPress 테마를 함께 사용하여 다음을 시도했습니다. 터보 손으로 뭔가를 쓰는 대신. Turbo(Turbolinks의 새 버전)는 바로 이를 위해 설계되었습니다. 이는 페이지에 드롭하는 JavaScript 라이브러리(빌드 프로세스 없음, 구성 없음)이며 제대로 작동합니다. 이는 내부 링크 클릭, 새 콘텐츠에 대한 Ajax 등을 가로챕니다. 하지만 여기에는 다음과 같은 흥미로운 기능이 있습니다. data-turbo-permanent HTML 요소의 속성은 다시 로드할 때까지 유지됩니다. 그래서 나는 여기 오디오 플레이어에 그렇게 했어요.
하지만 여기에 문제가 있습니다.
이 프로젝트를 제대로 끝낼 시간이 없어요. 연극을 하는 것은 재미있었지만 관심이 좀 사라졌어요. 그래서 지금은 그대로 두겠습니다.
It 거의 작동하지만 첫 번째 탐색에서 오디오 재생이 중지되고 그 이후에는 작동하는 눈에 띄는 버그가 하나 있습니다. 고칠 수 있다고 확신하지만 이 게임에는 스킨이 많지 않습니다. 나는 이 코드가 유용하다면 다른 사람이 선택할 수 있도록 이 코드를 남겨둘 것이라고 생각합니다.
여기서 또 다른 중요한 점은 Turbo가 Basecamp 출신이고 Basecamp는 오히려 내파 최근에는 소프트웨어를 사용하는 것이 기분이 좋지 않습니다. Sam Stephenson의 사실로 인해 더욱 악화되었습니다. Turbo의 75%를 작성했습니다. 소프트웨어가 자체 기반으로 이동되지 않는 한 해당 소프트웨어(또는 기타 관련 프로젝트)를 건드리지 않을 것이라고 말했습니다. 터보는 이미 불안한 상태에 있었습니다. 벌레 투성이의 Turbolinks에 비해 현재는 켜져 있습니다. 대단히 형편없는 땅.
