Jump to content

Welcome to [ iT ] Forums
Register now to gain access to all of our features. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more. If you already have an account, login here - otherwise create an account for free today!
Hình ảnh

[VBB4.x]Tạo CMS như trang chủ diễn đàn HSVFORUM.VN


  • Please log in to reply
No replies to this topic

#1
emlaphale

emlaphale

    Trung cấp CSTH

  • Advance Member
  • PipPipPip
  • 325 Bài Viết:
Demo ảnh:
Posted Image

Demo trực tiếp:
http://hsvforum.vn

Hướng dẫn và chuẩn bị:

Chuẩn bị:
Cài đặt MOD Slide Show Pro v2.0.3

Thiết lập MOD kích cỡ theo như website của các bạn nhé, nếu không biết thiết lập như nào thì cứ việc reply tại đây.

Bắt đầu:

Vào Admincp>Styles & Templates>Tìm:
vbcms_content_article_preview

Thay toàn bộ code bằng:
{vb:raw css}
<div class="article_preview">
    <vb:if condition="$showtitle">
    <div class="title">
        <h3 class="article_preview">
             <a href="{vb:raw vboptions.bburl}/showpost.php?{vb:raw session.sessionurl}p={vb:raw postid}"><span>{vb:raw title}</span></a>&nbsp;
        <vb:if condition="$can_edit">
            <a class="edit" href="{vb:raw edit_url}">
            <img class="editimage" src="{vb:stylevar imgdir_cms}/edit_small.png" alt="{vb:rawphrase edit}" />
            </a>
        </vb:if>
        </h3>
    </div>
    </vb:if>

    <vb:if condition="$showuser OR $showpublishdate OR ($showupdated AND $lastupdated) OR ($viewcount AND $showviewcount) OR ($showrating AND $rating!='')">
    <div class="cms_article_username">
        <vb:if condition="$showuser">
            {vb:rawphrase by_x_nolink, {vb:raw memberaction_dropdown}}
        </vb:if>

        <vb:if condition="$showpublishdate">
            <vb:if condition="!$published OR !$setpublish">
                    <span style="color:red">
                    <vb:if condition="$publishdate AND $setpublish">
                            {vb:rawphrase page_will_be_published_x {vb:raw publishdatelocal}} {vb:raw publishtimelocal}
                    <vb:else />
                            {vb:rawphrase page_not_published}
                    </vb:if>
                    </span>
            <vb:elseif condition="$publishdate" />
                    {vb:rawphrase published_on_x {vb:raw publishdatelocal}}  {vb:raw publishtimelocal}
            </vb:if>
        </vb:if>
        <vb:if condition="$showupdated and $lastupdated">
            &nbsp;{vb:rawphrase updated_on_x {vb:date {vb:raw lastupdated}, {vb:raw dateformat}}}&nbsp;
        </vb:if>

        <vb:if condition="$viewcount AND $showviewcount">
            &nbsp;{vb:rawphrase number_of_views}: {vb:raw viewcount}&nbsp;
        </vb:if>

         <vb:if condition="$showrating">
            <span class="cmsrating rating{vb:raw rating}"></span>
        </vb:if>

    </div>
    </vb:if>
    <vb:if condition="!empty($categories)">
        <div class="cms_article_section_location">
            <ol class="commalist">
                <li>{vb:phrase in_category}</li>
                <vb:each from="categories" key="categoryid" value="category">
                    <li><a href="{vb:raw category.category_url}">{vb:raw category.category}</a>{vb:raw category.comma}</li>
                </vb:each>
            </ol>
        </div>
    </vb:if>
<vb:comment>
    <!--  Display Section Location -->
    <div class="cms_article_section_location">
        {vb:rawphrase section}: <a href="{vb:raw section_url}">{vb:var parenttitle}</a>
    </div>
</vb:comment>

    <div class="fullwidth article_preview_contents<vb:if condition="$showpreviewonly"> showpreviewonly</vb:if> restore">
        <vb:if condition="$showpreviewonly">
            <vb:if condition="$previewvideo">
                {vb:raw previewvideo}
            <vb:elseif condition="$previewimage" />
                <a href="{vb:raw vboptions.bburl}/showpost.php?{vb:raw session.sessionurl}p={vb:raw postid}">
                <img class="cms_article_preview_image" src="{vb:raw previewimage}" alt="<vb:if condition="$attachment_settings['alt']">{vb:raw attachment_settings['alt']}<vb:else />{vb:rawphrase article_preview}</vb:if>" <vb:if condition="$attachment_settings['title']">title="{vb:raw attachment_settings['title']}"</vb:if> /></a>
            </vb:if>
        </vb:if>
        <div>
                        <br />
            <div class="cms_article_txt_content postcontainer">
            {vb:raw previewtext}<vb:if condition="$preview_chopped">...</vb:if>
            
            </div>
        </div>
    </div>

    <div class="fullwidth">

        <vb:if condition="$preview_chopped">
            <span class="cms_article_readmore"><a href="{vb:raw vboptions.bburl}/showpost.php?{vb:raw session.sessionurl}p={vb:raw postid}">{vb:rawphrase read_more_phrase} <img src="{vb:stylevar imgdir_cms}/read_more-{vb:stylevar right}.png" alt="{vb:rawphrase read_more_phrase}" /></a>
            </span>
        </vb:if>

        <vb:if condition="$comment_count">
            <span class="cms_article_comment_number">
                <a href="{vb:raw newcomment_url}"><img class="inlineimg" src="{vb:stylevar imgdir_button}/firstnew-comment.png" alt="{vb:rawphrase go_to_first_new_comment}" /></a>
                <a href="{vb:raw newcomment_url}"  rel="nofollow">{vb:raw comment_count}
                <vb:if condition="$comment_count == 1">
                    {vb:rawphrase comment}
                <vb:else />{vb:rawphrase comments}
                </vb:if></a>
            </span>
        </vb:if>
    </div>
</div>

Như vậy là đã tạo được slide và hiển thị bài viết, còn bố cục thông tin bên tay phải thì làm như sau:

Vào Admincp->vBulletin CMS->Grid Manager-> thiết lập như trong hình (tùy từng skin mà thay đổi kích thước)
Posted Image

Tiếp theo tạo các widgets, các widgets có sẵn như bài mới nhất, lịch, Tag,vv... thì đã có sẵn. Còn muốn tự tạo widgets kiểu Static HTML để hiển thị giá vàng, thời tiết, facebook,vv.... thì reply mình sẽ đưa code nhé.
Posted Image

Tiếp tục, vào Layout Manager, thiết lập bố cục như trong hình dưới đây (muốn hiển thị widgets nào thì giữ chuột và kéo thả thôi):
Posted Image

Lưu ý: Phần Primary Content chính là chỗ hiển thị thông tin bài viết của bạn.

Vậy là xong, các bạn đã có 1 CMS tương đối đơn giản mà hiệu quả rồi đó. :)

Bài viết này được chỉnh sửa bởi emlaphale: 17 August 2012 - 11:36 PM

HSVFORUM.VN - Cộng đồng lập trình viên và truyện đọc trực tuyến

Nếu cần hỗ trợ hãy liên hệ: Vạn Lý Song Hành hoặc YH thieu_gia1587 nhé.




special thanks to our all time users for being with us

Calvin Music

Close [X]