[TUTs] Sitemap Forum giao diện Xenforo

Sitemap Forum giao diện Xenforo

Giới thiệu

Sitemap hay còn gọi là sơ đồ diễn đàn - là danh sách giản lược các chỉ mục, giúp người dùng có thể truy cập nhanh chuyên mục mình cần. Trong forumotion, ta có jumpbox với chức năng tương tự, tuy nhiên nó nằm ở dạng select, option tag nên khó chỉnh giao diện, vì lý do này mà một số diễn đàn muốn sử dụng nó như: tạo sơ đồ, khung điều hướng nhanh,... cũng phải nhập thủ công. Trong tutorial này, mình sẽ chuyển jumpbox sang dạng sitemap, sử dụng ul, li tag.
( Copy gần như nguyên văn của @Zzbaivong )

Trong tutorial có sử dụng Gist của @Zzbaivong, các bạn có thể xem qua tại: [Gist] Tạo sitemap cho diễn đàn từ jumpbox

Vì vậy nên đây không hẳn là code do mình làm, chỉ là 1/5 của nó thôi, lão @Zzbaivong nói là "không thích làm nữa vì một số lý do" =))) nên mình hoàn thiện nó trong tutorial này

Hướng dẫn

ACP >> Display >> Pictures and Colors >> Colors >> CSS Stylesheet
Chèn đoạn sau vào:

Code:

/* SitemapForum by Mạc Lục Phàm */
body.hiddenOverflow{overflow:hidden;}
.sitemapOpen{background:url('http://i57.servimg.com/u/f57/18/74/01/46/quickn10.png') no-repeat left center;display:inline-block;cursor:pointer;padding:4px;padding-left:24px;font-weight:700;}
#sitemapOverlay{background:rgba(0,0,0,0.8);position:fixed;top:0;left:0;width:100%;height:100%;display:none;z-index:9999;}
#sitemapSection{width:80%;margin:10%;background:#fafafa;border:10px solid #ddd;box-sizing:border-box;}
#sitemapHeading{font-size:16px;line-height:normal;padding:5px 15px;background:#333;color:#fff;font-weight:700;}
#sitemapMain{display:table;width:100%;}
#sitemapMain .sitemapColumn{display:table-cell;}
#sitemapMain .sitemapInhead{padding:5px 20px;background:#eee;}
#sitemapMain .sitemapQuickLinks{display:block;list-style:none;border-bottom:1px solid #eee;}
#sitemapMain .sitemapQuickLinks a{display:block;padding:5px 20px;}
#sitemapMain .sitemapQuickLinks a:hover{background:#eee;}
#zzSitemap{overflow:auto;height:237px;}
#zzSitemap ul{list-style:none;}
#zzSitemap ul li a{display:block;padding:5px 15px;}
#zzSitemap ul li a:hover{background:#eee;}
#zzSitemap ul > li > ul > li{padding-left:15px;}
#sitemapOption{text-align:right;}
#sitemapOption a{display:inline-block;margin:10px 25px;padding:5px 15px;background:#333;color:#fff;border:1px solid #aaa;box-shadow:0 1px 2px #eee;cursor:pointer;}

ACP >> Modules >> HTML & JAVASCRIPT >> Javascript codes management >> Create a new javascript
Title * : Sitemap Forum
Placement : In all the pages
Javascript Code * :

Code:

