ブログのデプロイメントを監視するためにパイプラインを表示したままにする-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

ブログのデプロイメントを監視するためにパイプラインを表示したままにする

Linda Hamilton

Jan 14, 2025 pm 02:29 PM

Computaria に関して私が気になることの 1 つは、ブログ自体の展開を追跡できないことです。それで、これは気になるので修正してみませんか?

パイプライン

現在、デプロイが実行中かどうかを確認する方法は 2 つあります。

ジョブ/パイプラインページでリポジトリを開いて、実行中の最新のリポジトリを確認します
リポジトリを開いて README.md までスクロールします

私にとってはどちらの解決策も素晴らしいとは思えません。コンピューティング自体にもっと軽いものが欲しいです。

アイデア

Kauê と簡単に相談した後、私は彼のアドバイスに従って/about に投稿することにしました。

最初の実験では:

Deixando a pipeline visível para acompanhar deploy do blog

いや、醜くなってしまった。これをデフォルトで表示したくないことはすでにわかっています。しかし、情報をもたらすにはそれだけで十分です。醜いものを非表示にし、たとえ醜くても明示的に要求されれば利用できるようにするだけです。

概念実証: 指定しない限りクラッシュする

そうですね、まず最初にすべきことは、何か行動を起こすべきかどうかを知ることです。この目的のために、値が true のクエリパラメータ status の存在が API として定義されました。

URL を取得するには、window.location を使用しました。 Location オブジェクト内には検索フィールドがあり、特定の URL にアクセスするために使用されるクエリパラメータを維持するために正確に機能します。

たとえば、http://localhost:4000/blog/about?q=1 の場合、window.location.search の値は ?q=1 です。クエリパラメータ内のコンテンツの処理を容易にするために、URLSearchParams タイプのオブジェクトがあります。ドキュメントから理解できる限り、URLSearchParams をインスタンス化するには、クエリ文字列が必要ですが、? は必要ありません。プレフィックスの。これは window.location.search.substring(1).

で実現できます。

このオブジェクトを使用して、必要なクエリパラメータの値を簡単に参照できます。

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

ログイン後にコピー

これを手に入れた後、パイプラインバッジを表示するアクションを実行する必要があります。簡単にするために、これをインクルード可能な HTML スニペットとして置くことにしました: _includes/pipeline.html。したがって、自由に操作できる HTML を自由に使用できます。

最初は単なる

でした。非表示:

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

ログイン後にコピー

いいですね。何か役立つことをして画像を投稿しましょうか?要素を動的に作成するには、document.createElement を使用するだけです。次に、バッジの URL を入力します:

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

ログイン後にコピー

しかし、壊れた画像が表示されました...うーん、コンソールに表示されるメッセージは何ですか?

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

ログイン後にコピー

奇妙なことに、彼はかわいいリポジトリの URL を取得するべきだったのでしょうか?ああ、気づきました。彼はリキッドをまったく処理しませんでした。これに対処するために、空のフロントマターである css/main.scss の例に従うことにしました。

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

ログイン後にコピー

frontmatter は JavaScript ではないため、エラーメッセージが表示され、最初の const にエラーが表示されます。これは気になるので、これに対処するために私が考えた最も直接的な方法は、「無害なエラー」を事前に作成することでした。 ;を追加しました。前題の直後:

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

ログイン後にコピー

迷惑...

テストを続けると、ネットワークタブに 308 が常に表示されることに気づきました。しかし、なぜ表示されるのでしょうか?そうですね、Liquidを拡張するときにバッジの前に二重バーが表示されてしまうためです。

最初にこれを入手しました:

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

次へのリダイレクトあり:

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

キャッシュを使用しているかどうかを分析するうちに、これが気になり始めました。これを解決するには、二重スラッシュを削除する必要があります。結局のところ、{{site.repository.base}} 文字列が / で終わることを事前に知ることができたので、展開される Liquid 値の直後にスラッシュを置かないことで、この問題を取り除くことができました。ただし、念のため、/badges/master/pipeline.svg の前にスラッシュを入れても現実的には問題ありません。読者としての私自身の指標にもなります。

しかし、このバーが存在するかどうかについての事前知識に依存したくないので、これには 2 つの選択肢がありました。

液体膨張レベルを処理して終端スラッシュを削除します
この文字列の作成を JavaScript レベルで処理します

私にとっては JavaScript 側の方が簡単に思えました。 // を / に置き換えるだけですよね?うーん、いいえ。プロトコルは :// の前に表示されるため、この単純な置換を行うと、URL は https:/computaria.gitlab.io のように始まります。これを回避するために、次の置換を行います:

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

ログイン後にコピー

内訳:

置換の代わりに、「最初のグループ」で見つかったものとスラッシュを続けます
正規表現一致: : (グループ内)、スラッシュ、スラッシュ以外のもの

この変更により、https:// は ([^:])// と一致を持ちませんが、パス内に出現する他の // はすべて完全に一致します。 1 つの前にいる:。より厳密に言えば、クエリパラメータ/フラグメントで一致が発生しないようにすることもできますが、それはやりすぎのように思えました。

概念実証: キャッシュレス読み込み

OK、配置場所とロック機構の詳細を定義したら、リロード機構が必要です。最初の試み: 新しい画像要素を作成するだけです。しかし、それでもどうやって？理想は「しばらく経ってから」です。つまり、次の 2 つの選択肢が与えられます:

setTimeout
setInterval

それでは、これは何をするのでしょうか? setTimeout は、一定の時間間隔と指定された間隔の後に実行されるコマンドを受け取ります。これにより、clearTimeout を使用して削除できる ID が返されます。呼び出しを繰り返すには、最後に setTimeout を再度呼び出す必要があります。

setInterval はほぼ同じものですが、常に一定の時間間隔の後にコマンドを実行する点が異なります。戻り値は、clearInterval を呼び出して削除する ID である必要がありますが、ドキュメントによると、clearTimeout でも動作します (念のため、信頼せず、正しいセマンティクスを持つものを使用してください)。

setTimeout の使用

setTimeout を使用してループ呼び出しを作成しましょうか?テキストフィールドに「カボチャ」という単語を 5 回出力してみてはどうでしょうか?この実験用にテキストエリアを置きます:

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

ログイン後にコピー

わかりました。HTML でアクセスできるようにしたい関数が 3 つあります。そして、それらは（たとえ非常にわずかであっても）州を分割します。私は物事を隠すのが苦手なので、この状態を

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7465

CakePHP チュートリアル

1376

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScript文字列置換法とFAQの詳細な説明この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します：内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します最も直接的な方法は、置換（）メソッドを使用することです。 str = str.replace（ "find"、 "置換"）; この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace（/fi

独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか？ Mar 18, 2025 pm 03:12 PM

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか？ Mar 18, 2025 pm 03:14 PM

この記事では、ブラウザでJavaScriptのパフォーマンスを最適化するための戦略について説明し、実行時間の短縮、ページの負荷速度への影響を最小限に抑えることに焦点を当てています。

フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか？ Apr 04, 2025 pm 02:42 PM

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか？ Mar 18, 2025 pm 03:16 PM

この記事では、ブラウザ開発者ツールを使用した効果的なJavaScriptデバッグについて説明し、ブレークポイントの設定、コンソールの使用、パフォーマンスの分析に焦点を当てています。

jQueryのパフォーマンスを即座に増やす10の方法 Mar 11, 2025 am 12:15 AM

この記事では、スクリプトのパフォーマンスを大幅に向上させるための10の簡単な手順の概要を説明します。これらの手法は簡単で、すべてのスキルレベルに適用できます。更新の維持：NPMのようなパッケージマネージャーを使用して、Viteなどのバンドラーを使用して確認してください

後遺症とMySQLを使用したパスポートを使用します Mar 11, 2025 am 11:04 AM

Sequelizeは、約束ベースのnode.js ormです。 PostgreSQL、MySQL、MariadB、SQLite、およびMSSQLで使用できます。このチュートリアルでは、Webアプリのユーザー向けに認証を実装します。また、人気のある認証ミドルであるPassportを使用します

シンプルなjQueryスライダーを構築する方法 Mar 11, 2025 am 12:19 AM

この記事では、jQueryライブラリを使用してシンプルな画像カルーセルを作成するように導きます。 jQuery上に構築されたBXSLiderライブラリを使用し、カルーセルをセットアップするために多くの構成オプションを提供します。今日、絵のカルーセルはウェブサイトで必須の機能になっています - 1つの写真は千の言葉よりも優れています！画像カルーセルを使用することを決定した後、次の質問はそれを作成する方法です。まず、高品質の高解像度の写真を収集する必要があります。次に、HTMLとJavaScriptコードを使用して画像カルーセルを作成する必要があります。ウェブ上には、さまざまな方法でカルーセルを作成するのに役立つ多くのライブラリがあります。オープンソースBXSLiderライブラリを使用します。 BXSLiderライブラリはレスポンシブデザインをサポートしているため、このライブラリで構築されたカルーセルは任意のものに適合させることができます

See all articles

ブログのデプロイメントを監視するためにパイプラインを表示したままにする

パイプライン

アイデア

概念実証: 指定しない限りクラッシュする

迷惑...

概念実証: キャッシュレス読み込み

setTimeout の使用

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック