2014年1月24日金曜日

”data:post.dateHeader”を使って、Bloggerのすべての記事に投稿日付を入れる方法

2014年1月24日金曜日 , , ,
Bloggerで一日に複数の記事を投稿することがあります。
同一日付の場合、記事一覧を見ると一番先頭の記事にしか投稿日付が付きません。

これは<data:post.dateHeader/>の仕様で同一日付の場合、二投稿目から<data:post.dateHeader/>の値が空になるせいなんですが、困るので対処法をメモしておきます。

この対処法は、簡単なのでお勧めです。
やっていることは、Javascriptを使って日付を記憶しておき、<data:post.dateHeader/>の値が空の場合、記憶しておいた日付をdocument.writeで書き出すだけです。

修正前 (Simpleテンプレートより)
<b:if cond='data:post.dateHeader'>
  <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>

修正後
<b:if cond='data:post.dateHeader'>
  <script type='text/javascript' style='display:none;'>
    var dateHeader = &quot;<data:post.dateHeader/>&quot;;
  </script>
</b:if>

<h2 class='date-header'>
  <span>
    <b:if cond='data:post.dateHeader'>
      <data:post.dateHeader/>
    <b:else/>
      <script type='text/javascript' style='display:none;'>
      //<![CDATA[
        document.write(dateHeader);
      //]]>
      </script>
    </b:if>
  </span>
</h2>

一個目のscriptタグはCDATAセクションなどで囲わないで下さい。HTML的には間違っていますが、囲ってしまうとBloggerテンプレートの展開時にただの文字データとして扱われてしまい、<data:post.dateHeader/>が置き換わらなくなってしまうためです。

それとscriptタグのstyle属性をdisplay:noneしているのは、scriptタグ内の文字列がブラウザ上に表示されてしまう場合があるためです。特にheading要素の中にscriptタグが書かれている場合、
//<![CDATA[ DOCUMENT.WRITE(DATEHEADER); //]]> 2014年1月24日木曜日 
みたいに表示されてしまうのでその対処となります。
どうもこの問題、検索してみる限り、うちだけで発生しているようですけど、<![CDATA[ ~ //]]>で囲ってるせいなんですかねえ?
CDATAセクション関係ありませんでした…。
heading要素内にscriptタグがあるせいかな…。

0 件のコメント:

コメントを投稿