Computaria に関して私が気になることの 1 つは、ブログ自體の展開を追跡できないことです。それで、これは気になるので修正してみませんか?
パイプライン
現(xiàn)在、デプロイが実行中かどうかを確認(rèn)する方法は 2 つあります。
- ジョブ/パイプライン ページでリポジトリを開いて、実行中の最新のリポジトリを確認(rèn)します
- リポジトリを開いて README.md までスクロールします
私にとってはどちらの解決策も素晴らしいとは思えません。コンピューティング自體にもっと軽いものが欲しいです。
アイデア
Kauê と簡単に相談した後、私は彼のアドバイスに従って/about に投稿することにしました。
最初の実験では:
いや、醜くなってしまった。これをデフォルトで表示したくないことはすでにわかっています。しかし、情報をもたらすにはそれだけで十分です。醜いものを非表示にし、たとえ醜くても明示的に要求されれば利用できるようにするだけです。
概念実証: 指定しない限りクラッシュする
そうですね、まず最初にすべきことは、何か行動を起こすべきかどうかを知ることです。この目的のために、値が true のクエリ パラメータ status の存在が API として定義されました。
URL を取得するには、window.location を使用しました。 Location オブジェクト內(nèi)には検索フィールドがあり、特定の URL にアクセスするために使用されるクエリ パラメータを維持するために正確に機(jī)能します。
たとえば、http://localhost:4000/blog/about?q=1 の場合、window.location.search の値は ?q=1 です。クエリ パラメータ內(nèi)のコンテンツの処理を容易にするために、URLSearchParams タイプのオブジェクトがあります。ドキュメントから理解できる限り、URLSearchParams をインスタンス化するには、クエリ文字列が必要ですが、? は必要ありません。プレフィックスの。これは window.location.search.substring(1).
で実現(xiàn)できます。このオブジェクトを使用して、必要なクエリ パラメータの値を簡単に參照できます。
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")
}
これを手に入れた後、パイプライン バッジを表示するアクションを?qū)g行する必要があります。簡単にするために、これをインクルード可能な 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
キャッシュを使用しているかどうかを分析するうちに、これが気になり始めました。これを解決するには、二重スラッシュを削除する必要があります。結(jié)局のところ、{{site.repository.base}} 文字列が / で終わることを事前に知ることができたので、展開される Liquid 値の直後にスラッシュを置かないことで、この問題を取り除くことができました。ただし、念のため、/badges/master/pipeline.svg の前にスラッシュを入れても現(xiàn)実的には問題ありません。読者としての私自身の指標(biāo)にもなります。
しかし、このバーが存在するかどうかについての事前知識に依存したくないので、これには 2 つの選択肢がありました。
- 液體膨張レベルを処理して終端スラッシュを削除します
- この文字列の作成を JavaScript レベルで処理します
私にとっては JavaScript 側(cè)の方が簡単に思えました。 // を / に置き換えるだけですよね?うーん、いいえ。プロトコルは :// の前に表示されるため、この単純な置換を行うと、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()
}
內(nèi)訳:
- 置換の代わりに、「最初のグループ」で見つかったものとスラッシュを続けます
- 正規(guī)表現(xiàn)一致: : (グループ內(nèi))、スラッシュ、スラッシュ以外のもの
この変更により、https:// は ([^:])// と 一致 を持ちませんが、パス內(nèi)に出現(xiàn)する他の // はすべて完全に一致します。 1 つの前にいる:。より厳密に言えば、クエリ パラメータ/フラグメントで一致が発生しないようにすることもできますが、それはやりすぎのように思えました。
概念実証: キャッシュレス読み込み
OK、配置場所とロック機(jī)構(gòu)の詳細(xì)を定義したら、リロード機(jī)構(gòu)が必要です。最初の試み: 新しい畫像要素を作成するだけです。しかし、それでもどうやって？理想は「しばらく経ってから」です。つまり、次の 2 つの選択肢が與えられます:
- setTimeout
- setInterval
それでは、これは何をするのでしょうか? setTimeout は、一定の時間間隔と指定された間隔の後に実行されるコマンドを受け取ります。これにより、clearTimeout を使用して削除できる ID が返されます。呼び出しを繰り返すには、最後に setTimeout を再度呼び出す必要があります。
setInterval はほぼ同じものですが、常に一定の時間間隔の後にコマンドを?qū)g行する點が異なります。戻り値は、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 でアクセスできるようにしたい関數(shù)が 3 つあります。そして、それらは（たとえ非常にわずかであっても）州を分割します。私は物事を隠すのが苦手なので、この狀態(tài)を
ホットAIツール
Undress AI Tool
脫衣畫像を無料で
Undresser.AI Undress
リアルなヌード寫真を作成する AI 搭載アプリ
AI Clothes Remover
寫真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中國語版
中國語版、とても使いやすい
ゼンドスタジオ 13.0.1
強(qiáng)力な PHP 統(tǒng)合開発環(huán)境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
Garbage CollectionはJavaScriptでどのように機(jī)能しますか？
Jul 04, 2025 am 12:42 AM
JavaScriptのごみ収集メカニズムは、タグクリアリングアルゴリズムを介してメモリを自動的に管理して、メモリ漏れのリスクを減らします。エンジンはルートオブジェクトからアクティブオブジェクトを橫斷およびマークし、マークされていないオブジェクトはゴミとして扱われ、クリアされます。たとえば、オブジェクトが參照されなくなった場合（変數(shù)をnullに設(shè)定するなど）、次のリサイクルでリリースされます。メモリリークの一般的な原因には以下が含まれます。 closurures閉鎖の外部変數(shù)への參照。 globalグローバル変數(shù)は引き続き大量のデータを保持しています。 V8エンジンは、世代のリサイクル、増分マーキング、並列/同時リサイクルなどの戦略を通じてリサイクル効率を最適化し、メインスレッドのブロック時間を短縮します。開発中、不必要なグローバル?yún)⒄栅虮埭?、パフォーマンスと安定性を改善するためにオブジェクトの関連付けを迅速に裝飾する必要があります。
node.jsでHTTPリクエストを作成する方法は？
Jul 13, 2025 am 02:18 AM
node.jsでHTTPリクエストを開始するには、組み込みモジュール、axios、およびnode-fetchを使用する3つの一般的な方法があります。 1.依存関係のない內(nèi)蔵http/httpsモジュールを使用します。これは基本的なシナリオに適していますが、https.get（）を使用してデータを取得したり、.write（）を介してPOSTリクエストを送信するなど、データステッチとエラーモニタリングの手動処理が必要です。 2.Axiosは、約束に基づいたサードパーティライブラリです。簡潔な構(gòu)文と強(qiáng)力な機(jī)能を備えており、非同期/待ち聲、自動JSON変換、インターセプターなどをサポートします。非同期リクエスト操作を簡素化することをお勧めします。 3.Node-Fetchは、約束と単純な構(gòu)文に基づいて、ブラウザフェッチに似たスタイルを提供します
JavaScriptデータ型：プリミティブ対參照
Jul 13, 2025 am 02:43 AM
JavaScriptデータ型は、プリミティブタイプと參照タイプに分割されます。プリミティブタイプには、文字列、數(shù)字、ブール、ヌル、未定義、シンボルが含まれます。値は不変であり、コピーは値を割り當(dāng)てるときにコピーされるため、互いに影響を與えません。オブジェクト、配列、関數(shù)などの參照タイプはメモリアドレスを保存し、同じオブジェクトを指す変數(shù)は互いに影響します。 TypeofとInstanceOFを使用してタイプを決定できますが、TypeOfNullの歴史的な問題に注意してください。これらの2種類の違いを理解することは、より安定した信頼性の高いコードを書くのに役立ちます。
JavaScript Timeオブジェクト、誰かがEACTEXE、Google Chromeなどのより高速なWebサイトを構(gòu)築します。
Jul 08, 2025 pm 02:27 PM
こんにちは、JavaScript開発者！今週のJavaScriptニュースへようこそ！今週は、DenoとのOracleの商標(biāo)紛爭、新しいJavaScript Timeオブジェクトがブラウザ、Google Chromeアップデート、およびいくつかの強(qiáng)力な開発ツールによってサポートされています。始めましょう！ 「JavaScript」の商標(biāo)を登録しようとするDeno Oracleの試みとのOracleの商標(biāo)紛爭は、論爭を引き起こしました。 Node.jsとDenoの作成者であるRyan Dahlは、商標(biāo)をキャンセルするために請願書を提出しました。
React vs Angular vs Vue：どのJSフレームワークが最適ですか？
Jul 05, 2025 am 02:24 AM
どのJavaScriptフレームワークが最良の選択ですか？答えは、あなたのニーズに応じて最も適切なものを選択することです。 1.反応は柔軟で無料で、高いカスタマイズとチームアーキテクチャ機(jī)能を必要とする中規(guī)模および大規(guī)模プロジェクトに適しています。 2。Angularは、エンタープライズレベルのアプリケーションと長期的なメンテナンスに適した完全なソリューションを提供します。 3. Vueは使いやすく、中小規(guī)模のプロジェクトや迅速な発展に適しています。さらに、既存のテクノロジースタック、チームサイズ、プロジェクトのライフサイクル、およびSSRが必要かどうかは、フレームワークを選択する上で重要な要素でもあります。要するに、絶対に最良のフレームワークはありません。最良の選択は、あなたのニーズに合ったものです。
JavaScriptですぐに呼び出された関數(shù)式（IIFE）を理解します
Jul 04, 2025 am 02:42 AM
iife（即時インドボークフニックエクスペッション）は、定義の直後に実行される関數(shù)式であり、変數(shù)を分離し、グローバルな範(fàn)囲の汚染を避けるために使用されます。括弧內(nèi)に関數(shù)を包むことによって呼び出され、式と括弧のペアがすぐにそれに続く、（function（）{/code/}）（）;そのコアの使用には、次のものが含まれます。1。さまざまな競合を回避し、複數(shù)のスクリプト間の命名の重複を防ぎます。 2。プライベートスコープを作成して、內(nèi)部変數(shù)を見えないようにします。 3。変數(shù)が多すぎずに初期化を容易にするモジュラーコード。一般的なライティング方法には、ES6矢印関數(shù)のパラメーターとバージョンで渡されたバージョンが含まれますが、式とタイを使用する必要があることに注意してください。
ハンドリングの約束：javascriptのチェーン、エラー処理、および約束の組み合わせ
Jul 08, 2025 am 02:40 AM
約束は、JavaScriptで非同期操作を処理するためのコアメカニズムです。チェーンコール、エラー処理、コンビナーの理解は、アプリケーションをマスターするための鍵です。 1.チェーンコールは、.then（）を通じて新しい約束を返し、非同期プロセスの連結(jié)を?qū)g現(xiàn)します。それぞれ.then（）は以前の結(jié)果を受け取り、値または約束を返すことができます。 2。エラー処理は、.catch（）を使用して例外をキャッチしてサイレント障害を回避し、キャッチのデフォルト値を返すためにプロセスを継続する必要があります。 3。promise.all（）などの組み合わせ（すべての成功後にのみ成功しました）、promise.race（）（最初の完了が返されます）、promise.allsettled（）（すべての完了を待っています）
キャッシュAPIとは何ですか？また、サービスワーカーでどのように使用されますか？
Jul 08, 2025 am 02:43 AM
Cacheapiは、ブラウザからネットワークリクエストをキャッシュするツールです。これは、ウェブサイトのパフォーマンスとオフラインエクスペリエンスを改善するために、サービスワーカーと併用することがよくあります。 1.開発者は、スクリプト、スタイルシート、寫真などのリソースを手動で保存できるようにします。 2。要求に応じてキャッシュ応答と一致させることができます。 3.特定のキャッシュの削除またはキャッシュ全體のクリアをサポートします。 4.フェッチイベントを聞いているサービスワーカーを介して、キャッシュの優(yōu)先順位またはネットワークの優(yōu)先戦略を?qū)g裝できます。 5.オフラインサポート、繰り返しのアクセス速度の高速化、主要なリソースのプリロード、バックグラウンドアップデートコンテンツによく使用されます。 6.それを使用する場合、キャッシュバージョンの制御、ストレージ制限、およびHTTPキャッシングメカニズムとの違いに注意する必要があります。
