私はブログを持っており、ページや投稿のページをクリックする必要がないように無限スクロールにしたいと考えています。Bloggerによると、HTML のコードを手伝ってくれる人はいますか? ありがとう :-)
5 に答える
Blogger ブログに無限スクロールを追加する方法
最近、興味深い記事を読みました。Blogger ブログに無限スクロールを追加する方法です。Blogger のブログを使用している場合は、指示に従ってブログを無制限にスクロールすることができます。
ウィジェットのコードはGoogle Codeで入手できます。コードを自由にコピーまたは変更してください。
彼らのウェブサイトから、言及する価値のあるいくつかのポイント:
- このコードはjQuery ライブラリを使用しているので、忘れずにインクルードしてください。
postContainerSelector
カスタム テンプレート ブログでは、コード内の変数の値を変更する必要がある場合があります。- +1 ボタンをブログに手動で追加しました。動的に読み込まれる投稿では、+1 ボタンが初期化されません。
gapi.plusone.go()
この問題を解決するには、新しい投稿がページに追加されるたびに電話する必要がありました。_WidgetManager
Blogger ブログに存在する JavaScript オブジェクトです。このオブジェクトをクエリして、いくつかのページ メタデータを見つけることができます。このコードは_WidgetManager
、現在のページが単一の投稿を表示しているかどうかを判断するために使用します。1 つの投稿のみを表示する必要がある場合、無限スクロールは意味がありません。
HTML ではこれを実現する方法がなく、JavaScript が必要です。
まず、スクロール イベントのイベント リスナーを設定します。起動すると、スクロールされた距離とドキュメントとウィンドウの高さを比較します。
それがドキュメントの近くにいることを示している場合は、XMLHttpRequest を使用してさらにコンテンツをダウンロードすると、通常の DOM がそのコンテンツをページに追加すると判断します。
HTMLは、自動的に無限スクロールを可能にするため、高さの絶対値を指定しません(たとえば、height = "100%"とは言えません。ブロガーのようなCMSブログの場合、投稿数を指定できるユーザー設定が必要です。または、データベースでサーバー側のテクノロジ(phpなど)を使用している場合は、レコードセットのページングを使用して表示するアイテムの数を指定できます。
これは、JQuery または JScript を介して実現できます。HTML だけではこれを行うことはできません。
これを取得する方法の例を次に示します。
JavaScript を使用してイベント リスナーを追加する必要があります。つまり、特定の要素がビュー ポートに来ると、イベントが発生し、外部リソースからデータがフェッチされます。データは JSON で提供され、それを抽出して DIV に情報を追加する必要があります。
このために、Jquery を使用して Google ドキュメントからデータを取得するスクリプトを作成しました。一番下の部分までスクロールすると、イベントが発生します。無限スクロールはこちらで確認できます