Triển khai khung viết bình luận cho từng bài viết trang index

Thông thường khi muốn viết bình luận, người dùng sẽ phải truy cập vào trang bài viết để soạn thảo. Tuy nhiên với một số blog ta lại muốn cho người dùng soạn thảo bình luận ngay tại trang index (giống các trang mạng xã hội), liệu phương án đó có thể không ? Câu trả lời là có khi bạn đọc xong bài viết này
Khung viết bình luận của blogger là 1 iframe nên bạn có thể đặt nó ở bất kì đâu miễn là lấy theo đúng id của blog và id của bài viết.

Mặc định blogger dùng thẻ data:post.commentFormIframeSrc để gọi ra src của iframe, điều này có nghĩa muốn load khung bình luận cho từng bài viết cho trang index bạn chỉ cần dán code sau vào phần nội dung lặp bài đăng

<iframe expr:src='data:post.commentFormIframeSrc' width='100%' frameBorder='0'></iframe>

Tuy nhiên đừng dại dột mà làm như vậy, nếu trang index có vài bài thì không sao, nhưng khi con số lên tới vài chục thì đống iframe sẽ làm hỏng performance của bạn đó, đơn giản vì cứ 10 bài thì phải load đủ 10 cái khung mà

Khi đó ta có thể nghĩ ra một vài ý tưởng như: click để load iframe, hoặc scroll tới đâu thì load tới đó,... hoàn toàn có thể, quan trọng là trình độ của bạn tới đâu

Trong bài viết này tôi sẽ hướng dẫn bạn cách load iframe bằng phương pháp click hiện popup (cho template dạng lưới vì không gian hiển thị cho từng bài viết nhỏ) và click append iframe (cho template hiển thị bài đăng theo từng hàng)

Thêm 1 yêu cầu nữa đó là bạn cần tìm được trong blog của mình phần nội dung lặp bài đăng trang index nằm trong widget Blog1 (hoàn toàn phụ thuộc vào level của bạn vì mỗi template thiết kế 1 kiểu) và xác định được selector tương ứng (để xử lý sự kiện click theo từng bài) với blog của tôi sẽ là .blog-post

Bài viết sử dụng fontawesome 4, jQuery 3.3.1

Click hiện popup

Code markup trong phần nội dung lặp bài đăng trang index

<a class='post-comment' expr:data-src='data:post.commentFormIframeSrc' expr:title='data:messages.postAComment'><i class='fa fa-comments-o'/> Comment</a>

JS trước thẻ đóng </body> show popup khi click, popup sẽ hiện giữa màn hình, bạn có thể thay đổi giá trị width và height cho cửa sổ

<script>//<![CDATA[
$(".blog-post").each(function() {
  var t = $(this);
  t.find(".post-comment").eq(0).on("click", function() {
    var width = 1000,
        height = 400,
        left = (screen.width / 2) - (width / 2),
        top = (screen.height / 2) - (height / 2);
    window.open($(this).attr("data-src"), $(this).attr("title"), `toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=${width}, height=${height}, top=${top}, left=${left}`);
  })
})
//]]></script>

Click append iframe

Code markup tương tự như phần trên.

Ta chỉ cần load iframe khi click lần đầu nên có thể sử dụng one("click") để tránh người dùng nghịch chơi click nhiều lần

<script>//<![CDATA[
$(".blog-post").each(function() {
  var t = $(this);
  t.find(".post-comment").eq(0).one("click", function() {
   var src= $(this).attr("data-src");
    t.append(`<iframe src=${src} width="100%" frameBorder="0"></iframe>`);
  })
})
//]]></script>

Lưu mẫu lại và kiểm tra kết quả

Lưu ý: code js trên cũng chỉ mang tính chất gợi ý, trên thực tế bạn có thể có nhiều ý đồ khác nhau cho cái khung bình luận này vì vậy bạn hãy tùy biến code sao cho vừa ý của mình nhé.

Mục tiêu của bài viết là thiên về phần ý tưởng và thực tế bạn thấy đấy, thằng có nhiều ý tưởng thường lương cao hơn thằng dev :))

Để lại bình luận nếu bạn gặp khó khăn và chúc thành công !