[Share] Danh sách chủ đề đẹp cho trang web công nghệ( thread list review)

Thảo luận trong 'Development Tutorials' bắt đầu bởi Bcat9505, 3/5/15.

1votes
5/5, 1 vote

  1. Bcat9505

    Bcat9505 Moderator Staff Member

    Bài viết:
    1,335
    Likes :
    494
    Những trang web về công nghệ nếu chỉ có portal giới thiệu về bài viết kèm theo hình ảnh bắt mắt, nên mình mới tạo cái này làm trên template cho các bạn có thể dễ dàng làm theo để có 1 website xenforo đẹp hơn.
    Hi lâu rồi k viết bài, Yêu cầu:Thumbnails by Waindigo

    dev1
    - Những forum chỉ định sẽ hiện các bài viết theo kiểu ảnh bìa và tiêu đề bài viết, các bạn xem ảnh nha.
    - Cách là như sau các bnaj vào template tạo 2 templae có tên là thread_list_item_review thread_list_item_review .css sau đó lưu lại.
    + Vào template thread_list_item Thêm vào sau <xen:require css="thread_list_item_review.css" />
    Mã:
    <xen:if is="{$thread.node_id}==2"><xen:include template="thread_list_item_review" />
    <xen:else />
    Và ở cuối cùng thêm
    Mã:
    </xen:if>
    + Sau khi lưu lại bạn chuyển qua tab thread_list_item_review và dán đoạn code sau
    Mã:
    <xen:require css="thread_list_item_review.css" />
    <div class="thread_list_review">
    <li id="thread-{$thread.thread_id}" class="discussionListItem {$thread.discussion_state}{xen:if '!{$thread.discussion_open}', ' locked'}{xen:if {$thread.sticky}, ' sticky'}{xen:if {$thread.isNew}, ' unread'}{xen:if {$thread.prefix_id}, ' prefix{$thread.prefix_id}'}{xen:if {$thread.isIgnored}, ' ignored'} {xen:if $thread.thread_is_watched, threadWatched} {xen:if $thread.forum_is_watched, forumWatched}" data-author="{$thread.username}">
    <a href="{xen:link "threads{xen:if '{$thread.isNew} AND {$thread.haveReadData}', '/unread'}", $thread}"
               title="{xen:if '{$thread.isNew} AND {$thread.haveReadData}', {xen:phrase go_to_first_unread_message}}"
               class="{xen:if $thread.hasPreview, PreviewTooltip}"
               data-previewUrl="{xen:if $thread.hasPreview, {xen:link threads/preview, $thread}}">
       <div class="review_thumb"><img src="{$thread.thumbnail.thumbnail_url}" /></div>
       <xen:if is="{$thread.canInlineMod}"><input type="checkbox" name="threads[]" value="{$thread.thread_id}" class="InlineModCheck" id="inlineModCheck-thread-{$thread.thread_id}" data-target="#thread-{$thread.thread_id}" title="{xen:phrase select_thread}: {$thread.title}" /></xen:if>
       <div class="caption">
       <div class="title">
             <xen:if is="{$showSubscribeOptions}"><input type="checkbox" name="thread_ids[]" value="{$thread.thread_id}" /></xen:if>
             <xen:if is="{$thread.prefix_id}">
               <xen:if is="{$linkPrefix}">
                 <a href="{xen:link forums, $forum, 'prefix_id={$thread.prefix_id}'}" class="prefixLink"
                   title="{xen:phrase show_only_threads_prefixed_by_x, 'prefix={xen:helper threadPrefix, $thread, plain, ""}'}">{xen:helper threadPrefix, $thread, html, ''}</a>
               <xen:else />
                 {xen:helper threadPrefix, $thread}
               </xen:if>
             </xen:if>
             {xen:helper wrap, $thread.title, 50}</a>
       </div>
       <span class="sourcename">
        <xen:avatar user="$thread" size="s" img="true" />
        <xen:username user="$thread" title="{xen:phrase thread_starter}" />
       </span>
       </div>
    </a>
    </li>
    </div>
    
    + Sau khi lưu lại các bạn chuyển qua tab thread_list_item_review.css và dán đoạn code sau
    Mã:
    .thread_list_review{
        position: relative;
        width: 33.3333%;
        float: left;
    }
    .thread_list_review:last-child{clear: left;float: none}
    .thread_list_review .review_thumb{
        height: 250px;
        margin: 5px;
    }
    .thread_list_review .review_thumb:hover{
       opacity: 0.8;
       transition: all 1s
    }
    .thread_list_review .review_thumb img{
        width: 100%;
        height: 250px;
    }
    .thread_list_review .InlineModCheck{
        position: absolute;
        top: 5px;
        left: 5px;
    }
    .thread_list_review .caption{
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.95) 0px, transparent 100%) repeat scroll 0% 0% transparent;
        position: absolute;
        bottom: 5px;
        margin: 0px 5px;
        padding: 15px 15px 0px;
    }
    .thread_list_review .title a{
        font-weight: 200;
        color: #FFF;
        overflow: hidden;
        font-size: 18px;
        line-height: 20px;
        padding-bottom: 5px;
    }
    .thread_list_review .sourcename {
        color: #A0A0A0;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        position: relative;
        display: block;
        min-height: 35px;
        padding-top: 10px;
        font-size: 16px;
        line-height: 20px;
    }
    .thread_list_review .sourcename  .avatar img{
        width: 16px;
        height: 16px;
    }
    .thread_list_review .sourcename a.username{
        color: #A0A0A0;
    }
    <xen:if is="@enableResponsive">
    @media (max-width:@maxResponsiveWideWidth)
    {
       .Responsive .thread_list_review {
          width: 50%;
          }
    }
    
    @media (max-width:@maxResponsiveNarrowWidth)
    {
       .Responsive .thread_list_review {
       float: unset;
       width: 100%;
       }
    }
    </xen:if>
    
    Trong đó: {$thread.node_id}==2 số 2 ở đây là id của forum (cuối link có số này nha), các muốn thêm nhiều thì dùng " || "
    - Đây là demo forum sử dụng thread list review
    Mã:
    http://bcat95-bcat9509.rhcloud.com/forums/techz.2/
    - Đây là demo forum không sử dụng
    Mã:
    http://bcat95-bcat9509.rhcloud.com/forums/tinhte.3/
    Mình mới làm xong, giờ ôn bài mai thi đã ;)
    Các bạn nào lỗi css hay có ý kiến thì cmt lại nha, tại k dùng trong
    Color Palette sợ màu các bạn khác nhau.
    P/s: Template thread_list_item
    <xen:require css="discussion_list.css" />
    <xen:if is="{$thread.node_id}==2"><xen:include template="thread_list_item_review" />
    <xen:else />
    <xen:if is="{$thread.isDeleted}"><xen:include template="thread_list_item_deleted" /><xen:else />
    <li id="thread-{$thread.thread_id}" class="discussionListItem {$thread.discussion_state}{xen:if '!{$thread.discussion_open}', ' locked'}{xen:if {$thread.sticky}, ' sticky'}{xen:if {$thread.isNew}, ' unread'}{xen:if {$thread.prefix_id}, ' prefix{$thread.prefix_id}'}{xen:if {$thread.isIgnored}, ' ignored'} {xen:if $thread.thread_is_watched, threadWatched} {xen:if $thread.forum_is_watched, forumWatched}" data-author="{$thread.username}">
    <div class="listBlock posterAvatar">
    <span class="avatarContainer">
    <xen:avatar user="$thread" size="s" img="true" />
    <xen:if is="{$thread.user_post_count}"><xen:avatar user="$visitor" size="s" img="true" class="miniMe" title="{xen:Phrase you_have_posted_x_messages_in_this_thread, 'count={xen:number $thread.user_post_count}'}" /></xen:if>
    </span>
    </div>

    <div class="listBlock main">

    <div class="titleText">
    <xen:if hascontent="true">
    <div class="iconKey">
    <xen:contentcheck>
    <xen:hook name="thread_list_item_icon_key" params="{xen:array 'thread={$thread}'}">
    <xen:if is="{$thread.isModerated}"><span class="moderated" title="{xen:Phrase moderated}">{xen:Phrase moderated}</span></xen:if>
    <xen:if is="!{$thread.discussion_open}"><span class="locked" title="{xen:Phrase locked}">{xen:Phrase locked}</span></xen:if>
    <xen:if is="{$thread.sticky}"><span class="sticky" title="{xen:Phrase sticky}">{xen:Phrase sticky}</span></xen:if>
    <xen:if is="{$thread.isRedirect}"><span class="redirect" title="{xen:Phrase redirect}">{xen:Phrase redirect}</span></xen:if>
    <xen:if is="{$thread.thread_is_watched} OR {$thread.forum_is_watched}"><span class="watched" title="{xen:Phrase watched}">{xen:Phrase watched}</span></xen:if>
    </xen:hook>
    </xen:contentcheck>
    </div>
    </xen:if>

    <h3 class="title">
    <xen:if is="{$thread.canInlineMod}"><input type="checkbox" name="threads[]" value="{$thread.thread_id}" class="InlineModCheck" id="inlineModCheck-thread-{$thread.thread_id}" data-target="#thread-{$thread.thread_id}" title="{xen:Phrase select_thread}: {$thread.title}" /></xen:if>
    <xen:if is="{$showSubscribeOptions}"><input type="checkbox" name="thread_ids[]" value="{$thread.thread_id}" /></xen:if>
    <xen:if is="{$thread.prefix_id}">
    <xen:if is="{$linkPrefix}">
    <a href="{xen:link forums, $forum, 'prefix_id={$thread.prefix_id}'}" class="prefixLink"
    title="{xen:Phrase show_only_threads_prefixed_by_x, 'prefix={xen:helper threadPrefix, $thread, plain, ""}'}">{xen:helper threadPrefix, $thread, html, ''}</a>
    <xen:else />
    {xen:helper threadPrefix, $thread}
    </xen:if>
    </xen:if>
    <a href="{xen:link "threads{xen:if '{$thread.isNew} AND {$thread.haveReadData}', '/unread'}", $thread}"
    title="{xen:if '{$thread.isNew} AND {$thread.haveReadData}', {xen:Phrase go_to_first_unread_message}}"
    class="{xen:if $thread.hasPreview, PreviewTooltip}"
    data-previewUrl="{xen:if $thread.hasPreview, {xen:link threads/preview, $thread}}">{xen:helper wrap, $thread.title, 50}</a>
    <xen:if is="{$thread.isNew}"><a href="{xen:link threads/unread, $thread}" class="unreadLink" title="{xen:Phrase go_to_first_unread_message}"></a></xen:if>
    </h3>

    <div class="secondRow">
    <div class="posterDate muted">
    <xen:username user="$thread" title="{xen:Phrase thread_starter}" /><span class="startDate">,
    <a{xen:if {$visitor.user_id}, ' href="{xen:link threads, $thread}"'} class="faint"><xen:Datetime time="$thread.post_date" title="{xen:if {$visitor.user_id}, '{xen:Phrase go_to_first_message_in_thread}'}" /></a></span><xen:if is="{$showForumLink}"><span class="containerName">,
    <a href="{xen:link forums, $thread.forum}" class="forumLink">{$thread.forum.title}</a></span></xen:if>

    <xen:if is="{$showLastPageNumbers} AND {$thread.lastPageNumbers}">
    <span class="itemPageNav">
    <span>...</span>
    <xen:foreach loop="$thread.lastPageNumbers" value="$pageNumber">
    <a href="{xen:link threads, $thread, 'page={$pageNumber}'}">{$pageNumber}</a>
    </xen:foreach>
    </span>
    </xen:if>
    </div>

    <div class="controls faint">
    <xen:if is="{$thread.canEditThread}"><a href="javascript:" data-href="{xen:link 'threads/list-item-edit', $thread, 'showForumLink={$showForumLink}'}" class="EditControl JsOnly">{xen:Phrase edit}</a></xen:if>
    <xen:if is="{$showSubscribeOptions} AND {$thread.email_subscribe}">{xen:Phrase email}</xen:if>
    </div>
    </div>
    </div>
    </div>

    <div class="listBlock stats pairsJustified" title="{xen:Phrase members_who_liked_first_message}: {xen:if $thread.isRedirect, '&ndash;', {xen:number $thread.first_post_likes}}">
    <dl class="major"><dt>{xen:Phrase replies}:</dt> <dd>{xen:if $thread.isRedirect, '&ndash;', {xen:number $thread.reply_count}}</dd></dl>
    <dl class="minor"><dt>{xen:Phrase views}:</dt> <dd>{xen:if $thread.isRedirect, '&ndash;', {xen:number $thread.view_count}}</dd></dl>
    </div>

    <div class="listBlock lastPost">
    <xen:if is="{$thread.isRedirect}">
    <div class="lastPostInfo">{xen:Phrase n_a}</div>
    <xen:else />
    <dl class="lastPostInfo">
    <dt><xen:if is="{xen:helper isIgnored, $thread.last_post_user_id}">{xen:Phrase ignored_member}<xen:else /><xen:username user="$thread.lastPostInfo" /></xen:if></dt>
    <dd class="muted"><a{xen:if '{$visitor.user_id}', ' href="{xen:link posts, $thread.lastPostInfo}" title="{xen:Phrase go_to_last_message}"'} class="dateTime"><xen:Datetime time="$thread.lastPostInfo.post_date" /></a></dd>
    </dl>
    </xen:if>
    </div>

    </li>
    </xen:if>
    </xen:if>
    Thank to: ismartcom005​
     
    Last edited: 15/5/15
    Đang tải...
  2. datdaik000

    datdaik000 Member

    Bài viết:
    379
    Likes :
    86
    quá hay để em test phát nào thanks bác :D
     
    Bcat9505 thích bài này.
  3. Bcat9505

    Bcat9505 Moderator Staff Member

    Bài viết:
    1,335
    Likes :
    494
    Uhm bác làm sao cho hợp với bác cũng đc, cái này chỉ share cho mấy bạn mới vào xenforo thôi :) tại thấy cũng k hay lắm, Hôm sau tích hợp thêm cái ajax load bài nó mới đúng
     
  4. Bcat9505

    Bcat9505 Moderator Staff Member

    Bài viết:
    1,335
    Likes :
    494
    Hôm sau fix chỉ hiện ở template Forum_view cho bạn nào cần.
     
  5. Bcat9505

    Bcat9505 Moderator Staff Member

    Bài viết:
    1,335
    Likes :
    494
    UpBai
     
  6. Bcat9505

    Bcat9505 Moderator Staff Member

    Bài viết:
    1,335
    Likes :
    494
    cmt 998
     
  7. Bcat9505

    Bcat9505 Moderator Staff Member

    Bài viết:
    1,335
    Likes :
    494
    cmt 999
     
  8. Bcat9505

    Bcat9505 Moderator Staff Member

    Bài viết:
    1,335
    Likes :
    494
    cmt 1000 có gì thay đổi
     
  9. datdaik000

    datdaik000 Member

    Bài viết:
    379
    Likes :
    86
    mod mà spam kinh :)) có vẻ không ai quan tâm bác ạ. Em cũng đã tùy biến một chút, tại cái css bác cho nó sẽ làm cho lệch cột thread_list ( không biết nói thế nào nữa =)) )
     
  10. Bcat9505

    Bcat9505 Moderator Staff Member

    Bài viết:
    1,335
    Likes :
    494
    Hôm qua vẫn bình thường mà, xem thử 1000cmt có đc gì k %%
     
  11. bibiduy

    bibiduy Member

    Bài viết:
    511
    Likes :
    59
    đánh dấu theo giỏi :-bd:-bd:-bd
     
  12. vandieutot

    vandieutot Well-Known Member

    Bài viết:
    1,582
    Likes :
    482
    Ngon quá cám ơn bác thớt nhiều lắm.
     
    Bcat9505 thích bài này.
  13. Bcat9505

    Bcat9505 Moderator Staff Member

    Bài viết:
    1,335
    Likes :
    494
    bác test giùm addon này luôn nhá vxf.vn/threads/share-add-on-thread-review-tao-danh-sach-bai-viet-dep-voi-tuy-chon-dien-dan-hien-thi.23957/
     
  14. Zanag

    Zanag Member

    Bài viết:
    274
    Likes :
    159
    Ngon :))
     
    Bcat9505 thích bài này.
  15. bibiduy

    bibiduy Member

    Bài viết:
    511
    Likes :
    59
  16. Bcat9505

    Bcat9505 Moderator Staff Member

    Bài viết:
    1,335
    Likes :
    494
    bibiduy thích bài này.
  17. singh

    singh Member

    Bài viết:
    384
    Likes :
    79
    làm sao để hiện giá tiền trong đó luôn chú em
    giá tiền của addon nhật tảo ấy
     
  18. Bcat9505

    Bcat9505 Moderator Staff Member

    Bài viết:
    1,335
    Likes :
    494
    raovat mà cũng cần hả a, nếu như cái #1 thì a thêm biến của giá là hiện thôi :) như a đưa ra (moderm star ấy
     
  19. singh

    singh Member

    Bài viết:
    384
    Likes :
    79
    Để xem thử
    Mã:
    http://www.1doi1.com/forums/web-phan-mem-mang.168.html
    nhưng nhìn hơi rối. và phía dưới có 2 bài viết bị trật khung :(
     
  20. vandieutot

    vandieutot Well-Known Member

    Bài viết:
    1,582
    Likes :
    482
    Cái đấy nhìn đẹp bác à. Nhưng có cảm giác hơi nhiều ô không bác mình nghĩ sẽ hơi loạn.
     
    Bcat9505 thích bài này.
comments powered by Disqus

Chia sẻ trang này

Đang tải...