This site uses cookies for analytics, personalized content and ads. By continuing to browse this site, you agree to this use.
Author Image Saturday, 23 June 2018

[Phần 3] Cập nhật Blog1 lên version 2: Tạo và cập nhật comment form


Khung bình luận blogger hầu như để code mặc định, ít người động chạm đến nó. Trong phần 3 này tôi sẽ hướng dẫn bạn cách tạo và cập nhật comment form, mở rộng thêm đó là cập nhật skin mới cho nó

Trong tiện ích Blog1 v2, comment form cũng được tách ra làm rất nhiều thẻ b:includable nhỏ, ta sẽ tác động đến các thẻ sau

<b:includable id='addComments' />
<b:includable id='commentAuthorAvatar' />
<b:includable id='commentDeleteIcon' var='comment' />
<b:includable id='commentForm' var='post' />
<b:includable id='commentFormIframeSrc' var='post' />
<b:includable id='commentItem' var='comment' />
<b:includable id='commentList' var='comments' />
<b:includable id='commentPicker' var='post' />
<b:includable id='comments' var='post' />
<b:includable id='commentsLink' />
<b:includable id='commentsTitle' />
<b:includable id='iframeComments' var='post' />
<b:includable id='threadedCommentForm' var='post' />
<b:includable id='threadedCommentJs' var='post' />
<b:includable id='threadedComments' var='post' />

Lần lượt từng thẻ 1 code sẽ như sau

1. <b:includable id='addComments'>

<b:includable id='addComments'>
    <a expr:href='data:post.commentsUrl' expr:onclick='data:post.commentsUrlOnclick'>
    <b:message name='messages.postAComment'/>
  </a>
</b:includable>

2. <b:includable id='commentAuthorAvatar'>

<b:includable id='commentAuthorAvatar'>
    <div class='avatar-image-container'>
        <img class='author-avatar' expr:src='data:comment.authorAvatarSrc' height='35' width='35' />
    </div>
</b:includable>

3. <b:includable id='commentDeleteIcon' var='comment'>

<b:includable id='commentDeleteIcon' var='comment'>
    <span expr:class='&quot;item-control &quot; + data:comment.adminClass'>
    <b:if cond='data:showCmtPopup'>
      <div class='goog-toggle-button'>
        <div class='goog-inline-block comment-action-icon'/>
      </div>
    <b:else/>
      <a class='comment-delete' expr:href='data:comment.deleteUrl' expr:title='data:messages.deleteComment'>
        <img src='https://resources.blogblog.com/img/icon_delete13.gif'/>
      </a>
    </b:if>
  </span>
</b:includable>

4. <b:includable id='commentForm' var='post'>

<b:includable id='commentForm' var='post'>
    <div class='comment-form'>
        <a name='comment-form' />
        <h4 id='comment-post-message'><data:messages.postAComment/></h4>
        <b:if cond='data:this.messages.blogComment != &quot;&quot;'>
            <p><data:this.messages.blogComment/></p>
        </b:if>
        <b:include data='post' name='commentFormIframeSrc' />
        <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight ?: &quot;90px&quot;' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%' />
        <data:post.cmtfpIframe/>
        <script type='text/javascript'>
            BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;);
        </script>
    </div>
</b:includable>

5. <b:includable id='commentFormIframeSrc' var='post'>

<b:includable id='commentFormIframeSrc' var='post'>
    <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src' />
</b:includable>

6. <b:includable id='commentItem' var='comment'>

<b:includable id='commentItem' var='comment'>
    <div class='comment' expr:id='&quot;c&quot; + data:comment.id'>
        <b:include cond='data:blog.enabledCommentProfileImages' name='commentAuthorAvatar' />

        <div class='comment-block'>
            <div class='comment-author'>
                <b:if cond='data:comment.authorUrl'>
                    <b:message name='messages.authorSaidWithLink'>
                        <b:param expr:value='data:comment.author' name='authorName' />
                        <b:param expr:value='data:comment.authorUrl' name='authorUrl' />
                    </b:message>
                    <b:else/>
                    <b:message name='messages.authorSaid'>
                        <b:param expr:value='data:comment.author' name='authorName' />
                    </b:message>
                </b:if>
            </div>
            <div expr:class='&quot;comment-body&quot; + (data:comment.isDeleted ? &quot; deleted&quot; : &quot;&quot;)'>
                <data:comment.body/>
            </div>
            <div 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>
            </div>
        </div>
    </div>
