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

tidak kelihatan:

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

Meletakkan dalam serpihan 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()
}

Bagus, mari lakukan sesuatu yang berguna dan siarkan imej? Untuk mencipta elemen secara dinamik, hanya gunakan document.createElement. Kemudian saya meletakkan URL lencana:

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

Tetapi ia menunjukkan imej yang rosak... hmmm, apakah mesej yang dipaparkan pada konsol?

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

Pelik, patutkah dia mendapat URL rpositori yang comel? Oh, saya perasan. Dia langsung tidak memproses Cecair. Untuk menangani perkara ini, saya memutuskan untuk mengikuti contoh dalam css/main.scss, perkara hadapan kosong.

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

Ini memberikan mesej ralat kerana frontmatter bukan javascript, dan ralat ditunjukkan dalam const pertama. Oleh kerana ini mengganggu saya, cara paling langsung yang saya fikirkan untuk menanganinya adalah dengan mencipta "ralat tidak berbahaya" lebih awal. Saya menambah ; betul-betul selepas frontmatter:

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

Kegusaran...

Semasa saya meneruskan ujian, saya perhatikan bahawa 308 sentiasa muncul dalam tab rangkaian Tetapi mengapa ia muncul? Nah, kerana apabila mengembangkan Cecair, ia berakhir dengan bar berganda sebelum lencana.

Saya pada asalnya mendapat ini:

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

Dengan ubah hala ke:

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

Dan ini mula mengganggu saya semasa saya menganalisis sama ada saya menggunakan cache atau tidak. Untuk menyelesaikannya, saya harus menyingkirkan garis miring berganda. Saya hanya boleh menyingkirkannya dengan tidak meletakkan garis miring sejurus selepas nilai Cecair dikembangkan, kerana lagipun saya dapat mengetahui secara priori bahawa rentetan {{site.repository.base}} berakhir dengan /. Tetapi, untuk berjaga-jaga, sebenarnya tidak salah untuk meletakkan garis miring itu sebelum /badges/master/pipeline.svg, malah ia adalah penunjuk untuk diri saya sendiri sebagai pembaca.

Tetapi, kerana saya tidak mahu bergantung pada pengetahuan terdahulu sama ada bar ini wujud atau tidak, saya mempunyai dua pilihan untuk ini:

• rawat tahap pengembangan Cecair untuk mengeluarkan garis miring terminal
• Kendalikan penciptaan rentetan ini pada tahap javascript

Sisi JavaScript kelihatan lebih mudah kepada saya. Jadi gantikan // dengan /, betul? Hmmm, tidak. Oleh kerana protokol muncul sebelum ://, jadi hanya membuat penggantian mentah ini akan menyebabkan url bermula seperti ini: https:/computaria.gitlab.io. Untuk mengatasi perkara ini, saya membuat penggantian berikut:

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

Memecahkannya:

• sebagai gantian, letakkan apa yang terdapat dalam "kumpulan pertama" diikuti dengan garis miring
• padanan regex: apa-apa sahaja selain : (dalam kumpulan), slash, slash

Dengan perubahan ini, https:// tidak mempunyai padanan dengan ([^:])//, tetapi semua kejadian lain // dalam laluan mempunyai padanan yang sempurna, kerana ia tidak akan berada di hadapan satu :. Untuk menjadi lebih tegas, saya boleh berusaha untuk menghalang perlawanan daripada berlaku dalam param/serpihan pertanyaan, tetapi ia kelihatan terlalu berlebihan.

Bukti Konsep: Pemuatan Tanpa Cache

Ok, setelah menentukan butiran tempat meletakkannya dan mekanisme penguncian, kami memerlukan mekanisme pemuatan semula. Percubaan pertama: hanya buat elemen imej baharu. Tetapi masih, bagaimana? Idealnya ialah "selepas beberapa lama". Jadi ini memberi saya dua pilihan, baik untuk mengatakan:

• setTimeout
• setInterval

Baiklah, mari kita pergi dengan apa yang dilakukan ini? setTimeout menerima arahan yang akan dilaksanakan selepas selang masa DAN juga selang masa yang diberikan. Ia memberikan anda kembali ID yang boleh anda alih keluar menggunakan clearTimeout. Untuk mengulangi panggilan, setTimeout perlu dipanggil semula pada penghujungnya.

setInterval adalah perkara yang hampir sama, cuma ia akan sentiasa melaksanakan arahan selepas selang masa. Pemulangan mestilah ID yang anda akan panggil clearInterval untuk dialih keluar, tetapi menurut dokumentasi ia berfungsi dengan clearTimeout juga (untuk berjaga-jaga, jangan percaya, gunakan yang mempunyai semantik yang betul).

Menggunakan setTimeout

Adakah kita akan membuat panggilan gelung dengan setTimeout? Bagaimana pula dengan mencetak perkataan labu 5 kali dalam medan teks? Saya akan meletakkan textarea untuk percubaan ini:

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

Ok, saya mempunyai 3 fungsi yang saya ingin capai dengan HTML. Dan mereka membahagikan (walaupun sedikit) negeri. Saya malas untuk menyembunyikan sesuatu, jadi saya tidak mahu keadaan ini kelihatan di luar teg Penyelesaian saya yang paling jelas ialah meninggalkannya di bawah blok, jadi, apabila meninggalkan blok, pembolehubah di dalam akan tidak kelihatan di luar:

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

