Plugin Load Json for Blogspot / Công cụ load tin cho Blogspot.

Trước đây, đa phần các Plugin của mình thường viết bằng Javascript thuần. Đôi khi khó khăn trong sử dụng và tính cập nhật của nó cũng gây nhiều trở ngại cho chính mình. Do vậy, mình chuyển hướng sử dụng thư viện Jquery để xây dựng Plugin này.

Thường khi load dữ liệu của Blogspot lên Template ta phải nhúng một đoạn <script> vào vị trí cần load hoặc vị trí bất kì, sau đó Callback (gọi ngược) một hàm mà ta đã viết sẵn.

Trong {function Callback} đó ta lại phải viết rất nhiều dòng code : document.write ( " xYz ... bla .. bla ") để cho nó sinh ra các mã code hiện thị như hình trên theo ý chúng ta cần.

Từ những cái bất tiện, gây thiệt hại về thời gian cũng như quá thủ công. Mình mới nghĩ : "Sao ta không tự blind dữ liệu vào Template như Blogspot họ đang làm nhỉ ". Thế là hai ngày hì hục, xây dựng được phiên bản 1.0 của AncLoadBlogspot. Thao tác không có gì khó khăn cả, mà ngược lại mình nghĩ chắc sẽ rất dễ cho cả người tập toẹ làm Template Blogspot :D

Plugin : Download bản thử nghiệm 

Sơ qua chút về dòng lệnh :

Mình mã code như hình trên. Giờ mình sẽ hướng dẫn các bạn sử dụng Plugin này.

1. Viết code HTML kèm theo mã code AncLoadBlogspot (*).

- Cấu hình : như trong hình trên, với class = "carousel-inner" mình cài đặt lable, max-result, start-index cho dữ liệu lấy ra.

<div class="carousel-inner" data-label="" data-max-result="3" data-start-index="1">

Với : 

1. data-label : tên Label trong Blogspot.
2. data-max-result : số phần tử lấy ra tối đa.
3. data-start-index : vị trí bắt đầu của dữ liệu lấy ra ( bài viết số bao nhiêu )

- Lập trình : 

Bạn có thể lập trình bình thường như trong Javascript thuần. Nhưng bạn chú ý cho, các dòng lệnh như trong Javascript được áp dụng vào đây cũng phải tuân theo các quy tắc do mình đặt ra. Cú pháp và các biến phải nằm trong chuỗi sau  @ code in here #

Khi dùng if, else if

@ if (điều kiện a) { #

       // Code HTML

@ } else if( điều kiện b) { #

      // Code HTML

@ } else { #

        // Code HTML

@ } #

Khi dùng for

@ for (điều kiện, lập luận, tính toán)  {#

     // Code HTML

@ } #

Lưu ý : vì trong Template Blogspot sẽ báo lỗi nếu bạn sử dụng các dấu ( <, >, & ) nên mình đã chuyển đối chúng thành ( &lt; , &gt; , &amp; )

Biến trong AncLoadBlogspot

anc.index (Int)    : trả về chỉ số bài viết trong tổng các bài viết lấy về.
anc.title  (String) : trả về tên tiêu đề bài viết
anc.url    (String) : trả về đường dẫn bài viết
anc.content (String) : trả về nội dung (kiểu HTML) của bài viết. Dùng biến này bạn nên kèm theo hàm removeCode(vị trí cắt 1, vị trí cắt 2 ) để lấy về các đoạn text không chưa thẻ HTML.
anc.date   (Date)  : trả về thời gian publish bài viết.
anc.img   (String) : trả về đường dẫn ảnh đầu tiên trong bài viết. Có thể dùng hàm reSizeImage(size) để thay đổi kích thước ảnh.
anc.author (Array) : trả về các thông tin như (email, url ảnh author, name, plus google+) . Thường một bài viết chỉ có một tác giả nên mình khuyên không cần dùng for cho biến này. Chỉ cần đặt là anc.author[0].email chẳng hạn.
anc.category  (Array) : trả về các Label có trong bài viết. Cái này thì dùng for rồi :v

Đây là các biến thông dụng mà mình đã làm được, các biến này sử dụng bình thường như trong Javascript thuần. Bạn có thể dùng kèm với các hàm xử lý chuỗi như .trim(), .substring() ... v...v..

Đây là phiên bản đầu tiên của AncLoadBlogspot, có gì thiếu sót rất mong mọi người góp ý và xấy dựng Tools lớn mạnh hơn.

Trong phiên bản tới, mình sẽ tích hợp phân trang, lấy comment và đặt biệt có thể là RealTime comment y chang Facebook :v ( Cái này chưa biết làm được không, cứ note đấy để thực hiện )

2. Run & Setting

Để chạy code trên, ta dùng selector chứ mã code, ở đây chính là class {carousel-inner}

Một số setting kèm theo :
             url: ' địa chỉ trang web của bạn (Ex : http://www.maphim.net/) ',
            label: ' tên nhãn cần lấy ',
            max: ' số tin lấy ra ',
            start: ' vị trí bắt đầu ',
            view: 'vị trí load dữ liệu vào ( phân biệt bởi các dấu phẩy (,)  ) ',
            hide: ẩn dữ liêu trên vị trí có code của AncLoadBlogspot không,
            random: hiển thị ngẫu nhiên bài viết,
            imageDefault: ' ảnh mặc định nếu bài viết không có ảnh '

3. Code mẫu :


<ul class="list-group loadjs" data-label="Phim lẻ" data-max-result="4" data-start-index="1">
<li class="list-group-item">
<a class="hastip" href="@anc.url#" original-title="@anc.title#">
@anc.title# - @ anc.author[0].name #
</a>
<span class="badge">@anc.date.strftime('%d/%m/%Y') #</span>
<p>
@ for(var i = 0; i < anc.category.length - 2; i ++ ) { #
<a href="@ anc.category[i].url #">@ anc.category[i].name #</a>
@ } #
</p>
<p style="background:url(@ anc.img.reSizeImage(300) #);height: 100px; color: white;">
@ anc.content.removeCode(0,500) #
</p>
</li>
</ul>
<h3>View 1</h3>
<div class="view1"></div>
<h3>View 2</h3>
<div class="view2"></div>

<script>
$(".loadjs").AncLoadBlogspot({
url: 'http://www.maphim.net/',
view: '.view1,.view2',
hide: true
});
</script>

• @anc.title# - @ anc.author[0].name # @anc.date.strftime('%d/%m/%Y') #

  @ for(var i = 0; i < anc.category.length - 2; i ++ ) { # @ anc.category[i].name # @ } #

  @ anc.content.removeCode(0,500) #

View 1

View 2