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

Placement dans le fragment 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()
}

Super, faisons quelque chose d'utile et publions l'image?? Pour créer dynamiquement un élément, utilisez simplement document.createElement. Ensuite je mets l'URL du badge :

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

Mais il affichait une image cassée... hmmm, quel est le message affiché sur la console ?

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

étrange, aurait-il d? obtenir la jolie URL du référentiel?? Oh, j'ai remarqué. Il n'a pas du tout traité Liquid. Pour résoudre ce problème, j'ai décidé de suivre l'exemple de css/main.scss, un texte vide.

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

Cela donne un message d'erreur car le frontmatter n'est pas javascript et l'erreur est affichée dans la première const. Puisque cela me dérange, la fa?on la plus directe à laquelle j'ai pensé de résoudre ce problème était de créer une "erreur inoffensive" plus t?t. J'ai ajouté un ; juste après le début?:

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

Des désagréments...

En poursuivant les tests, j'ai remarqué qu'un 308 apparaissait constamment dans l'onglet réseau. Mais pourquoi est-il apparu?? Eh bien, parce qu'en développant Liquid, cela s'est retrouvé avec une double barre avant les badges.

J'ai initialement eu ceci?:

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

Avec redirection vers :

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

Et cela a commencé à me déranger lorsque j'ai analysé si j'utilisais le cache ou non. Pour résoudre ce problème, je devrais me débarrasser de la double barre oblique. Je pourrais simplement m'en débarrasser en ne mettant pas la barre oblique juste après l'expansion de la valeur Liquid, car après tout je pourrais savoir a priori que la cha?ne {{site.repository.base}} se terminait par /. Mais, juste au cas où, cela ne ferait pas de mal de mettre cette barre oblique avant /badges/master/pipeline.svg, c'est même un indicateur pour moi en tant que lecteur.

Mais comme je ne veux pas me fier à une connaissance préalable pour savoir si cette barre existe ou non, j'avais deux options pour cela?:

• traitez le niveau d'expansion du liquide pour retirer la barre oblique du terminal
• gérer la création de cette cha?ne au niveau javascript

Le c?té JavaScript m'a paru plus simple. Alors remplacez simplement // par /, n'est-ce pas?? Hum, non. étant donné que le protocole appara?t avant ://, le simple fait d'effectuer cette substitution grossière entra?nerait le début de l'URL comme ceci?: https:/computaria.gitlab.io. Pour contourner ce problème, je fais la substitution suivante?:

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

Décomposition?:

• à la place du remplacement, mettre ce qui a été trouvé dans le "premier groupe" suivi d'une barre oblique
• matchs regex?: tout autre chose que?: (dans un groupe), slash, slash

Avec ce changement, https:// n'a pas de correspondance avec ([^:])//, mais toutes les autres occurrences de // dans le chemin ont une correspondance parfaite, car elles ne le seront pas être devant un :. Pour être plus strict, je pourrais travailler pour empêcher la correspondance de se produire dans le paramètre/fragment de requête, mais cela semblait trop exagéré.

Preuve de concept?: chargement sans cache

Ok, après avoir défini les détails de l'endroit où le placer et du mécanisme de verrouillage, nous avons besoin d'un mécanisme de rechargement. Première tentative?: créez simplement un nouvel élément d’image. Mais quand même, comment ? L'idéal serait "après un certain temps". Cela me donne donc deux options, enfin dire?:

• setTimeout
• setInterval

D'accord, allons-y, qu'est-ce que ?a fait?? setTimeout re?oit une commande qui sera exécutée après un intervalle de temps ET également l'intervalle donné. Il vous renvoie un identifiant que vous pouvez supprimer à l'aide de clearTimeout. Pour répéter l'appel, setTimeout doit être rappelé à la fin.

setInterval est presque la même chose, sauf qu'il exécutera toujours la commande après l'intervalle de temps. Le retour doit être un identifiant que vous appelleriez clearInterval pour supprimer, mais selon la documentation, il fonctionne également avec clearTimeout (juste au cas où, ne lui faites pas confiance, utilisez celui avec la sémantique correcte).

Utilisation de setTimeout

Devrions-nous créer un appel en boucle avec setTimeout?? Que diriez-vous d’imprimer 5 fois le mot citrouille dans un champ de texte?? Je vais mettre une zone de texte pour cette expérience?:

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, j'ai 3 fonctions que j'aimerais rendre accessibles en HTML. Et ils divisent (même si très légèrement) un état. J'adore cacher des choses, donc je ne veux pas que cet état soit visible en dehors de la balise

Outils d'IA chauds

Undress AI Tool

Images de déshabillage gratuites

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

échangez les visages dans n'importe quelle vidéo sans effort grace à notre outil d'échange de visage AI entièrement gratuit?!

Afficher plus

Article chaud

Guide: Stellar Blade Enregistrer le fichier Emplacement / enregistrer le fichier perdu / ne pas enregistrer

4 Il y a quelques semaines By DDD

Oguri Cap Build Guide | Un joli Musume Derby

2 Il y a quelques semaines By Jack chen

Guide de construction d'Agnes Tachyon | Un joli Musume Derby

2 Il y a quelques semaines By Jack chen

Dune: Awakening - Planétologue avancé Procédure pas à pas

4 Il y a quelques semaines By Jack chen

Datez tout: guide relationnel de Dirk et Harper

4 Il y a quelques semaines By Jack chen

Afficher plus

Outils chauds

Bloc-notes++7.3.1

éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

8638

17

Tutoriel Java

1783

16

Tutoriel CakePHP

1728

56

Tutoriel Laravel

1579

28

Tutoriel PHP

1444

31

Afficher plus