Computaria に関して私が気になることの 1 つは、ブログ自体の展開を追跡できないことです。それで、これは気になるので修正してみませんか?
現在、デプロイが実行中かどうかを確認する方法は 2 つあります。
私にとってはどちらの解決策も素晴らしいとは思えません。コンピューティング自体にもっと軽いものが欲しいです。
Kauê と簡単に相談した後、私は彼のアドバイスに従って/about に投稿することにしました。
最初の実験では:
いや、醜くなってしまった。これをデフォルトで表示したくないことはすでにわかっています。しかし、情報をもたらすにはそれだけで十分です。醜いものを非表示にし、たとえ醜くても明示的に要求されれば利用できるようにするだけです。
そうですね、まず最初にすべきことは、何か行動を起こすべきかどうかを知ることです。この目的のために、値が 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を拡張するときにバッジの前に二重バーが表示されてしまうためです。
最初にこれを入手しました:
次へのリダイレクトあり:
キャッシュを使用しているかどうかを分析するうちに、これが気になり始めました。これを解決するには、二重スラッシュを削除する必要があります。結局のところ、{{site.repository.base}} 文字列が / で終わることを事前に知ることができたので、展開される Liquid 値の直後にスラッシュを置かないことで、この問題を取り除くことができました。ただし、念のため、/badges/master/pipeline.svg の前にスラッシュを入れても現実的には問題ありません。読者としての私自身の指標にもなります。
しかし、このバーが存在するかどうかについての事前知識に依存したくないので、これには 2 つの選択肢がありました。
私にとっては 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 は、一定の時間間隔と指定された間隔の後に実行されるコマンドを受け取ります。これにより、clearTimeout を使用して削除できる ID が返されます。呼び出しを繰り返すには、最後に setTimeout を再度呼び出す必要があります。
setInterval はほぼ同じものですが、常に一定の時間間隔の後にコマンドを実行する点が異なります。戻り値は、clearInterval を呼び出して削除する ID である必要がありますが、ドキュメントによると、clearTimeout でも動作します (念のため、信頼せず、正しいセマンティクスを持つものを使用してください)。
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 つあります。そして、それらは（たとえ非常にわずかであっても）州を分割します。私は物事を隠すのが苦手なので、この状態を
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
