Hướng dẫn nhận diện template và rip skin trên source xenforo

Thảo luận trong 'Development Tutorials' bắt đầu bởi nttruong, 24/9/13.

1votes
5/5, 1 vote

  1. nttruong

    nttruong Well-Known Member

    Bài viết:
    1,518
    Likes :
    776
    Tình hình là dạo này quy ẩn giang hồ, nên không còn thời gian tham gia với anh em nữa! Nay mình lập topic này nhằm hướng dẫn cho anh em newbie hiểu thêm về các loại template có trong xenforo nhằm muốn chỉnh sửa giao diện cũng dễ hơn!

    Và lướt qua 1 số topic về rip skin, vẫn còn nhiều bạn chưa biết cách design cũng như rip các skin từ site khác về, sẵn tiện mình lập luôn topic này để hướng dẫn cụ thể hơn!

    Trong 1 lúc chắc hẳn mình không thể viết được nhiều đến thế, nên khi nào co việc thì tạm ngưng và sẽ viết tiếp theo! Rất mong, anh em check qua khi có sai hoặc thiếu sót thì góp ý thêm cho mình sửa đổi. Topic này mình sẽ làm cho thật dễ hiểu.

    Phần 1: Nhận diện template trong xenforo:

    * PAGE_CONTAINER:

    - Đây là template tổng thể của toàn bộ các trang trên xenforo, nôm na tức là khi bạn code bất cứ gì vào template này thì ở tất cả các trang đều hiển thị.

    Mã:
    <!DOCTYPE html><xen:set var="$isResponsive" value="{xen:if '@enableResponsive AND !{$noResponsive}', 1, 0}" />
    <html id="XenForo" lang="{$visitorLanguage.language_code}" dir="{$visitorLanguage.text_direction}" class="Public {xen:if {$visitor.user_id}, 'LoggedIn', 'LoggedOut'} {xen:if {$sidebar}, 'Sidebar', 'NoSidebar'} {xen:if $hasAutoDeferred, RunDeferred} {xen:if $isResponsive, Responsive, NoResponsive}" xmlns:fb="http://www.facebook.com/2008/fbml">
    <head>
    <xen:hook name="page_container_head">
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
        <xen:if is="{$isResponsive}">
            <meta name="viewport" content="width=device-width, initial-scale=1">
        </xen:if>
        <xen:if is="{$requestPaths.fullBasePath}">
            <base href="{$requestPaths.fullBasePath}" />
            <script><xen:comment>/* Chrome bug and for Google cache */</xen:comment>
                var _b = document.getElementsByTagName('base')[0], _bH = "{xen:jsescape $requestPaths.fullBasePath}";
                if (_b && _b.href != _bH) _b.href = _bH;
            </script>
        </xen:if>
    
        <title><xen:if is="{$title}">{xen:raw $title} | {$xenOptions.boardTitle}<xen:else />{$xenOptions.boardTitle}</xen:if></title>
    
        <noscript><style>.JsOnly { display: none !important; }</style></noscript>
        <link rel="stylesheet" href="css.php?css=xenforo,form,public&amp;style={xen:urlencode $_styleId}&amp;dir={$visitorLanguage.text_direction}&amp;d={$visitorStyle.last_modified_date}" />
        <!--XenForo_Require:CSS-->
        {xen:helper ignoredCss, {$visitor.ignoredUsers}}
    
        <xen:include template="google_analytics" />
        <xen:include template="page_container_js_head" />
    
        <link rel="apple-touch-icon" href="{xen:helper fullurl, @ogLogoPath, 1}" />
        <link rel="alternate" type="application/rss+xml" title="{xen:phrase rss_feed_for_x, 'title={$xenOptions.boardTitle}'}" href="{xen:link forums/-/index.rss}" />
        <xen:if is="{$pageDescription.content} AND !{$pageDescription.skipmeta} AND !{$head.description}"><meta name="description" content="{xen:string wordTrim, {xen:helper stripHtml, {xen:raw $pageDescription.content}}, 200}" /></xen:if>
        <xen:if is="{$head}"><xen:foreach loop="$head" value="$headElement">{xen:raw $headElement}</xen:foreach></xen:if>
    </xen:hook>
    </head>
    
    <body{xen:if {$bodyClasses}, ' class="{$bodyClasses}"'}>
    <xen:hook name="body">
    
    <xen:if is="{$visitor.is_moderator} || {$visitor.is_admin}">
        <xen:include template="moderator_bar" />
    <xen:elseif is="!{$visitor.user_id} && !{$hideLoginBar}" />
        <xen:include template="login_bar" />
    </xen:if>
    
    <div id="headerMover">
        <div id="headerProxy"></div>
    
    <div id="content" class="{$contentTemplate}">
        <div class="pageWidth">
            <div class="pageContent">
                <!-- main content area -->
    
                <xen:hook name="page_container_content_top" />
    
                <xen:if is="{$sidebar}">
                    <div class="mainContainer">
                        <div class="mainContent"></xen:if>
          
                            <xen:include template="ad_above_top_breadcrumb" />
          
                            <xen:hook name="page_container_breadcrumb_top">
                            <div class="breadBoxTop {xen:if $topctrl, withTopCtrl}">
                                <xen:if is="{$topctrl}"><div class="topCtrl">{xen:raw $topctrl}</div></xen:if>
                                <xen:include template="breadcrumb"><xen:set var="$microdata">1</xen:set></xen:include>
                            </div>
                            </xen:hook>
          
                            <xen:include template="ad_below_top_breadcrumb" />
      
                            <!--[if lt IE 8]>
                                <p class="importantMessage">{xen:phrase you_are_using_out_of_date_browser_upgrade}</p>
                            <![endif]-->
    
                            <xen:hook name="page_container_notices">
                            <xen:include template="notices" />      
                            </xen:hook>
          
                            <xen:hook name="page_container_content_title_bar">
                            <xen:if is="!{$noH1}">      
                                <!-- h1 title, description -->
                                <div class="titleBar">
                                    {xen:raw $beforeH1}
                                    <h1><xen:if
                                        is="{$h1}">{xen:raw $h1}<xen:elseif
                                        is="{$title}" />{xen:raw $title}<xen:else
                                        />{$xenOptions.boardTitle}</xen:if></h1>
                  
                                    <xen:if is="{$pageDescription.content}"><p id="pageDescription" class="muted {$pageDescription.class}">{xen:raw $pageDescription.content}</p></xen:if>
                                </div>
                            </xen:if>
                            </xen:hook>
          
                            <xen:include template="ad_above_content" />
          
                            <!-- main template -->
                            {xen:raw $contents}
          
                            <xen:include template="ad_below_content" />
          
                            <xen:if is="!{$visitor.user_id} && !{$hideLoginBar}">
                                <!-- login form, to be moved to the upper drop-down -->
                                <xen:include template="login_bar_form" />
                            </xen:if>
          
                        <xen:if is="{$sidebar}"></div>
                    </div>
    
                    <!-- sidebar -->
                    <aside>
                        <div class="sidebar">
                            <xen:hook name="page_container_sidebar">
                            <xen:include template="ad_sidebar_top" />
                            <xen:if is="!{$noVisitorPanel}"><xen:include template="sidebar_visitor_panel" /></xen:if>
                            {xen:raw $sidebar}
                            <xen:include template="ad_sidebar_bottom" />
                            </xen:hook>
                        </div>
                    </aside>
                </xen:if>
    
                <xen:hook name="page_container_breadcrumb_bottom">
                <div class="breadBoxBottom"><xen:include template="breadcrumb" /></div>
                </xen:hook>
          
                <xen:include template="ad_below_bottom_breadcrumb" />
          
            </div>
        </div>
    </div>
    
    <header>
        <xen:include template="header" />
        <xen:edithint template="navigation" />
        <xen:edithint template="search_bar" />
    </header>
    
    </div>
    
    <footer>
        <xen:include template="footer" />
    </footer>
    
    <xen:include template="page_container_js_body" />
    
    </xen:hook>
    </body>
    </html>
    - Đây là code của style default, mình sẽ chú thích từng phần cho các bạn dể hiểu

    + Từ thẻ <head> đến </head>: chúng ta bỏ qua nhé. Sau này mình sẽ nói rõ thêm!
    + Code này:
    Mã:
    <xen:if is="{$visitor.is_moderator} || {$visitor.is_admin}">
        <xen:include template="moderator_bar" />
    <xen:elseif is="!{$visitor.user_id} && !{$hideLoginBar}" />
        <xen:include template="login_bar" />
    </xen:if>
    >>> Đây là thanh login của chúng ta trên diễn đàn. Khi chúng ta login vào thì thanh này sẽ mất đi và nếu như bạn đăng nhập bằng nick admin hay mod (được phân quyền) thì sẽ được nhìn thấy thanh moderator trên phần top của forum.

    -Tiếp theo:

    Mã:
    <div id="content" class="{$contentTemplate}">
        <div class="pageWidth">
            <div class="pageContent">
                <!-- main content area -->
    >>> Đây là phần mở đầu của toàn bộ phần khung giữa của site. Chúng ta nên lưu ý có rất nhiều template chứ các class "pageWidth" và "pageContent" cho nên khi chúng ta thay đổi css của 2 class này sẽ ảnh hưởng rất nhiều đấy!

    - Code:
    Mã:
    <xen:include template="ad_above_top_breadcrumb" />
             
                            <xen:hook name="page_container_breadcrumb_top">
                            <div class="breadBoxTop {xen:if $topctrl, withTopCtrl}">
                                <xen:if is="{$topctrl}"><div class="topCtrl">{xen:raw $topctrl}</div></xen:if>
                                <xen:include template="breadcrumb"><xen:set var="$microdata">1</xen:set></xen:include>
                            </div>
                            </xen:hook>
             
                            <xen:include template="ad_below_top_breadcrumb" />
    >>>> Đây là code chứa phần breadcrumb của site, từ trên xuống gồm:
    + Gọi template ad_above_top_breadcrumb trên breadcrumb;
    + Gọi template breadcrumb ra;
    + Gọi template ad_above_top_breadcrumb dưới breadcrumb.

    - Tiếp theo:
    Mã:
    <xen:hook name="page_container_notices">
                            <xen:include template="notices" />         
                            </xen:hook>
    >> Đây là đoạn code gọi template notices ra (tức là phần thông báo mặc định của forum nhé).

    - Code:
    Mã:
    <xen:hook name="page_container_content_title_bar">
                            <xen:if is="!{$noH1}">         
                                <!-- h1 title, description -->
                                <div class="titleBar">
                                    {xen:raw $beforeH1}
                                    <h1><xen:if
                                        is="{$h1}">{xen:raw $h1}<xen:elseif
                                        is="{$title}" />{xen:raw $title}<xen:else
                                        />{$xenOptions.boardTitle}</xen:if></h1>
                     
                                    <xen:if is="{$pageDescription.content}"><p id="pageDescription" class="muted {$pageDescription.class}">{xen:raw $pageDescription.content}</p></xen:if>
                                </div>
                            </xen:if>
                            </xen:hook>
    >>> Đoạn code này chính là hiển thị thẻ H1 của site, đó chính là Board Title của forum các bạn. Đoạn code chứa id "pageDescription" chính là phần mô tả của thẻ H1 đó nhé!

    -Code:
    Mã:
    <!-- sidebar -->
                    <aside>
                        <div class="sidebar">
                            <xen:hook name="page_container_sidebar">
                            <xen:include template="ad_sidebar_top" />
                            <xen:if is="!{$noVisitorPanel}"><xen:include template="sidebar_visitor_panel" /></xen:if>
                            {xen:raw $sidebar}
                            <xen:include template="ad_sidebar_bottom" />
                            </xen:hook>
                        </div>
                    </aside>
    >>> Đây là đoạn code chứa phần sidebar của site nhé!, bên trong bao gồm"
    + Gọi template ad_sidebar_top trên sidebar;
    + Gọi các phần nội dung sidebar, các template muốn hiển thị trên phần này như: sidebar_visitor_panel, ...
    + Gọi template ad_sidebar_bottom dưới sidebar

    - Code:
    Mã:
    <xen:hook name="page_container_breadcrumb_bottom">
                <div class="breadBoxBottom"><xen:include template="breadcrumb" /></div>
                </xen:hook>
    >> Đoạn code chứa template breadcrum dưới bottom.

    - Code:
    Mã:
    <header>
        <xen:include template="header" />
        <xen:edithint template="navigation" />
        <xen:edithint template="search_bar" />
    </header>
    >>> Đoạn này là phần header, bao gồm logo, banner, search (tìm kiếm), thanh menu navigate.
    Các bạn khi nào nghĩ tại sao đoạn code này được hiển thị ở phần trên top của site. nhưng sao lại nằm dưới này không? Lý do là đoạn code này được mặc định css của nó theo thành phần "absolute" nên để đâu cũng được! Còn "absolute là gì" thì mình xin nói sau với đoạn css vậy!

    -Code:
    Mã:
    <footer>
        <xen:include template="footer" />
    </footer>
    
    <xen:include template="page_container_js_body" />
    >>> Đầy là phần footer của forum và <xen:include template="page_container_js_body" /> chính là các js mà chúng ta copy vào đây đề thực thi nhé!

    Đến đây là xong template Page_Container nhé các bạn! Các bạn nhanh trí có thể để ý thấy ở template này, chúng ta có thể hoán đổi các vị trí của các template con trong đây để thể hiện những phần chúng ta cần, ví dụ như: tôi thích đưa breadcrum lên trên cả sidebar, hoặc thanh menu navigate nằm dưới phần breadcrumb chẳng hạn, ....!

    * Forum_list:

    [​IMG]
    Đây là đoạn template chứa bao gồm các node của forum, chính là bộ mặt của diễn đàn chúng ta (bên VBB gọi là forum home đấy các bạn)
    Code default như sau:
    Mã:
    <xen:h1>{$xenOptions.boardTitle}</xen:h1>
    
    <xen:container var="$head.canonical"><link rel="canonical" href="{xen:link 'canonical:forums'}" /></xen:container>
    <xen:if is="{$xenOptions.boardDescription}"><xen:container var="$head.description">
        <meta name="description" content="{$xenOptions.boardDescription}" /></xen:container></xen:if>
    <xen:container var="$head.openGraph">
        <xen:include template="open_graph_meta">
            <xen:set var="$url">{xen:link 'canonical:forums'}</xen:set>
            <xen:set var="$title">{$xenOptions.boardTitle}</xen:set>
            <xen:set var="$ogType">website</xen:set>
        </xen:include></xen:container>
    
    <xen:hook name="forum_list_nodes">
        <xen:if is="{$renderedNodes}"><xen:include template="node_list" /></xen:if>
    </xen:hook>
    
    <xen:sidebar>
        <xen:edithint template="sidebar.css" />
    
        <xen:hook name="forum_list_sidebar">
            <xen:include template="sidebar_online_users" />
    
            <!-- block: forum_stats -->
            <div class="section">
                <div class="secondaryContent statsList" id="boardStats">
                    <h3>{xen:phrase forum_statistics}</h3>
                    <div class="pairsJustified">
                        <dl class="discussionCount"><dt>{xen:phrase discussions}:</dt>
                            <dd>{xen:number $boardTotals.discussions}</dd></dl>
                        <dl class="messageCount"><dt>{xen:phrase messages}:</dt>
                            <dd>{xen:number $boardTotals.messages}</dd></dl>
                        <dl class="memberCount"><dt>{xen:phrase members_count}:</dt>
                            <dd>{xen:number $boardTotals.users}</dd></dl>
                        <dl><dt>{xen:phrase latest_member}:</dt>
                            <dd><xen:username user="$boardTotals.latestUser" /></dd></dl>
                        <!-- slot: forum_stats_extra -->
                    </div>
                </div>
            </div>
            <!-- end block: forum_stats -->
    
            <xen:include template="sidebar_share_page">
                <xen:set var="$url">{xen:link canonical:forums}</xen:set>
            </xen:include>
    
        </xen:hook>
    </xen:sidebar>
    - Giải thích code:
    Mã:
    <xen:h1>{$xenOptions.boardTitle}</xen:h1>
    
    <xen:container var="$head.canonical"><link rel="canonical" href="{xen:link 'canonical:forums'}" /></xen:container>
    <xen:if is="{$xenOptions.boardDescription}"><xen:container var="$head.description">
        <meta name="description" content="{$xenOptions.boardDescription}" /></xen:container></xen:if>
    <xen:container var="$head.openGraph">
        <xen:include template="open_graph_meta">
            <xen:set var="$url">{xen:link 'canonical:forums'}</xen:set>
            <xen:set var="$title">{$xenOptions.boardTitle}</xen:set>
            <xen:set var="$ogType">website</xen:set>
        </xen:include></xen:container>
    >>>Đây là đoạn code thể hiện thẻ H1 của forum, bao gồm tiêu đề và mô tảủaủa diễn đàn đó.

    - Tiếp:
    Mã:
    <xen:hook name="forum_list_nodes">
        <xen:if is="{$renderedNodes}"><xen:include template="node_list" /></xen:if>
    </xen:hook>  
    >>>>Đoạn code gọi template "node_list", nhằm gọi các box của chúng ta thể hiện ra ngoài.

    -Code:
    Mã:
    <xen:edithint template="sidebar.css" />
    
        <xen:hook name="forum_list_sidebar">
            <xen:include template="sidebar_online_users" />
    
            <!-- block: forum_stats -->
            <div class="section">
                <div class="secondaryContent statsList" id="boardStats">
                    <h3>{xen:phrase forum_statistics}</h3>
                    <div class="pairsJustified">
                        <dl class="discussionCount"><dt>{xen:phrase discussions}:</dt>
                            <dd>{xen:number $boardTotals.discussions}</dd></dl>
                        <dl class="messageCount"><dt>{xen:phrase messages}:</dt>
                            <dd>{xen:number $boardTotals.messages}</dd></dl>
                        <dl class="memberCount"><dt>{xen:phrase members_count}:</dt>
                            <dd>{xen:number $boardTotals.users}</dd></dl>
                        <dl><dt>{xen:phrase latest_member}:</dt>
                            <dd><xen:username user="$boardTotals.latestUser" /></dd></dl>
                        <!-- slot: forum_stats_extra -->
                    </div>
                </div>
            </div>
            <!-- end block: forum_stats -->
    
            <xen:include template="sidebar_share_page">
                <xen:set var="$url">{xen:link canonical:forums}</xen:set>
            </xen:include>
    
        </xen:hook>
    </xen:sidebar>
    >>>Đoạn code gọi sidebar ra, bao gồm thành viên online, thống kê forum ,...

    *Forum_view:
    [​IMG]

    Như chúng ta thấy thì forum_view chính là page thể hiện các node con của 1 box!!
    -Phân tích code:
    Mã:
    <xen:title>{$forum.title}{xen:helper pagenumber, $page}</xen:title>
    <xen:h1>{$forum.title}</xen:h1>
    
    <xen:if is="{$forum.description} AND @threadListDescriptions">
        <xen:description class="baseHtml">{xen:raw $forum.description}</xen:description>
    </xen:if>
    
    <xen:navigation>
        <xen:breadcrumb source="$nodeBreadCrumbs" />
    </xen:navigation>
    
    <xen:container var="$head.canonical">
        <link rel="canonical" href="{xen:link 'canonical:forums', $forum, 'page={$page}'}" /></xen:container>
    
    <xen:container var="$head.rss">
        <link rel="alternate" type="application/rss+xml" title="{xen:phrase rss_feed_for_x, 'title={$forum.title}'}" href="{xen:link forums/index.rss, $forum}" /></xen:container>
    
    <xen:container var="$head.openGraph"><xen:include template="open_graph_meta">
        <xen:set var="$url">{xen:link 'canonical:forums', $forum}</xen:set>
        <xen:set var="$title">{$forum.title}</xen:set>
    </xen:include></xen:container>
    
    <xen:container var="$quickNavSelected">node-{$forum.node_id}</xen:container>
    <xen:container var="$bodyClasses">{xen:helper nodeClasses, $nodeBreadCrumbs, $forum}</xen:container>
    <xen:container var="$searchBar.forum"><xen:include template="search_bar_forum_only" /></xen:container>
    
    <xen:if is="{$canPostThread}">
        <xen:set var="$newDiscussionButton"><a href="{xen:link 'forums/create-thread', $forum}" class="callToAction"><span>{xen:phrase post_new_thread}</span></a></xen:set>
        <xen:if is="!{$renderedNodes}">
            <xen:topctrl>{xen:raw $newDiscussionButton}</xen:topctrl>
        </xen:if>
    </xen:if>
    
    <xen:if is="{$showPostedNotice}">
        <div class="importantMessage">{xen:phrase message_submitted_displayed_pending_approval}</div>
    </xen:if>
    
    <xen:if is="{$renderedNodes}">
        <xen:include template="ad_forum_view_above_node_list" />
        <xen:include template="node_list" />
        <xen:if is="{$newDiscussionButton}">
            <div class="nodeListNewDiscussionButton">{xen:raw $newDiscussionButton}</div>
        </xen:if>
    </xen:if>
    
    <xen:hook name="forum_view_pagenav_before" params="{xen:array 'forum={$forum}'}" />
    
    <xen:include template="ad_forum_view_above_thread_list" />
    
    <div class="pageNavLinkGroup">
    
        <div class="linkGroup SelectionCountContainer">
            <xen:if is="{$canWatchForum}">
                <a href="{xen:link 'forums/watch', $forum}" class="OverlayTrigger" data-cacheOverlay="false">{xen:if $forum.forum_is_watched, '{xen:phrase unwatch_forum}', '{xen:phrase watch_forum}'}</a>
            </xen:if>
        </div>
    
        <xen:pagenav link="forums" linkdata="{$forum}" linkparams="{$pageNavParams}" page="{$page}" perpage="{$threadsPerPage}" total="{$totalThreads}" />
    
    </div>
    
    <xen:hook name="forum_view_threads_before" params="{xen:array 'forum={$forum}'}" />
    
    <div class="discussionList section sectionMain">
        <xen:include template="thread_list" />
    </div>
    
    <div class="pageNavLinkGroup afterDiscussionListHandle">
        <div class="linkGroup">
            <xen:if is="{$canPostThread}">
                <a href="{xen:link 'forums/create-thread', $forum}" class="callToAction"><span>{xen:phrase post_new_thread}</span></a>
            <xen:elseif is="{$visitor.user_id}" />
                <span class="element">({xen:phrase no_permission_to_post})</span>
            <xen:else />
                <label for="LoginControl"><a href="{xen:link login}" class="concealed element">({xen:phrase log_in_or_sign_up_to_post})</a></label>
            </xen:if>
        </div>
        <div class="linkGroup"{xen:if '!{$ignoredNames}', ' style="display: none"'}><a href="javascript:" class="muted jsOnly DisplayIgnoredContent Tooltip" title="{xen:phrase show_hidden_content_by_x, "names={xen:helper implode, $ignoredNames, ', '}"}">{xen:phrase show_ignored_content}</a></div>
    
        <xen:pagenav link="forums" linkdata="{$forum}" linkparams="{$pageNavParams}" page="{$page}" perpage="{$threadsPerPage}" total="{$totalThreads}" />
    </div>
    >>> Mở đầu đoạn code, đây chính là thẻ tiêu đề và mô tả của forum này.

    -Code:
    Mã:
    <xen:navigation>
        <xen:breadcrumb source="$nodeBreadCrumbs" />
    </xen:navigation>
    >>>Thể hiện vị trí breadcrumbs của forum đó.

    -Tiếp:
    Mã:
    <xen:if is="{$renderedNodes}">
        <xen:include template="ad_forum_view_above_node_list" />
        <xen:include template="node_list" />
        <xen:if is="{$newDiscussionButton}">
            <div class="nodeListNewDiscussionButton">{xen:raw $newDiscussionButton}</div>
        </xen:if>
    </xen:if>
    >>> Gọi template "ad_forum_view_above_node_list" (đây đa phần chúng ta sẽ chèn quảng cáo) và các mục forum con thể hiện ta trong node này.

    -Code:
    Mã:
    <div class="pageNavLinkGroup">
    
        <div class="linkGroup SelectionCountContainer">
            <xen:if is="{$canWatchForum}">
                <a href="{xen:link 'forums/watch', $forum}" class="OverlayTrigger" data-cacheOverlay="false">{xen:if $forum.forum_is_watched, '{xen:phrase unwatch_forum}', '{xen:phrase watch_forum}'}</a>
            </xen:if>
        </div>
    
        <xen:pagenav link="forums" linkdata="{$forum}" linkparams="{$pageNavParams}" page="{$page}" perpage="{$threadsPerPage}" total="{$totalThreads}" />
    
    </div>
    >>>Code này thể hiện thanh công cụ trên top của page forum_view, bao gồm, tool, số trang, ...

    -Code:
    Mã:
    <div class="discussionList section sectionMain">
        <xen:include template="thread_list" />
    </div>
    >>>Code này thể hiện các template "thread_list", tức là các topic được lập trong forum này.

    -Code cuối cùng:
    Mã:
    <div class="pageNavLinkGroup afterDiscussionListHandle">
        <div class="linkGroup">
            <xen:if is="{$canPostThread}">
                <a href="{xen:link 'forums/create-thread', $forum}" class="callToAction"><span>{xen:phrase post_new_thread}</span></a>
            <xen:elseif is="{$visitor.user_id}" />
                <span class="element">({xen:phrase no_permission_to_post})</span>
            <xen:else />
                <label for="LoginControl"><a href="{xen:link login}" class="concealed element">({xen:phrase log_in_or_sign_up_to_post})</a></label>
            </xen:if>
        </div>
        <div class="linkGroup"{xen:if '!{$ignoredNames}', ' style="display: none"'}><a href="javascript:" class="muted jsOnly DisplayIgnoredContent Tooltip" title="{xen:phrase show_hidden_content_by_x, "names={xen:helper implode, $ignoredNames, ', '}"}">{xen:phrase show_ignored_content}</a></div>
    
        <xen:pagenav link="forums" linkdata="{$forum}" linkparams="{$pageNavParams}" page="{$page}" perpage="{$threadsPerPage}" total="{$totalThreads}" />
    </div>
    >>> Code của thanh công cụ cuối page như trên.

    * THREAD_LIST:
    Mã:
    <xen:require css="discussion_list.css" />
    <xen:require js="js/xenforo/discussion_list.js" />
    
    <form action="{xen:link inline-mod/thread/switch}" method="post"
        class="DiscussionList InlineModForm"
        data-cookieName="threads"
        data-controls="#InlineModControls"
        data-imodOptions="#ModerationSelect option">
     
        <xen:if hascontent="true">
            <div class="discussionListFilters secondaryContent">
                <h3 class="filtersHeading">{xen:phrase filters}:</h3>
                <dl class="pairsInline filterPairs">
                <xen:contentcheck>
                <xen:if is="{$displayConditions.prefix_id}">
                    <dt>{xen:phrase prefix}:</dt>
                    <dd><a href="{xen:link forums, $forum, '_params={$pageNavParams}', 'prefix_id='}" class="removeFilter Tooltip" title="{xen:phrase remove_filter}">{xen:helper threadPrefix, $displayConditions.prefix_id, escaped, ''} <span class="gadget">x</span></a></dd>
                </xen:if>
                </xen:contentcheck>
                </dl>
                <dl class="pairsInline removeAll">
                    <dt>{xen:phrase remove_all_filters}:</dt>
                    <dd><a href="{xen:link forums, $forum, 'order={$pageNavParams.order}', 'direction={$pageNavParams.direction}'}" class="removeAllFilters Tooltip" title="{xen:phrase remove_all_filters}">x</a></dd>
                </dl>
            </div>
        </xen:if>
    
        <dl class="sectionHeaders">
            <dt class="posterAvatar"><a><span>{xen:phrase sort_by}:</span></a></dt>
            <dd class="main">
                <a href="{xen:link forums, $forum, '_params={$orderParams.title}'}" class="title"><span>{xen:phrase title}{xen:helper sortArrow, $order, $orderDirection, title}</span></a>
                <a href="{xen:link forums, $forum, '_params={$orderParams.post_date}'}" class="postDate"><span>{xen:phrase start_date}{xen:helper sortArrow, $order, $orderDirection, post_date}</span></a>
            </dd>
            <dd class="stats">
                <a href="{xen:link forums, $forum, '_params={$orderParams.reply_count}'}" class="major"><span>{xen:phrase replies}{xen:helper sortArrow, $order, $orderDirection, reply_count}</span></a>
                <a href="{xen:link forums, $forum, '_params={$orderParams.view_count}'}" class="minor"><span>{xen:phrase views}{xen:helper sortArrow, $order, $orderDirection, view_count}</span></a>
            </dd>
            <dd class="lastPost"><a href="{xen:link forums, $forum, '_params={$orderParams.last_post_date}'}"><span>{xen:phrase last_message}{xen:helper sortArrow, $order, $orderDirection, last_post_date}</span></a></dd>
        </dl>
    
        <ol class="discussionListItems">
        <xen:if is="{$stickyThreads} OR {$threads}">
            <xen:set var="$showLastPageNumbers">1</xen:set>
            <xen:set var="$linkPrefix">1</xen:set>
     
            <xen:hook name="thread_list_stickies">
            <xen:foreach loop="$stickyThreads" value="$thread">
                <xen:include template="thread_list_item" />
            </xen:foreach>
            </xen:hook>
         
            <xen:include template="ad_thread_list_below_stickies" />
         
            <xen:hook name="thread_list_threads">
            <xen:foreach loop="$threads" value="$thread">
                <xen:include template="thread_list_item" />
            </xen:foreach>
            </xen:hook>
         
            <xen:edithint template="thread_list_item_edit" />
        <xen:else />
            <li class="primaryContent">{xen:phrase there_no_threads_to_display}</li>
        </xen:if>
        </ol>
    
        <xen:if is="{$totalThreads} OR {$inlineModOptions}">
            <div class="sectionFooter InlineMod SelectionCountContainer">
                <xen:if is="{$totalThreads}"><span class="contentSummary">{xen:phrase showing_threads_x_to_y_of_z, 'start={xen:number $threadStartOffset}', 'end={xen:number $threadEndOffset}', 'total={xen:number $totalThreads}'}</span></xen:if>
    
                <xen:if is="{$inlineModOptions}">
                    <xen:include template="inline_mod_controls_thread" />
                </xen:if>
            </div>
        </xen:if>
    
        <input type="hidden" name="_xfToken" value="{$visitor.csrf_token_page}" />
    </form>
    
    <h3 id="DiscussionListOptionsHandle" class="JsOnly"><a href="#">{xen:phrase thread_display_options}</a></h3>
    
    <form action="{xen:link 'forums', $forum}" method="post" class="DiscussionListOptions secondaryContent">
    
        <xen:hook name="thread_list_options">
        <div class="controlGroup">
            <label for="ctrl_order">{xen:phrase sort_threads_by}:</label>
            <select name="order" id="ctrl_order" class="textCtrl">
                <option value="last_post_date" {xen:selected "{$order} == 'last_post_date'"}>{xen:phrase last_message_time}</option>
                <option value="post_date" {xen:selected "{$order} == 'post_date'"}>{xen:phrase thread_creation_time}</option>
                <option value="title" {xen:selected "{$order} == 'title'"}>{xen:phrase title_alphabetical}</option>
                <option value="reply_count" {xen:selected "{$order} == 'reply_count'"}>{xen:phrase number_of_replies}</option>
                <option value="view_count" {xen:selected "{$order} == 'view_count'"}>{xen:phrase number_of_views}</option>
                <option value="first_post_likes" {xen:selected "{$order} == 'first_post_likes'"}>{xen:phrase first_message_likes}</option>
            </select>
        </div>
    
        <div class="controlGroup">
            <label for="ctrl_direction">{xen:phrase order_threads_in}:</label>
            <select name="direction" id="ctrl_direction" class="textCtrl">
                <option value="desc" {xen:selected "{$orderDirection} == 'desc'"}>{xen:phrase descending_order}</option>
                <option value="asc" {xen:selected "{$orderDirection} == 'asc'"}>{xen:phrase ascending_order}</option>
            </select>
        </div>
     
        <xen:if is="{$forum.prefixCache}">
            <div class="controlGroup">
                <label for="ctrl_prefix_id">{xen:phrase prefix}:</label>
                <select name="prefix_id" id="ctrl_prefix_id" class="textCtrl">
                    <option value="0" {xen:selected '!{$displayConditions.prefix_id}'}>({xen:phrase any})</option>
                    <xen:foreach loop="$forum.prefixCache" key="$prefixGroupId" value="$prefixes">
                        <xen:if is="{$prefixGroupId}">
                            <optgroup label="{xen:helper threadPrefixGroup, $prefixGroupId}">
                            <xen:foreach loop="$prefixes" value="$prefixId">
                                <option value="{$prefixId}" {xen:selected '{$displayConditions.prefix_id} == {$prefixId}'}>{xen:helper threadPrefix, $prefixId, escaped, ''}</option>
                            </xen:foreach>
                            </optgroup>
                        <xen:else />
                            <xen:foreach loop="$prefixes" value="$prefixId">
                                <option value="{$prefixId}" {xen:selected '{$displayConditions.prefix_id} == {$prefixId}'}>{xen:helper threadPrefix, $prefixId, escaped, ''}</option>
                            </xen:foreach>
                        </xen:if>
                    </xen:foreach>
                </select>
            </div>
        </xen:if>
    
        <div class="buttonGroup">
            <input type="submit" class="button primary" value="{xen:phrase set_options}" />
            <input type="reset" class="button" value="{xen:phrase cancel}" />
        </div>
        </xen:hook>
    
        <input type="hidden" name="_xfToken" value="{$visitor.csrf_token_page}" />
    </form>
    
    <xen:include template="preview_tooltip" />
    >>> đây là template được gọi ra trên template forum_view, nhằm thể hiện các topic được lập trong page đó. Cùng phân tích code nhé!

    -Code:
    Mã:
    <xen:require css="discussion_list.css" />
    <xen:require js="js/xenforo/discussion_list.js" />
    >>>Đây là đoạn code gọi template discussion_list.css và sử dụng css của template này, đồng thời gọi 1 file js là js/xenforo/discussion_list.js.

    -Code:
    Mã:
    <xen:if hascontent="true">
            <div class="discussionListFilters secondaryContent">
                <h3 class="filtersHeading">{xen:phrase filters}:</h3>
                <dl class="pairsInline filterPairs">
                <xen:contentcheck>
                <xen:if is="{$displayConditions.prefix_id}">
                    <dt>{xen:phrase prefix}:</dt>
                    <dd><a href="{xen:link forums, $forum, '_params={$pageNavParams}', 'prefix_id='}" class="removeFilter Tooltip" title="{xen:phrase remove_filter}">{xen:helper threadPrefix, $displayConditions.prefix_id, escaped, ''} <span class="gadget">x</span></a></dd>
                </xen:if>
                </xen:contentcheck>
                </dl>
                <dl class="pairsInline removeAll">
                    <dt>{xen:phrase remove_all_filters}:</dt>
                    <dd><a href="{xen:link forums, $forum, 'order={$pageNavParams.order}', 'direction={$pageNavParams.direction}'}" class="removeAllFilters Tooltip" title="{xen:phrase remove_all_filters}">x</a></dd>
                </dl>
            </div>
        </xen:if>
    
    >>>từ trên xuống, đoạn code này thể hiện bao gồm ô check để sử dụng công cụ của BQT, prefix của topic.

    -Code:
    Mã:
    <dl class="sectionHeaders">
            <dt class="posterAvatar"><a><span>{xen:phrase sort_by}:</span></a></dt>
            <dd class="main">
                <a href="{xen:link forums, $forum, '_params={$orderParams.title}'}" class="title"><span>{xen:phrase title}{xen:helper sortArrow, $order, $orderDirection, title}</span></a>
                <a href="{xen:link forums, $forum, '_params={$orderParams.post_date}'}" class="postDate"><span>{xen:phrase start_date}{xen:helper sortArrow, $order, $orderDirection, post_date}</span></a>
            </dd>
            <dd class="stats">
                <a href="{xen:link forums, $forum, '_params={$orderParams.reply_count}'}" class="major"><span>{xen:phrase replies}{xen:helper sortArrow, $order, $orderDirection, reply_count}</span></a>
                <a href="{xen:link forums, $forum, '_params={$orderParams.view_count}'}" class="minor"><span>{xen:phrase views}{xen:helper sortArrow, $order, $orderDirection, view_count}</span></a>
            </dd>
            <dd class="lastPost"><a href="{xen:link forums, $forum, '_params={$orderParams.last_post_date}'}"><span>{xen:phrase last_message}{xen:helper sortArrow, $order, $orderDirection, last_post_date}</span></a></dd>
        </dl>
    >>>Thể hiện tiêu đề topic, ngày viết , số lượt xem, comment, ....

    -Code:
    Mã:
    <ol class="discussionListItems">
        <xen:if is="{$stickyThreads} OR {$threads}">
            <xen:set var="$showLastPageNumbers">1</xen:set>
            <xen:set var="$linkPrefix">1</xen:set>
     
            <xen:hook name="thread_list_stickies">
            <xen:foreach loop="$stickyThreads" value="$thread">
                <xen:include template="thread_list_item" />
            </xen:foreach>
            </xen:hook>
         
            <xen:include template="ad_thread_list_below_stickies" />
         
            <xen:hook name="thread_list_threads">
            <xen:foreach loop="$threads" value="$thread">
                <xen:include template="thread_list_item" />
            </xen:foreach>
            </xen:hook>
         
            <xen:edithint template="thread_list_item_edit" />
        <xen:else />
            <li class="primaryContent">{xen:phrase there_no_threads_to_display}</li>
        </xen:if>
        </ol>
    >>>Code thể hiện số page của 1 trang và gọi template "thread_list_item" ra.

    -Code:
    Mã:
    <form action="{xen:link 'forums', $forum}" method="post" class="DiscussionListOptions secondaryContent">
    
        <xen:hook name="thread_list_options">
        <div class="controlGroup">
            <label for="ctrl_order">{xen:phrase sort_threads_by}:</label>
            <select name="order" id="ctrl_order" class="textCtrl">
                <option value="last_post_date" {xen:selected "{$order} == 'last_post_date'"}>{xen:phrase last_message_time}</option>
                <option value="post_date" {xen:selected "{$order} == 'post_date'"}>{xen:phrase thread_creation_time}</option>
                <option value="title" {xen:selected "{$order} == 'title'"}>{xen:phrase title_alphabetical}</option>
                <option value="reply_count" {xen:selected "{$order} == 'reply_count'"}>{xen:phrase number_of_replies}</option>
                <option value="view_count" {xen:selected "{$order} == 'view_count'"}>{xen:phrase number_of_views}</option>
                <option value="first_post_likes" {xen:selected "{$order} == 'first_post_likes'"}>{xen:phrase first_message_likes}</option>
            </select>
        </div>
    
        <div class="controlGroup">
            <label for="ctrl_direction">{xen:phrase order_threads_in}:</label>
            <select name="direction" id="ctrl_direction" class="textCtrl">
                <option value="desc" {xen:selected "{$orderDirection} == 'desc'"}>{xen:phrase descending_order}</option>
                <option value="asc" {xen:selected "{$orderDirection} == 'asc'"}>{xen:phrase ascending_order}</option>
            </select>
        </div>
     
        <xen:if is="{$forum.prefixCache}">
            <div class="controlGroup">
                <label for="ctrl_prefix_id">{xen:phrase prefix}:</label>
                <select name="prefix_id" id="ctrl_prefix_id" class="textCtrl">
                    <option value="0" {xen:selected '!{$displayConditions.prefix_id}'}>({xen:phrase any})</option>
                    <xen:foreach loop="$forum.prefixCache" key="$prefixGroupId" value="$prefixes">
                        <xen:if is="{$prefixGroupId}">
                            <optgroup label="{xen:helper threadPrefixGroup, $prefixGroupId}">
                            <xen:foreach loop="$prefixes" value="$prefixId">
                                <option value="{$prefixId}" {xen:selected '{$displayConditions.prefix_id} == {$prefixId}'}>{xen:helper threadPrefix, $prefixId, escaped, ''}</option>
                            </xen:foreach>
                            </optgroup>
                        <xen:else />
                            <xen:foreach loop="$prefixes" value="$prefixId">
                                <option value="{$prefixId}" {xen:selected '{$displayConditions.prefix_id} == {$prefixId}'}>{xen:helper threadPrefix, $prefixId, escaped, ''}</option>
                            </xen:foreach>
                        </xen:if>
                    </xen:foreach>
                </select>
            </div>
        </xen:if>
    
        <div class="buttonGroup">
            <input type="submit" class="button primary" value="{xen:phrase set_options}" />
            <input type="reset" class="button" value="{xen:phrase cancel}" />
        </div>
        </xen:hook>
    
        <input type="hidden" name="_xfToken" value="{$visitor.csrf_token_page}" />
    </form>
    >>> Code này chính là khung lọc bài viết dưới các topic của forum_view.

    *thread_view:
    Mã:
    <xen:title>{xen:helper threadPrefix, $thread, escaped}{$thread.title}{xen:helper pagenumber, $page}</xen:title>
    <xen:h1>{xen:helper threadPrefix, $thread}{$thread.title}</xen:h1>
    
    <xen:description>
        {xen:phrase discussion_in_x_started_by_y_date_z,
            'forum=<a href="{xen:link forums, $forum}">{$forum.title}</a>',
            'name={xen:helper username, $thread}',
            'date=<a href="{xen:link threads, $thread}">{xen:datetime $thread.post_date, html}</a>'}
    </xen:description>
    
    <xen:navigation>
        <xen:breadcrumb source="$nodeBreadCrumbs" />
    </xen:navigation>
    
    <xen:container var="$head.canonical">
        <link rel="canonical" href="{xen:link 'canonical:threads', $thread, 'page={$page}'}" /></xen:container>
    <xen:container var="$head.description">
        <meta name="description" content="{xen:helper snippet, $firstPost.message, 155}" /></xen:container>
    <xen:container var="$head.openGraph"><xen:include template="open_graph_meta">
            <xen:set var="$url">{xen:link 'canonical:threads', $thread}</xen:set>
            <xen:set var="$title">{xen:helper threadPrefix, $thread, escaped}{$thread.title}</xen:set>
            <xen:set var="$avatar">{xen:helper avatar, $thread, m, 0, 1}</xen:set>
        </xen:include></xen:container>
    <xen:container var="$bodyClasses">{xen:helper nodeClasses, $nodeBreadCrumbs, $forum}</xen:container>
    <xen:container var="$searchBar.thread"><xen:include template="search_bar_thread_only" /></xen:container>
    <xen:container var="$searchBar.forum"><xen:include template="search_bar_forum_only" /></xen:container>
    
    <xen:if is="{$canReply}">
        <xen:comment><xen:topctrl>
            <a href="{xen:link 'threads/reply', $thread}" class="callToAction"><span>{xen:phrase reply_to_thread}</span></a>
        </xen:topctrl></xen:comment>
    </xen:if>
    
    <xen:require css="thread_view.css" />
    
    <xen:edithint template="message" />
    
    <xen:if is="{$poll}">
        <xen:include template="poll_block">
            <xen:set var="$options">
                <xen:if is="{$poll.canVote}">
                    <xen:include template="poll_block_vote" />
                <xen:else />
                    <xen:include template="poll_block_result" />
                </xen:if>
            </xen:set>
        </xen:include>
    </xen:if>
    
    <xen:if is="{$showPostedNotice}">
        <div class="importantMessage">{xen:phrase message_submitted_displayed_pending_approval}</div>
    </xen:if>
    
    <xen:set var="$threadStatusHtml">
        <xen:if hascontent="true">
            <dl class="threadAlerts secondaryContent">
                <dt>{xen:phrase thread_status}:</dt>
                <xen:contentcheck>
                    <xen:if is="{$thread.discussion_state} == 'deleted'">
                        <dd class="deletedAlert">
                            <span class="icon Tooltip" title="{xen:phrase deleted}" data-tipclass="iconTip"></span>
                                {xen:phrase removed_from_public_view}</dd>
                    <xen:elseif is="{$thread.discussion_state} == 'moderated'" />
                        <dd class="moderatedAlert">
                            <span class="icon Tooltip" title="{xen:phrase awaiting_moderation}" data-tipclass="iconTip"></span>
                                {xen:phrase awaiting_moderation_before_being_displayed_publicly}</dd>
                    </xen:if>
       
                    <xen:if is="!{$thread.discussion_open}">
                        <dd class="lockedAlert">
                            <span class="icon Tooltip" title="{xen:phrase locked}" data-tipclass="iconTip"></span>
                                {xen:phrase not_open_for_further_replies}</dd>
                    </xen:if>
                </xen:contentcheck>
            </dl>
        </xen:if>
    </xen:set>
    {xen:raw $threadStatusHtml}
    
    <xen:hook name="thread_view_pagenav_before" params="{xen:array 'thread={$thread}'}" />
    
    <div class="pageNavLinkGroup">
        <div class="linkGroup SelectionCountContainer">
            <xen:if hascontent="true">
                <div class="Popup">
                    <a rel="Menu">{xen:phrase thread_tools}</a>
                    <div class="Menu">
                    <xen:contentcheck>
                        <xen:if hascontent="true">
                        <div class="primaryContent menuHeader"><h3>{xen:phrase thread_tools}</h3></div>
                        <ul class="secondaryContent blockLinksList">
                            <xen:contentcheck>
                                <xen:if is="{$canEditThread}">
                                    <li><a href="{xen:link 'threads/edit', $thread}" class="OverlayTrigger">{xen:phrase edit_thread}</a></li>
                                <xen:elseif is="{$canEditTitle}" />
                                    <li><a href="{xen:link threads/edit-title, $thread}" class="OverlayTrigger">{xen:phrase edit_title}</a></li>
                                </xen:if>
                                <xen:if is="{$canDeleteThread}">
                                    <li><a href="{xen:link 'threads/delete', $thread}" class="OverlayTrigger">{xen:phrase delete_thread}</a></li>
                                </xen:if>
                                <xen:if is="{$canMoveThread}">
                                    <li><a href="{xen:link 'threads/move', $thread}" class="OverlayTrigger">{xen:phrase move_thread}</a></li>
                                </xen:if>
                                <xen:if is="{$deletedPosts}">
                                    <li><a href="{xen:link threads/show-posts, $thread, 'page={$page}'}" class="MessageLoader" data-messageSelector="#messageList .message.deleted.placeholder">{xen:phrase show_deleted_posts}</a></li>
                                </xen:if>
                                <xen:hook name="thread_view_tools_links" params="{xen:array 'thread={$thread}'}" />
                            </xen:contentcheck>
                        </ul>
                        </xen:if>
                        <xen:if hascontent="true">
                        <form action="{xen:link threads/quick-update, $thread}" method="post" class="AutoValidator">
                            <ul class="secondaryContent blockLinksList checkboxColumns">
                            <xen:contentcheck>
                                <xen:if is="{$canLockUnlockThread}">
                                <li><label><input type="checkbox" name="discussion_open" value="1" class="SubmitOnChange" {xen:checked $thread.discussion_open} />
                                    {xen:phrase open_thread}</label>
                                    <input type="hidden" name="set[discussion_open]" value="1" /></li></xen:if>
                                <xen:if is="{$canStickUnstickThread}">
                                <li><label><input type="checkbox" name="sticky" value="1" class="SubmitOnChange" {xen:checked $thread.sticky} />
                                    {xen:phrase sticky}</label>
                                    <input type="hidden" name="set[sticky]" value="1" /></li></xen:if>
                            </xen:contentcheck>
                            </ul>
                            <input type="hidden" name="_xfToken" value="{$visitor.csrf_token_page}" />
                        </form>
                        </xen:if>
                        <xen:if is="{$thread.canInlineMod}">
                        <form action="{xen:link inline-mod/thread/switch}" method="post" class="InlineModForm sectionFooter" id="threadViewThreadCheck"
                            data-cookieName="threads">
                            <label><input type="checkbox" name="threads[]" value="{$thread.thread_id}" class="InlineModCheck" /> {xen:phrase select_for_thread_moderation}</label>
                            <input type="hidden" name="_xfToken" value="{$visitor.csrf_token_page}" />
                        </form>
                        </xen:if>
                    </xen:contentcheck>
                    </div>
                </div>
            </xen:if>
            <xen:if is="{$canWatchThread}">
                <a href="{xen:link 'threads/watch-confirm', $thread}" class="OverlayTrigger" data-cacheOverlay="false">{xen:if $thread.thread_is_watched, '{xen:phrase unwatch_thread}', '{xen:phrase watch_thread}'}</a>
            </xen:if>
        </div>
    
        <xen:pagenav link="threads" linkdata="{$thread}"
            page="{$page}" perpage="{$postsPerPage}" total="{$totalPosts}"
            unreadlink="{$unreadLink}" />
    </div>
    
    <xen:include template="ad_thread_view_above_messages" />
    
    <xen:hook name="thread_view_form_before" params="{xen:array 'thread={$thread}'}" />
    
    <form action="{xen:link 'inline-mod/post/switch'}" method="post"
        class="InlineModForm section"
        data-cookieName="posts"
        data-controls="#InlineModControls"
        data-imodOptions="#ModerationSelect option">
    
        <ol class="messageList" id="messageList">
            <xen:foreach loop="$posts" value="$post">
                <xen:if is="{$post.message_state} == 'deleted'">
                    <xen:include template="post_deleted_placeholder" />
                <xen:else />
                    <xen:include template="post" />
                </xen:if>
            </xen:foreach>
            <xen:edithint template="attached_files" />
        </ol>
    
        <xen:if is="{$inlineModOptions}">
            <div class="sectionFooter InlineMod Hide">
                <label for="ModerationSelect">{xen:phrase perform_action_with_selected_posts}...</label>
    
                <xen:include template="inline_mod_controls">
                    <xen:set var="$text">{xen:phrase post_moderation}</xen:set>
                    <xen:set var="$options">
                        <xen:if is="{$inlineModOptions.delete}"><option value="delete">{xen:phrase delete_posts}...</option></xen:if>
                        <xen:if is="{$inlineModOptions.undelete}"><option value="undelete">{xen:phrase undelete_posts}</option></xen:if>
                        <xen:if is="{$inlineModOptions.approve}"><option value="approve">{xen:phrase approve_posts}</option></xen:if>
                        <xen:if is="{$inlineModOptions.unapprove}"><option value="unapprove">{xen:phrase unapprove_posts}</option></xen:if>
                        <xen:if is="{$inlineModOptions.move}"><option value="move">{xen:phrase move_posts}...</option></xen:if>
                        <xen:if is="{$inlineModOptions.merge}"><option value="merge">{xen:phrase merge_posts}...</option></xen:if>
                        <option value="deselect">{xen:phrase deselect_posts}</option>
                    </xen:set>
                    <xen:set var="$checkboxTitle">{xen:phrase select_deselect_all_posts_on_this_page}</xen:set>
                    <xen:set var="$selectedItemsPhrase">{xen:phrase selected_posts}</xen:set>
                </xen:include>
            </div>
        </xen:if>
    
        <input type="hidden" name="_xfToken" value="{$visitor.csrf_token_page}" />
    
    </form>
    
    <xen:if hascontent="true">
        <div class="pageNavLinkGroup">
            <xen:contentcheck>
                <xen:if is="{$canQuickReply}">
                    <xen:if is="{$postsRemaining}">
                        <div class="linkGroup">
                            <xen:if is="{$postsRemaining} == 1">
                                <a href="{xen:link threads, $thread, 'page={xen:calc "{$page} + 1"}'}" class="postsRemaining">{xen:phrase 1_more_message}...</a>
                            <xen:else />
                                <a href="{xen:link threads, $thread, 'page={xen:calc "{$page} + 1"}'}" class="postsRemaining">{xen:phrase x_more_messages, 'count={xen:number $postsRemaining}'}...</a>
                            </xen:if>
                        </div>
                    </xen:if>
                <xen:else />
                    <div class="linkGroup">
                        <xen:if is="{$canReply}">
                            <a href="{xen:link 'threads/reply', $thread}" class="callToAction"><span>{xen:phrase reply_to_thread}</span></a>
                        <xen:elseif is="{$visitor.user_id}" />
                            <span class="element">({xen:phrase no_permission_to_reply})</span>
                        <xen:else />
                            <label for="LoginControl"><a href="{xen:link login}" class="concealed element">({xen:phrase log_in_or_sign_up_to_reply})</a></label>
                        </xen:if>
                    </div>
                </xen:if>
                <div class="linkGroup"{xen:if '!{$ignoredNames}', ' style="display: none"'}><a href="javascript:" class="muted jsOnly DisplayIgnoredContent Tooltip" title="{xen:phrase show_hidden_content_by_x, "names={xen:helper implode, $ignoredNames, ', '}"}">{xen:phrase show_ignored_content}</a></div>
    
                <xen:pagenav link="threads" linkdata="{$thread}"
                    page="{$page}" perpage="{$postsPerPage}" total="{$totalPosts}"
                    unreadlink="{$unreadLink}"
                />
            </xen:contentcheck>
        </div>
    </xen:if>
    
    <xen:include template="ad_thread_view_below_messages" />
    
    <xen:hook name="thread_view_qr_before" params="{xen:array 'thread={$thread}'}" />
    
    <xen:if is="{$canQuickReply}">
        <xen:include template="quick_reply">
            <xen:set var="$formAction">{xen:link 'threads/add-reply', $thread}</xen:set>
            <xen:set var="$lastDate">{$lastPost.post_date}</xen:set>
            <xen:set var="$lastKnownDate">{$thread.last_post_date}</xen:set>
            <xen:set var="$showMoreOptions">1</xen:set>
        </xen:include>
    </xen:if>
    
    <xen:hook name="thread_view_qr_after" params="{xen:array 'thread={$thread}'}" />
    
    {xen:raw $threadStatusHtml}
    
    <xen:include template="share_page">
        <xen:set var="$url">{xen:link 'canonical:threads', $thread}</xen:set>
    </xen:include>
    >>>> Đoạn code thể hiện bài viết của mem.

    -Code:
    Mã:
    <xen:title>{xen:helper threadPrefix, $thread, escaped}{$thread.title}{xen:helper pagenumber, $page}</xen:title>
    <xen:h1>{xen:helper threadPrefix, $thread}{$thread.title}</xen:h1>
    
    <xen:description>
        {xen:phrase discussion_in_x_started_by_y_date_z,
            'forum=<a href="{xen:link forums, $forum}">{$forum.title}</a>',
            'name={xen:helper username, $thread}',
            'date=<a href="{xen:link threads, $thread}">{xen:datetime $thread.post_date, html}</a>'}
    </xen:description>
    >>> Thể hiện thẻ H1 chứa tiêu đề topic và mô tả của bài đó.

    -Code:
    Mã:
    <xen:if is="{$canReply}">
        <xen:comment><xen:topctrl>
            <a href="{xen:link 'threads/reply', $thread}" class="callToAction"><span>{xen:phrase reply_to_thread}</span></a>
        </xen:topctrl></xen:comment>
    </xen:if>
    >>>Đây là code thể hiện nút reply của bài viết.

    -Code:
    Mã:
    <xen:if is="{$poll}">
        <xen:include template="poll_block">
            <xen:set var="$options">
                <xen:if is="{$poll.canVote}">
                    <xen:include template="poll_block_vote" />
                <xen:else />
                    <xen:include template="poll_block_result" />
                </xen:if>
            </xen:set>
        </xen:include>
    </xen:if>
    >>>Thể hiện bình chọn (poll) cho bài viết ở đây.

    -Code:
    Mã:
    <div class="pageNavLinkGroup">
        <div class="linkGroup SelectionCountContainer">
            <xen:if hascontent="true">
                <div class="Popup">
                    <a rel="Menu">{xen:phrase thread_tools}</a>
                    <div class="Menu">
                    <xen:contentcheck>
                        <xen:if hascontent="true">
                        <div class="primaryContent menuHeader"><h3>{xen:phrase thread_tools}</h3></div>
                        <ul class="secondaryContent blockLinksList">
                            <xen:contentcheck>
                                <xen:if is="{$canEditThread}">
                                    <li><a href="{xen:link 'threads/edit', $thread}" class="OverlayTrigger">{xen:phrase edit_thread}</a></li>
                                <xen:elseif is="{$canEditTitle}" />
                                    <li><a href="{xen:link threads/edit-title, $thread}" class="OverlayTrigger">{xen:phrase edit_title}</a></li>
                                </xen:if>
                                <xen:if is="{$canDeleteThread}">
                                    <li><a href="{xen:link 'threads/delete', $thread}" class="OverlayTrigger">{xen:phrase delete_thread}</a></li>
                                </xen:if>
                                <xen:if is="{$canMoveThread}">
                                    <li><a href="{xen:link 'threads/move', $thread}" class="OverlayTrigger">{xen:phrase move_thread}</a></li>
                                </xen:if>
                                <xen:if is="{$deletedPosts}">
                                    <li><a href="{xen:link threads/show-posts, $thread, 'page={$page}'}" class="MessageLoader" data-messageSelector="#messageList .message.deleted.placeholder">{xen:phrase show_deleted_posts}</a></li>
                                </xen:if>
                                <xen:hook name="thread_view_tools_links" params="{xen:array 'thread={$thread}'}" />
                            </xen:contentcheck>
                        </ul>
                        </xen:if>
                        <xen:if hascontent="true">
                        <form action="{xen:link threads/quick-update, $thread}" method="post" class="AutoValidator">
                            <ul class="secondaryContent blockLinksList checkboxColumns">
                            <xen:contentcheck>
                                <xen:if is="{$canLockUnlockThread}">
                                <li><label><input type="checkbox" name="discussion_open" value="1" class="SubmitOnChange" {xen:checked $thread.discussion_open} />
                                    {xen:phrase open_thread}</label>
                                    <input type="hidden" name="set[discussion_open]" value="1" /></li></xen:if>
                                <xen:if is="{$canStickUnstickThread}">
                                <li><label><input type="checkbox" name="sticky" value="1" class="SubmitOnChange" {xen:checked $thread.sticky} />
                                    {xen:phrase sticky}</label>
                                    <input type="hidden" name="set[sticky]" value="1" /></li></xen:if>
                            </xen:contentcheck>
                            </ul>
                            <input type="hidden" name="_xfToken" value="{$visitor.csrf_token_page}" />
                        </form>
                        </xen:if>
                        <xen:if is="{$thread.canInlineMod}">
                        <form action="{xen:link inline-mod/thread/switch}" method="post" class="InlineModForm sectionFooter" id="threadViewThreadCheck"
                            data-cookieName="threads">
                            <label><input type="checkbox" name="threads[]" value="{$thread.thread_id}" class="InlineModCheck" /> {xen:phrase select_for_thread_moderation}</label>
                            <input type="hidden" name="_xfToken" value="{$visitor.csrf_token_page}" />
                        </form>
                        </xen:if>
                    </xen:contentcheck>
                    </div>
                </div>
            </xen:if>
            <xen:if is="{$canWatchThread}">
                <a href="{xen:link 'threads/watch-confirm', $thread}" class="OverlayTrigger" data-cacheOverlay="false">{xen:if $thread.thread_is_watched, '{xen:phrase unwatch_thread}', '{xen:phrase watch_thread}'}</a>
            </xen:if>
        </div>
    
        <xen:pagenav link="threads" linkdata="{$thread}"
            page="{$page}" perpage="{$postsPerPage}" total="{$totalPosts}"
            unreadlink="{$unreadLink}" />
    </div>
    >>Phân trang và quyền cho mod ở trên bài viết.

    Mã:
    <xen:if hascontent="true">
        <div class="pageNavLinkGroup">
            <xen:contentcheck>
                <xen:if is="{$canQuickReply}">
                    <xen:if is="{$postsRemaining}">
                        <div class="linkGroup">
                            <xen:if is="{$postsRemaining} == 1">
                                <a href="{xen:link threads, $thread, 'page={xen:calc "{$page} + 1"}'}" class="postsRemaining">{xen:phrase 1_more_message}...</a>
                            <xen:else />
                                <a href="{xen:link threads, $thread, 'page={xen:calc "{$page} + 1"}'}" class="postsRemaining">{xen:phrase x_more_messages, 'count={xen:number $postsRemaining}'}...</a>
                            </xen:if>
                        </div>
                    </xen:if>
                <xen:else />
                    <div class="linkGroup">
                        <xen:if is="{$canReply}">
                            <a href="{xen:link 'threads/reply', $thread}" class="callToAction"><span>{xen:phrase reply_to_thread}</span></a>
                        <xen:elseif is="{$visitor.user_id}" />
                            <span class="element">({xen:phrase no_permission_to_reply})</span>
                        <xen:else />
                            <label for="LoginControl"><a href="{xen:link login}" class="concealed element">({xen:phrase log_in_or_sign_up_to_reply})</a></label>
                        </xen:if>
                    </div>
                </xen:if>
                <div class="linkGroup"{xen:if '!{$ignoredNames}', ' style="display: none"'}><a href="javascript:" class="muted jsOnly DisplayIgnoredContent Tooltip" title="{xen:phrase show_hidden_content_by_x, "names={xen:helper implode, $ignoredNames, ', '}"}">{xen:phrase show_ignored_content}</a></div>
    
                <xen:pagenav link="threads" linkdata="{$thread}"
                    page="{$page}" perpage="{$postsPerPage}" total="{$totalPosts}"
                    unreadlink="{$unreadLink}"
                />
            </xen:contentcheck>
        </div>
    </xen:if>
    >>phân trang ở dưới bài viết.


    I'm comming ......... !!!!
     
    Last edited: 26/9/13
    Đang tải...
  2. Minh Bảo

    Minh Bảo Verified User

    Bài viết:
    858
    Likes :
    256
    @@ like nao
     
    Last edited: 24/9/13
  3. nttruong

    nttruong Well-Known Member

    Bài viết:
    1,518
    Likes :
    776
    Có ghi là update từ từ mà bạn ?
     
    Lil.Tee thích bài này.
  4. Lil.Tee

    Lil.Tee Member

    Bài viết:
    405
    Likes :
    116
    Like mạnh, lâu lắm mới thấy bác @nttruong :D.
     
  5. nttruong

    nttruong Well-Known Member

    Bài viết:
    1,518
    Likes :
    776
    hi! dạo này bận quá! Rất vui gặp lại =)
     
    AC_Khanh01, Character_Boy and Lil.Tee like this.
  6. xe84.com

    xe84.com Member

    Bài viết:
    239
    Likes :
    24
    hhi . cung lau roi nhi. web bac the nao roi?
     
  7. nttruong

    nttruong Well-Known Member

    Bài viết:
    1,518
    Likes :
    776
    Vứt để đó, mấy tháng nay, chuẩn bị share luôn style của hanhchinh.org canh chuẩn theo responsible cho các bạn! Chắc viết đến đây thôi, mai tiếp nhé!
     
    dangquang and xe84.com like this.
  8. trungkiensvqn

    trungkiensvqn Member

    Bài viết:
    60
    Likes :
    13
    Lâu lắm mới thấy bác @nttruong . Đang theo bác suốt cái trang hanhchinh, tự nhiên mất tích mất, làm anh em đứt gánh giữa đường. Hi vọng bác quay lại tiếp tục với anh em cái dzụ đó :)
     
  9. kaizencoming

    kaizencoming Member

    Bài viết:
    636
    Likes :
    127
    Quy ẩn giang hồ lâu quá làm 1 phát rúng động a e nhỉ :)
     
  10. nttruong

    nttruong Well-Known Member

    Bài viết:
    1,518
    Likes :
    776
    Theo site hanhchinh gì vậy bạn? Mình chưa hiểu lắm!


    Chia sẽ những gì đã học được thôi! >:D<
     
    Lil.Tee and kaizencoming like this.
  11. ken002

    ken002 New Member

    Bài viết:
    82
    Likes :
    4
    thanks bác vì những chia sẻ, rất hữu ích!
     
  12. nttruong

    nttruong Well-Known Member

    Bài viết:
    1,518
    Likes :
    776
    Đã update thêm 2 temp!
     
    dangquang thích bài này.
  13. trungkiensvqn

    trungkiensvqn Member

    Bài viết:
    60
    Likes :
    13
    Xây dựng xenforo theo phong cách báo chí đấy.
     
  14. Character_Boy

    Character_Boy Member

    Bài viết:
    316
    Likes :
    54
    lên là lên luôn nào,lâu lắm mới thấy a @nttruong ^^,bài viết rất hữu ích ,hehe có nhiều cái e cũng chưa biết hết được
     
  15. nttruong

    nttruong Well-Known Member

    Bài viết:
    1,518
    Likes :
    776
    Trước có làm 1 style như cnn vậy, có time sẽ hướng dẫn thực hiện vậy!
    Sẽ cố gắng update sớm nhất có thể! Thx!
     
    giasuhv and Character_Boy like this.
  16. nttruong

    nttruong Well-Known Member

    Bài viết:
    1,518
    Likes :
    776
    Up tiếp cho template thread_list!
     
  17. trungkiensvqn

    trungkiensvqn Member

    Bài viết:
    60
    Likes :
    13
    Công trình khá công phu. Like động viên tinh thần nek :)
     
  18. tongtulenh

    tongtulenh Member

    Bài viết:
    313
    Likes :
    42
    Lâu quá ko thấy anh @nttruong online, mấy lần gọi qua yh mà chả thấy online. :D :D

    Dạo này còn thức khuya nữa ko anh? nhớ em chứ?
     
  19. nttruong

    nttruong Well-Known Member

    Bài viết:
    1,518
    Likes :
    776
    Dạo này anh it OL Y!M và skype lắm! Em là ai thế nhỉ? lâu quá anh cũng kg nhớ nữa! Srry!
     
  20. nttruong

    nttruong Well-Known Member

    Bài viết:
    1,518
    Likes :
    776
    Hôm qua em SMS cho anh phải kg? Có time thì anh sẽ làm thêm tut về làm site theo báo chí nhé!
     
    trungkiensvqn thích bài này.
comments powered by Disqus

Chia sẻ trang này

Đang tải...