Cách tạo giao diện đẹp mắt với WapMaker.Net - tiếp

28 Tháng 8 Năm 2013 · 2.4K lượt xem

3. Cagegory Template - Template của trang chuyên mục

$lists$: danh sách các bài viết được của từng chuyên mục, trong lists là một danh sách các entries.

VD: Để hiển thị tất cả các bài viết của chuyên mục ta code một đoạn như sau:

$lists : { e | 
    <div class="bai"><a href="$e.Url$" title="$e.Title$">$e.Title$</a></div>
}$

Danh sách đầy đủ các biến của category:

$category.Title$Tiêu đề chuyên mục

$category.Url$: đường dẫn của chuyên mục. VD: function này sẽ trả lại là http://blog.wapmaker.net/huong-dan

$category.RssUrl$trả lại đường dẫn của RSS của chuyên mục.

$category.Entries$danh sách một số bài tiêu biểu có trong chuyên mục đó.

$category.Paging$: phân trang

Mở rộng:

- Để hiển thị ngày post bài ( ví dụ: bên cạnh title tiêu đề) thêm Entry $e.Date$

$lists : { e | 
    <div class="bai"><a href="$e.Url$" title="$e.Title$">$e.Title$ ($e.Date$)</a></div>
}$

- Hiển thị hình ảnh thêm $e.Image$

- Phần tóm lược bài viết $e.Description$

 

4. Entry Template: Template của trang nội dung bài viết

blog-wapmaker - Upanh.com

- Hiển thị link tiêu đề chuyên mục:

<a rel="tag" href="$category.Url$">$category.Title$</a>

- Tiêu đề bài viết: $entry.Title$

- Ngày đăng: $entry.Date$

- Link download: $entry.DownloadUrl$

- Nội dung bài viết: $entry.Content$

- Để hiển thị bài viết liên quan cùng chuyên mục dùng $relates$

VD: $relates : { e |
    <div class="bai"><a href="$e.Url$" title="$e.Title$">$e.Title$</a></div>
}$

Mở rộng:

- Hiển thị chuyên mục cha -> chuyên mục con ta dùng code

<a rel="tag" href="/">Home</a>
   » <a href="$category.ParentUrl$">$category.ParentTitle$</a>
» <a rel="tag" href="$category.Url$">$category.Title$</a>

- Ẩn link download khi không có đường dẫn download dùng

$if (entry.DownloadUrl)$

<a href="$entry.DownloadUrl$">Tải về</a>

$endif$

 

Câu lệnh If có thể áp dụng cho rất nhiều biến khác trên wapmaker theo cú pháp.

$if (object)$ 

........

$endif$

- Chèn nút like - cmt facebook: 

Like <div class="fb-like" data-href="$Url$" data-width="100" data-layout="button_count" data-show-faces="true" data-send="true"></div>

Comment <div class="fb-comments" data-href="$entry.Url$" data-width="470" data-num-posts="10"></div>

Chú ý thêm đoạn mã script: <div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/vi_VN/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Cách đặt tag link dưới mỗi bài viết:

Đặt đoạn code sau ở trong phần Entry Template để hiển thị tag, dữ liệu tag được lấy từ keywords và khi click sẽ chuyển sang trang tìm kiếm:

$tags: { t |
         <a href="/tags?q=$t$">$t$</a>
}$

Nếu có lỗi hoặc góp ý cho wapmaker xin hãy báo về hòm mail [email protected] để được hỗ trợ

Chúc các bạn thành công