$(function() {
  var $smOpen = $('.sitemapOpen'),
      $smClose = $('#sitemapClose'),
      $smMain = $('#sitemapOverlay'),
      $bodyOv = $('body');

  $smOpen.click(function() {
    $smMain.fadeIn();
    $bodyOv.addClas('hiddenOverflow');
  });
  $smClose.click(function() {
    $smMain.fadeOut();
    $bodyOv.removeClas('hiddenOverflow');
  });

  /* Chuyển jumpbox thành sitemap by Zzbaivong */
  var $cat = $("<ul>", {
    "data-level": 2,
    "class": "group-map"
  });

  $("#zzSitemap").html($cat);

  var $link = "";
  var $li = "";
  var catLevel = 2;
  var currLevel = 0;

  $('option', '[name="selected_id"]').each(function() {

    var $this = $(this);
    var $val = $this.val();

    if ($val != "-1") {

      var $html = $this.html();
      var $name = $html.match(/^.*\|--(.*)/)[1];
      currLevel = $html.split(/&nbsp;|\|/).length;

      if (catLevel < currLevel) {
        $li.addClass("cat-map");
        $("<ul>", {
          "data-level": currLevel,
          "class": "group-map"
        }).appendTo($li);
      }

      $link = $("<a>", {
        href: "/" + $val + "-jump",
        text: $name
      });

      $li = $("<li>", {
        html: $link
      });

      $li.appendTo('.group-map[data-level="' + currLevel + '"]:last');

      catLevel = currLevel;

    }

  });

});

ACP >> Display >> Templates >> Quản Lý Tổng Thể >> overall_footer_end
Tìm

Code:

<!-- BEGIN switch_facebook_login -->

Chèn vào trước nó:

Code:

<div id="sitemapOverlay">
  <div id="sitemapSection">
    <h3 id="sitemapHeading"> Điều hướng nhanh </h3>
 
    <div id="sitemapMain">
      <div class="sitemapColumn" style="width:30%;border-right:1px solid #ddd;">
        <div class="sitemapInhead"> Liên kết thông dụng </div>
        <ul class="sitemapQuickLinks">
          <li><a href="/">Trang chủ</a></li>
          <li><a href="/forum">Diễn đàn</a></li>
          <!-- BEGIN switch_user_logged_out -->
          <li><a href="/register">Đăng ký</a></li>
          <li><a href="/login">Đăng nhập</a></li>
          <!-- END switch_user_logged_out -->
          <!-- BEGIN switch_user_logged_in -->
          <li><a href="/login?logout=1">Thoát</a></li>
          <!-- END switch_user_logged_in -->
        </ul>
        <!-- BEGIN switch_user_logged_in -->
        <ul class="sitemapQuickLinks">
          <li><a href="/profile?mode=editprofile">Sửa thông tin</a></li>
          <li><a href="/profile?mode=editprofile&page_profil=avatars">Đổi ảnh đại diện</a></li>
          <li><a href="/search?search_id=newposts">Xem bài viết mới</a></li>
          <li><a href="/privmsg?folder=inbox">Tin nhắn riêng</a></li>
        </ul>
        <!-- END switch_user_logged_in -->
      </div>
      <div class="sitemapColumn" style="width:70%">
        <div class="sitemapInhead"> Danh sách diễn đàn </div>
        <div id="zzSitemap"></div>
      </div>
    </div>
 
    <div id="sitemapOption">
      <a id="sitemapClose"> Đóng </a>
    </div>
  </div>
</div>

Tiếp theo là nút nhấn vào sẽ hiện sitemap:

Code:

<a class="sitemapOpen" href="#sitemap"> Điều hướng nhanh </a>

Các bạn có thể để nó ở bất cứ chỗ nào các bạn cho là phù hợp.

Lưu ý

Như đã nói ở phần hướng dẫn, tutorial này dựa vào jumpbox mặc định của forumotion chuyển về dạng sitemap, nếu bạn chưa biết nó là cái gì thì hình dáng của nó như thế này ở cuối forum:

Nếu bạn chỉ ẩn nó thì không sao, tut vẫn hoạt động bình thường, nhưng nếu bạn đã xóa nó khỏi forum thì bắt buộc phải thêm lại.
Đây là code của nó trong overall_footer_begin

Code:

<form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}" id="qjump">
 <fieldset>{S_JUMPBOX_SELECT}</fieldset>
 </form>

Nguồn

Zzbaivong - devs.forumvi.com
KirigayaKazuto (Mạc Lục Phàm) - devs.forumvi.com

---

Tags: #tutorial #tut #sitemap #jumbox #xenforo #gist

hồi trước RIP mà RIP ko đc