Text: 1. 基本(2)

マークアップの例と解説

1. 変数の例

<html>
  <head>
    <title>{Title}</title>
  </head>
  <body>
    ...
  </body>
</html>

{Title} 要素の一般的な使い方。ブログ名が表示される。

2. ブロックの例

<html>
  <body>
    <ol id="posts">
      {block:Posts}
        <li> ... </li>
      {/block:Posts}
    </ol>
  </body>
</html>

{block:Posts} は各記事を内包し、表示するブロック。1ページに表示される記事数（Cutomize - Advanced）だけ {block:Posts} の中に書かれたコードが繰り返し処理されて出力される。

3. 完全なマークアップの例

<html>
  <head>

    <title>{Title}</title>
    <link rel="shortcut icon" href="{Favicon}">
    <link rel="alternate" type="application/rss+xml" href="{RSS}">


    {block:Description}
      <meta name="description" content="{MetaDescription}" />
    {/block:Description}

  </head>
  <body>

    <h1>{Title}</h1>

    {block:Description}
      <p id="description">{Description}</p>
    {/block:Description}



    <ol id="posts">
      {block:Posts}
        {block:Text}
          <li class="post text">
            {block:Title}
              <h3><a href="{Permalink}">{Title}</a></h3>
            {/block:Title}

            {Body}
          </li>
        {/block:Text}

        {block:Photo}
          <li class="post photo">
            <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>

            {block:Caption}
              <div class="caption">{Caption}</div>
            {/block:Caption}
          </li>
        {/block:Photo}
        
        {block:Photoset}
          <li class="post photoset">
            {Photoset-500}

            {block:Caption}
              <div class="caption">{Caption}</div>
            {/block:Caption}
          </li>
        {/block:Photoset}

        {block:Quote}
          <li class="post quote">
            "{Quote}"

            {block:Source}
              <div class="source">{Source}</div>
            {/block:Source}
          </li>
        {/block:Quote}

        {block:Link}
          <li class="post link">
            <a href="{URL}" class="link" {Target}>{Name}</a>

            {block:Description}
              <div class="description">{Description}</div>
            {/block:Description}
          </li>
        {/block:Link}

        {block:Chat}
          <li class="post chat">
            {block:Title}
              <h3><a href="{Permalink}">{Title}</a></h3>
            {/block:Title}

            <ul class="chat">
              {block:Lines}
                <li class="{Alt} user_{UserNumber}">
                  {block:Label}
                    <span class="label">{Label}</span>
                  {/block:Label}

                  {Line}
                </li>
              {/block:Lines}
            </ul>
          </li>
        {/block:Chat}

        {block:Video}
          <li class="post video">
            {Video-500}

            {block:Caption}
              <div class="caption">{Caption}</div>
            {/block:Caption}
          </li>
        {/block:Video}

        {block:Audio}
          <li class="post audio">
            {AudioPlayerBlack}

            {block:Caption}
              <div class="caption">{Caption}</div>
            {/block:Caption}
          </li>
        {/block:Audio}
      {/block:Posts}
    </ol>



    <p id="footer">
      {block:PreviousPage}
        <a href="{PreviousPage}">« Previous</a>
      {/block:PreviousPage}

      {block:NextPage}
        <a href="{NextPage}">Next »</a>
      {/block:NextPage}

      <a href="/archive">Archive</a>
    </p>

  </body>
</html>

ブロックごとに解説する。

<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">

どのブロックにも属さない {Title} はブログのタイトルを生成する。また、{Favicon}、{RSS} はそれぞれファビコンと RSS の URL を生成する。

{block:Description}
  <meta name="description" content="{MetaDescription}" />
{/block:Description}

{block:Description} の中身は Customize - Info で Description を設定していると表示される。設定した Description は {Description} で出力できる。{MetaDescription} はそれを meta タグ用に処理したもの。
なので、この部分の意味は「Description が設定されてたらそれをブログの説明文として meta タグに渡す」ということになる。

<h1>{Title}</h1>

{block:Description}
  <p id="description">{Description}</p>
{/block:Description}

ブログのタイトルと説明が表示される。ブロックの中身は「Description が設定されてたらそれを p 要素に入れて表示する」ということ。

<ol id="posts">
  {block:Posts}
    ...
  {/block:Posts}
</ol>

{block:Posts} の中が一つの記事で、記事の種類によってその中のブロック（下の画像の水色の範囲）から一つだけが選ばれて処理される。

たとえばテキストの投稿であれば {block:Text} 以外のブロックは無視され、ol#posts の子として li.text が生成される。

なのでたとえば、「Chat posts なんて使わないよ」という人は {block:Chat} をまるっと削除しても何の問題もない。

{block:PreviousPage}
  <a href="{PreviousPage}">« Previous</a>
{/block:PreviousPage}

ここでは「前」のページの URL を生成する {PreviousPage} を使ってアンカータグを作っている。
{block:PreviousPage} は「前」のページが存在するとき内容を表示するブロック。したがってこの部分は一番古いページ以外で表示される。

posted at : | Permalink