Baiklah, tetapi bagaimana anda membuat fungsi kelihatan? Nah, bereksperimen saya menemui cara: fungsi terlepas dari skop. Dan kerana pembolehubah tempatan tidak melebihi had blok, saya masih boleh meletakkan beberapa fungsi tambahan di dalam blok supaya ia tidak mempunyai makna di luar. Sesuatu seperti ini:

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

Baiklah, sekarang saya perlu berurusan dengan panggilan tamat masa. Idea saya adalah untuk melaksanakan langkah dan, apabila langkah ini selesai, daftar tamat masa seterusnya, memanggil langkah yang sama. Dan hanya untuk mengelak daripada mengehadkan langkah ini kepada beberapa kali selama-lamanya.

Jadi, jika tiada isu tamat masa, bagaimana keadaannya? Panggilan rekursif:

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

Nampak bagus, bagaimana pula dengan menambah tamat masa? Nah, di dalam badan langkah, jadi langkah panggilan adalah menetapkan tamat masa. Untuk tamat masa yang baik, saya memerlukan masa:

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

Ok, apa yang perlu dilakukan ialah menyimpan pengecam tamat masa dan kami sudah bersedia. Saya meletakkan langkah ini di dalam fungsi awam yang terdedah dan kami bersedia:

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

Baiklah, kami mempunyai ruang untuk berseronok sekarang:

Lihat di Fiddle https://jsfiddle.net/jeffque/5Lrasyqk/

Menggunakan setInterval

Penggunaan setInterval sangat serupa, tetapi langkah "recall" adalah tersirat. Jika saya mahu menghentikan gelung, saya perlu membatalkan setInterval berdaftar secara eksplisit.

Nah, bagaimana kalau bermula seperti contoh di atas? Tetapi dengan ID kawasan calar yang berbeza:

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

Lihat di Fiddle https://jsfiddle.net/jeffque/5Lrasyqk/

Percubaan muat semula

Dengan mekanisme pemasaan ulangan yang ditakrifkan, kini adalah soal menentukan cara memuat semula imej. Mula-mula, analisa pengepala yang GitLab pulangkan apabila mencari lencana: 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")
}

Membandingkan berbilang etag daripada permintaan yang berbeza untuk berjaga-jaga:

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

Nah, etag sentiasa sama, menunjukkan bahawa ia adalah sumber yang sama. Kawalan cache: no-store sangat memberitahu saya bahawa ia bukan untuk menyimpan cache. Tamat tempoh yang menunjuk ke masa lalu sangat menunjukkan bahawa ia bertujuan untuk menunjukkan bahawa sumber ini tidak boleh dipertimbangkan untuk caching. Sehingga dibuktikan sebaliknya, cf-cache-status: MISS hanya menunjukkan bahawa ia tidak mencecah cache Cloudflare.

Akhir sekali, keselamatan pengangkutan yang ketat. Apakah maksud ini? Apakah kaitan ini dengan sumber itu sendiri?

Nah, ia tiada kaitan dengan sumber yang sedang diakses. Tetapi ini adalah penunjuk bahawa tapak itu hanya boleh diakses dengan HTTPS.

Baiklah, semua ini menunjukkan bahawa imej tidak sepatutnya kerinting. F5 sentiasa menyebabkan ia dimuat turun semula, seperti yang dijangkakan. Ini bagi saya adalah penunjuk yang sangat kuat bahawa jika saya menghadapi masalah dengan cache, ia bukan pada pelayan atau rangkaian, tetapi sesuatu di peringkat penyemak imbas.

Percubaan pertama: cipta elemen img baharu dan buang yang sebelumnya.

Untuk kemudahan, tiada apa-apa seperti mempunyai fungsi yang mengembalikan elemen:

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

Dan dalam setTimeout saya perlu mengalih keluar kanak-kanak #pipeline dan memasukkan imej baharu. Pilihan yang saya temui dengan tindakan daripada bapa ialah:

• alih keluarKanak
• gantikan Kanak-kanak
• gantikan Kanak-kanak

Nah, removeChild dan replaceChild melibatkan mengetahui cara menyimpan elemen lama untuk meminta dialih keluar. ReplaceChildren, sebaliknya, tidak mempunyai sebarang drama, ia hanya melepasi elemen baharu dan itu bagus:

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

itu sahaja yang membuat keajaiban. Jadi, bagaimana pula ia berkelakuan?

Mencipta img baharu tidak mencukupi.

Alternatif lain yang saya temui ialah menetapkan semula nilai pembolehubah. Dengan ini, tiada lagi keperluan untuk mempunyai fungsi yang menjana elemen yang sama, saya hanya akan "mengubah suai" URL yang ditunjukkan oleh img. Dan, begitulah cara saya mendapati bahawa aset yang sama yang digunakan di beberapa tempat pada halaman yang sama boleh mengalami beberapa jenis caching...

Ok, bagaimana jika setiap ulangan ditambah ' ' di hujung URL untuk cuba menipu GitLab? Nah, gitlab menyedari bahawa saya tidak berguna...

Bagaimana jika ia adalah queryParam yang diluluskan dengan hujah atau lelarannya?

Tetapi, pada kos berapa?

Ok, dengan itu di luar persoalan kerana ia adalah penyelesaian, mari cuba dapatkannya? Dan selepas memberikan pengambilan, fikirkan cara untuk menggantikan imej?

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

Hmm, ralat, daripada CORS. Dan kerana saya tidak mempunyai kawalan ke atas GitLab, apa lagi yang boleh saya lakukan?

tiada muat semula, tetapi