javascript

このブログ記事では、PaperModテーマを使用してHugoブログにAdBlocker検出機能を追加する方法を学びます。広告ブロッカーを有効にしたユーザーに対して、無効化するかサイトをホワイトリストに登録するように促す、簡単な警告メッセージを含めます。 概要 以下は、私たちが行う手順の概要です： 警告メッセージのスタイルを指定するためのカスタムCSSファイルを作成します。 広告ブロッカーを検出するためのJavaScriptファイルを作成します。 警告メッセージ用のpartial HTMLファイルを追加します。 headとfooterのpartialsを拡張して、新しいファイルを含めます。 ステップバイステップのガイド 1. カスタムCSSファイルの作成 assets/css/extended/ディレクトリにcustom_css.cssという新しいファイルを作成し、以下のCSSコードを貼り付けます： #adblock-warning { background-color: #f2dede; color: #a94442; border-color: #ebccd1; padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; } 2. 広告ブロッカーを検出するJavaScriptファイルの作成 static/js/ディレクトリにadblock-detection.jsという新しいファイルを作成し、以下のJavaScriptコードを貼り付けます： function detectAdBlocker() { const adBlockTest = document.createElement('div'); adBlockTest.innerHTML = ' '; adBlockTest.className = 'ad ads adbadge doubleclick BannerAd adsbox ad-placeholder ad-placement'; document.body.appendChild(adBlockTest); window.setTimeout(() => { if (adBlockTest.offsetHeight === 0) { document.getElementById('adblock-warning').style.display = 'block'; console.log('Ad-blocker detected.'); } else { console....

I. 概要 Node Version Manager（NVM）は、複数のNode.jsのバージョンを管理したり切り替えたりするのに便利なツールです。このブログ記事では、NVMの最もよく使われる機能、さまざまなプラットフォームへのインストール手順、そして開発者にとって貴重なツールである理由について説明します。 II. インストール macOS Homebrewを使う： brew install nvm mkdir ~/.nvm .bash_profile、.zshrcなどのシェル設定ファイルに以下の行を追加します： export NVM_DIR="$HOME/.nvm" [ -s "$(brew --prefix)/opt/nvm/nvm.sh" ] && . "$(brew --prefix)/opt/nvm/nvm.sh" # This loads nvm [ -s "$(brew --prefix)/opt/nvm/etc/bash_completion" ] && . "$(brew --prefix)/opt/nvm/etc/bash_completion" # This loads nvm bash_completion Linuxおよびその他のUnixベースのシステム curlを使う： curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash またはwgetを使用します： wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash このスクリプトは、NVMリポジトリを ~/.nvm にクローンし、シェルの設定ファイル (.bashrc, .zshrc など) に必要な行を追加してくれます。 III. 使用方法 1. 利用可能なNode.jsのバージョンをリストアップする 利用可能なNode.jsのバージョン一覧を見るには、次のように実行します： nvm ls-remote 2....