Cải thiện bình luận trên Blogger, Thêm hình ảnh và video

Chào mọi người, bài viết này mình chia sẽ đến mọi người một thủ thuật đã lâu, về việc đặt hình ảnh, video youtube, thẻ code pre đơn giản cho những blog chia sẽ thủ thuật lập trình hay tiện ích khác.

Thủ thuật nâng cấp khung bình luận blogger về việc thêm hình ảnh, video youtube, khung chứa code html, css, javascript...v.v.

Khung bình luận của blogger thô sơ tới nỗi chèn vài thẻ html cơ bản vào cũng bị cấm, vì vậy không còn cách nào khác ta cần tạo các short code và sử dụng js để chuyển chúng về tag html. Nói vậy có nghĩa không chỉ có ảnh (thẻ img), video (thẻ iframe), syntax code (thẻ pre) mà với bất kì thẻ html cơ bản nào ta đều có thể dùng js để biến đổi được

Trong bài viết này tôi sử dụng SyntaxHighlighter 3.0.83 (theme Eclipse, 3 module js-html-css) phục vụ cho làm đẹp code và fancybox 3.3.5 phục vụ cho việc xem ảnh trong khung bình luận ở chế độ lightbox. Và đương nhiên điều kiện bắt buộc là bạn không tắt blogger comment trên trang của mình
Đầu tiên mọi người đăng nhập vào trang quản trị và vào mục chỉnh sửa HTML Tìm tới <b:includable id='threaded_comments' var='post'> mở rộng nó ra và chèn code js vào SAU <div class='comments-content'> như hình bên dưới.

Tiếp đó mọi người đặt đoạn code bên dưới vào sau thẻ trên.

<script src='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js'/>

<!-- Custom Theme for SyntaxHighlighter : http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/ -->
<link href='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCoreEclipse.min.css' rel='stylesheet' type='text/css'/>
<link href='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeEclipse.min.css' rel='stylesheet' type='text/css'/>

<!-- Module for SyntaxHighlighter : http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/ -->
<script src='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.min.js'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.min.js'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCss.min.js'/>

<!-- Required for fancybox -->
<link href='//cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
//<![CDATA[
function smartComment() {
    a = document.getElementById("comment-holder");
    b = a.innerHTML;
    b = b.replace(/\[pre\]/gi, "<pre>");
    b = b.replace(/\[pre js\]/gi, "<pre class='brush:js'>");
    b = b.replace(/\[pre html\]/gi, "<pre class='brush:html'>");
    b = b.replace(/\[pre css\]/gi, "<pre class='brush:css'>");
    b = b.replace(/\[\/pre\]/gi, "</pre>");
    b = b.replace(/\[img\].*?'.*?\[\/img\]/gi, "");
    b = b.replace(/\[img\]/gi, "<img data-fancybox='gallery' src='");
    b = b.replace(/\[\/img\]/gi, "'/>");
    b = b.replace(/\[youtube\].*?'.*?\[\/youtube\]/gi, "");
    b = b.replace(/\[youtube\]https:\/\/youtu.be/gi, "<iframe width='560' height='315' src='https://www.youtube.com/embed");
    b = b.replace(/\[youtube\]https:\/\/www.youtube.com\/watch\?v=/gi, "<iframe width='560' height='315' src='https://www.youtube.com/embed/");
    b = b.replace(/&amp;feature=/gi, "?rel=0' '");
    b = b.replace(/\[\/youtube\]/gi, "?rel=0' frameborder='0' allowfullscreen></iframe>");
    a.innerHTML = b
}
smartComment();

$("#comment-holder img").each(function() {
    $(this).attr('data-src', $(this).attr("src"));
});

SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();

$(window).on('load', function() {
    var t = document.createElement("script");
    t.src = "//cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js";
    document.body.appendChild(t);
    $("#comment-holder img[data-fancybox]").fancybox();
});
//]]></script>

Trong đó

• Ảnh và video bạn không cần chỉnh sửa gì
• Themes cho SyntaxHighlighter bạn lấy list tại http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/ và lấy link nhúng tại https://cdnjs.com/libraries/SyntaxHighlighter
• Phần short code bạn có thể tùy chỉnh thêm bớt các module. Lấy list module tại http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/ và lấy link nhúng tại https://cdnjs.com/libraries/SyntaxHighlighter

Ví dụ tôi muốn thêm syntax cho code php thì phải thêm link nhúng.

<script src='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPhp.min.js'/>.

và tạo thêm short code
b = b.replace(/\[pre php\]/gi, "<pre class='brush:php'>"); 

 Phần màu đỏ là short code bạn tự tạo tùy thích, phần màu xanh phải chuẩn Brush aliases của SyntaxHighlighter không code nó không làm đẹp đâu nhé

Theo đó với code trình bày ở trên các short code khi bình luận sẽ là

• chèn ảnh: [img]link ảnh[/img]
• chèn video youtube: [youtube]link video[/youtube]
• chèn code HTML: [pre html]code[/pre]
• chèn code CSS: [pre css]code css[/pre]
chèn code JS: [pre js]code js[/pre]

... (bạn có thể thêm các module syntax tùy theo mục đích sử dụng)
Link ảnh: là link dạng trực tiếp ví dụ https://i.imgur.com/0GZdCna.jpg Link video: là link video trên youtube, copy trên thanh địa chỉ của trình duyệt ví dụ https://www.youtube.com/watch?v=MhQKe-aERsU

Các đoạn code js, html, css phải được convert các kí tự đặc biệt, bạn có thể tự tạo tool convert để người dùng chuyển đổi trước khi bình luận
Mọi người có thể Download file js, css ở trong đoạn code ở link bên dưới.
DOWNLOAD NOW
Chúc mọi người thành công.


• Demo thủ thuật tại bài viết này.