</b:includable>

7. <b:includable id='commentList' var='comments'>

<b:includable id='commentList' var='comments'>
  <div id='comments-block'>
    <b:loop values='data:comments' var='comment'>
      <b:include data='comment' name='commentItem'/>
    </b:loop>
  </div>
</b:includable>

8. <b:includable id='commentPicker' var='post'>

<b:includable id='commentPicker' var='post'>
    <b:if cond='data:post.commentSource == 1'>
        <b:include data='post' name='iframeComments' />
        <b:elseif cond='data:post.showThreadedComments' />
        <b:include data='post' name='threadedComments' />
        <b:else/>
        <b:include data='post' name='comments' />
    </b:if>
</b:includable>

9. <b:includable id='comments' var='post'>

<b:includable id='comments' var='post'>
  <section expr:class='&quot;comments&quot; + (data:post.embedCommentForm ? &quot; embed&quot; : &quot;&quot;)' expr:data-num-comments='data:post.numberOfComments' id='comments'>
    <a name='comments'/>
    <b:if cond='data:post.allowComments'>

      <b:include name='commentsTitle'/>

      <div expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>
        <b:include cond='data:post.comments' data='post.comments' name='commentList'/>
      </div>

      <b:if cond='data:post.commentPagingRequired'>
        <div class='paging-control-container'>
          <b:if cond='data:post.hasOlderLinks'>
            <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
              <data:messages.oldest/>
            </a>
            <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
              <data:messages.older/>
            </a>
          </b:if>

          <span class='comment-range-text'>
            <data:post.commentRangeText/>
          </span>

          <b:if cond='data:post.hasNewerLinks'>
            <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
              <data:messages.newer/>
            </a>
            <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
              <data:messages.newest/>
            </a>
          </b:if>
        </div>
      </b:if>

      <div class='footer'>
        <b:if cond='data:post.embedCommentForm'>
          <b:if cond='data:post.allowNewComments'>
            <b:include data='post' name='commentForm'/>
          <b:else/>
            <data:post.noNewCommentsText/>
          </b:if>
        <b:else/>
          <b:if cond='data:post.allowComments'>
            <b:include data='post' name='addComments'/>
          </b:if>
        </b:if>
      </div>
    </b:if>
    <b:if cond='data:showCmtPopup'>
      <div id='comment-popup'>
        <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'/>
      </div>
    </b:if>
  </section>
</b:includable>

10. <b:includable id='commentsLink'>

<b:includable id='commentsLink'>
    <a class='comment-link' expr:href='data:post.commentsUrl' expr:onclick='data:post.commentsUrlOnclick'>
    <b:if cond='data:post.numberOfComments gt 0'>
      <b:message name='messages.numberOfComments'>
        <b:param expr:value='data:post.numberOfComments' name='numComments'/>
      </b:message>
    <b:else/>
      <data:messages.postAComment/>
    </b:if>
  </a>
</b:includable>

11. <b:includable id='commentsTitle'>

<b:includable id='commentsTitle'>
    <h3 class='title'><data:messages.comments/></h3>
</b:includable>

12. <b:includable id='iframeComments' var='post'>

<b:includable id='iframeComments' var='post'>
    <b:if cond='data:post.allowIframeComments'>
        <script expr:src='data:post.iframeCommentSrc' type='text/javascript' />
        <div class='cmt_iframe_holder' expr:data-href='data:post.url.canonical' expr:data-viewtype='data:post.viewType' />
        <b:include cond='!data:post.embedCommentForm' data='post' name='commentsLink' />
    </b:if>
</b:includable>

13. <b:includable id='threadedCommentForm' var='post'>

