Lassen Sie die Pipeline sichtbar, um die Blog-Bereitstellung zu überwachen-js-Tutorial-php.cn

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:

Deixando a pipeline visível para acompanhar deploy do blog

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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.

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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]

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Ä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.

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Neueste Artikel des Autors

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

2470

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

2617

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

2202

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...