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]

奇怪，他應(yīng)該得到了可愛的儲存庫 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()
}

煩惱...

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

我最初得到的是這個：

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

重新導(dǎo)向至：

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

當(dāng)我分析我是否使用快取時，這開始困擾我。為了解決這個問題，我應(yīng)該去掉雙斜線。我可以透過不在 Liquid 值展開後放置斜線來擺脫它，因為畢竟我可以先驗地知道 ??{{site.repository.base}} 字串以 / 結(jié)尾。但是，為了以防萬一，將斜線放在 /badges/master/pipeline.svg 之前實際上並沒有什麼壞處，它甚至是我作為讀者的一個指標。

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

• 處理 Liquid 擴充等級以刪除終端斜線
• 在 JavaScript 層級處理此字串的建立

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

概念證明：無快取加載

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

• 設(shè)定超時
• 設(shè)定間隔

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

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

使用setTimeout

我們應(yīng)該使用 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ū)塊下，因此，當(dāng)離開該區(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ù)轉(zhuǎn)義作用域。由於局部變數(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í)行一個步驟，當(dāng)該步驟完成時，註冊下一個超時，調(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)部，所以呼叫步驟就是設(shè)定逾時。為了一個好的暫停，我需要時間：

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 強烈告訴我它不是用來儲存快取的。指向過去的過期時間強烈表明它的目的是表明不應(yīng)考慮對該資源進行快取。除非另有證明，cf-cache-status: MISS 僅表示它沒有命中 Cloudflare 的快取。

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

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

好的，所有這些都表明圖像不應(yīng)該是捲曲的。正如預(yù)期的那樣，F(xiàn)5 總是會導(dǎo)致它再次下載。對我來說，這是一個非常強大的指標，如果我的快取出現(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è)定變數(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()
}

轉(zhuǎn)為 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