Other Chia sẻ kinh nghiệm làm forum XenForo của FIFAVN

Thảo luận trong 'Showcase XenForo' bắt đầu bởi Cyentruk, 21/4/14.

1votes
5/5, 1 vote

  1. Cyentruk

    Cyentruk Verified User

    Bài viết:
    252
    Likes :
    291
    Xin chào mọi người!

    Mình tạo topic này với mục đích chủ yếu chia sẻ kinh nghiệm của cá nhân mình trong qúa trình quản trị diễn đàn FIFAVN (http://fifavn/forum) với mọi người, nhất là những bạn lần đầu tiếp xúc với XenForo mà không có nhiều kiến thức lập trình web cũng như kinh nghiệm quản lý và quản trị diễn đàn.

    Mình không phải là IT, mình là Kiến trúc sư nhưng từ khi bước chân vào thế giới này cũng thấy rất mê. :D Kiến thức mình có được là do tự mày mò, khám phá, tìm hiểu qua Google, qua các bài viết hướng dẫn rất bổ ích của nhiều thành viên trên VXF này và nhiều người khác nữa.

    Cho tới lúc này, có thể nói mình chỉ biết ở mức vỡ lòng nên những chia sẻ của mình có thể sẽ dẫn tới sai lầm cho những người khác. Nhưng trên hết, mình muốn chia sẻ cách tiếp cận và giải quyết vấn đề cho những người giống-kiểu-như-mình, vì thế nếu bạn có hiểu sâu hơn về vấn đề mình đề cập thì chỉnh sửa giúp nhé.

    Các chia sẻ không theo một trình tự nào, và không có thời gian biểu cập nhật thường xuyên, mình sẽ cập nhật topic theo tùy hứng và tổng hợp lại tại post#1. Nếu bạn có câu hỏi nào, đừng ngần ngại hỏi ở đây, mình sẽ trả lời trong tầm hiểu biết của mình.

    Demo: http://fifavn.org/forum

    Những điều đã chia sẻ:
     
    Last edited: 28/4/15
    Đang tải...
  2. Cyentruk

    Cyentruk Verified User

    Bài viết:
    252
    Likes :
    291
    fifavn-01

    Làm thế nào thêm được nút chia sẻ này giống VXF?

    1. Bạn truy cập: https://www.addthis.com/get/smart-layers
    2. Tạo tài khoản đăng nhập
    3. Nhấn vào "Generate Code" bạn sẽ có đoạn CODE của riêng mình (gần tương tự như dưới đây)
    Mã:
    <!-- AddThis Smart Layers BEGIN -->
        <!-- Go to http://www.addthis.com/get/smart-layers to customize -->
            <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5352998531c6945e"></script>
            <script type="text/javascript">
              addthis.layers({
                'theme' : 'transparent',
                'share' : {
                  'position' : 'left',
                  'numPreferredServices' : 5
                }
              });
            </script>
        <!-- AddThis Smart Layers END -->        
    4. Bạn vào AdminCP > Appearance > Templates > PAGE_CONTAINER
    5. Dán đoạn mã trên vào trong cặp thẻ <head>
    6. Xong!

    Mình cập nhật một chút là bạn nên tự mình tạo đoạn mã này, vì mỗi một tài khoản tại addthis.com sẽ cho ra một đoạn mã hơi khác nhau một chút, vì addthis sẽ dựa vào đó để giúp bạn thu thập thông tin về người dùng đã chia sẻ như thế nào giúp bạn.

    Vậy bạn bỏ đoạn này
    Mã:
    'numPreferredServices' : 5
    Và thêm đoạn này
    Mã:
    'services' : 'facebook,twitter,google_plusone_share,email,print,more',
    Thành tương tự như dưới đây
    Mã:
    <!-- AddThis Smart Layers BEGIN -->
        <!-- Go to http://www.addthis.com/get/smart-layers to customize -->
            <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5352998531c6945e"></script>
            <script type="text/javascript">
              addthis.layers({
                'theme' : 'transparent',
                'share' : {
                  'position' : 'left',     
                  'services' : 'facebook,twitter,google_plusone_share,email,print,more',
                }
              });
            </script>
        <!-- AddThis Smart Layers END --> 
    Nếu bạn muốn hiệu chỉnh thêm có thể vào http://addthis.com để tìm hiểu nhé.
     
    Last edited: 28/4/14
  3. twitter

    twitter New Member

    Bài viết:
    5
    Likes :
    3
    Bác hướng dẫn em làm cái TopX giống của bác với :D
    Y hệt thì càng tốt ạ :D
     
  4. Cyentruk

    Cyentruk Verified User

    Bài viết:
    252
    Likes :
    291
    Cái của mình sử dụng VXF - Advanced Forum Statistics có hiệu chỉnh code, mai mình sẽ viết hướng dẫn cho bạn nhé, mỗi ngày mình sẽ chia sẻ một ít gọi là giữ nhiệt cho VXF để cảm ơn :D
     
    TrungSGN, twitter and xenforo1111 like this.
  5. twitter

    twitter New Member

    Bài viết:
    5
    Likes :
    3
    Vâng :D Bác giúp em tùy chỉnh và cả giao diện giống của bác nữa nhé :D
    Nhân tiện, nếu được thì bác giúp em cả mấy cái này luôn :">

    cungchuyenmuc newbie tag
     
    luker and Cyentruk like this.
  6. Cyentruk

    Cyentruk Verified User

    Bài viết:
    252
    Likes :
    291
    OK! :D Bạn có thể sử dụng tài khoản sau để test

     
    TrungSGN, luker and twitter like this.
  7. tienthanh2929

    tienthanh2929 Member

    Bài viết:
    82
    Likes :
    5
    Rất hữu ích , cảm ơn bạn nhiều nha :x
     
  8. luker

    luker New Member

    Bài viết:
    18
    Likes :
    1
    Cũng lót gạch hóng :P
     
  9. chinhnq114

    chinhnq114 New Member

    Bài viết:
    1
    Likes :
    1
    ôi thật hữu ích, lót gạch đợi tin vui.
     
    Cyentruk thích bài này.
  10. TuyetMai

    TuyetMai New Member

    Bài viết:
    38
    Likes :
    10
    Khó kiếm ra được cái topic như thế này. Like ủng hộ cho bạn :D
     
    Cyentruk thích bài này.
  11. Cyentruk

    Cyentruk Verified User

    Bài viết:
    252
    Likes :
    291
    Cái gì nhanh thì trả lời trước nha. :D

    Cái này mình dùng addon [Tinhte] Xentag

    Bước 1
    Sau khi cài đặt xong, bạn vào AdminCP > Appearance > Templates > tinhte_xentag_tags_thread_view
    Thay thế toàn bộ bằng đoạn CODE dưới đây, mục đích mình muốn thêm thẻ <label> để CSS cho chữ "TAG" màu xanh ở hình trên, mặc định ko có (bạn có thể so sánh code gốc để kiểm tra)
    Mã:
    <xen:if is="{$Tinhte_XenTag_canEdit}">
        <xen:require js="js/Tinhte/XenTag/frontend.js" />
        <xen:require css="tinhte_xentag.css" />
    
        <div class="sectionMain">
            <div class="Tinhte_XenTag_TagsInlineEditor" data-template="tags_thread_view">            
                <label>{xen:phrase tinhte_xentag_tags}</label>:
                <xen:if hascontent="true">
                    <xen:contentcheck>{xen:helper Tinhte_XenTag_getImplodedTagsFromThread, $thread, 1}</xen:contentcheck>
                <xen:else />
                    {xen:phrase tinhte_xentag_no_tags}
                </xen:if>
                (<a class="Tinhte_XenTag_Trigger" href="{xen:link 'threads/edit-tags', $thread}">{xen:phrase tinhte_xentag_edit_tags}</a>)
            </div>
        </div>
    <xen:else />
        <xen:if hascontent="true">
            <div class="sectionMain">          
                <div class="Tinhte_XenTag_TagsInlineEditor">
                <label>{xen:phrase tinhte_xentag_tags}</label>:
                <xen:contentcheck>{xen:helper Tinhte_XenTag_getImplodedTagsFromThread, $thread, 1}</xen:contentcheck>
                </div>
            </div>
        </xen:if>
    </xen:if>
    Bước 2
    Bạn vào AdminCP > Appearance > Templates > EXTRA.CSS
    Dán vào đoạn CSS dưới đây:

    Bạn lưu ý: hầu hết mã màu sắc mình dùng trong CSS không dùng mã trực tiếp mà dùng tên màu trong Appearance > Color Palette, điều này sẽ có lợi cho bạn khi bạn muốn chuyển màu cho toàn bộ forum.

    Mã màu tương ứng mình đã dùng:
    @primaryMedium: #df0012
    @secondaryMedium: #f9ba00
    @secondaryLighter: #fccb8d
    @secondaryLightest: #ffefda

    Mã:
    .Tinhte_XenTag_TagsEditor .Tinhte_XenTag_Tag {
      background: @secondaryLightest !important;
      border: 1px solid @secondaryLighter !important;
      color: @primaryDark !important;
      padding: 5px !important;
    }
    .Tinhte_XenTag_TagsInlineEditor {
      margin: 20px 0 0 0;
      font-size: 3px;
      color: #ffffff;
    }
    .Tinhte_XenTag_TagsInlineEditor label {
      background: #1E5A91;
      font-size: 13px;
      color: #ffffff !important;
      padding: 3px 5px;
      text-transform: uppercase;
    }
    .Tinhte_XenTag_TagsInlineEditor .Tinhte_XenTag_TagLink {
      background: #999;
      font-size: 13px;
      color: #ffffff !important;
      padding: 3px 5px;
      text-transform: uppercase;
    }
    .Tinhte_XenTag_TagsInlineEditor .Tinhte_XenTag_TagLink:hover {
      background: @primaryMedium;
    }
    .Tinhte_XenTag_TagsInlineEditor .Tinhte_XenTag_Trigger {
      background: @primaryMedium;
      font-size: 13px;
      color: #ffffff !important;
      padding: 3px 5px;
      text-transform: uppercase;
    }
    .Tinhte_XenTag_TagsInlineEditor .Tinhte_XenTag_Trigger:hover {
      color: @secondaryMedium !important;
    }
    .Tinhte_XenTag_TagsInlineEditorForm .muted {
      margin-bottom: 5px;
    }
     
    Last edited: 8/7/14
    LinhTinh9x, okok, forumkerry and 10 others like this.
  12. KuAnh

    KuAnh New Member

    Bài viết:
    26
    Likes :
    4
    Cái giao diện trang chủ làm bằng wordpress hả bạn :)
     
  13. Cyentruk

    Cyentruk Verified User

    Bài viết:
    252
    Likes :
    291
    Đúng rồi đó bạn. Hihi
     
  14. Cyentruk

    Cyentruk Verified User

    Bài viết:
    252
    Likes :
    291
    Tiếp tục nha. :D
    Cái này mình dùng addon của ChipXF: http://vxf.vn/threads/chipxf-view-more-threads-same-category-1-1.380/

    Bạn vào AdminCP > Appearance > Templates > EXTRA.CSS
    Dán vào đoạn CSS dưới đây:

    Bạn lưu ý: hầu hết mã màu sắc mình dùng trong CSS không dùng mã trực tiếp mà dùng tên màu trong Appearance > Color Palette, điều này sẽ có lợi cho bạn khi bạn muốn chuyển màu cho toàn bộ forum.

    Mã màu tương ứng mình đã dùng:
    @primaryMedium: #df0012
    Mã:
    .moreThreads {
        background: #eee;
        font-size: 14px;
        line-height: 1.8em;
        margin: 50px 0 20px !important;
        padding: 0 0 10px 0;
    }
    .moreThreads h3 {
        color: #444 !important;
        font-weight: 700 !important;
        font-size: 18px;
        padding: 10px;
        border-bottom: 3px solid @primaryMedium;
    }
    .moreThreads ul {
        margin-left: 15px !important;
    }
     
    Last edited: 22/4/14
    forumkerry, bibiduy, haysuytu and 3 others like this.
  15. Cyentruk

    Cyentruk Verified User

    Bài viết:
    252
    Likes :
    291
    Website mình đang gặp lỗi: "An unexpected database error occurred. Please try again later."

    Hiện tượng này xảy ra ngay khi mình đang cài addon cho forum XenForo: "Thumbnails by Waindigo". Không biết đây là do trùng hợp hay sao vì lỗi xảy ra trên cả 2 url với 2 database riêng:
    http://fifavn.org/wordpress
    http://fifavn.org/forum

    Mình mới gửi ticket lên support của HKDA Vietnam nhờ xử lý trên server (chắc thiếu ram quá), hic!
     
    forumkerry and TrungSGN like this.
  16. twitter

    twitter New Member

    Bài viết:
    5
    Likes :
    3
    Em cảm ơn bác nhiều ạ :D
    Hóng nốt 2 cái TopX và Dành cho người mới ạ :">
     
    Cyentruk thích bài này.
  17. Cyentruk

    Cyentruk Verified User

    Bài viết:
    252
    Likes :
    291
    Mở ticket mà support của HKDA Vietnam quá chậm, mãi không thấy trả lời. Cuối cùng mình vào file config.php dán đoạn CODE dưới đây để vô hiệu tất cả các addon thì lại truy cập bình thường.
    Mã:
    $config['enableListeners'] = false;
    Sau đó vào AdminCP gỡ ngay và khẩn trương thằng "Thumbnails by Waindigo" chết dịch. Rồi xóa dòng code trên là lại ngon lành như từ đầu. Khó hiểu!
     
  18. phamthanhliem

    phamthanhliem Member

    Bài viết:
    296
    Likes :
    35
    hóng cao nhân
     
  19. Cyentruk

    Cyentruk Verified User

    Bài viết:
    252
    Likes :
    291
    - Thông kê gốc của VXF có 2 block chính, block 1 thống kê thành viên và block 2 thống kê chủ đề. Do đặc điểm của forum, mình chỉ muốn hiển thị thống kê chủ đề đi và ẩn thống kê thành viên đi.
    - Thêm nữa là phần chọn "Item limit" mình design lại nhìn cho nó gọn thay vì kiểu select mặc định của trình duyệt.

    Nếu bạn thích thì có thể làm theo các bước như sau.

    Bước 1
    Tải và Cài đặt: http://vxf.vn/resources/vxf-advanced-forum-statistics.174/updates

    Bước 2
    Bạn vào AdminCP > Appearance > Templates > VietXfAdvStats_wrapper
    Thay thế toàn bộ bằng vào đoạn CODE dưới đây:
    Mục đích để ẩn block 1
    Mã:
    <xen:require js="js/VietXfAdvStats/frontend.js" />
    <xen:require css="VietXfAdvStats.css" />
    
    <div class="VietXfAdvStats sectionMain" data-bulkUpdateUrl="{$bulkUpdateUrl}">
                     
        <div id="Block2nd">
                     <div class="VietXfAdvStats_Controls">
                <xen:if is="{xen:count {$itemLimits}} > 1">
                    <select class="VietXfAdvStats_ItemLimit Tooltip" title="{xen:phrase VietXfAdvStats_item_limit}">
                        <xen:foreach loop="$itemLimits" value="$itemLimitValue">
                            <option value="{$itemLimitValue}" {xen:selected '{$itemLimitValue} == {$itemLimit}'}>{xen:number {$itemLimitValue}}</option>
                        </xen:foreach>
                    </select>
                <xen:else />
                    <input type="hidden" value="{$itemLimit}" class="VietXfAdvStats_ItemLimit" />
                </xen:if>
         
                <xen:if is="{xen:count {$updateIntervals}} > 1">
                    <select class="VietXfAdvStats_updateInterval Tooltip" title="{xen:phrase VietXfAdvStats_update_interval}">
                        <xen:foreach loop="$updateIntervals" value="$updateIntervalValue">
                            <option value="{$updateIntervalValue}" {xen:selected '{$updateIntervalValue} == {$updateInterval}'}>{xen:number {$updateIntervalValue}}</option>
                        </xen:foreach>
                    </select>
                <xen:else />
                    <input type="hidden" value="{$updateInterval}" class="VietXfAdvStats_updateInterval" />
                </xen:if>
                </div>
            <ul class="tabs VietXfAdvStats_SectionTrigger" data-panes="#Block2ndPanes > li">
                           <xen:foreach loop="$sections2nd" value="$section">
                    <li><a href="{$requestPaths.requestUri}#{$section.section_id}">{$section.section_title}</a></li>
                </xen:foreach>
            </ul>
            <ul id="Block2ndPanes">
                <xen:foreach loop="$sections2nd" value="$section">
                    <xen:include template="VietXfAdvStats_wrapper_section_li">
                        <xen:set var="$liClass">VietXfAdvStats_Block2ndContent</xen:set>
                    </xen:include>
                </xen:foreach>
            </ul>
        </div>
        <div style="clear: both; height: 0px;">&nbsp;</div>
    </div>
    
    <xen:include template="preview_tooltip" />
    Bước 3
    Bạn vào AdminCP > Appearance > Templates > VietXfAdvStats.css
    Thay thế toàn bộ bằng vào đoạn CODE dưới đây để tạo style giống như diễn đàn bên mình.
    Mã:
    .VietXfAdvStats {
            margin-top: 20px;
            border: none;
    }
    
        .VietXfAdvStats h3 {
            @property "subHeading";
            font-size: 11px;
            color: @textCtrlBackground;
            background-repeat: repeat-x;
            padding-top: 5px;
            padding-bottom: 5px;
            margin: 10px auto 0;
            @property "/subHeading";
     
            @property "categoryStrip";
            margin: 0;
            min-height: 6px;
            @property "/categoryStrip";
     
            margin-bottom: 5px;
        }
    
            .VietXfAdvStats h3 .VietXfAdvStats_Header {
                @property "categoryStripTitle";
                font-size: 24px;
                font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
                color: @dimmedTextColor;
                @property "/categoryStripTitle";
            }
     
            .VietXfAdvStats .VietXfAdvStats_Controls {
                float: right;
                font-size: 12px;
                            margin-bottom: -50px;
            }
    
                .VietXfAdvStats h3 .VietXfAdvStats_Controls select {
                    margin-top: -3px;
                }
         
        select.VietXfAdvStats_ItemLimit {
            -khtml-border-radius: 0;
            -moz-appearance: none;
            -moz-border-radius: 0;
            -webkit-appearance: none;
            -webkit-border-radius: 0;
            appearance: normal;
            background: #ffffff;
            border-radius: 0;
            border-style: solid;
            border-width: 1px;
            color: #404040;
            font-family: "Segoe UI",Arial,san-serif;
            height: 23px;
            outline: 0;
            padding: 0 0 0 4px;
            text-align: center;
            width: 30px;
        }
    
        #Block1st {
            float: left;
            width: @VietXfAdvStats_Block1stWidth;
            }
    
        #Block2nd {
            margin-left: {xen:calc '@VietXfAdvStats_Block1stWidth'}px;
                    background: #f0f0f0;      
        }
    
            #Block1stPanes,
            #Block2ndPanes {
                padding: 7px;
                            background: none;                             
            }
    
            #Block1st .VietXfAdvStats_Block1stContent {
                padding-left: 25px;
                padding-right: 5px;
                line-height: 14px;
            }
            #Block2nd .VietXfAdvStats_Block2ndContent {
                padding-left: 5px;
                padding-right: 5px;
                line-height: 14px;
                     
            }
            #Block1st .VietXfAdvStats_Block1stContent{
                background: url(styles/default/xenforo/list.gif) no-repeat top left;
            }
    
    .VietXfAdvStats_Section {
        position: relative;
        zoom: 1;
    }
    
        .VietXfAdvStats_SectionItem {
            display: table;
            table-layout: fixed;
            width: 100%;
            word-wrap: normal;
            padding-top: 3px;
            padding-bottom: 3px;
        }
    
            .VietXfAdvStats_SectionItem .VietXfAdvStats_SectionItemBlock {
                display: table-cell;
                vertical-align: middle;
            }
    
        .VietXfAdvStats_SectionItem .VietXfAdvStats_SectionItemTitle {
            @property "VietXfAdvStats_SectionItemTitleCss";
    
            @property "/VietXfAdvStats_SectionItemTitleCss";
        }
    
        .VietXfAdvStats_SectionItem .VietXfAdvStats_SectionItemInfo {
            @property "VietXfAdvStats_SectionItemInfoCss";
            font-size: 12px;
            text-align: right;
            @property "/VietXfAdvStats_SectionItemInfoCss";
        }
    
    /** IE <8 **/
    .VietXfAdvStats_SectionItem                              { *display: block; _vertical-align: bottom; }
    .VietXfAdvStats_SectionItem .listBlock                   { *display: block; *float: left; }
    .VietXfAdvStats_SectionItem .listBlock                   { _height: 52px; *min-height: 52px; } /* todo: should be calculation */
    .VietXfAdvStats_Section .VietXfAdvStats_SectionItemTitle { *width: 69.98%; }
    .VietXfAdvStats_Section .VietXfAdvStats_SectionItemInfo  { *width: 29.98%; }
    
    .VietXfAdvStats_SectionItem {
        background: none;
    }
    
    /** USERS SECTION */
    .VietXfAdvStats_User {
    }
    
        .VietXfAdvStats_User .VietXfAdvStats_SectionItemTitle {
            width: {xen:if '{xen:calc '@VietXfAdvStats_UserNameWidth'} > 0', '@VietXfAdvStats_UserNameWidth', 'auto'};
        }
    
        .VietXfAdvStats_User .VietXfAdvStats_SectionItemInfo {
            width: {xen:if '{xen:calc '@VietXfAdvStats_UserInfoWidth'} > 0', '@VietXfAdvStats_UserInfoWidth', 'auto'};
        }
    
    /** THREADS SECTION */
    .VietXfAdvStats_Thread {
    }
    
        .VietXfAdvStats_Thread .VietXfAdvStats_ThreadTitle.new a {
            font-weight: bold;
        }
    
        .VietXfAdvStats_Thread .VietXfAdvStats_SectionItemTitle {
            width: {xen:if '{xen:calc '@VietXfAdvStats_ThreadTitleWidth'} > 0', '@VietXfAdvStats_ThreadTitleWidth', 'auto'};
        }
    
        .VietXfAdvStats_Thread .VietXfAdvStats_SectionItemInfo {
            width: {xen:if '{xen:calc '@VietXfAdvStats_ThreadInfoWidth'} > 0', '@VietXfAdvStats_ThreadInfoWidth', 'auto'};
        }
     
  20. AnhLe

    AnhLe Member

    Bài viết:
    88
    Likes :
    36
    Tiếp thu cách bác css cho topx.
     
    Cyentruk thích bài này.
comments powered by Disqus

Chia sẻ trang này

Đang tải...