Hướng dẫn Hướng dẫn rip skin và cách bố trí xenportal

[CNTT01]

Mấy ngày này tự dưng buồn và cũng không có hứng làm gì cả, nên ngồi viết bài hướng dẫn cho các bạn chưa biết cách sử dụng xenportal cũng như chưa biết cách tạo 1 site giao diện như tin tức và cách rip skin đơn giản nhất!

Bài viết này được tổng hợp 1 số bài hướng dẫn về portal cho các bạn và mình dùng chút kiến thức ít ỏi của mình sau thời gian mày mò và sử sụng xenforo, và tất nhiên là bài viết dành cho các newbie, không dành cho pro. Pro nào cảm thấy không khả thi, không trực quan thì cứ gạch đá thoải mái! Tình hình là mình cũng tự học nên cách làm có vẻ noob từ lúc đầu, và mình xin hướng dẫn lại cách làm cho các bạn 1 cách đơn giản và dễ hiểu nhất!

Phần 1, sẽ hướng dẫn các bạn về:
- Tải và cài đặt xenportal;
- Tạo thêm nhiều block recentnews;
- Tìm hiểu cấu trúc template của recentnews

1>. Tải và cài đặt xenportal:
Đi vào vấn đề chính. Để tạo 1 trang chủ cho xenforo có giao diện thì trước tiên việc cần nhất phải là add-on xenportal

Tải về và cài đặt tại đây nhé: http://vietxf.org/threads/8wayrun-com-xenporta-portal-1-5-6.95/

2>. Tạo block cho xenportal:
Để tạo được nhiều phần như 1 site tin tức thì trước tiên chúng ta phải cần nhiều block, căn bản khi cài xenportal đã có 1 số block được hỗ trợ sẵn rồi, cụ thể như: recentnews, recentthreads,recentslide,... Và các block ở đây cần và hay dùng nhất là recentnews. Các bạn nên xem thêm cách tạo thêm nhiều block recentnews tại đây, mình không muốn nhắc lại do như vậy sẽ rất dài dòng: http://vietxf.org/threads/giao-dien-trang-chu-xenpotal-phong-cach-bao-chi.1831/

3.> Tìm hiểu ý nghĩa của template recentnews:
Thường 1 template mặc định sẽ có dạng như thế này: (mình xin chép nguyên code để trực quan hơn)

<xen:require css="message_user_info.css" />
<xen:require css="bb_code.css" />
<xen:require css="EWRblock_RecentNews.css" />

<div id="recentNews">
<xen:foreach loop="$RecentNews" value="$news">
<div class="section sectionMain recentNews" id="{$news.thread_id}">

<div class="primaryContent {xen:if {$option.leftdate}, 'leftDate'}">
<div class="subHeading">
<div style="float: right; white-space: nowrap;">
<a href="{xen:link threads, $news}"><xen:datetime time="$news.promote_date" /></a>
<xen:if is="{$visitor.permissions.EWRporta.canPromote}">
&nbsp; (<a href="{xen:link 'threads/edit', $news}" class="OverlayTrigger">{xen:phrase edit}</a>)
</xen:if>
</div>

<h2><a href="{xen:link threads, $news}" class="newsTitle">{xen:helper threadPrefix, $news}{$news.title}</a></h2>
</div>

<div class="newsDate secondaryContent">
<div class="newsMonth heading">{$news.month}</div>
<div class="newsDay">{$news.day}</div>
</div>

<xen:if is="{$news.promote_icon} != 'disabled'">
<xen:if hascontent="true">
<div class="messageUserBlock">
<div class="avatarHolder">
<xen:contentcheck>
<xen:if is="{$news.attach}">
<a href="{xen:link threads, $news}"><img src="{$news.attach.thumbnailUrl}" alt="{$news.attach.filename}" /></a>
<xen:elseif is="{$news.medio}" />
<div style="background: url('{xen:helper medio, $news.medio}') no-repeat;">
<a href="{xen:link 'full:media/popout', $news.medio}" class="OverlayTrigger"><img src="styles/8wayrun/EWRmedio_play.png" width="160" height="90" /></a>
</div>
<xen:elseif is="{$news.image}" />
<a href="{xen:link threads, $news}"><img src="{$news.image}" alt="{$news.image}" style="max-height: 150px; max-width: 150px;" /></a>
<xen:else />
<xen:avatar user="$news" size="m" itemprop="photo" />
</xen:if>
</xen:contentcheck>
</div>
</div>
</xen:if>
</xen:if>

