インストール
Escape ボタンをインストールして使用するには、2 つのオプションがあります。プロジェクトが Node.js 環境を処理するように設定されている場合は、任意のパッケージ マネージャー (npm または yarn) を介してインストールできます。 それ以外の場合は、Escape ボタンをレンダリングするページに CDN リンクを追加するだけです。
ステップ 1: HTML コンポーネントの追加
Escape ボタンは、ユーザーまたはブラウザーで JavaScript が有効になっていない場合と有効になっている場合の両方の状況に対応できるように構築されています。これを実現するには、ボタンをレンダリングする各ページにボタンの実際のマークアップを追加する必要があります。
<div class="ow-screen-padding">
<noscript>
<a href="https://www.amazon.com/?search=newest-deals-today/490239040234023942342i04203904">
<div class="ow-leave-page-fab animate ow-leave-fab">
<div class="ow-fab-icon"></div>
<h3>安全出口</h3>
</div>
</a>
</noscript>
<div class="ow-leave-page-fab animate script-enabled ow-leave-fab">
<div class="ow-fab-icon"></div>
<h3>Safety Exit</h3>
</div>
</div>
ステップ 2: スクリプトのインストール / 追加
オプション 1: パッケージを使用してパッケージをインストールしますマネージャー:
npm install escape-button-js --save
# または
yarn add escape-button-js
オプション 2: ボタンをレンダリングする各ページの <body> 要素の下部に CDN リンクを追加します (リンクが、前に追加したコンポーネント マークアップの下にあることを確認してください):
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.var.min.js"></script>
使用方法
// モジュールが必要ですconst { EscapeButton } = require('escape-button-js');
// エスケープ ボタンを有効にする
EscapeButton(Options);
オプション
JS コンストラクターには次のオプションがあります:
newTabUrlは、新しいタブで即座に開かれる URL を更新しますreplaceTabUrlは、現在のタブを置き換える URL を更新します
カスタム スタイル
次のクラスを作成することにより、独自のスタイルシートでエスケープ ボタンのスタイルをオーバーライドできます:
.ow-screen-padding {
}
.ow-leave-page-fab {
}
.ow-leave-page-fab:hover {
}
.ow-leave-page-fab h3 {
}
.ow-leave-page-fab .ow-fab-icon {
}
WordPress バージョン
コミュニティ向けに、Escape Button の WordPress プラグイン バージョンも作成しました。こちらでご確認ください!
