Thủ Thuật Hiển thị footer tùy chỉnh theo link truy cập.

longruoi · 26/04/2016

Lâu ngày không viết bài, hôm nay thấy có bạn hỏi cách làm phần cuối của site mình chỉ hiện thị những option cơ bản khi vào Thread hoặc From nên mình hướng dẫn luôn.

P/s: Cách này áp dụng với các bạn nào tùy chỉnh footer quá nhiều dẫn đến việc load site chậm, để hạn chế tình trạng đó thì ta chỉ để footer tùy chỉnh hiển thị trên forum chính, ngoài ra cho hiển thị đơn giản để tăng tốc site.

Demo:

Tại forum chính:

Tại bất cứ bài viết hay from nào khác:

Hoặc các bạn có thể truy cập vào site: http://vtplus.xyz tại trang chủ và vào đọc bài viết để thấy sự khác biệt.

Bắt đầu:

Đầu tiên là cần tạo thêm 2 template mới.
Thứ nhất tạo template tên là footer_1 với nội dung:

PHP:

<xen:edithint template="footer_1.css" />

<xen:hook name="footer">
<div class="footer">
    <div class="pageWidth">
        <div class="pageContent">
            <xen:if is="{$canChangeStyle} OR {$canChangeLanguage}">
            <dl class="choosers">
                <xen:if is="{$canChangeStyle}">
                    <dt>{xen:phrase style}</dt>
                    <dd><a href="{xen:link 'misc/style', '', 'redirect={$requestPaths.requestUri}'}" class="OverlayTrigger Tooltip" title="{xen:phrase style_chooser}" rel="nofollow">{$visitorStyle.title}</a></dd>
                </xen:if>
                <xen:if is="{$canChangeLanguage}">
                    <dt>{xen:phrase language}</dt>
                    <dd><a href="{xen:link 'misc/language', '', 'redirect={$requestPaths.requestUri}'}" class="OverlayTrigger Tooltip" title="{xen:phrase language_chooser}" rel="nofollow">{$visitorLanguage.title}</a></dd>
                </xen:if>
            </dl>
            </xen:if>
                    
            <ul class="footerLinks">
            <xen:hook name="footer_links">                
             <xen:if is="{$xenOptions.contactUrl.type} === 'default'">
                    <li><a href="{xen:link 'misc/contact'}" class="OverlayTrigger" data-overlayOptions="{&quot;fixed&quot;:false}">{xen:phrase contact_us}</a></li>
                <xen:elseif is="{$xenOptions.contactUrl.type} === 'custom'" />
                    <li><a href="{$xenOptions.contactUrl.custom}" {xen:if {$xenOptions.contactUrl.overlay}, 'class="OverlayTrigger" data-overlayOptions="{&quot;fixed&quot;:false}"'}>{xen:phrase contact_us}</a></li>
                </xen:if>
                <li><a href="{xen:link help}">{xen:phrase help}</a></li>
                <xen:if is="{$homeLink}"><li><a href="{$homeLink}" class="homeLink">{xen:phrase home}</a></li></xen:if>
                <li><a href="{$requestPaths.requestUri}#navigation" class="topLink">{xen:phrase go_to_top}</a></li>
                <li><a href="{xen:link forums/-/index.rss}" rel="alternate" class="globalFeed" target="_blank"
                    title="{xen:phrase rss_feed_for_x, 'title={$xenOptions.boardTitle}'}">{xen:phrase rss}</a></li>
            </xen:hook>
            </ul>
        
            <span class="helper"></span>
        </div>
    </div>
</div>