<b:includable id='threadedCommentForm' var='post'>
    <div class='comment-form'>
        <a name='comment-form' />
        <h4 id='comment-post-message'><data:messages.postAComment/></h4>
        <b:if cond='data:this.messages.blogComment != &quot;&quot;'>
            <p><data:this.messages.blogComment/></p>
        </b:if>
        <b:include data='post' name='commentFormIframeSrc' />
        <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight ?: &quot;90px&quot;' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%' />
        <data:post.cmtfpIframe/>
        <script type='text/javascript'>
            BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;);
        </script>
    </div>
</b:includable>

14. <b:includable id='threadedCommentJs' var='post'>

<b:includable id='threadedCommentJs' var='post'>
    <script async='async' expr:src='data:post.commentSrc' type='text/javascript' />
    <b:template-script inline='true' name='threaded_comments' />
    <script type='text/javascript'>
        blogger.widgets.blog.initThreadedComments(
            <data:post.commentJso/>,
            <data:post.commentMsgs/>,
            <data:post.commentConfig/>);
    </script>
</b:includable>

15. <b:includable id='threadedComments' var='post'>

<b:includable id='threadedComments' var='post'>
    <section class='comments threaded' expr:data-embed='data:post.embedCommentForm' expr:data-num-comments='data:post.numberOfComments' id='comments'>
        <a name='comments' />

        <b:include name='commentsTitle' />

        <div class='comments-content'>
            <b:include cond='data:post.embedCommentForm' data='post' name='threadedCommentJs' />
            <div id='comment-holder'>
                <data:post.commentHtml/>
            </div>
        </div>

        <p class='comment-footer'>
            <b:if cond='data:post.allowNewComments'>
                <b:include data='post' name='threadedCommentForm' />
                <b:else/>
                <data:post.noNewCommentsText/>
            </b:if>
        </p>

        <b:if cond='data:showCmtPopup'>
            <div id='comment-popup'>
                <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no' />
            </div>
        </b:if>
    </section>
</b:includable>

Sau khi định nghĩa tất cả thẻ xong ta gọi nó trong <b:includable id='postCommentsAndAd' var='post'>. Viết tiếp code

<b:include cond='data:view.isSingleItem' data='post' name='commentPicker'/>


Kiểm tra kết quả


** Nâng cấp lên skin mới

Skin mới của blogger comment form có thể bắt gặp ở các theme mặc định của blogger. Trong bài này tôi sẽ hướng dẫn bạn cập nhật lên skin của theme contempo

Thêm b:templateUrl='indie.xml' vào thẻ <html ...>


Chèn tiếp đoạn code sau vào <b:skin ...>

/*
<Variable name="robotoNormal15" description="Roboto Normal 15" type="font" default="15px Roboto, sans-serif" hideEditor="true" value="15px Roboto, sans-serif"/>
<Variable name="robotoNormal16" description="Roboto Normal 16" type="font" default="16px Roboto, sans-serif" hideEditor="true" value="16px Roboto, sans-serif"/>
<Variable name="robotoLightItalic15" description="Roboto Light Italic 15" type="font" default="italic 300 15px Roboto, sans-serif" hideEditor="true" value="italic 300 15px Roboto, sans-serif"/>
<Variable name="robotoBold22" description="Roboto Bold 22" type="font" default="bold 22px Roboto, sans-serif" hideEditor="true" value="bold 22px Roboto, sans-serif"/>
<Variable name="robotoBold30" description="Roboto Bold 30" type="font" default="bold 30px Roboto, sans-serif" hideEditor="true" value="bold 30px Roboto, sans-serif"/>
<Variable name="robotoBold45" description="Roboto Bold 45" type="font" default="bold 45px Roboto, sans-serif" hideEditor="true" value="bold 45px Roboto, sans-serif"/>

<Group description="Body">
  <Variable name="body.text.font" description="Font" type="font" default="$(robotoNormal15)" value="15px Roboto, sans-serif"/>
  <Variable name="body.text.color" description="Color" type="color" default="#757575" value="#757575"/>
  <Variable name="body.background.height" description="Background height" type="length" min="420px" max="640px" default="480px" value="480px"/>
  <Variable name="body.background" description="Background" color="$(body.background.color)" type="background" default="$(color) none repeat scroll top left" value="$(color) url(https://themes.googleusercontent.com/image?id=L1lcAxxz0CLgsDzixEprHJ2F38TyEjCyE3RSAjynQDks0lT1BDc1OxXKaTEdLc89HPvdB11X9FDw) no-repeat scroll top center /* Credit: Michael Elkan (http://www.offset.com/photos/394244) */;"/>
  <Variable name="body.background.color" description="Body background color" type="color" default="#eee" value="#eeeeee"/>
  <Variable name="body.background.blur" description="Background blur" type="length" min="0px" max="50px" default="0px" value="0px"/>
  <Variable name="body.link.color" description="Link color" type="color" default="#2196f3"  value="#2196f3"/>
  <Variable name="body.link.visited.color" description="Visited link color" type="color" default="$(body.link.color)" value="#2196f3"/>
  <Variable name="body.link.hover.color" description="Link Hover Color" type="color" default="$(body.link.color)" value="#2196f3"/>
  <Variable name="labels.text.color" description="Label text color" type="color" default="$(body.link.color)"  value="rgba(0,0,0,0.54)"/>
  <Variable name="labels.background.color" description="Label background color" type="color" red="$(labels.text.color.red)" green="$(labels.text.color.green)" blue="$(labels.text.color.blue)" default="rgba($red, $green, $blue, 0.05)" value="#f7f7f7"/>
