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

看不見(jiàn)的：

<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ā)布圖片？要?jiǎng)討B(tài)創(chuàng)建元素，只需使用 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()
}

但是它顯示了一個(gè)破碎的圖像...嗯，控制臺(tái)上顯示的消息是什么？

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

奇怪，他應(yīng)該得到了可愛(ài)的存儲(chǔ)庫(kù) URL 嗎？哦，我注意到了。他根本沒(méi)有處理Liquid。為了解決這個(gè)問(wèn)題，我決定遵循 css/main.scss 中的示例，一個(gè)空的 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")
}

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

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

煩惱...

當(dāng)我繼續(xù)測(cè)試時(shí)，我注意到網(wǎng)絡(luò)選項(xiàng)卡中不斷出現(xiàn)308，但為什么會(huì)出現(xiàn)？嗯，因?yàn)檎归_(kāi) Liquid 時(shí)，它最終在徽章前出現(xiàn)了一個(gè)雙條。

我最初得到的是這個(gè)：

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

重定向至：

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

當(dāng)我分析我是否使用緩存時(shí)，這開(kāi)始困擾我。為了解決這個(gè)問(wèn)題，我應(yīng)該去掉雙斜杠。我可以通過(guò)不在 Liquid 值展開(kāi)后放置斜杠來(lái)擺脫它，因?yàn)楫吘刮铱梢韵闰?yàn)地知道 {{site.repository.base}} 字符串以 / 結(jié)尾。但是，為了以防萬(wàn)一，將斜線放在 /badges/master/pipeline.svg 之前實(shí)際上并沒(méi)有什么壞處，它甚至是我作為讀者的一個(gè)指標(biāo)。

但是，由于我不想依賴先驗(yàn)知識(shí)來(lái)判斷此欄是否存在，因此我有兩個(gè)選擇：

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

JavaScript 方面對(duì)我來(lái)說(shuō)似乎更容易。所以只需將/替換為/，對(duì)嗎？嗯，不。由于協(xié)議出現(xiàn)在 :// 之前，因此僅進(jìn)行粗略替換就會(huì)導(dǎo)致 url 開(kāi)頭如下：https://computaria.gitlab.io。為了解決這個(gè)問(wèn)題，我進(jìn)行了以下替換：

<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)容放在后面加上斜線
• 正則表達(dá)式匹配：除 :（在一組中）、斜杠、斜杠以外的任何內(nèi)容

通過(guò)此更改，https:// 不再具有 match 與 ([^:])//，但路徑中 // 的所有其他出現(xiàn)都具有完美匹配，因?yàn)樗鼈儾粫?huì)前面一個(gè):.更嚴(yán)格地說(shuō)，我可以努力防止匹配在查詢參數(shù)/片段中發(fā)生，但這似乎太過(guò)分了。

概念證明：無(wú)緩存加載

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

• 設(shè)置超時(shí)
• 設(shè)置間隔

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

setInterval 幾乎是同樣的事情，只是它總是在時(shí)間間隔之后執(zhí)行命令。返回值應(yīng)該是一個(gè) ID，您可以調(diào)用clearInterval 來(lái)刪除它，但根據(jù)文檔，它也可以與clearTimeout 一起使用（以防萬(wàn)一，不要相信它，請(qǐng)使用具有正確語(yǔ)義的 ID）。

使用setTimeout

我們應(yīng)該使用 setTimeout 創(chuàng)建一個(gè)循環(huán)調(diào)用嗎？在文本字段中打印“南瓜”一詞 5 次怎么樣？我將為這個(gè)實(shí)驗(yàn)放置一個(gè)文本區(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")
}

好的，我想通過(guò) HTML 訪問(wèn) 3 個(gè)函數(shù)。他們分裂（即使是非常輕微的）一個(gè)國(guó)家。我很喜歡隱藏東西，所以我不希望這種狀態(tài)在 <script> 標(biāo)簽之外可見(jiàn)。</script>

我最明顯的解決方案是將其放在一個(gè)塊下，因此，當(dāng)離開(kāi)該塊時(shí)，里面的變量將在外面不可見(jiàn)：

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

