clover in pocketのトップページに、Newアイコンをつけた犯人ですこんにちは。
このPocketのトップページは、8人のインクローバーブロガーの8個の各ブログの最新記事リストの集結です。ブログのトップページではありません。
なので、外部htmlから読み込む記事リストにNewマークを表示させる方法をとりました。
要は、「小粋空間｜新着表示プラグイン（最新記事リスト版） for Serene Bach」さんのアレンジです。
■Serene Bachの外部htmlに読み込む場合のソースは
<script language="javascript" type="text/javascript" src="/log/entry.js" charset="EUC-JP"></script>
です。
（個別記事に吐き出されてる最新記事リストのjsファイルを呼び出してるわけです）
【必須条件】
- ログの保存方法は「個別記事ごとにhtml生成」
- lib/sb/content.pmの中のエントリーリスト生成部分を書き換えるので、entry.jsで吐き出されているリスト以外に、blog内のentrylistブロックエリア内の記事リストにも、同じマークがつきます。そこはご了解の上お願いします。
■FoldCategoryWithTime
このプラグインと同じ仕様なので、導入しておいてください。
小粋空間さんでプラグイン導入手順を実践すれば、必要なファイルも一緒にDLできます。
環境設定＞プラグイン＞利用に。
・新着表示プラグイン（投稿者情報版） for Serene Bach
・新着表示プラグイン（最新記事リスト版） for Serene Bach
・新着表示プラグイン（サブカテゴリーリスト版） for Serene Bach
も、元は新着表示プラグイン（サブカテゴリーリスト版） for Serene Bachなので、このブラグインを導入されたことのある方は、すんなり方法の予想がつくと思います。
■lib/sb/content.pm
478行目に
my $time = $list->date;そ挿入。
479行目になる
push(@linklist,qq|<li><a href="$url">$subj</a>$date</li>|);↓
push(@linklist,qq|<li><a href="$url">$subj</a>$date <span class="new">$time</span></li>|);
赤文字部分を挿入。
■ベース/個別テンプレート
header〜/headerに
<!-- BEGIN fold_category -->
{fold_category_script}
<!-- END fold_category -->
記事リストを表示したい部分に
<script language="javascript" type="text/javascript" src="http://xxxxxxxx/log/entry.js" charset="EUC-JP"></script>
new.jsこれを、記事リストの出てくる場所よりも下に
<script type="text/javascript" src="http://xxxxxxxx/new.js"></script>貼り付けてください。
中身は
//<![CDATA[
// passage time
var pass = 24;// display content
var content = 'up';var currentDate = new Date();
var spans = document.getElementsByTagName('span');
for (i = 0; i < spans.length; i++) {
if(spans[i].getAttribute('class') == 'new' ||
spans[i].getAttribute('className') == 'new') {
var now = (spans[i].innerHTML - (Math.ceil(currentDate.getTime()/1000))) /(60*60);
now = Math.ceil(now);
if(-now <= pass){
spans[i].innerHTML = content;
spans[i].style.display = 'inline';
}
}
}
//]]>
必要なところは、書き換えて使ってください。
var pass = 24;新着の何時間前までマーク出すかを指定します。
var content = '<img src="new.gif" />';画像なんかもアリです。
■スタイルシート
span.new {
display: none;
color: #EEAB14;
font-weight: bold;
}
■menufolder.js←を保存してsbのある直下にアップロード。
■最後に、再構築をすれば、出来上がりです。
（インデックスだけ再構築でも、記事リストのjsファイルは再構築されるので、OK。）