Lassen Sie die Pipeline sichtbar, um die Blog-Bereitstellung zu überwachen

Eines der Dinge, die mich an Computaria stören, ist, dass ich die Bereitstellung nicht im Blog selbst verfolgen kann. Da mich das also stört, warum sollte ich es nicht beheben?

Die Pipeline

Derzeit gibt es zwei Möglichkeiten, um festzustellen, ob die Bereitstellung ausgeführt wird:

• Öffnen Sie das Repository auf der Seite „Jobs/Pipelines“ und sehen Sie, wie das neueste ausgeführt wird
• im Repository öffnen und zu README.md scrollen

Beide Lösungen erscheinen mir nicht großartig. Ich hätte gerne etwas Leichteres in der Informatik selbst.

Die Idee

Nach einer kurzen Beratung mit Kauê habe ich beschlossen, seinem Tipp zu folgen: Poste auf /about.

Im ersten Experiment:

Nein, es wurde hässlich. Ich weiß bereits, dass ich nicht möchte, dass dies standardmäßig angezeigt wird. Aber um die Informationen zu bringen, reicht es aus. Ich muss nur verstecken, was hässlich ist, und es auf ausdrückliche Anfrage verfügbar machen, auch wenn es hässlich ist.

Proof of Concept: Abstürze, sofern nicht anders angegeben

Nun, als Erstes müssen wir wissen, ob wir etwas unternehmen sollten. Hierzu wurde als API das Vorhandensein des Abfrageparameters Status mit dem Wert true definiert.

Um die URL zu erhalten, habe ich window.location verwendet. Im Location-Objekt befindet sich das Suchfeld, das genau dazu dient, die Abfrageparameter zu verwalten, die für den Zugriff auf die spezifische URL verwendet werden.

Beispielsweise ist für http://localhost:4000/blog/about?q=1 der Wert von window.location.search ?q=1. Um den Umgang mit den Inhalten innerhalb der Abfrageparameter zu erleichtern, gibt es ein Objekt vom Typ URLSearchParams. Soweit ich der Dokumentation entnehmen konnte, benötige ich zum Instanziieren von URLSearchParams die Abfragezeichenfolge, jedoch ohne das ? des Präfixes. Ich kann dies mit window.location.search.substring(1) erreichen.

Jetzt, mit diesem Objekt in der Hand, kann ich einfach den Wert jedes gewünschten Abfrageparameters abfragen:

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

Damit ich dies in der Hand habe, muss ich die Maßnahme ergreifen, das Pipeline-Abzeichen anzuzeigen. Der Einfachheit halber habe ich beschlossen, es als einfügbares HTML-Snippet bereitzustellen: _includes/pipeline.html. Ich habe also kostenloses HTML, das ich nach Belieben bearbeiten kann.

Am Anfang war es einfach ein

unsichtbar:

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

Platzierung im HTML-Fragment:

<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.</script></p>

<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="%7B%7B%20" 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()
}

Großartig, lass uns etwas Nützliches tun und das Bild posten? Um ein Element dynamisch zu erstellen, verwenden Sie einfach document.createElement. Dann gebe ich die Badge-URL ein:

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

Aber es zeigte ein kaputtes Bild ... hmmm, welche Meldung wird auf der Konsole angezeigt?

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

Seltsam, hätte er die niedliche Repository-URL bekommen sollen? Oh, das ist mir aufgefallen. Er hat Liquid überhaupt nicht verarbeitet. Um damit umzugehen, habe ich beschlossen, dem Beispiel in css/main.scss zu folgen, einer leeren 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")
}

Dies gibt eine Fehlermeldung aus, da Frontmatter kein Javascript ist und der Fehler in der ersten Konstante angezeigt wird. Da mich das stört, war der direkteste Weg, mit dem ich umgehen könnte, früher einen „harmlosen Fehler“ zu erzeugen. Ich habe ein ; hinzugefügt direkt nach der Titelsache:

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

Ärgernisse...

Als ich mit dem Testen fortfuhr, bemerkte ich, dass ständig eine 308 auf der Registerkarte „Netzwerk“ angezeigt wurde. Aber warum erschien sie? Nun, denn beim Erweitern von Liquid wurde am Ende ein Doppelbalken vor den Abzeichen angezeigt.

Ich habe ursprünglich Folgendes bekommen:

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

Mit Weiterleitung an:

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

Und das fing an, mich zu stören, als ich analysierte, ob ich Cache verwendete oder nicht. Um dieses Problem zu lösen, sollte ich den doppelten Schrägstrich entfernen. Ich könnte es einfach loswerden, indem ich den Schrägstrich nicht direkt nach dem zu erweiternden Liquid-Wert einfüge, denn schließlich könnte ich von vornherein wissen, dass die Zeichenfolge {{site.repository.base}} mit / endet. Aber nur für den Fall, dass es nicht wirklich schadet, diesen Schrägstrich vor /badges/master/pipeline.svg zu setzen, es ist sogar ein Indikator für mich selbst als Leser.

Aber da ich mich nicht auf Vorkenntnisse verlassen möchte, ob diese Bar existiert oder nicht, hatte ich dafür zwei Möglichkeiten:

• Behandeln Sie die Flüssigkeitsausdehnungsstufe, um den Endschrägstrich zu entfernen
• erledigen Sie die Erstellung dieser Zeichenfolge auf Javascript-Ebene

Die JavaScript-Seite erschien mir einfacher. Ersetzen Sie also einfach // durch /, richtig? Hmmm, nein. Da das Protokoll vor „://“ erscheint, würde allein diese grobe Ersetzung dazu führen, dass die URL so beginnt: https://computaria.gitlab.io. Um dies zu umgehen, nehme ich die folgende Ersetzung vor:

<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.</script></p>

<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="%7B%7B%20" 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()
}

Aufschlüsselung:

• Anstelle des Ersatzes geben Sie ein, was in der „ersten Gruppe“ gefunden wurde, gefolgt von einem Schrägstrich
• Regex-Matches: alles andere als: (in einer Gruppe), Schrägstrich, Schrägstrich

Mit dieser Änderung hat https:// keine Übereinstimmung mit ([^:])//, aber alle anderen Vorkommen von // im Pfad haben eine perfekte Übereinstimmung, da dies nicht der Fall ist vor einem stehen :. Genauer gesagt könnte ich daran arbeiten, die Übereinstimmung im Abfrageparameter/-fragment zu verhindern, aber das erschien mir zu übertrieben.

Proof of Concept: Cacheloses Laden

Okay, nachdem wir die Details zur Platzierung und zum Verriegelungsmechanismus definiert haben, benötigen wir einen Nachlademechanismus. Erster Versuch: einfach ein neues Bildelement erstellen. Aber trotzdem, wie? Ideal wäre „nach einiger Zeit“. Das gibt mir also zwei Möglichkeiten, um es besser zu sagen:

• setTimeout
• setInterval

Okay, lass uns weitermachen mit „Was bewirkt das?“ setTimeout empfängt einen Befehl, der nach einem Zeitintervall UND auch dem angegebenen Intervall ausgeführt wird. Sie erhalten eine ID zurück, die Sie mit „clearTimeout“ entfernen können. Um den Aufruf zu wiederholen, muss setTimeout am Ende erneut aufgerufen werden.

setInterval ist fast dasselbe, nur wird der Befehl immer nach dem Zeitintervall ausgeführt. Die Rückgabe sollte eine ID sein, die Sie zum Entfernen mit „clearInterval“ aufrufen würden, aber laut Dokumentation funktioniert es auch mit „clearTimeout“ (nur für den Fall, vertrauen Sie ihm nicht, verwenden Sie die mit der richtigen Semantik).

Verwenden von setTimeout

Sollen wir einen Schleifenaufruf mit setTimeout erstellen? Wie wäre es, wenn Sie das Wort Kürbis fünfmal in ein Textfeld drucken würden? Ich werde einen Textbereich für dieses Experiment einfügen:

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, ich habe 3 Funktionen, die ich gerne über HTML erreichen möchte. Und sie spalten (wenn auch nur geringfügig) einen Staat. Ich bin ein Fan davon, Dinge zu verstecken, daher möchte ich nicht, dass dieser Status außerhalb des <script>-Tags sichtbar ist.</script>

Meine naheliegendste Lösung besteht darin, es unter einem Block zu belassen, sodass beim Verlassen des Blocks die Variablen im Inneren außerhalb unsichtbar sind:

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

Okay, aber wie macht man die Funktionen sichtbar? Nun, beim Experimentieren habe ich einen Weg gefunden: Funktion entgeht dem Gültigkeitsbereich. Und da lokale Variablen die Grenzen des Blocks nicht überschreiten, kann ich dennoch einige Hilfsfunktionen innerhalb des Blocks platzieren, sodass sie außerhalb keine Bedeutung haben. Etwa so:

<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.</script></p>

<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="%7B%7B%20" 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()
}

Okay, jetzt muss ich mich mit Timeout-Anrufen befassen. Meine Idee besteht darin, einen Schritt auszuführen und, wenn dieser Schritt abgeschlossen ist, die nächste Zeitüberschreitung zu registrieren und denselben Schritt aufzurufen. Und nur um diesen Schritt nicht für immer auf ein paar Mal zu beschränken.

Wenn es das Timeout-Problem nicht gäbe, wie wäre es dann? Ein rekursiver Aufruf:

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

Es sieht gut aus, wie wäre es mit dem Hinzufügen des Timeouts? Nun, innerhalb des Hauptteils des Schritts, also wird beim Aufrufen des Schritts das Timeout festgelegt. Für eine gute Auszeit brauche ich die Zeit:

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

Okay, jetzt müssen Sie nur noch die Timeout-ID speichern und schon sind wir bereit. Ich platziere diesen Schritt in der exponierten öffentlichen Funktion und wir sind bereit:

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

Okay, wir haben jetzt Platz für Spaß:

Siehe auf Fiddle https://jsfiddle.net/jeffque/5Lrasyqk/

Verwenden von setInterval

