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>


<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)建立元素，只需使用 document.createElement 即可。然後我輸入徽章網(wǎng)址：

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>


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

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

煩惱...

當我繼續(xù)測試時，我注意到網(wǎng)路標籤中不斷出現(xiàn)308，但為什麼會出現(xiàn)？嗯，因為展開 Liquid 時，它最終在徽章前出現(xiàn)了一個雙條。

我最初得到的是這個：

• 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 層級處理此字串的建立

JavaScript 方面對我來說似乎比較容易。所以只需將/替換為/，對嗎？嗯，不。由於協(xié)議出現(xiàn)在 :// 之前，因此僅進行粗略替換就會導致 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()
}

分解：

• 代替替換，將在「第一組」中找到的內(nèi)容放在後面加上斜線
• 正規(guī)表示式比對：除 :（一組）、斜線、斜線以外的任何內(nèi)容

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

概念證明：無快取加載

好的，定義了放置位置和鎖定機制的詳細資訊後，我們需要一個重新載入機制。第一次嘗試：簡單地建立一個新的圖像元素。但還是這樣，怎麼辦？理想的情況是「一段時間後」。所以這給了我兩個選擇，可以說：

• 設定超時
• 設定間隔

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

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

使用setTimeout

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

我最明顯的解決方案是將其放在一個區(qū)塊下，因此，當離開該區(qū)塊時，裡面的變數(shù)將在外面不可見：

<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>


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

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

好的，但是如何讓函數(shù)可見呢？好吧，經(jīng)過實驗，我找到了一個方法：函數(shù)轉義作用域。由於局部變數(shù)沒有超出區(qū)塊的限制，我仍然可以在區(qū)塊內(nèi)部放置一些輔助函數(shù)，這樣它們在外部就沒有任何意義。像這樣的東西：

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

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

那麼，如果沒有超時問題，會是什麼樣子呢？遞歸呼叫：

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

看起來不錯，加個超時怎麼樣？嗯，在步驟的主體內(nèi)部，所以呼叫步驟就是設定逾時。為了一個好的暫停，我需要時間：

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

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

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

好的，我們現(xiàn)在有好玩的地方了：

見小提琴 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/

重新加載嘗試

定義了重複計時機制後，現(xiàn)在的問題是定義如何重新載入圖片。首先，分析 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>


<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 的快取。

最後，嚴格的運輸安全。這意味著什麼？這和資源本身有什麼關係？

嗯，這與正在訪問的資源無關。但這表明該網(wǎng)站只能透過 HTTPS 存取。

好的，所有這些都表明圖像不應該是捲曲的。正如預期的那樣，F(xiàn)5 總是會導致它再次下載。對我來說，這是一個非常強大的指標，如果我的快取出現(xiàn)問題，它不會出現(xiàn)在伺服器或網(wǎng)路上，而是出現(xiàn)在瀏覽器層級。

第一次嘗試：建立一個新的 img 元素並丟掉先前的元素。

為了方便起見，沒有什麼比擁有一個傳回元素的函數(shù)更好的了：

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

僅此一點就產(chǎn)生了魔力。那麼，它的表現(xiàn)如何？

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

我發(fā)現(xiàn)的另一個替代方法是再次設定變數(shù)值。這樣，就不再需要產(chǎn)生相同元素的函數(shù)，我只需「修改」img 指向的 URL 即可。而且，這就是我如何發(fā)現(xiàn)在同一頁上的多個位置使用相同資源可能會遭受某種快取的情況......

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

如果它是一個帶有參數(shù)或其迭代器傳遞的查詢參數(shù)呢？

但是，代價是什麼？

好的，這不可能，因為這是一種解決方法，讓我們嘗試獲取它？然後給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 標籤建立 /assets/pipeline.html 並從 iframe 指向它。對於強制重新載入操作，我使用了與 Stack Overflow 答案相同的內(nèi)容：

<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>


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

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

轉為 HTML

然後，去那裡！成功了！

現(xiàn)在，進行調(diào)整以使其適合：

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

透過進行這些調(diào)整，您可以擺脫困境

為此

您可以檢查這裡使用的檔案：

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