著者のプロジェクト「English Without Fools」の5年以上にわたるサポートと開発で得たウェブマスターの経験の一部を共有する「Web Tricks」シリーズの続きで、今日はウェブサイトの訪問者にすばやく通知できる比較的簡単で効果的なソリューションについてお話します新たに公開された記事、ブログ投稿、コメント、フォーラム投稿などの新しいコンテンツ。
ご想像のとおり、このようなメカニズムを実装するには、さまざまなタイプのメッセージのスルーフィードのようなものが必要になります。特定のソリューションは、使用するエンジンの機能に大きく依存します。 ただし、エンジンが少ない血液で目的の結果を達成できない場合でも、アイデアを理解しようとするだけで、ここで説明されているインジケーターを現金受け取りストリームに固定することは難しくありません。
したがって、新しい資料を新しい順に表示する/ latest /など、ルートに関連するアドレスを持つページがあるとします。 プレゼンテーションを簡単にするために、すべてのエントリは同じタイプであり、簡単なアナウンスの形式で表示できると想定しています。これは、Habréとほぼ同じです。
そのようなページが存在すること自体がナビゲーションの品質を大幅に改善し、すべてのウェブサイトがそのようなチップを誇れるわけではないことを言わなければなりません。 しかし、私たちが精神的、一時的、および/または財政的資源に事前にエネルギーを与え、収益源を獲得したと仮定します。 そしてすぐにすべてが良くなりました！
現在、定期的な訪問者は新しいものを求めてすべてのセクションを登ることはできません（そして、それを見つけることができるという事実ではありません！）、しかし、「新しいメッセージ」ページに直行して、サイトに表示されたすべてのものをすばやく見ることができます最後の訪問以来。 また、管理およびサイトのモデレーターにとって、このようなテープの利便性は過大評価するのが難しいだけです！
ナビゲーションの深さからワンクリックでテープにアクセスできるようにするには、目立つ場所のどこかに配置して、サイトテンプレートに適切なリンクを提供すると便利です。 私たちは書きます：
<a href="/latest/" class="latest"> </a>
途中で、リンクには特定のクラス名（この場合は「最新」）が割り当てられ、CSSを使用してリンクの外観と動的な動作を簡単に変更できることがわかります。
これで、テープへのリンクができました。ワンクリックで新しい資料を入手できますが、ちょっと不便な点が1つあります。テープのアドレスに本当に何か新しいものがあるかどうかはわからず、私たちの好奇心を満たす方法は他にありません一度に提供されたリンクを突くために、一般的にはそうではありません。
しかし、あなたがそれについて考えたら？ ここに簡単な解決策はありますか？ 先を見て、私は言う：はい！ 解決策があり、古代のものと同じようにシンプルでエレガントです：90年代のウェブマスターは、その助けを借りて、洗練されたエンジンの言及がなかったときに新しい到着のインジケーターをメッセージボードに提供しました。
アイデアは、ブラウザのプロパティを使用して、訪問済みリンクと未訪問リンクを区別することです。 このチップを機能させるために必要なのは、新しい素材を追加してテープにつながるURLを変更することだけです。 これを実現する簡単な方法の1つは、HTTPの用語で変数シャンクまたはクエリをページの永続アドレスに割り当てることです。
<a href="/latest/ ?12345 " class="latest"> </a>
シャンクの値として、最後の投稿のID、タイムスタンプ、グローバルカウンタ変数を使用できます。重要ではありません。 この値が次のメッセージの到着で更新されることだけが重要です。 そして、訪問者は、次にサイトを訪れたときに、CSSでカバーする形式でお気に入りのリンクを見ることができます-たとえば、赤で強調表示します：
a.latest:link {
color: red;
}
a.latest:visited, a.latest:link:visited {
color: black;
}
ご存知のように、インジケーターを設計する能力は、想像力によってのみ制限されます。 フォント設定、色、背景画像、アニメーション画像などを使用することを妨げるものは何もありません。 主なことは、インジケーターがそのタスクを実行し、新しいメッセージの出現を通知することです。
個人的に、私は愚か者なしで私の英語の収入の流れのために次の点滅するボールを使用します：
しかし、もちろん、これらすべてを好みに合わせて調整できます。 この設計のコードは次のようになります。
a.latest:link {
background: transparent url('/img/blinker.gif') scroll no-repeat 0px 50%;
padding-left: 20px;
}
a.latest:visited, a.latest:link:visited {
background-image: none;
}
実際、それがすべてです。 経験豊富なウェブマスターがこの場所で顔をしかめ、幼稚園だと言います。 急いで判断してください。 記事の冒頭で直接述べたように、この方法は本当に古くてよく知られているという事実にもかかわらず、誰もがその存在を知っているわけではないので、特別な必要なくここですべてを個人的に言った場合、これは他の誰かがこれの恩恵を受けるでしょう。 そして、私は、世界中のインターネットのユーザーとして、将来、いずれかのサイトでこのレシピに従って作成されたインジケーターをいつか見ることができたらうれしいです。
便利に！