Die Verwendung von setInterval ist sehr ähnlich, der „Rückruf“-Schritt ist jedoch implizit. Wenn ich die Schleife stoppen möchte, muss ich das registrierte setInterval explizit abbrechen.

Nun, wie wäre es, wenn Sie wie im obigen Beispiel beginnen würden? Allerdings mit einer anderen Scratch-Bereichs-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()
}

Siehe auf Fiddle https://jsfiddle.net/jeffque/5Lrasyqk/

Nachladeversuche

Nachdem der Wiederholungs-Timing-Mechanismus definiert ist, geht es nun darum, zu definieren, wie das Bild neu geladen werden soll. Analysieren Sie zunächst die Header, die GitLab bei der Suche nach dem Badge zurückgibt: 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")
}

Vergleichen mehrerer E-Tags aus verschiedenen Anfragen für alle Fälle:

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

Nun, das Etag war immer dasselbe, was darauf hindeutet, dass es sich um dieselbe Ressource handelt. Das Cache-Control: No-Store sagt mir nachdrücklich, dass es nicht zum Speichern des Caches dient. Der in die Vergangenheit verweisende Ablauf weist stark darauf hin, dass dies darauf hinweisen sollte, dass diese Ressource nicht für das Caching in Betracht gezogen werden sollte. Bis zum Beweis des Gegenteils hat cf-cache-status: MISS nur angegeben, dass der Cache von Cloudflare nicht erreicht wurde.

Endlich strenge Transportsicherheit. Was bedeutet das? Was hat das mit der Ressource selbst zu tun?

Nun, es hat nichts mit der Ressource zu tun, auf die zugegriffen wird. Es ist aber ein Indikator dafür, dass auf die Seite nur mit HTTPS zugegriffen werden sollte.

Okay, das alles deutet darauf hin, dass das Bild nicht lockig sein sollte. Ein F5 führt erwartungsgemäß immer dazu, dass es erneut heruntergeladen wird. Das ist für mich ein sehr starker Indikator dafür, dass, wenn ich ein Problem mit dem Cache habe, es nicht am Server oder im Netzwerk liegt, sondern an etwas auf Browserebene.

Erster Versuch: Erstellen Sie ein neues img-Element und werfen Sie das vorherige weg.

Der Einfachheit halber gibt es nichts Besseres als eine Funktion, die das Element zurückgibt:

<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.</script></p>

<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="%7B%7B%20" 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()
}

Und in setTimeout muss ich die #pipeline-Kinder entfernen und das neue Bild einfügen. Die Optionen, die ich bei Aktionen des Vaters gefunden habe, sind:

• removeChild
• replaceChild
• Kinder ersetzen

Nun, bei „removeChild“ und „replaceChild“ muss man wissen, wie man das alte Element speichert, um dessen Entfernung anzufordern. Bei „ReplaceChildren“ hingegen gibt es kein Drama, es übergibt einfach das neue Element und das ist gut so:

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

Das allein macht die Magie aus. Wie verhält es sich überhaupt?

Das Erstellen des neuen Bildes war nicht genug.

Eine andere Alternative, die ich gefunden habe, bestand darin, den Variablenwert erneut festzulegen. Damit ist die Funktion zur Generierung identischer Elemente nicht mehr erforderlich, ich werde lediglich die URL „ändern“, auf die das Bild verweist. Und so habe ich herausgefunden, dass dasselbe Asset, das an mehreren Stellen auf derselben Seite verwendet wird, unter einer Art Caching leiden kann …

Ok, was wäre, wenn jeder Wiederholung ein „“ am Ende der URL hinzugefügt würde, um GitLab auszutricksen? Nun, Gitlab hat gemerkt, dass ich nichts Gutes im Schilde geführt habe...

Was ist, wenn es sich um einen queryParam handelt, der mit einem Argument oder seinem Iterator übergeben wird?

Aber zu welchem ​​Preis?

Okay, das kommt nicht in Frage, weil es eine Problemumgehung ist. Versuchen wir es dann abzurufen? Überlegen Sie nach dem Fetch, wie Sie das Bild ersetzen können?

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, Fehler, von CORS. Und da ich keine Kontrolle über GitLab habe, was kann ich sonst noch tun?

Das Es erfolgt kein Neuladen, aber der

Okay, neues Experiment: Erstellen Sie /assets/pipeline.html einfach mit dem img-Tag und zeigen Sie von einem Iframe darauf. Für den Vorgang „Neuladen erzwingen“ habe ich dasselbe wie bei der Stapelüberlauf-Antwort verwendet:

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

Zu HTML

Und gehen Sie dorthin! Es hat funktioniert!

Jetzt Anpassungen, um es passend zu machen:

• Stopp-/Neustartsteuerung für das Aufladen des Ausweises
• im Iframe: Befolgen Sie die Tipps aus SVG von Hand bearbeiten, um Kaffee zu bestellen, um mit dem Iframe umzugehen
• Im Dokument: Entfernen Sie die Ränder vom Hauptteil, um nur Platz für das Abzeichen zu schaffen

Indem Sie diese Anpassungen vornehmen, können Sie dieser Situation entkommen

dafür

Sie können die verwendeten Dateien hier überprüfen:

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