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

22 Tháng 5 Năm 2013 · 1.1K lượt xem

Wapmaker hỗ trợ 3 Html template chính là:

Home Template - Template của trang chủ

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

Entry - Template của trang nội dung bài viết

Bao bên ngoài 3 giao diện này là Layout, Tất cả những gì hiển thị ở layout sẽ được hiển thị ở 3 template trên.

cach-tao-giao-dien-dep-mat-voi-wapmaker

Để giúp các bạn hiểu thêm về các hàm Function Của Wapmaker Chúng Tôi  được giải thích như sau : Function của Wapmaker Có Dạng Sau : $Tên_Function$ 

Các function của từng trang như sau:

Layout:

- $menu$: hiển thị danh sách tất cả chuyên mục dưới dang menu và thứ tự của chuyên mục cũng là thứ tự của menu

- $content$: phần nội dung chính của các template trong.

Lưu ý phần layout là tất cả phần HTML nằm trong thẻ body, không bao gồm thẻ body, head và html.

VD của một đoạn Layout đơn giản:

<div id="container">
    <header id="header">
        <strong class="logo"><a href="/">WapMaker.NET Blog</a></strong>
        <div class="menu">$menu$</div>
    </header>
    $content$
    <footer id="footer">
        <span class="copyright">&copy; wapmaker.net</span>
    </footer>
</div>

Home Template:

- $lists$: danh sách các bài viết được chọn Hiển thị ở tin Hot trong phần Vị Trí Tin. trong lists là một danh sách các entries.

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

$lists : { e | 
            <article class="titre clearfix">
                <a href="$e.Url$" data-prefetch="">
                    <div class="picture"><img class="lazy-retina" title="$e.Title$" alt="$e.Title$" src="$e.Thumb$" data-item-type="article" data-lazyload="false"></div>
                    <h2>$e.Title$<span class="nb_reactions mgl5"><span class="pic"></h2>
                </a>
            </article>
        }$

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

Url: đường đẫn Url của bài viết (entry)

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

DownloadUrl: Đường dẫn của file được định nghĩa trong phần Khác -> Download Link khi biên tập bài. biến này thích hợp cho các trang download game. Với Download Url là đường dẫn của file được download.

CategoryUrl: Đường dẫn của chuyên mục chứa bài viết này.

Date: ngày bài viết được tạo ra.

Image: ảnh đại diện của bài viết với kích thước đầy đủ, Không Resize.

LargeThumb: đường dẫn ảnh Thumb lớn (320x240)

Thumb: đường dẫn ảnh Thumb trung bình (140x105)

SmallThumb: đường dẫn ảnh Thumb nhỏ (52x52)

TinyThumb: đường dẫn ảnh thumb rất nhỏ(32x32)

Description: phần tóm lược bài viết.

CategoryName: tên chuyên mục chứa bài viết này.

- $categories$: chứa danh sách theo chuyên mục và các bài viết theo chuyên mục.

VD:

$categories : { c | 
    <div id="harryz">
        <div class="custom">
            $c.Title$ 
            <a href="$c.RssUrl$"><img src="http://www.reclusivebibliophile.com/wp-content/themes/a-little-touch-of-purple/images/small-rss.png"></a>
        </div>
    </div>

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

    <div id="tnt_pagination"><a href="$c.Url$" class="active_tnt_link">Xem thêm »</a></div>
}$

Như vậy trong categories sẽ có một danh sách các chuyên mục(category) và trong mỗi chuyên mục lại có một danh sách Entries.

Các biến của category:

Title: tiêu đề của chuyên mục

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

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

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

Ví dụ về một đoạn có cả chuyên mục cha và chuyên mục con:

<div class="phdr"><h3>Chuyên Mục</h3></div> 
<div class="phdrbox">
$categories : { c |
  <div class="list2">
    <img src="http://static.wapmaker.net/7886/images/couple.gif" alt="♥" style="" /><a href="$c.Url$" title="Bài viết thuộc $c.Title$" >$c.Title$</a>
  </div>  
  $c.Childs : { ch | 
      <div class="list2">
        &nbsp; -> <img src="http://static.wapmaker.net/7886/images/couple.gif" alt="♥" style="" /><a href="$ch.Url$" title="Bài viết thuộc $ch.Title$" >$ch.Title$</a>
      </div>
  }$
}$
</div>

Phần tiếp theo: Category Template và Entry Template