블로그 배포를 모니터링하기 위해 파이프라인을 표시 상태로 둡니다.-JS 튜토리얼-php.cn

Computaria에 대해 저를 괴롭히는 것 중 하나는 블로그 자체의 배포를 따라갈 수 없다는 것입니다. 그럼 이 문제가 귀찮으니 고치는 게 어떨까요?

파이프라인

현재 배포가 실행 중인지 알 수 있는 두 가지 방법이 있습니다.

작업/파이프라인 페이지에서 저장소를 열고 최신 실행 중인 작업을 확인하세요
저장소를 열고 README.md로 스크롤하세요.

두 솔루션 모두 나에게는 좋지 않은 것 같습니다. 컴퓨팅 자체가 좀 더 가벼워졌으면 좋겠습니다.

아이디어

Kauê와 간단한 상담 후 그의 조언을 따르기로 결정했습니다: /about에 게시하세요.

첫 번째 실험에서:

Deixando a pipeline visível para acompanhar deploy do blog

아냐, 너무 나빠졌어. 나는 이것이 기본적으로 표시되는 것을 원하지 않는다는 것을 이미 알고 있습니다. 그러나 정보를 가져오는 것만으로도 충분합니다. 보기 흉한 것은 숨기고, 명시적으로 요청하면 보기 흉하더라도 공개하면 됩니다.

개념 증명: 지정하지 않으면 충돌이 발생합니다.

가장 먼저 해야 할 일은 조치를 취해야 하는지 아는 것입니다. 이를 위해 true 값을 갖는 query param status의 존재를 API로 정의하였습니다.

URL을 얻으려면 window.location을 사용했습니다. 위치 개체 내부에는 특정 URL에 액세스하는 데 사용되는 쿼리 매개변수를 정확하게 유지 관리하는 검색 필드가 있습니다.

예를 들어 http://localhost:4000/blog/about?q=1의 경우 window.location.search 값은 ?q=1입니다. 쿼리 매개변수 내의 콘텐츠를 더 쉽게 처리할 수 있도록 URLSearchParams 유형의 개체가 있습니다. 문서에서 이해할 수 있는 한, URLSearchParams를 인스턴스화하려면 쿼리 문자열이 필요하지만 ? 접두사의. window.location.search.substring(1)을 사용하여 이를 달성할 수 있습니다.

이제 이 개체를 사용하면 원하는 쿼리 매개변수의 값을 간단히 확인할 수 있습니다.

const queryParams = new URLSearchParams(window.location.search.substring(1));

if (queryParams.get("status") === "true") {
    console.log("oba, vamos exibir o pipeline!")
} else {
    console.log("nops, não vamos exibir nada")
}

로그인 후 복사

이것을 가지고 파이프라인 배지를 표시하는 작업을 수행해야 합니다. 편의상 포함 가능한 HTML 조각인 _includes/pipeline.html로 넣기로 결정했습니다. 그래서 제가 적절하다고 생각하는 대로 조작할 수 있는 무료 HTML이 있습니다.

처음에는 단순히

보이지 않음:

<div>



<p>Para importar, no /about só precisei colocar {%include pipeline.html%} no começo do arquivo, o Jekyll se encarregou de montar tudo certo.</p>

<p>Ok, vamos por o script para detectar se deveria ou não exibir a tag:<br>
</p>

<pre class="brush:php;toolbar:false"><script>
    const queryParams = new URLSearchParams(window.location.search.substring(1));

    if (queryParams.get("status") === "true") {
        console.log("oba, vamos exibir o pipeline!")
    } else {
        console.log("nops, não vamos exibir nada")
    }
</script>
<div>



<p>So far, so good. Agora, vamos mudar a exibição para display: block caso seja para exibir o pipeline, ou sumir logo de uma vez com a <div>. Pelo console da web, bastaria fazer algo nesse esquema:<br>
</p>

<pre class="brush:php;toolbar:false">const pipeline = document.getElementById("pipeline")

if (...) {
    pipeline.style.display = "block"
} else {
    pipeline.remove()
}

로그인 후 복사

HTML 조각에 배치:

<script>
    const queryParams = new URLSearchParams(window.location.search.substring(1));
    const pipeline = document.getElementById("pipeline")

    if (queryParams.get("status") === "true") {
        pipeline.style.display = "block"
    } else {
        pipeline.remove()
    }
</script>
<div>



<p>E... falhou. Por quê? Porque no momento que a função rodar ainda não tem definido quem é o elemento com id pipeline. Então preciso mudar o ciclo de vida para rodar o script apenas quando a página for carregada. Basta colocar o <script defer>, certo? Bem, não. Porque defer não funciona bem com inline, apenas com arquivo de source explícito. Veja a documentação.