<div class="messageContent baseHtml">
<div class="postedBy">
<span class="posted iconKey"><div class="sticky"></div>{xen:phrase by_x_at_y,
'user=<a href="{xen:link members, $news}" class="username">{$news.username}</a>',
'date=<a href="{xen:link threads, $news}">{xen:time $news.post_date, 'absolute'}</a>'}</span>
<span class="views">({xen:number $news.view_count} {xen:phrase views} / {xen:number $news.first_post_likes} {xen:phrase likes})</span>
<span class="comments iconKey"><div class="new"></div><a href="{xen:link threads/unread, $news}">{xen:number $news.reply_count} {xen:phrase comments}</a></span>
</div>

<div class="newsText">{xen:raw $news.messageHtml}</div>
<div class="clearFix"></div>
</div>

<div class="sectionFooter">
<xen:if is="{$option.social}">
<xen:if hascontent="true">
<div class="sharePage">
<xen:require css="share_page.css" />

<xen:contentcheck>
<xen:hook name="recentnews_share_page_options" params="{xen:array 'url={xen:link canonical:threads, $news}'}">
<xen:if is="{$xenOptions.tweet.enabled}">
<div class="tweet shareControl">
<a href="http://twitter.com/share" class="twitter-share-button"
data-count="horizontal"
data-lang="{xen:helper twitterLang, $visitorLanguage.language_code}"
data-url="{xen:link canonical:threads, $news}"
{xen:if {$news.title}, 'data-text="{$news.title}"'}
{xen:if {$xenOptions.tweet.via}, 'data-via="{$xenOptions.tweet.via}"'}
{xen:if {$xenOptions.tweet.related}, 'data-related="{$xenOptions.tweet.related}"'}>{xen:phrase tweet}</a>
</div>
</xen:if>
<xen:if is="{$xenOptions.plusone}">
<div class="plusone shareControl">
<div class="g-plusone" data-size="medium" data-count="true" data-href="{xen:link canonical:threads, $news}" data-lang="{$visitorLanguage.language_code}"></div>
</div>
</xen:if>
<xen:if is="{$xenOptions.facebookLike}">
<div class="facebookLike shareControl">
<xen:container var="$facebookSdk">1</xen:container>
<fb:like href="{xen:link canonical:threads, $news}" layout="button_count" action="{$xenOptions.facebookLikeAction}" font="trebuchet ms" colorscheme="@fbColorScheme"></fb:like>
</div>
</xen:if>
</xen:hook>
</xen:contentcheck>
</div>
</xen:if>
<xen:else />
<div class="source">
{xen:phrase discussion_in_x_started_by_y_date_z, 'forum=<a href="{xen:link forums, $news}">{$news.node_title}</a>', 'name=<a href="{xen:link members, $news}" class="username">{$news.username}</a>', 'date=<a href="{xen:link threads, $news}">{xen:datetime $news.post_date, html}</a>'}
</div>
</xen:if>

<div class="continue">
<a class="iconKey" href="{xen:link threads, $news}">
<div class="redirect"></div>
{xen:phrase continue_reading}
</a>
</div>
</div>
</div>
</div>
</xen:foreach>

<xen:if hascontent="true">
<div class="section sectionMain">
<xen:contentcheck>
<xen:if is="{$option.pagenav} && {$option.count} > {$option.limit}">
<xen:if is="{$category}">
<xen:pagenav link="articles" linkdata="{$category}" page="{$page}" perpage="{$option.limit}" total="{$option.count}" />
<xen:else />
<xen:pagenav link="portal" page="{$page}" perpage="{$option.limit}" total="{$option.count}" />
</xen:if>
</xen:if>
</xen:contentcheck>
</div>
</xen:if>
</div>