<div class="footerLegal">
    <div class="pageWidth">
        <div class="pageContent">
            <ul id="legal">
            <xen:hook name="footer_links_legal">
    
            </xen:hook>
            </ul>
            <xen:hook name="footer_after_copyright" />
    
             <xen:if is="{$debugMode} AND {$visitor.is_admin}">
                <xen:if hascontent="true">
                    <dl class="pairsInline debugInfo" title="{$controllerName}-&gt;{$controllerAction}{xen:if $viewName, ' ({$viewName})'}">
                    <xen:contentcheck>
                        <xen:if is="{$page_time}"><dt>{xen:phrase timing}:</dt> <dd><a href="{$debug_url}" rel="nofollow">{xen:phrase x_seconds, 'time={xen:number $page_time, 4}'}</a></dd></xen:if>
                        <xen:if is="{$memory_usage}"><dt>{xen:phrase memory}:</dt> <dd>{xen:phrase x_mb, 'size={xen:number {xen:calc "{$memory_usage} / 1024 / 1024"}, 3}'}</dd></xen:if>
                        <xen:if is="{$db_queries}"><dt>{xen:phrase db_queries}:</dt> <dd>{xen:number {$db_queries}}</dd></xen:if>
                    </xen:contentcheck>
                    </dl>
                </xen:if>
            </xen:if>
        
            <span class="helper"></span>
        </div>
    </div>
</div>
</xen:hook>

Thứ 2 là tạo template footer_1.css với nội dung:

PHP:

.footer .pageContent
{
    @property "footer";
    font-size: 11px;
    color: @primaryLighter;
    background-color: @primaryMedium;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    overflow: hidden;
    zoom: 1;
    @property "/footer";
}

    .footer a,
    .footer a:visited
    {
        @property "footerLink";
        color: @primaryLighter;
        padding: 5px;
        display: block;
        @property "/footerLink";
    }

        .footer a:hover,
        .footer a:active
        {
            @property "footerLinkHover";
            color: @primaryLighterStill;
            @property "/footerLinkHover";
        }

    .footer .choosers
    {
        @property "footerLeftBlock";
        padding-left: 5px;
        float: left;
        overflow: hidden;
        zoom: 1;
        @property "/footerLeftBlock";
    }

        .footer .choosers dt
        {
            display: none;
        }
    
        .footer .choosers dd
        {
            float: left;
            <xen:if is="{$pageIsRtl}">*display: inline; *float: none; *zoom: 1;</xen:if>
        }
    
    .footerLinks
    {
        @property "footerRightBlock";
        padding-right: 5px;
        float: right;
        overflow: hidden;
        zoom: 1;
        @property "/footerRightBlock";
    }

        .footerLinks li
        {
            float: left;
            <xen:if is="{$pageIsRtl}">*display: inline; *float: none; *zoom: 1;</xen:if>
        }
    
            .footerLinks a.globalFeed
            {
                width: 14px;
                height: 14px;
                display: block;
                text-indent: -9999px;
                white-space: nowrap;
                background: url('@imagePath/xenforo/xenforo-ui-sprite.png') no-repeat -112px -16px;
                padding: 0;
                margin: 5px;
            }

.footerLegal .pageContent
{
    font-size: 11px;
    overflow: hidden; zoom: 1;
    padding: 5px 5px 15px;
    text-align: center;
}

    #copyright
    {
        color: @dimmedTextColor;
        float: left;
    }

    #legal
    {
        float: right;
    }

        #legal li
        {
            float: left;
            <xen:if is="{$pageIsRtl}">*display: inline; *float: none; *zoom: 1;</xen:if>
            margin-left: 10px;
        }

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveMediumWidth)
{
    .Responsive .footerLinks a.globalFeed,
    .Responsive .footerLinks a.topLink,
    .Responsive .footerLinks a.homeLink
    {
        display: none;
    }

    .Responsive .footerLegal .debugInfo
    {
        clear: both;
    }
}

@media (max-width:@maxResponsiveNarrowWidth)
{
    .Responsive #copyright span
    {
        display: none;
    }
}
</xen:if>

Sau đó vào template PAGE_CONTAINER
Thay thế đoạn code:

PHP:

<footer>
    <xen:include template="footer" />
</footer>

Bằng đoạn code:

PHP:

<xen:if is="{$isIndexPage}">
<footer>
    <xen:include template="footer" />