<p>Ou seja, precisei colocar o arquivo JavaScript explicitamente para o Computaria. Como a priori tudo que está solto na pasta do blog é colocado como asset disponível para o Jekyll publicar, criei o js/pipeline-loader.js:<br>
</p>

<pre class="brush:php;toolbar:false"><script src="{{ "/js/pipeline-loader.js" | prepend: site.baseurl }}" defer>
</script>
<div>



<p>E no script:<br>
</p>

<pre class="brush:php;toolbar:false">const queryParams = new URLSearchParams(window.location.search.substring(1));
const pipeline = document.getElementById("pipeline")

if (queryParams.get("status") === "true") {
    pipeline.style.display = "block"
} else {
    pipeline.remove()
}

로그인 후 복사

좋습니다. 유용한 일을 하고 이미지를 게시해 볼까요? 요소를 동적으로 생성하려면 document.createElement를 사용하면 됩니다. 그런 다음 배지 URL을 입력합니다:

const queryParams = new URLSearchParams(window.location.search.substring(1));
const pipeline = document.getElementById("pipeline")

if (queryParams.get("status") === "true") {
    pipeline.style.display = "block"

    const pipelineImg = document.createElement("img")
    pipelineImg.src = "{{site.repository.base}}/badges/master/pipeline.svg"

    pipeline.appendChild(pipelineImg)
} else {
    pipeline.remove()
}

로그인 후 복사

그런데 깨진 이미지가 나오더라구요... 흠, 콘솔에 표시되는 메시지는 뭔가요?

GET http://localhost:4000/blog/about/{{site.repository.base}}/badges/master/pipeline.svg [HTTP/1.1 404 Not Found 4ms]

로그인 후 복사

이상하네요. 귀여운 저장소 URL을 알았어야 했나요? 아, 눈치챘다. 그는 Liquid를 전혀 처리하지 않았습니다. 이 문제를 해결하기 위해 나는 빈 앞부분인 css/main.scss의 예제를 따르기로 결정했습니다.

const queryParams = new URLSearchParams(window.location.search.substring(1));

if (queryParams.get("status") === "true") {
    console.log("oba, vamos exibir o pipeline!")
} else {
    console.log("nops, não vamos exibir nada")
}

로그인 후 복사

머리말이 자바스크립트가 아니기 때문에 오류 메시지가 나오며, 첫 번째 const에 오류가 표시됩니다. 이것이 나를 괴롭히기 때문에 내가 생각한 가장 직접적인 처리 방법은 "무해한 오류"를 더 일찍 만드는 것이었습니다. 나는 ; 머리말 바로 뒤:

<div>



<p>Para importar, no /about só precisei colocar {%include pipeline.html%} no começo do arquivo, o Jekyll se encarregou de montar tudo certo.</p>

<p>Ok, vamos por o script para detectar se deveria ou não exibir a tag:<br>
</p>

<pre class="brush:php;toolbar:false"><script>
    const queryParams = new URLSearchParams(window.location.search.substring(1));

    if (queryParams.get("status") === "true") {
        console.log("oba, vamos exibir o pipeline!")
    } else {
        console.log("nops, não vamos exibir nada")
    }
</script>
<div>



<p>So far, so good. Agora, vamos mudar a exibição para display: block caso seja para exibir o pipeline, ou sumir logo de uma vez com a <div>. Pelo console da web, bastaria fazer algo nesse esquema:<br>
</p>

<pre class="brush:php;toolbar:false">const pipeline = document.getElementById("pipeline")

if (...) {
    pipeline.style.display = "block"
} else {
    pipeline.remove()
}

로그인 후 복사

귀찮은 일...

테스트를 계속하다 보니 네트워크 탭에 308이 계속 나타나는 것을 발견했습니다. 그런데 왜 나타나는 걸까요? 음, Liquid를 확장할 때 배지 앞에 이중 막대가 생겼기 때문입니다.

원래 받았던 내용은 다음과 같습니다.

https://gitlab.com/computaria/blog//badges/master/pipeline.svg

다음으로 리디렉션:

https://gitlab.com/computaria/blog/badges/master/pipeline.svg

그리고 캐시 사용 여부를 분석하면서 이것이 귀찮아지기 시작했습니다. 이 문제를 해결하려면 이중 슬래시를 제거해야 합니다. Liquid 값이 확장된 바로 뒤에 슬래시를 넣지 않음으로써 이를 제거할 수 있었습니다. 왜냐하면 결국 {{site.repository.base}} 문자열이 /로 끝난다는 것을 선험적으로 알 수 있었기 때문입니다. 하지만 혹시라도 /badges/master/pipeline.svg 앞에 슬래시를 넣는 것이 현실적으로 문제가 되지는 않으며 독자인 나 자신을 위한 지표이기도 합니다.