Mình xin trích từng phần đễ diễn giải cho các bạn thật dể hiểu từ code trên.

<xen:foreach loop="$RecentNews" value="$news">content</xen:foreach>

Đây là code vòng lặp của recentnews (màu đỏ), content là phần nội dung sẽ hiển thị bên trong (màu xanh). Khi bạn chọn option cho 1 block để hiển thị node và số bài viết trong node đó hiển thị ở portal, thì phần content này sẽ là phần hiển thị, ví dụ tôi chọn node rao vặt, chỉnh bài hiển thị là 5 thì khi ở portal sẽ hiển thị là 5 bài viết. Xem hình nhé, mình lấy trang zing.vn làm cơ bản ví dụ khi thể hiện:

Tiếp tục mình nói đến phần content này trong temp recentnews:

<a href="{xen:link threads, $news}"><xen:Datetime time="$news.promote_date" /></a>
<xen:if is="{$visitor.permissions.EWRporta.canPromote}">
&nbsp; (<a href="{xen:link 'threads/edit', $news}" class="OverlayTrigger">{xen:Phrase edit}</a>)
</xen:if>

Đây là phần code để tạo nút edit cho bài viết!

<h2><a href="{xen:link threads, $news}" class="newsTitle">{xen:helper threadPrefix, $news}{$news.title}</a></h2>

Đây là tiêu đề của bài viết

<div class="newsMonth heading">{$news.month}</div>

<div class="newsDay">{$news.day}</div>

Phần này lấy tháng và ngày bài viết được đăng.

<xen:if hascontent="true">
<div class="messageUserBlock">
<div class="avatarHolder">
<xen:contentcheck>
<xen:if is="{$news.attach}">
<a href="{xen:link threads, $news}"><img src="{$news.attach.thumbnailUrl}" alt="{$news.attach.filename}" /></a>
<xen:elseif is="{$news.medio}" />
<div style="background: url('{xen:helper medio, $news.medio}') no-repeat;">
<a href="{xen:link 'full:media/popout', $news.medio}" class="OverlayTrigger"><img src="styles/8wayrun/EWRmedio_play.png" width="160" height="90" /></a>
</div>
<xen:elseif is="{$news.image}" />
<a href="{xen:link threads, $news}"><img src="{$news.image}" alt="{$news.image}" style="max-height: 150px; max-width: 150px;" /></a>
<xen:else />
<xen:avatar user="$news" size="m" itemprop="photo" />
</xen:if>
</xen:contentcheck>
</div>
</div>
</xen:if>

Đây là phần lấy ảnh trong bài viết ra làm thumb, trong đoạn code này ta thấy sẽ có lựa chọn 1 trong 3 loại img sẽ được lấy ra, gồm:
* Màu đỏ: Sẽ lấy ảnh att của bài viết ra làm thumb, nếu không có sẽ đến loại 2;
* Màu xanh: Sẽ lấy ảnh từ link hình của bài viết ra làm thumb, nếu không có sẽ đến loại 3;
* Màu cam: Nếu không có 2 dạng hình trên sẽ lấy avatar của người viết bài làm thumb
Các bạn chú ý có thể đặt width và height cho phù hợp với block của mình tại đoạn code trên cho thumb hình nhé! Có thể phối hợp với timbthumb cắt ảnh đẹp hơn. Xem tại đây: http://vxf.vn/threads/tut-su-dung-timthumb-trong-xenforo.8099/

<div class="postedBy">
<span class="posted iconKey"><div class="sticky"></div>{xen:Phrase by_x_at_y,'user=<a href="{xen:link members, $news}" class="username">{$news.username}</a>',
'date=<a href="{xen:link threads, $news}">{xen:time $news.post_date, 'absolute'}</a>'}</span>
<span class="views">({xen:number $news.view_count} {xen:Phrase views} / {xen:number $news.first_post_likes} {xen:Phrase likes})</span>
<span class="comments iconKey"><div class="new"></div><a href="{xen:link threads/unread, $news}">{xen:number $news.reply_count} {xen:Phrase comments}</a></span>
</div>

Code này hiển thị tên người gởi (màu đỏ), Ngày tháng gửi (màu xanh), lượt like của bài viết (màu cam), lượt comment (màu tím)

<div class="newsText">{xen:raw $news.messageHtml}</div>

Đây là code chứa đoạn text của bài viết, các bạn có thể giới hạn trong option nhé!

<xen:if is="{$option.social}">
<xen:if hascontent="true">
<div class="sharePage">
<xen:require css="share_page.css" />

<xen:contentcheck>
<xen:hook name="recentnews_share_page_options" params="{xen:array 'url={xen:link canonical:threads, $news}'}">
<xen:if is="{$xenOptions.tweet.enabled}">
<div class="tweet shareControl">
<a href="http://twitter.com/share" class="twitter-share-button"
data-count="horizontal"
data-lang="{xen:helper twitterLang, $visitorLanguage.language_code}"
data-url="{xen:link canonical:threads, $news}"
{xen:if {$news.title}, 'data-text="{$news.title}"'}
{xen:if {$xenOptions.tweet.via}, 'data-via="{$xenOptions.tweet.via}"'}
{xen:if {$xenOptions.tweet.related}, 'data-related="{$xenOptions.tweet.related}"'}>{xen:Phrase tweet}</a>
</div>
</xen:if>
<xen:if is="{$xenOptions.plusone}">
<div class="plusone shareControl">
<div class="g-plusone" data-size="medium" data-count="true" data-href="{xen:link canonical:threads, $news}" data-lang="{$visitorLanguage.language_code}"></div>
</div>
</xen:if>
<xen:if is="{$xenOptions.facebookLike}">
<div class="facebookLike shareControl">
<xen:container var="$facebookSdk">1</xen:container>
<fb:like href="{xen:link canonical:threads, $news}" layout="button_count" action="{$xenOptions.facebookLikeAction}" font="trebuchet ms" colorscheme="@fbColorScheme"></fb:like>
</div>
</xen:if>
</xen:hook>
</xen:contentcheck>
</div>
</xen:if>
<xen:else />
<div class="source">
{xen:Phrase discussion_in_x_started_by_y_date_z, 'forum=<a href="{xen:link forums, $news}">{$news.node_title}</a>', 'name=<a href="{xen:link members, $news}" class="username">{$news.username}</a>', 'date=<a href="{xen:link threads, $news}">{xen:Datetime $news.post_date, html}</a>'}
</div>
</xen:if>

Code này thể hiện sharepage cho bài viết bao gồm: G+, facebook, twitter.

<div class="continue">
<a class="iconKey" href="{xen:link threads, $news}">
<div class="redirect"></div>
{xen:Phrase continue_reading}
</a>
</div>

Đây là phần tạo chữ continue hoặc xem tiếp và có link là đến bài viết đó.

<xen:if hascontent="true">
<div class="section sectionMain">
<xen:contentcheck>
<xen:if is="{$option.pagenav} && {$option.count} > {$option.limit}">
<xen:if is="{$category}">
<xen:Pagenav link="articles" linkdata="{$category}" page="{$page}" perpage="{$option.limit}" total="{$option.count}" />
<xen:else />
<xen:Pagenav link="portal" page="{$page}" perpage="{$option.limit}" total="{$option.count}" />
</xen:if>
</xen:if>
</xen:contentcheck>
</div>
</xen:if>

Code thể hiện phân trang cho block recent!

Tạm hết phần 1 đến đây! Phần 2 sẽ hướng dẫn gồm:
- Cách chỉnh css cho các block;
- Tư duy bố cục block cho giống với 1 site tin tức.

p/s: có những phần hiển thị mặt cười là do bbcode của xenforo, nó chính là ":" và "p"

Chúc các bạn vui! Like mạnh nếu cảm thấy hữu ích nhé

 

[Dinh Nhan]

Đất nền vsip

 

[Vu Hoang]

chẳng download đc xenportal từ link đầu tiên, bùn ghê. Bạn có thể tải giúp mình 1 bản vào đây đc ko?
Thank you!