Hê's lô hê's lyly, chắc là cũng lâu lắm rồi mình không viết bài nhỉ, viết cứ thấy ngượng ngượng. Bỏ qua cái vấn đề đấy thì như tiêu đề của bài viết, hôm nay tôi sẽ mang đến cho anh em phiên bản v2 của con hàng Recent Comment.
|
| Hướng dẫn thêm widget Recent Comment v2 cho template Median UI 1.6 |
Nói thì là v2 nhưng thực ra chỉ có một chút thay đổi so với v1 thôi. Không lòng vòng nhiều thì sau đây là một vài thay đổi và ảnh demo cho anh em này.
- Thêm tên người bình luận và thời gian bao lâu trước đó dưới bình luận.
- Thêm đếm số bình luận chưa đọc.
- Cải tiến giao diện.
|
| Con ảnh đề's mô cho bản Recent Comment v2 |
Hướng dẫn
Bước 1: Thêm icon comment vào thanh header
-
Tìm section sau trong template
<b:section class='headP' id='header-icon' maxwidgets='2' showaddelement='false'> -
Kéo xuống 1 chút sẽ thấy thẻ
<ul class='headIc'>. Các bạn tìm thẻ<b:ifđầu tiên và sửa 3 thành 4 hoặc 2 thành 3 gì đấy nói chung là cộng thêm 1 vào, sau đó thêm đoạn code bên dưới vào sau thẻ</li>đầu tiên<b:elseif cond='data:item == "Comments"'/> <li> <b:class cond='data:item == "Comments"' name='isCmt'/> <label class='popup-cmt tIc bIc' expr:aria-label='data:item' for='cmtCheck'> <b:include name='messages-icon'/> </label> </li> -
Sau đó các bạn kéo lên trên phần
<b:widget-settings>và thêm một cái<b:widget-settings>kiểu như bên dưới đây.<b:widget-settings> <b:widget-setting name='shownum'>5</b:widget-setting> <b:widget-setting name='sorting'>NONE</b:widget-setting> <b:widget-setting name='item-4'>Profile</b:widget-setting> <b:widget-setting name='item-3'>Search</b:widget-setting> <b:widget-setting name='item-2'>Dark</b:widget-setting> <b:widget-setting name='item-1'>Comments</b:widget-setting> <b:widget-setting name='item-0'>Notification</b:widget-setting> </b:widget-settings>
- Các bạn có thể chỉnh sửa số thứ tự của item-i để đổi vị trí các icon trên header
-
Phần này hơi phức tạp nên mình để một số hình ảnh minh họa ở bên dưới nhé
Bước 2: Thêm HTML Popup comment
Các bạn thêm đoạn HTML sau vào sau thẻ <body> vậy là xong
bước này.
<!-- [ PopUp Recent Commnets ] -->
<input class='hidden' id='cmtCheck' type='checkbox'/>
<label class='cmt-close' for='cmtCheck'/>
<div class='cmt-frame'>
<div class='cmt-header'>
<h3>Bình luận</h3>
<svg viewBox='0 0 24 24'>
<style type='text/css'>
.st0{fill:#4C4C4C;}
.drK .st0{fill:#C7C7C7;}
</style>
<path class='st0' d='M21,0H3C1.3,0,0,1.3,0,3v18c0,1.7,1.3,3,3,3h18c1.7,0,3-1.3,3-3V3C24,1.3,22.7,0,21,0z M22.5,21 c0,0.8-0.7,1.5-1.5,1.5H3c-0.8,0-1.5-0.7-1.5-1.5V3c0-0.8,0.7-1.5,1.5-1.5h18c0.8,0,1.5,0.7,1.5,1.5V21z'/>
<path class='st0' d='M17.1,9.7l-8.2,8.2C8.8,17.9,8.7,18,8.7,18l-2.9,1c-0.1,0-0.1,0-0.2,0c-0.2,0-0.2-0.2-0.2-0.4l1-2.9 c0-0.1,0.1-0.2,0.1-0.2l8.2-8.2L17.1,9.7z'/>
<path class='st0' d='M19.2,7.6l-1.2,1.2l-2.4-2.4l1.2-1.2C17,5,17.4,5,17.6,5.2l1.5,1.5C19.4,7,19.4,7.3,19.2,7.6z'/>
</svg>
</div>
<div class='cmt-list'>
</div>
<div class='cmt-footer'>
<a class='more-cmt' href='/p/comment.html' target='_blank' title=''/>
</div>
</div>
Bước 3: Thêm CSS
Bên dưới đây là CSS của popup, các bạn dán vào phần css của template là cũng xong bước này luôn.
/* CSS Popup Recent Comments */ .popup-cmt:before{content:attr(data-text);font-size:11px;line-height:18px;padding:0 5px;border-radius:10px;background:#e6e6e6;color:var(--bodyC);position:absolute;top:-5px;right:-2px;z-index:2}.cmt-frame{position:fixed;top:-5px;right:25px;background:var(--contentB);border-radius:16px 5px 16px 16px;width:350px;height:calc(100% - 120px);box-shadow:0 10px 25px -3px rgba(0,0,0,.1);transition:var(--trans-4);z-index:9999;opacity:0;visibility:hidden;display:flex;flex-direction:column}#cmtCheck:checked ~ .cmt-frame{top:60px;opacity:1;visibility:visible}#cmtCheck:checked ~ .cmt-close{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99}.cmt-header{padding:12px 16px 6px 16px;display:flex;justify-content:space-between;align-items:center;border-radius:16px 5px 0 0}.fa-pen-square{opacity:.6}.cmt-footer{height:40px;display:flex;justify-content:center;align-items:center;box-shadow:rgba(149,157,165,0.15) 0 -8px 24px;border-radius:0 0 16px 16px}.cmt-list{flex:1;overflow:auto}.cmt-ul{margin:0;padding:8px 18px;list-style:none}.cmt-li{display:flex;margin-bottom:15px}.cmt-avatar{width:40px;height:40px;object-fit:cover;max-width:inherit;margin-right:15px;border-radius:30%}.cmt-content{color:inherit}.cmt-content p{margin:0;word-break:break-word;}.cmt-content span{font-size:85%;opacity:.8}.drK .cmt-frame{background:var(--darkBs);box-shadow:0 10px 40px rgba(0,0,0,.2)}.drK .cmt-content{color:inherit}.drK .cmt-footer{box-shadow:rgb(0 0 0 / 15%) 0 -8px 24px}.Rtl .cmt-frame{left:25px;right:auto;border-radius:5px 16px 16px 16px}.Rtl .cmt-avatar{margin-left:15px;margin-right:0}@media screen and (max-width:480px){.cmt-frame,.Rtl .cmt-frame{left:10px;right:10px;width:auto;border-radius:16px}#cmtCheck:checked ~ .cmt-frame{top:75px}#cmtCheck:checked ~ .cmt-close{background:rgba(0,0,0,.2);backdrop-filter:saturate(180%) blur(10px);-webkit-backdrop-filter:saturate(180%) blur(10px)}.cmt-frame:before{content:'\f075';font-family:'Font Awesome 5 Pro';position:fixed;font-size:25px;width:50px;height:50px;background:var(--contentB);display:flex;justify-content:center;align-items:center;border-radius:35%;top:-65px;left:50%;transition:var(--trans-4);transform:translate(-50%,0)}#cmtCheck:checked ~ .cmt-frame:before{top:15px}.cmt-frame:after{content:'';position:fixed;border:8px solid;border-color:transparent transparent var(--contentB) transparent;top:-20px;left:50%;transition:var(--trans-4);transform:translate(-50%,0)}#cmtCheck:checked ~ .cmt-frame:after{top:60px}.drK .cmt-frame:before{background:var(--darkBs)}.drK .cmt-frame:after{border-color:transparent transparent var(--darkBs) transparent}}
Bước 4: Thêm JavaScript
Còn bước này nữa là các bình luận hiển thị ầm ầm luôn. Các bạn dán đoạn code dưới đây vào trước thẻ đóng </body> là xong.
<script>/*<![CDATA[*/
var limCmt = 30, // Số lượng comment tối đa
lengthName = 25, // Độ dài tên tối đa
lengthContent = 100, // Độ dài comment tối đa
adminUri = 'https://www.blogger.com/profile/18423549431708960193', // Avatar admin
blogUri = 'https://vanlinhxyz.blogspot.com/', // Linh blog
noAvatar = 'https://imgur.com/vpFKnLD.png', // Avatar ẩn danh
comments = []; // List comment
// Lấy số lượng bình luận
function innerTotalComments(e){var t=parseInt(e.feed.openSearch$totalResults.$t),n=parseInt(localStorage.getItem("seen"));n=n||0,document.querySelector(".more-cmt").innerHTML=`Xem tất cả <b>${t}</b> b\xecnh luận`,document.querySelector(".more-cmt").title=`Xem tất cả ${t} b\xecnh luận`,t>n?document.querySelector(".popup-cmt").dataset.text=t-n:t<n&&localStorage.setItem("seen",t)}
// Render comment ra popup
function innerComment(t){var l="<ul class='cmt-ul'>";for(let a=0;a<t;a++){var n=comments[a];l+=`
<li class="cmt-li">
<div class="cmt-info">
<img class="cmt-avatar" src=${n.avatar} />
</div>
<a class="cmt-content" href=${n.link} rel="nofollow" title="${n.content}">
<p>${n.content}</p>
<span>${n.author} - ${n.time}</span>
</a>
</li>
`}l+="</ul>",document.querySelector(".cmt-list").innerHTML=l}
// Xử lý dữ liệu comment trả về
function rcComments(t){var r=limCmt>t.feed.entry.length?t.feed.entry.length:limCmt;for(let e=0;e<r;e++){var o=t.feed.entry[e],g=o.author[0].name.$t;g=g.length<lengthName?g:g.substring(0,lengthName)+"…";var n=o.content.$t;n=(n=n.replace(/(<([^>]+)>)/g," ")).length<lengthContent?n:n.substring(0,lengthContent)+"…";var $=new Date(o.published.$t),a=Math.floor((new Date-$)/1e3),l=a<60?a+" gi\xe2y trước":a<3600?Math.floor(a/60)+" ph\xfat trước":a<86400?Math.floor(a/3600)+" giờ truớc":a<604800?Math.floor(a/86400)+" ng\xe0y truớc":Math.floor(a/604800)+" tuần truớc",i={author:g,avatar:"https://img1.blogblog.com/img/b16-rounded.gif"==o.author[0].gd$image.src?noAvatar:"https://img1.blogblog.com/img/blank.gif"==o.author[0].gd$image.src?noAvatar:o.author[0].gd$image.src,content:n,time:l,link:o.link[2].href};comments.push(i)}innerComment(r),innerTotalComments(t)}
// Gọi API lấy comment
document.write(
`<script type="text/javascript" src="${blogUri}/feeds/comments/default?alt=json-in-script&max-results=${limCmt}&callback=rcComments"><\/script>`
);
// Hiển thị số bình luận chưa đọc
var commentBtn=document.querySelector(".popup-cmt");commentBtn.addEventListener("click",function(){var t=parseInt(commentBtn.dataset.text),e=parseInt(localStorage.getItem("seen"));e=e||0,t&&(localStorage.setItem("seen",t+e),delete commentBtn.dataset.text)});/*]]>*/</script>
Lưu ý nên cài đặt FontAwesome v5 để hiển thị đầy đủ các icon.
Thay các thông tin ở đầu file js để các comment được hiển thị đúng với blog của bạn.
Lời kết
Trê đây là toàn bộ hướng dẫn của mình về cách thêm popup Recent Comment Version 2. Mọi thắc mắc xin vui lòng để lại comment bên dưới. Cảm ơn các bạn đã đọc bài viết của mình!
Copyright © Phạm Văn Linh
Đánh Giá Bài Viết: