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

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)

Mã:

<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.

-

Đâ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:

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

-

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

-

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

-

Đâ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://vietxf.org/threads/tut-su-dung-timthumb-trong-xenforo.8099/

-

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)

-

Đâ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é!

-

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

-

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

-

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é

 

Hay, không có time làm chứ nhìn anh hướng dẫn cũng giền, hôm nào rãnh cafe đê anh Truong.

 

Sẽ có dịp mà! Mình đang viết phần 2 cho các bạn đây!

 

bác edit lại bài viết đi phần code bỏ vào thẻ code đi bác

 

cam on ban. thic qua. hih, gio con cho css nua, may cai tren cung da biet roi. bac xem cai cua em xem. demo chu ki

 

Nhờ mod đưa dùm phần ra trước tiêu đề cho các bạn dễ phân biệt nhé!
Cảm ơn!

 

ai co the lam duoc nhu the nay nhi. giao luu cafe luon http://www.giamuasoc.com/

 

Like trước và có thời gian sẽ tìm hiểu ^^
Thank bạn nhiều nhé

 

gi mà tram trong vay ha ban

 

Code toàn đặt trong thẻ Quote

 

Như vầy ảnh hưởng đến forum k bác?

 

đúng là có vấn đề? Thế có nhìn thấy smilies hiện cả trong code không??? Cái 4rum này giờ thấy nhiều người tài giỏi kiểu cậu này quá, người khác nói ra là nhào zô comment ....

 

Thảo luận để có người chưa biết xem chứ em thừ biết bác ak, comment thì sợ tốn tài nguyên ah?

 

phức tạp nhỉ
Mình thì chỉ biết tới firebug thôi

 

code trong quote thì phát sinh vấn đề gì bạn?
Đã nói rõ smilies là do ":" + "p" nó phát sinh, bạn cảm thấy mình ok. làm tut hướng dẫn anh em nhé! đừng để smilies vào! Mình kg có time nên kg chỉnh được! Ngứa con mắt thì "bấm", trình cao hơn làm 1 tut, mình del liền top này!
Cảm ơn bạn!

 

Mới xem lại mấy bài post của bác này, xl anh em forum nói tục nhé! *k* mày, biến gấp nhé, top anh kg chứa cái dạng của mày đâu nhé!
Srry anh em!

 

"Chim khôn kêu tiếng rảnh rang, người khôn nói tiếng dịu dàng dễ nghe"

 

thank. 1 bài bổ ích. đánh dấu nghiên cứu sau

 

- Nhìn tiêu đề cái là đánh dấu trước cái rồi đọc.
- Đúng nhu cầu thị hiếu ghê. Thank thank

 

Người ta có ý tốt mà bạn. Bạn để code trong thẻ quote dễ bị nhiều ký tự trùng ký tự smile nên khi bạn nào đó copy code không để ý sẽ bị lỗi, rồi bạn ấy lại lên topic của bạn hỏi đi hỏi lại có phải mất công bạn ko.
ý bạn ấy muốn bạn để trong thẻ code thì tránh được lỗi này. Đặc biệt là khi bạn làm về tut nào đó mà code phải copy nhiều mà lại dài thì nhiều anh em sẽ ko để ý lỗi trùng ký tự smile đâu. Hoặc có nhiều smile quá sẽ làm cho anh em ngại sửa. Hoặc nhiều anh em mới vào nghề không biết ký tự gì thay thế cho cái smile đó. Và khi copy code của bạn vào cái gì đó như notepad chẳng hạn để chỉnh sửa thì lại rất mất công tìm những chỗ bị lỗi đó...nhất là với những người mới và chưa thạo.
Bạn quá nóng tính rồi