「関連する投稿」の調査

今日、同じ記事のブロックが、記事の直後、コメントの前にサイトに現れました。 その形式は、ZenCommentのユーザースタイルで表示したときの定型化された "combiness"によって区別されます。 追加の興味深い事実がすぐに明らかになりました。実際、それらには4つではなく12のリンクが含まれ、残りの8つは単に隠されています。 さらに、このブロックは右側のパネルから移動しただけで、少し楽しかったことがわかりました。



標準レイアウトでこのブロックが比較的正常に見え、記事とコメントの間に待望のセパレーターを提供する場合でも（それでもあまり目立たない）、コンパクト性を重視するZenCommentスタイルでは、外見が一般的なスタイルに違反します。 解決策？ 仕事に取り掛かり、プレゼンテーションスタイルを修正すると同時に、非表示の同様の投稿を一時的に開きます。



しかし、ZenCommentスタイルがなくても、この記事には、サイトに4つではなく、同様の記事への12のリンクすべてを表示するものがあります。

ランダムな人気フッター記事

ZenCommentスタイルは、以前は「高貴」でした（まともで見栄えがよく、スペースをとらないように）ランダムな人気記事の3つの要素（フッターの上）が表示されるため、これらの「類似」も同様のスタイルで設計されました。 しかし、追加要素があります-日付; 長い記事のタイトルは、注目を浴びていないため、以下の同じ名前よりも重要です。

関連記事のサンプルページと表示オプション

ソースとして「類似の記事」 を表示する例を見てみましょう。





そのような変換を行います：

1）現在または8か月未満が経過した場合、日付の年が削除されます（ユーザースクリプトを使用して作業している場合）。

2）すべてが1行、日付、リンクで記述されている。

3）名前に割り当てられる行は3行までです。

4）スタイル-以下の人気のある記事のブロックに似ています。

5）12個すべてのリンクが開きます。



これまでのところ、ユーザースクリプトと最初の段落は含まれていません。 （スクリプトの場合、ソリューションはさらに単純です-ブロックを元の場所に戻すだけで、何も傷つくことはありません。）



この解決策は失敗します。マウスホバーで名前を開くと、ブロックの高さがジャンプし、スクリプトのみが役立ちます。 そのため、クリーンスタイルのわずかに異なるソリューションを探しています。 アイテム3を削除し、3行の名前を複数に拡張しません。 判明した：







記事の中でこれを見るのはかなり面倒ですが、高さはオリジナルよりも比較的低くなっています。 だから...なぜ私たちはいつも同様の記事の名前を見る必要があるのですか？



ブロック全体にカーソルを合わせると、リンクブロックから名前が1つだけ残っている方が良いことがわかりました。 そうすれば、お金を節約し、リンク展開の問題を解決する必要はありません。

ドロップダウンソリューション

最小化状態：







拡張：







同時に、下のブロックは移動せず、見出しに、サイトで計画されていたように（ただしプロンプトは表示されません）、「すべての類似記事」へのリンクがあります。 「プラス」は、ウィンドウの幅全体を使用できることです。 このソリューションは、スクリプトを元の場所に移動しなくても完全に満足されます。

標準サイトを提供するものは何ですか？

1.a）同様の投稿への12個すべてのリンクまたは非表示の8個のリンクを同様の方法で表示する提案があります。 下に点線の下線付きの擬似リンク「その他」を作成し、ホバー時に残りの8を表示します。



1.b）オプション-「類似の投稿」という見出しにカーソルを合わせると、絶対位置にある12個のリンクすべてが表示されます。



2）いずれの場合でも、リンクにカーソルを合わせると、リンク先のプロンプト（タイトル）が表示されます-habrahabr.ru/post/150944/#show_allのようなリンクの目的を明らかにします -もちろん、ほとんどの訪問者の信頼性が向上しますヒントは傷つきません。



PS HabrAjaxユーザースクリプトを使用せずにZenCommentユーザースタイルをインストールする場合、4つのブラウザーすべてで使用できますが、設定には少し一般的な編集が必要です。

/*    HabrAjax - * /.info a.username{color:#59d!important}/* */
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これを取得するには、最初のアスタリスクの後のスペースを削除します。

 /*    HabrAjax - */.info a.username{color:#59d!important}/* */
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これは、HabrAjaxスクリプトと組み合わせてスタイルを使用する方が便利であるという事実によるものであり、この行はそれに大きく干渉します。 同時に、それなしでは、HabrAjaxのないコメントの著者の名前は表現力に欠けます。



さらに、OperaとChromeの2つのブラウザーへのインストールには独自の特徴があります。 Operaでは、サイトのページ上のボタンではなく、手動でインストールする必要があります（これはページの指示に示されています）。 また、Chromeでは、コメントの評価の「矢印」を定性的に見るために、スタイルの一番下の数行のコメントを外す必要があります。 これは、スタイルの複雑さと汎用性に対する（わずかな）料金です。



UPD 09/12/2012：「類似の投稿」を更新しました。 これで次のようになります。