Cộng Đồng MyBB Việt Nam
[Share] MyCode Read More - Phiên bản in

+- Cộng Đồng MyBB Việt Nam (https://congdong.mybb.vn)
+-- Diễn đàn: Thư Viện MyBB (https://congdong.mybb.vn/Forum-thu-vien-mybb)
+--- Diễn đàn: MyCodes (https://congdong.mybb.vn/Forum-mycodes)
+--- Chủ đề: [Share] MyCode Read More (/Thread-share-mycode-read-more)

MyCode Read More - JLP423 - 12-12-2023

Chào mọi người,
theo gợi ý của anh @Tanthienlang , Joey viết cái MyCode này để giúp bài viết diễn đàn của chúng ta không bị quá dài. Mặc dù là myBB có plugins như là hide hoặc spoiler, nhưng mấy plugin đó ẩn hết tất cả thông tin trong code. MyCode này hoạt động gần giống như là excerpt của Wordpress. Tạm thời thì Joey share MyCode, nhưng sau này nếu có nhiều yêu cầu thì Joey có thể sẽ chuyển nó thành plugin đơn giản với vài basic settings

Demo: https://mybb.vn/Thread-test-test-more-tag?pid=180#pid180

Bắt tay nào:

1. Thêm đoạn CSS này vào global.css:
 
Code: 
/*Read More CSS*/

    .readmore {
      border: 1px solid #214f7e;
      background-color: #fdf6e3;
      transition: max-height 0.5s ease;
      overflow: hidden;
      max-height: 150px;
      width: 90%;
      margin: 10px auto;
      padding: 15px;
      border-left: 4px solid #214f7e;
      position: relative;
    }

    .readmore.expanded {
      max-height: 1000px; /* Set height to auto for expanded state */
    }

    .readmore-button-container {
    position: relative;
    color: #214f7e;
    border-bottom: 1px solid #214f7e;
    padding-bottom: 3px;
    margin: 0 0 10px 0;
    font-style: normal;
    font-weight: bold;
    }

    .readmore-button {
      margin-right: 10px;
    }
/*End Read More CSS */

2. Thêm đoạn code này vào headerinclude template:
 
Code: 
<script>
    function toggleReadMore(button) {
      var content = button.closest('.readmore');
      content.classList.toggle('expanded');
      var readMoreButton = content.querySelector('.readmore-button');

      if (content.classList.contains('expanded')) {
        readMoreButton.innerHTML = "Read Less";
      } else {
        readMoreButton.innerHTML = "Read More";
      }
    }
  </script>

3. Thêm MyCode:
Regular expression:
 
Code: 
\[more\](.*?)\[/more\]

Replacement:
 
Code: 
<div class="readmore">
    <div class="readmore-button-container">
      <button class="readmore-button" onclick="toggleReadMore(this)">Read More</button>
    </div>
    <p>$1</p>
  </div>

4. Cách sử dụng:
Code: 
[more] Nội dung dài đăng đẳng của bạn ở đây [/more]