Красивое оформление комментариев в блоге

В этой статье я хотел бы рассказать о том, как оптимизировать пространство в ленте комментариев и сделать ее несколько красивее.

Не так давно я уже писал об использовании аватара-заглушки для комментаторов, у которых нет аватара. Сегодня мы пойдем дальше - куда более грамотно, нежели в исходном варианте, разместим элементы ленты комментариев и сопроводим каждый комментарий красивой рамочкой.

Для начала, как и в прошлой статье, я предлагаю вам ознакомиться с тем, о чем именно идет речь. Смотрим на картинку:

Как вы видите, в переработанной версии все служебные элементы скомпонованы наверху, образуя "шапку", а пространство, выделенное под "тело" комментария раздалось вширь за счет того, что теперь под аватар не резервируется вертикальный столбец примерно в 40 пикселей. Ну, и красивая рамочка вокруг каждого комментария, разумеется. Убедил, что так лучше? Тогда начинаем священнодействие :-)

Открываем редактор шаблона (Дизайн->Изменить HTML), ставим галочку напротив "Расширить шаблоны виджета" и под строкой "/* Comments" и вставляем следующий код:

/* Comments
----------------------------------------------- */
.avatar-image-container {
  background: url("https://lh4.googleusercontent.com/-89_0zLbxxSI/TmCsszik0xI/AAAAAAAAAPA/YGjARPZ5nNk/anonymous-avatar.gif") no-repeat;
  float: right !important;
  margin: 5px 10px 5px 5px !important;
  position: static !important;
  border: none !important;
}

#comments-block.avatar-comment-indent {
  margin-left: 0 !important;
}

#comments-block .avatar-image-container.avatar-stock img {
  padding: 23px 25px 0 0;
  width: 12px;
  height: 12px;
}

.comment-header {
  border: 1px solid #c3def4;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  margin: 5px 0;
  padding: 5px 0 5px 10px;
  position: relative;
}

.comments {
  line-height: 130%;
}

Строки, которые, возможно, вам стоит адаптировать под себя, это 4 (картинка аватара-заглушки), 22 (цвет рамки) и 23-25 (радиус скругления углов рамки). Остальное лучше не трогать.

Теперь, когда пол дела сделано, ищем следующий код:

<div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>
  <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
    <b:loop values='data:post.comments' var='comment'>
      <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
        <b:if cond='data:comment.favicon'>
          <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
        </b:if>
        <a expr:name='data:comment.anchorName'/>
        <b:if cond='data:blog.enabledCommentProfileImages'>
          <data:comment.authorAvatarImage/>
        </b:if>
        <b:if cond='data:comment.authorUrl'>
          <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
        <b:else/>
          <data:comment.author/>
        </b:if>
        <data:commentPostedByMsg/>
      </dt>
      <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
        <b:if cond='data:comment.isDeleted'>
          <span class='deleted-comment'><data:comment.body/></span>
        <b:else/>
          <p>
            <data:comment.body/>
          </p>
        </b:if>
      </dd>
      <dd class='comment-footer'>
        <span class='comment-timestamp'>
          <a expr:href='data:comment.url' title='comment permalink'>
            <data:comment.timestamp/>
          </a>
          <b:include data='comment' name='commentDeleteIcon'/>
        </span>
      </dd>
    </b:loop>
  </dl>
</div>

...и заменяем его этим:

<div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>
  <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
    <b:loop values='data:post.comments' var='comment'>
      <div class='comment-header'><dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
        <b:if cond='data:comment.favicon'>
          <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
        </b:if>
        <a expr:name='data:comment.anchorName'/>
        <b:if cond='data:blog.enabledCommentProfileImages'>
          <data:comment.authorAvatarImage/>
        </b:if>
        <b:if cond='data:comment.authorUrl'>
          <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
        <b:else/>
          <data:comment.author/>
        </b:if>
        <data:commentPostedByMsg/>
      </dt>
      <dd class='comment-footer'>
        <span class='comment-timestamp'>
          <a expr:href='data:comment.url' title='comment permalink'>
            <data:comment.timestamp/>
          </a>
          <b:include data='comment' name='commentDeleteIcon'/>
        </span>
      </dd>
      <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
        <b:if cond='data:comment.isDeleted'>
          <span class='deleted-comment'><data:comment.body/></span>
        <b:else/>
          <p>
            <data:comment.body/>
          </p>
        </b:if>
      </dd></div>
    </b:loop>
  </dl>
</div>

Вот, собственно, и все. Хочу только уточнить, что скругление уголков рамочки, которое вы видите на картинке, в IE будет только в последней, девятой версии, да и то, после проведения небольшой доработки. В младших версиях этого браузера этого не будет вовсе. Подобного можно добиться, но я специально не стал этого делать. При большом количестве комментариев, страница в IE8- из-за этого будет сильно тормозить. Не думаю, что ради чуть большей красивости стоит жертвовать скоростью загрузки страницы.