블로그 배포를 모니터링하기 위해 파이프라인을 표시 상태로 둡니다.
Computaria에 대해 저를 괴롭히는 것 중 하나는 블로그 자체의 배포를 따라갈 수 없다는 것입니다. 그럼 이 문제가 귀찮으니 고치는 게 어떨까요?
파이프라인
현재 배포가 실행 중인지 알 수 있는 두 가지 방법이 있습니다.
- 작업/파이프라인 페이지에서 저장소를 열고 최신 실행 중인 작업을 확인하세요
- 저장소를 열고 README.md로 스크롤하세요.
두 솔루션 모두 나에게는 좋지 않은 것 같습니다. 컴퓨팅 자체가 좀 더 가벼워졌으면 좋겠습니다.
아이디어
Kauê와 간단한 상담 후 그의 조언을 따르기로 결정했습니다: /about에 게시하세요.
첫 번째 실험에서:
아냐, 너무 나빠졌어. 나는 이것이 기본적으로 표시되는 것을 원하지 않는다는 것을 이미 알고 있습니다. 그러나 정보를 가져오는 것만으로도 충분합니다. 보기 흉한 것은 숨기고, 명시적으로 요청하면 보기 흉하더라도 공개하면 됩니다.
개념 증명: 지정하지 않으면 충돌이 발생합니다.
가장 먼저 해야 할 일은 조치를 취해야 하는지 아는 것입니다. 이를 위해 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개 있습니다. 그리고 그들은 (아주 약간이라도) 상태를 나눕니다. 저는 뭔가를 숨기는 걸 싫어해서
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7931
15
1652
14
1412
52
1303
25
1250
29
프론트 엔드 열 용지 영수증에 대한 차량 코드 인쇄를 만나면 어떻게해야합니까?
Apr 04, 2025 pm 02:42 PM
프론트 엔드 개발시 프론트 엔드 열지대 티켓 인쇄를위한 자주 묻는 질문과 솔루션, 티켓 인쇄는 일반적인 요구 사항입니다. 그러나 많은 개발자들이 구현하고 있습니다 ...
Demystifying JavaScript : 그것이하는 일과 중요한 이유
Apr 09, 2025 am 12:07 AM
JavaScript는 현대 웹 개발의 초석이며 주요 기능에는 이벤트 중심 프로그래밍, 동적 컨텐츠 생성 및 비동기 프로그래밍이 포함됩니다. 1) 이벤트 중심 프로그래밍을 사용하면 사용자 작업에 따라 웹 페이지가 동적으로 변경 될 수 있습니다. 2) 동적 컨텐츠 생성을 사용하면 조건에 따라 페이지 컨텐츠를 조정할 수 있습니다. 3) 비동기 프로그래밍은 사용자 인터페이스가 차단되지 않도록합니다. JavaScript는 웹 상호 작용, 단일 페이지 응용 프로그램 및 서버 측 개발에 널리 사용되며 사용자 경험 및 크로스 플랫폼 개발의 유연성을 크게 향상시킵니다.
누가 더 많은 파이썬이나 자바 스크립트를 지불합니까?
Apr 04, 2025 am 12:09 AM
기술 및 산업 요구에 따라 Python 및 JavaScript 개발자에 대한 절대 급여는 없습니다. 1. 파이썬은 데이터 과학 및 기계 학습에서 더 많은 비용을 지불 할 수 있습니다. 2. JavaScript는 프론트 엔드 및 풀 스택 개발에 큰 수요가 있으며 급여도 상당합니다. 3. 영향 요인에는 경험, 지리적 위치, 회사 규모 및 특정 기술이 포함됩니다.
Shiseido의 공식 웹 사이트와 같은 시차 스크롤 및 요소 애니메이션 효과를 달성하는 방법은 무엇입니까?
또는:
Shiseido의 공식 웹 사이트와 같은 페이지 스크롤과 함께 애니메이션 효과를 어떻게 달성 할 수 있습니까?
Apr 04, 2025 pm 05:36 PM
이 기사에서 시차 스크롤 및 요소 애니메이션 효과 실현에 대한 토론은 Shiseido 공식 웹 사이트 (https://www.shiseido.co.jp/sb/wonderland/)와 유사하게 달성하는 방법을 살펴볼 것입니다.
JavaScript는 배우기가 어렵습니까?
Apr 03, 2025 am 12:20 AM
JavaScript를 배우는 것은 어렵지 않지만 어려운 일입니다. 1) 변수, 데이터 유형, 기능 등과 같은 기본 개념을 이해합니다. 2) 마스터 비동기 프로그래밍 및 이벤트 루프를 통해이를 구현하십시오. 3) DOM 운영을 사용하고 비동기 요청을 처리합니다. 4) 일반적인 실수를 피하고 디버깅 기술을 사용하십시오. 5) 성능을 최적화하고 모범 사례를 따르십시오.
JavaScript의 진화 : 현재 동향과 미래 전망
Apr 10, 2025 am 09:33 AM
JavaScript의 최신 트렌드에는 Typescript의 Rise, 현대 프레임 워크 및 라이브러리의 인기 및 WebAssembly의 적용이 포함됩니다. 향후 전망은보다 강력한 유형 시스템, 서버 측 JavaScript 개발, 인공 지능 및 기계 학습의 확장, IoT 및 Edge 컴퓨팅의 잠재력을 포함합니다.
JavaScript를 사용하여 동일한 ID와 동일한 ID로 배열 요소를 하나의 객체로 병합하는 방법은 무엇입니까?
Apr 04, 2025 pm 05:09 PM
동일한 ID로 배열 요소를 JavaScript의 하나의 객체로 병합하는 방법은 무엇입니까? 데이터를 처리 할 때 종종 동일한 ID를 가질 필요가 있습니다 ...
프론트 엔드 개발에서 VSCODE와 유사한 패널 드래그 앤 드롭 조정 기능을 구현하는 방법은 무엇입니까?
Apr 04, 2025 pm 02:06 PM
프론트 엔드에서 VSCODE와 같은 패널 드래그 앤 드롭 조정 기능의 구현을 탐색하십시오. 프론트 엔드 개발에서 VSCODE와 같은 구현 방법 ...
