JS を使って 1 分で github+Jekyll ブログに訪問カウント機能を追加する実装

JS を使って 1 分で github+Jekyll ブログに訪問カウント機能を追加する実装

1分でgithub+Jekyllブログにトラフィック機能を追加する

序文

github+Jekll を使って個人ブログを構築できることを知らない友達もいるかもしれませんね。 ? ?
csdn ブログが十分にハイエンドではない、またはプライバシーが不十分で、感情を表現できないと感じる場合は、github ブログを設定することができます。これには 1 時間しかかかりません。詳細については、ビッグガイのブログ投稿を参照してください。

1 時間で github ブログを構築: https://www.jb51.net/article/138946.htm

私の個人ブログのリンクも添付しています:https://dongguanting.github.io/。

私が構築したものが優れていると思われる場合は、フレームワークとして私のブログをフォークしていただいて構いません。
私のこの記事は実はgithub+jekllフレームワークをベースにしており、ページビュー統計機能が追加されています。これは大ボスのブログをさらに最適化したものに相当します。これにより、誰もが自分の閲覧数がわかり、達成感を高めることもできます。

1. ジェクルとは何か

1. Jekllはソフトウェアの紹介です

Jekyll は、WordPress に似たシンプルな無料のブログ生成ツールです。しかし、Jekyll は静的 Web ページを生成するためのツールにすぎず、データベースのサポートを必要としないため、WordPress とは大きく異なります。ただし、discuz などのサードパーティのサービスと連携することは可能です。最も重要なことは、Jekyll は Github に無料でデプロイでき、独自のドメイン名にバインドできることです。

Jekll の簡単なインストール手順:

gem jekyll をインストール
jekyll 新しい my-awesome-site
cd 私の素晴らしいサイト
ジキルサーブ
# => http://localhost:4000 にアクセスします

Jekyll には選択できるテーマやインストールできるプラグインが多数あり、それらはすべて_config.ymlファイルに記述する必要があります。ただし、訪問統計に関連するプラグインはほとんどありません。別の大物によると、この機能はleancloud API を通じて実現できるとのことですが、登録が非常に面倒で、ログインできないこともあります。そこで、Busuanzi を使用して Jekyll ブログの訪問統計を増やすという非常に簡単な方法を見つけました。

2. ニンニクなし

1. 布算子の紹介:

「Bu Suan Zi」は、ブログへの総訪問数と訪問回数を簡単にカウントできるシンプルなウェブページ カウンターです。
「Bu Suan Zi」はBaidu StatisticsやGoogle Analyticsとは異なります。「Bu Suan Zi」では、Webページの訪問数を直接表示できます(または表示できません)。しばらくオンラインになっているWebサイトの場合、「Bu Suan Zi」では最初のデータを初期化できます。

2. 公式サイト入口

リンク: http://busuanzi.ibruce.info/.

3. 使用方法

まず、 index.htmlを開き、テキスト内の適切な場所に次のコードを追加します。

<span id="busuanzi_container_site_pv"> 
	このサイトへの総訪問回数は <span id="busuanzi_value_site_pv"></span> 回</span>

コードは 2 行、カウント完了です。 ! !
これをindex.htmlファイルの末尾に直接配置すると、効果は次のようになります。

ここに画像の説明を挿入

これは私のブログへの訪問数が 2 であることを示しています。とてもシンプルですね。
同時に、必要に応じてこのコードを post.html の適切な場所に追加して、ページ分割された訪問を実現することもできます。

4. パーソナライゼーション

さらに美しく、より完全なものにすることもできます。

このサイトへの総訪問回数 <span id="busuanzi_value_site_pv"></span> 回 このサイトへの訪問者数 <span id="busuanzi_value_site_uv"></span> 回 この記事の総閲覧回数 <span id="busuanzi_value_page_pv"></span> 回

またはカスタマイズします (私は以下のものを使用します):

合計 <span id="busuanzi_value_site_pv"></span> 回閲覧されました。
あなたはxxxの<span id="busuanzi_value_site_uv"></span>番目の友達です<span id="busuanzi_value_page_pv"></span>ヒット

効果は以下のとおりです。

ここに画像の説明を挿入

要約する

素晴らしいですね!役に立ったら、いいねやブックマークをお願いします!
私の個人ブログへようこそ: https://dongguanting.github.io/。

JS を使用して 1 分で github+Jekyll のブログにトラフィックを追加する方法についての記事はこれで終わりです。github+Jekyll のブログにトラフィックを追加する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript で実装されたウェブサイト訪問統計コード
  • JavaScript によるウェブサイト訪問の正確な統計のサンプルコード
  • ウェブサイト訪問数を正確にカウントするための JS サンプルコード

<<:  ffmpeg 中国語パラメータの詳細な説明

>>:  CentOS 7 で MySQL 接続数が 214 に制限される問題の解決方法

推薦する

HttpsページでBaiduシェアを使用するためのソリューション

サイト全体で https アクセスを有効にしてから、共有コードが利用できなくなり、有効になっていた小...

JSはマップを使用してdouble配列を統合します

目次序文データのシミュレーション結合されたデータ合併のアイデアコードの表示と分析最初のステップステッ...

Nginx 設定場所のマッチング優先順位の簡単な分析

序文Nginx 構成のサーバー ブロック内の場所は、リクエスト URI を一致させるために使用され、...

Vueのコンポーネント値の転送から始まるオブザーバーモードの詳細な説明

目次オブザーバーパターンVue パス値最初のステップは、main.jsにバスを登録することです。 2...

Nginx 7層負荷分散のいくつかのスケジューリングアルゴリズムの簡単な理解

この記事は主に、Nginx 7 層負荷分散のいくつかのスケジューリング アルゴリズムを紹介します。こ...

Videojs+swiper が Taobao の商品詳細カルーセルを実現

この記事では、Taobao商品詳細のカルーセルを実現するためのvideojs+swiperの具体的な...

Docker での Redis のマスタースレーブ構成チュートリアルの詳細説明

1. Redisイメージを取得するdocker pull redis 2. それぞれポート6379、...

CSSは5つの一般的な2D変換を実装します

CSS の 2D 変換を使用すると、移動、回転、拡大縮小、変形などの基本的な変換操作を 2 次元空間...

1 つの記事で Vuex を理解する

目次概要Vuex の 4 つの主要オブジェクト状態の使用突然変異の使用ゲッターの使用アクションの使用...

一定期間の日ごと、時間ごとの統計データを取得するMySQLの詳しい説明

毎日の統計情報を取得するプロジェクトを実行する際、プロジェクト ログを分析する必要があります。要件の...

入力テキスト ボックスと画像検証コードの位置合わせの問題 (画像は常に入力より 1 つ上になります)

Web ページ制作では、input と img が同じ行に配置されることが多く、img タグが常に ...

Linux に MySQL 8.0.x をインストールするための完全な手順

マイグレーションMySQL 入門MySQL はもともとオープンソースのリレーショナル データベース管...

Nginx ロケーション設定(ロケーションのマッチング順序)の詳細な説明

ロケーションは「位置指定」を意味し、主にさまざまな位置指定のための URI に基づいています。これは...

CSSは、他のレイヤーを変更せずに、多層ネスト構造の最外層を回転させる効果を実現します。

次のようなシナリオがあります。円形のコンテナで、最も外側のコンテナの背景が円弧になっています。内側の...