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")
}

看不見的：

<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()
}

太好了，讓我們做一些有用的事情并發(fā)布圖片？要動態(tài)創(chuàng)建元素，只需使用 document.createElement 即可。然后我輸入徽章網址：

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 中的示例，一個空的 frontmatter。

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")
}

這會給出錯誤消息，因為 frontmatter 不是 javascript，并且錯誤顯示在第一個 const 中。由于這讓我很困擾，我想到的最直接的處理方法就是盡早創(chuàng)建一個“無害的錯誤”。我添加了一個 ;緊接在前言之后：

<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()
}

煩惱...

當我繼續(xù)測試時，我注意到網絡選項卡中不斷出現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 之前實際上并沒有什么壞處，它甚至是我作為讀者的一個指標。

但是，由于我不想依賴先驗知識來判斷此欄是否存在，因此我有兩個選擇：

• 處理 Liquid 擴展級別以刪除終端斜線
• 在 JavaScript 級別處理此字符串的創(chuàng)建

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:// 不再具有 match 與 ([^:])//，但路徑中 // 的所有其他出現都具有完美匹配，因為它們不會前面一個:.更嚴格地說，我可以努力防止匹配在查詢參數/片段中發(fā)生，但這似乎太過分了。

概念證明：無緩存加載

好的，定義了放置位置和鎖定機制的詳細信息后，我們需要一個重新加載機制。第一次嘗試：簡單地創(chuàng)建一個新的圖像元素。但還是這樣，怎么辦？理想的情況是“一段時間后”。所以這給了我兩個選擇，可以說：

• 設置超時
• 設置間隔

好吧，我們來看看它有什么作用？ setTimeout 接收一個命令，該命令將在一段時間間隔以及給定的時間間隔后執(zhí)行。它會返回一個 ID，您可以使用clearTimeout 將其刪除。如需重復調用，需要在最后再次調用setTimeout。

setInterval 幾乎是同樣的事情，只是它總是在時間間隔之后執(zhí)行命令。返回值應該是一個 ID，您可以調用clearInterval 來刪除它，但根據文檔，它也可以與clearTimeout 一起使用（以防萬一，不要相信它，請使用具有正確語義的 ID）。

使用setTimeout

我們應該使用 setTimeout 創(chuàng)建一個循環(huán)調用嗎？在文本字段中打印“南瓜”一詞 5 次怎么樣？我將為這個實驗放置一個文本區(qū)域：

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 個函數。他們分裂（即使是非常輕微的）一個國家。我很喜歡隱藏東西，所以我不希望這種狀態(tài)在 <script> 標簽之外可見。</script>

我最明顯的解決方案是將其放在一個塊下，因此，當離開該塊時，里面的變量將在外面不可見：

<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()
}

好的，但是如何讓函數可見呢？好吧，經過實驗，我找到了一種方法：函數轉義作用域。由于局部變量沒有超出塊的限制，我仍然可以在塊內部放置一些輔助函數，這樣它們在外部就沒有任何意義。像這樣的東西：

<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()
}

好的，現在我需要處理超時調用。我的想法是執(zhí)行一個步驟，當該步驟完成時，注冊下一個超時，調用相同的步驟。只是為了避免將此步驟永遠限制為幾次。

那么，如果沒有超時問題，會是什么樣子呢？遞歸調用：

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]

好的，剩下要做的就是保存超時標識符，我們就準備好了。我將這一步放在公開的公共函數中，我們就準備好了：

---
# frontmatter vazio para fazer o parse do liquid
---

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()
}

好的，我們現在有好玩的地方了：

參見小提琴 https://jsfiddle.net/jeffque/5Lrasyqk/

使用setInterval

setInterval 的使用非常相似，但“召回”步驟是隱式的。如果我想停止循環(huán)，我需要顯式取消注冊的setInterval。

那么，像上面的例子一樣開始怎么樣？但具有不同的暫存區(qū) ID：

---
# frontmatter vazio para fazer o parse do liquid
---
;

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()
}

參見小提琴 https://jsfiddle.net/jeffque/5Lrasyqk/

重新加載嘗試

定義了重復計時機制后，現在的問題是定義如何重新加載圖像。首先，分析 GitLab 在搜索徽章時返回的標頭：https://gitlab.com/computaria/blog//badges/master/pipeline.svg:

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")
}

比較來自不同請求的多個 etag，以防萬一：

<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()
}

嗯，etag 總是相同的，表明它是相同的資源。 cache-control: no-store 強烈告訴我它不是用于存儲緩存的。指向過去的過期時間強烈表明它的目的是表明不應考慮對該資源進行緩存。除非另有證明，cf-cache-status: MISS 僅表示它沒有命中 Cloudflare 的緩存。

最后，嚴格的運輸安全。這意味著什么？這和資源本身有什么關系？

嗯，這與正在訪問的資源無關。但這表明該網站只能通過 HTTPS 訪問。

好的，所有這些都表明圖像不應該是卷曲的。正如預期的那樣，F5 總是會導致它被再次下載。對我來說，這是一個非常有力的指標，如果我的緩存出現問題，它不會出現在服務器或網絡上，而是出現在瀏覽器級別。

第一次嘗試：創(chuàng)建一個新的 img 元素并扔掉之前的元素。

為了方便起見，沒有什么比擁有一個返回元素的函數更好的了：

<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()
}

在 setTimeout 中，我需要刪除 #pipeline 子級并插入新圖像。我通過父親的行動找到的選項是：

• 刪除子項
• 替換子項
• 替換子項

嗯，removeChild 和replaceChild 涉及了解如何保存舊元素以請求將其刪除。另一方面，ReplaceChildren 沒有任何戲劇性，它只是傳遞了新元素，這很好：

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()
}

僅此一點就產生了魔力。那么，它的表現如何？

創(chuàng)建新的 img 還不夠。

我發(fā)現的另一個替代方法是再次設置變量值。這樣，就不再需要生成相同元素的函數，我只需“修改”img 指向的 URL 即可。而且，這就是我如何發(fā)現在同一頁面上的多個位置使用相同資源可能會遭受某種緩存的情況......

好吧，如果每次重復都在 URL 末尾添加一個“ ”來嘗試欺騙 GitLab 會怎樣？好吧，gitlab 意識到我不懷好意...

如果它是一個帶有參數或其迭代器傳遞的查詢參數怎么辦？

但是，代價是什么？

好的，這不可能，因為這是一種解決方法，讓我們嘗試獲取它？然后給出fetch之后，想想如何替換圖片？

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")
}

嗯，錯誤，來自 CORS。既然我無法控制 GitLab，我還能做什么？

;沒有重新加載，但

好的，新實驗：簡單地使用 img 標簽創(chuàng)建 /assets/pipeline.html 并從 iframe 指向它。對于強制重新加載操作，我使用了與 Stack Overflow 答案相同的內容：

<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

然后，去那里！成功了！

現在，進行調整以使其適合：

• 徽章充電的停止/重啟控制
• 在 iframe 中：按照手動編輯 SVG 的提示點咖啡來處理 iframe
• 文檔內部：刪除正文的邊距，只為徽章留出空間

通過進行這些調整，您可以擺脫困境

為此

您可以檢查這里使用的文件：

• /about.md
• /_includes/pipeline.html
• /assets/pipeline-badge.html
• /js/pipeline-loader.js

以上是使管道可見以監(jiān)控博客部署的詳細內容。更多信息請關注PHP中文網其他相關文章！