好的，但是如何讓函數(shù)可見(jiàn)呢？好吧，經(jīng)過(guò)實(shí)驗(yàn)，我找到了一種方法：函數(shù)轉(zhuǎn)義作用域。由于局部變量沒(méi)有超出塊的限制，我仍然可以在塊內(nèi)部放置一些輔助函數(shù)，這樣它們?cè)谕獠烤蜎](méi)有任何意義。像這樣的東西：

<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)在我需要處理超時(shí)調(diào)用。我的想法是執(zhí)行一個(gè)步驟，當(dāng)該步驟完成時(shí)，注冊(cè)下一個(gè)超時(shí)，調(diào)用相同的步驟。只是為了避免將此步驟永遠(yuǎn)限制為幾次。

那么，如果沒(méi)有超時(shí)問(wèn)題，會(huì)是什么樣子呢？遞歸調(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()
}

看起來(lái)不錯(cuò)，加個(gè)超時(shí)怎么樣？嗯，在步驟的主體內(nèi)部，所以調(diào)用步驟就是設(shè)置超時(shí)。為了一個(gè)好的暫停，我需要時(shí)間：

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

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

---
# 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)在有好玩的地方了：

參見(jiàn)小提琴 https://jsfiddle.net/jeffque/5Lrasyqk/

使用setInterval

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

那么，像上面的例子一樣開(kāi)始怎么樣？但具有不同的暫存區(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()
}

參見(jiàn)小提琴 https://jsfiddle.net/jeffque/5Lrasyqk/

重新加載嘗試

定義了重復(fù)計(jì)時(shí)機(jī)制后，現(xiàn)在的問(wèn)題是定義如何重新加載圖像。首先，分析 GitLab 在搜索徽章時(shí)返回的標(biāo)頭：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")
}

比較來(lái)自不同請(qǐng)求的多個(gè) etag，以防萬(wàn)一：

<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 強(qiáng)烈告訴我它不是用于存儲(chǔ)緩存的。指向過(guò)去的過(guò)期時(shí)間強(qiáng)烈表明它的目的是表明不應(yīng)考慮對(duì)該資源進(jìn)行緩存。除非另有證明，cf-cache-status: MISS 僅表示它沒(méi)有命中 Cloudflare 的緩存。

最后，嚴(yán)格的運(yùn)輸安全。這意味著什么？這和資源本身有什么關(guān)系？

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

好的，所有這些都表明圖像不應(yīng)該是卷曲的。正如預(yù)期的那樣，F(xiàn)5 總是會(huì)導(dǎo)致它被再次下載。對(duì)我來(lái)說(shuō)，這是一個(gè)非常有力的指標(biāo)，如果我的緩存出現(xiàn)問(wèn)題，它不會(huì)出現(xiàn)在服務(wù)器或網(wǎng)絡(luò)上，而是出現(xiàn)在瀏覽器級(jí)別。

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

為了方便起見(jiàn)，沒(méi)有什么比擁有一個(gè)返回元素的函數(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 中，我需要?jiǎng)h除 #pipeline 子級(jí)并插入新圖像。我通過(guò)父親的行動(dòng)找到的選項(xiàng)是：

• 刪除子項(xiàng)
• 替換子項(xiàng)
• 替換子項(xiàng)

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

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

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

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

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

好吧，如果每次重復(fù)都在 URL 末尾添加一個(gè)“ ”來(lái)嘗試欺騙 GitLab 會(huì)怎樣？好吧，gitlab 意識(shí)到我不懷好意...

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

但是，代價(jià)是什么？

好的，這不可能，因?yàn)檫@是一種解決方法，讓我們嘗試獲取它？然后給出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")
}

嗯，錯(cuò)誤，來(lái)自 CORS。既然我無(wú)法控制 GitLab，我還能做什么？

;沒(méi)有重新加載，但

好的，新實(shí)驗(yàn)：簡(jiǎn)單地使用 img 標(biāo)簽創(chuàng)建 /assets/pipeline.html 并從 iframe 指向它。對(duì)于強(qiáng)制重新加載操作，我使用了與 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>
</p>

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

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

轉(zhuǎn)為 HTML

然后，去那里！成功了！

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

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

通過(guò)進(jìn)行這些調(diào)整，您可以擺脫困境

為此

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

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

以上是使管道可見(jiàn)以監(jiān)控博客部署的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！