</Group>

<Group description="Posts" selector="div.widget.Blog">
  <Variable name="posts.title.color" description="Post title color" type="color" default="#212121" value="#212121"/>
  <Variable name="posts.title.font" description="Post title font" type="font" default="$(robotoBold22)" value="bold 22px Roboto, sans-serif"/>
  <Variable name="posts.stream.title.font" description="Post title stream font" type="font" default="$(robotoBold30)" value="bold 30px Roboto, sans-serif"/>
  <Variable name="posts.background.color" description="Post background color" type="color" default="#fff" value="#ffffff"/>
  <Variable name="posts.text.font" description="Post text font" type="font" default="$(body.text.font)" value="15px Roboto, sans-serif"/>
  <Variable name="posts.text.color" description="Post text color" type="color" default="$(body.text.color)" value="#757575"/>
  <Variable name="posts.byline.color" description="Post byline color" type="color" default="rgba(0, 0, 0, 0.54)" value="rgba(0, 0, 0, 0.54)"/>
  <Variable name="blockquote.font" description="Blockquote font" type="font" default="$(robotoLightItalic15)" value="italic 300 15px Roboto, sans-serif"/>
  <Variable name="blockquote.color" description="Blockquote color" type="color" default="#444" value="#444444"/>
  <Variable name="posts.icons.color" description="Post icons color" type="color" default="#707070" value="#707070"/>
  <Variable name="tabs.font" description="Font" type="font" family="$(robotoNormal15.family)" size="$(robotoNormal15.size)" default="700 normal $(size) $(family)" value="700 normal $(size) $(family)"/>
  <Variable name="tabs.color" description="Text color" type="color" default="#ccc" value="#cccccc"/>
  <Variable name="tabs.selected.color" description="Selected color" type="color" default="#fff" value="#ffffff"/>
  <Variable name="tabs.overflow.background.color" description="Popup background color" type="color" default="$(posts.background.color)" value="#ffffff"/>
  <Variable name="tabs.overflow.color" description="Popup text color" type="color" default="$(posts.text.color)" value="#757575"/>
  <Variable name="tabs.overflow.selected.color" description="Popup selected color" type="color" default="$(posts.title.color)" value="#212121"/>
</Group>
*/

Nếu gặp lỗi Invalid variable declaration in page skin: Variable name must not be declared twice. Input: body.background tức biến này được định nghĩa 2 lần, bạn có thể đổi thành <Variable name="body1.background"...> để lưu được mẫu

Kết quả


Hết phần 3, hẹn gặp lại ở phần 4
Comments:
Bạn được tự do bày tỏ quan điểm nhưng nghiêm cấm spam
  • Chèn ảnh theo mẫu [img]link[/img]
  • Chèn video Youtube theo mẫu [youtube]link[/youtube]
  • Chèn code theo mẫu [pre]code[/pre]. Lưu ý: mã hóa code trước khi bình luận

  • Please wait while i am loading Facebook SDK js