하지만 이 바의 존재 여부에 대한 사전 지식에 의존하고 싶지 않기 때문에 이에 대한 두 가지 옵션이 있었습니다.

액체 확장 레벨을 처리하여 터미널 슬래시를 제거합니다
자바스크립트 수준에서 이 문자열 생성을 처리합니다

저는 JavaScript 쪽이 더 쉬워 보였습니다. //를 /로 바꾸면 됩니다. 맞나요? 흠, 아니. 프로토콜이 :// 앞에 나타나기 때문에 이렇게 대충 대체하면 URL이 https:/computaria.gitlab.io와 같이 시작됩니다. 이 문제를 해결하기 위해 다음과 같이 대체합니다.

<script>
    const queryParams = new URLSearchParams(window.location.search.substring(1));
    const pipeline = document.getElementById("pipeline")

    if (queryParams.get("status") === "true") {
        pipeline.style.display = "block"
    } else {
        pipeline.remove()
    }
</script>
<div>



<p>E... falhou. Por quê? Porque no momento que a função rodar ainda não tem definido quem é o elemento com id pipeline. Então preciso mudar o ciclo de vida para rodar o script apenas quando a página for carregada. Basta colocar o <script defer>, certo? Bem, não. Porque defer não funciona bem com inline, apenas com arquivo de source explícito. Veja a documentação.

<p>Ou seja, precisei colocar o arquivo JavaScript explicitamente para o Computaria. Como a priori tudo que está solto na pasta do blog é colocado como asset disponível para o Jekyll publicar, criei o js/pipeline-loader.js:<br>
</p>

<pre class="brush:php;toolbar:false"><script src="{{ "/js/pipeline-loader.js" | prepend: site.baseurl }}" defer>
</script>
<div>



<p>E no script:<br>
</p>

<pre class="brush:php;toolbar:false">const queryParams = new URLSearchParams(window.location.search.substring(1));
const pipeline = document.getElementById("pipeline")

if (queryParams.get("status") === "true") {
    pipeline.style.display = "block"
} else {
    pipeline.remove()
}

로그인 후 복사

분석:

교체 위치에 "첫 번째 그룹"에서 발견된 내용을 입력하고 그 뒤에 슬래시를 붙입니다
정규식 일치: (그룹 내), 슬래시, 슬래시를 제외한 모든 항목

이번 변경으로 https://는 ([^:])//와 일치하지 않지만 경로에 있는 다른 모든 //는 완벽하게 일치합니다. 하나 앞에 있어야합니다 :. 좀 더 엄격하게 말하면 쿼리 매개변수/단편에서 일치가 발생하지 않도록 노력할 수 있지만 너무 지나친 것 같았습니다.

개념 증명: 캐시 없는 로딩

좋아, 배치할 위치와 잠금 메커니즘에 대한 세부 사항을 정의했으므로 다시 로드 메커니즘이 필요합니다. 첫 번째 시도: 새로운 이미지 요소를 생성하세요. 하지만 그래도 어떻게? 이상적인 것은 "얼마 후"입니다. 따라서 이는 두 가지 옵션을 제공합니다.

setTimeout
설정 간격

자, 이것이 무엇을 하는지 살펴볼까요? setTimeout은 시간 간격과 지정된 간격 후에 실행될 명령을 수신합니다. ClearTimeout을 사용하여 제거할 수 있는 ID를 다시 제공합니다. 호출을 반복하려면 마지막에 setTimeout을 다시 호출해야 합니다.

setInterval은 거의 동일하지만 시간 간격 후에 항상 명령을 실행한다는 점만 다릅니다. 반환은 제거하기 위해clearInterval을 호출하는 ID여야 하지만 문서에 따르면 이는clearTimeout에서도 작동합니다(만약 신뢰하지 않는 경우 올바른 의미를 가진 ID를 사용하십시오).

setTimeout 사용

setTimeout을 사용하여 루프 호출을 생성해 볼까요? 텍스트 필드에 Pumpkin이라는 단어를 5번 인쇄하는 것은 어떻습니까? 이 실험을 위해 텍스트 영역을 추가하겠습니다:

const queryParams = new URLSearchParams(window.location.search.substring(1));

if (queryParams.get("status") === "true") {
    console.log("oba, vamos exibir o pipeline!")
} else {
    console.log("nops, não vamos exibir nada")
}

로그인 후 복사

좋아, HTML로 접근할 수 있는 기능이 3개 있습니다. 그리고 그들은 (아주 약간이라도) 상태를 나눕니다. 저는 뭔가를 숨기는 걸 싫어해서

저자별 최신 기사

에서 2024-04-29 11:01:01

2470

Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?

에서 2024-04-23 00:22:19

2617

자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.

에서 2024-04-19 15:37:47

2202

상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');