Blog DX

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

30 tháng 10, 2014
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> 

View 1

  • Lời Nguyền Quỷ Ám 2 - Sadako 2 3D (2014) [Phim Kinh Dị]-hiệp Trần10/03/2014
    Lời Nguyền Quỷ Ám 2Sadako 2 3D (2014) [Phim Kinh Dị]Diễn viên: Satomi Ishihara, Yûsuke Yamamoto, Miori Takimoto , Kôji SetoĐạo diễn: Tsutomu HanabusaThể loại: Phim Kinh DịThời lượng:Quốc gia: Nhật BảnNam PH: 2014Giới thiệu: Phim Lời Nguyền Quỷ Ám 2 - Sadako 2 3DXem Phim Lời Nguyền Quỷ Ám 2 - Sadako 2 3D :Tại một trường trung học nơi Akana Aikawa đang giảng dạy lan truyền tin đồn về một cuốn băng. Cuốn băng khiến cho những người xem nó có ý định tự sát. Ngay sau đó, một học sinh của Akane là Nori
  • Tay Đấm Quyền Anh - Wolf 2013 [Phim Hành Động]-hiệp Trần10/03/2014
    Tay Đấm Quyền Anh Wolf 2013Đạo diễn: Jim TaihuttuDiễn viên: Chemseddine Amar, Steef Cuijpers, Slimane DaziThể loại: Phim Hành ĐộngQuốc gia: MỹThời lượng:Năm PH: 2014Giới thiệu: Phim Tay Đấm Quyền Anh - Wolf 2013Xem Phim Tay Đấm Quyền Anh - Wolf 2013 là câu chuyện kể về anh chàng Maj-id, là một tay đánh quyền anh, sống ở ngoại ô Hà Lan. Nhờ vào tài năng của anh đã đã mang lại cho anh sự nổi tiếng kèm theo là các tai tiếng trong thế giới Quyền Anh…Read more »
  • Hành Thích Ngụy Vương - Game of Assassins 2013 [Phim Kiếm Hiệp]-hiệp Trần07/03/2014
    Hành Thích Ngụy VươngGame of Assassins 2013Diễn viên: Bryan Leung, Jiang Chao, Chen Kuantai, Dong Zhihua, Xie Yuanjiang, Zhou Yichen, Xiao Hong, Zhu Guoan, Wang Xiaobao, Wu Ma, Francis Ng, Frankie Chan ...Đạo diễn: Miao ShuThể loại: Phim Kiếm Hiệp, Phim Trung QuốcThời lượng:Quốc gia: Trung QuốcNăm PH: 2014Giới thiệu: Phim Hành Thích Ngụy Vương - Game of Assassins 2013Phim Hành Thích Ngụy Vương được lấy bối cảnh vào năm 360 trước công nguyên khi nước Sở bị Nguy xâm chiếm, nước Sở đại bại, Sở Vươn
  • Chiếc Túi Nguy Hiểm - The Bag Man 2014-hiệp Trần07/03/2014
    Chiếc Túi Nguy HiểmThe Bag Man 2014 [Phim Hành Động]Thể loại: Phim Hành ĐộngDiễn viên: John Cusack, Rebecca Da Costa, Robert De NiroĐạo diễn: David GrovicThời lượng:Quốc gia: MỹNăm PH: 2014Giới thiệu : Phim Chiếc Túi Nguy Hiểm - The Bag Man 2014Xem Phim Chiếc Túi Nguy Hiểm một người đàn ông được ông chủ của mình giao cho vận chuyển một chiếc túi bí mật với điều kiện anh không được biết bên trong chiếc túi đang chứa những gì. Công việc tưởng chừng đơn giản nhưng đã kéo anh vào những vụ giết người
  • View 2

  • Lời Nguyền Quỷ Ám 2 - Sadako 2 3D (2014) [Phim Kinh Dị]-hiệp Trần10/03/2014
    Lời Nguyền Quỷ Ám 2Sadako 2 3D (2014) [Phim Kinh Dị]Diễn viên: Satomi Ishihara, Yûsuke Yamamoto, Miori Takimoto , Kôji SetoĐạo diễn: Tsutomu HanabusaThể loại: Phim Kinh DịThời lượng:Quốc gia: Nhật BảnNam PH: 2014Giới thiệu: Phim Lời Nguyền Quỷ Ám 2 - Sadako 2 3DXem Phim Lời Nguyền Quỷ Ám 2 - Sadako 2 3D :Tại một trường trung học nơi Akana Aikawa đang giảng dạy lan truyền tin đồn về một cuốn băng. Cuốn băng khiến cho những người xem nó có ý định tự sát. Ngay sau đó, một học sinh của Akane là Nori
  • Tay Đấm Quyền Anh - Wolf 2013 [Phim Hành Động]-hiệp Trần10/03/2014
    Tay Đấm Quyền Anh Wolf 2013Đạo diễn: Jim TaihuttuDiễn viên: Chemseddine Amar, Steef Cuijpers, Slimane DaziThể loại: Phim Hành ĐộngQuốc gia: MỹThời lượng:Năm PH: 2014Giới thiệu: Phim Tay Đấm Quyền Anh - Wolf 2013Xem Phim Tay Đấm Quyền Anh - Wolf 2013 là câu chuyện kể về anh chàng Maj-id, là một tay đánh quyền anh, sống ở ngoại ô Hà Lan. Nhờ vào tài năng của anh đã đã mang lại cho anh sự nổi tiếng kèm theo là các tai tiếng trong thế giới Quyền Anh…Read more »
  • Hành Thích Ngụy Vương - Game of Assassins 2013 [Phim Kiếm Hiệp]-hiệp Trần07/03/2014
    Hành Thích Ngụy VươngGame of Assassins 2013Diễn viên: Bryan Leung, Jiang Chao, Chen Kuantai, Dong Zhihua, Xie Yuanjiang, Zhou Yichen, Xiao Hong, Zhu Guoan, Wang Xiaobao, Wu Ma, Francis Ng, Frankie Chan ...Đạo diễn: Miao ShuThể loại: Phim Kiếm Hiệp, Phim Trung QuốcThời lượng:Quốc gia: Trung QuốcNăm PH: 2014Giới thiệu: Phim Hành Thích Ngụy Vương - Game of Assassins 2013Phim Hành Thích Ngụy Vương được lấy bối cảnh vào năm 360 trước công nguyên khi nước Sở bị Nguy xâm chiếm, nước Sở đại bại, Sở Vươn
  • Chiếc Túi Nguy Hiểm - The Bag Man 2014-hiệp Trần07/03/2014
    Chiếc Túi Nguy HiểmThe Bag Man 2014 [Phim Hành Động]Thể loại: Phim Hành ĐộngDiễn viên: John Cusack, Rebecca Da Costa, Robert De NiroĐạo diễn: David GrovicThời lượng:Quốc gia: MỹNăm PH: 2014Giới thiệu : Phim Chiếc Túi Nguy Hiểm - The Bag Man 2014Xem Phim Chiếc Túi Nguy Hiểm một người đàn ông được ông chủ của mình giao cho vận chuyển một chiếc túi bí mật với điều kiện anh không được biết bên trong chiếc túi đang chứa những gì. Công việc tưởng chừng đơn giản nhưng đã kéo anh vào những vụ giết người

  • Tác giả:  Anh N.C
    Nguồn: http://sieuluoi.blogspot.com/2014/10/plugin-load-json-for-blogspot-cong-cu.html

    Không có nhận xét nào:

    Đăng nhận xét