</footer>
<xen:else />
<footer>
    <xen:include template="footer_1" />
</footer>
</xen:if>

Vậy là xong.

Chúc các bạn vui vẻ.

Jindo_Katori · 26/04/2016

Rất hay.
Sẽ nghiên cứu để phù hợp với site mình (site mình footer cho giao diện mobi thực sự cũng quá tệ)

longruoi · 26/04/2016

Jindo_Katori nói:
Rất hay.
Sẽ nghiên cứu để phù hợp với site mình (site mình footer cho giao diện mobi thực sự cũng quá tệ)

Mobi site mình footer cũng tạm ổn, mà qua desktop đang còn dư 1 mớ textlink, bữa nào có điều kiện lên desktop chụp lại để đăng lên cho mọi người vào đăng ký textlink free..he

Jindo_Katori · 27/04/2016

longruoi nói:
Mobi site mình footer cũng tạm ổn, mà qua desktop đang còn dư 1 mớ textlink, bữa nào có điều kiện lên desktop chụp lại để đăng lên cho mọi người vào đăng ký textlink free..he

Cái footer destop bên site mình thì copy vxf do mọi người chia sẽ thôi chứ chẳng có gì đặc biệt cả (nói chung dễ nhìn).
Còn chuyển qua giao diện mobi thì trông nát bét, gớm chết đi được: lúc nãy kiểm tra tốc độ load là 1.5s chậm gấp 6 lần của bác. Thật là thảm họa.
Textlink bác cho ké được không (khi nào bác không cho ké nữa thì bác cứ xóa)

longruoi · 27/04/2016

Jindo_Katori nói:
Cái footer destop bên site mình thì copy vxf do mọi người chia sẽ thôi chứ chẳng có gì đặc biệt cả (nói chung dễ nhìn).
Còn chuyển qua giao diện mobi thì trông nát bét, gớm chết đi được: lúc nãy kiểm tra tốc độ load là 1.5s chậm gấp 6 lần của bác. Thật là thảm họa.
Textlink bác cho ké được không (khi nào bác không cho ké nữa thì bác cứ xóa)

Ok. Mình bữa giờ làm trên điện thoại nên chỉ điều chỉnh response cho giao diện điện thoại, chứ chưa có điều kiện làm trên desktop để chỉnh cho phù hợp, bữa có nhờ người chụp màn hình desktop dùm thì thấy nó chưa hợ lý. Nên khi nào có máy tính thì tranh thủ làm lại.

Người đăng	Chủ đề tương tự	Diễn đàn	Trả lời	Ngày đăng
	Other 2x Nội Dung Chỉ Hiển Thị Vị Trí Trang categories	Template Modifications	2	05/10/2023
	Hướng dẫn hiển thị prefix xenforo 2x	Template Modifications	1	21/08/2022
	Other 2x Make the media slider horizontal scroll arrows more visible - Làm cho các mũi tên cuộn ngang của media slider hiển thị rõ ràng hơn cho XenForo 2.2	Template Modifications	0	24/02/2022
	Other Hiển thị khung quick reply xenforo2x	Template Modifications	4	05/08/2021
M	Help Hiển thị thêm nhiều bài viết mới ở mỗi Node trên trang chủ	Template Modifications	0	19/05/2021

XenForo 1	XenForo 2
Translate by PVS
Xenforo là gì?
Xây dựng MXH bằng Xenforo

Thủ Thuật Hiển thị footer tùy chỉnh theo link truy cập.

longruoi

MasterCorporal

Jindo_Katori

FirstSergeant

longruoi

MasterCorporal

Jindo_Katori

FirstSergeant

longruoi

MasterCorporal

Chủ đề tương tự

Hướng dẫn sử dụng

Dịch vụ XenForo của VNXF

Xử lý sự cố (Troubleshooting)

Texlink

Nhà Tài Trợ

Thông tin chung

LIÊN KẾT

LIÊN KẾT

LIÊN KẾT