Hiển Thị Thời Gian 'Cách Đây' (Time Ago) cho Blogspot

Nếu bạn đang sử dụng Blogspot để chia sẻ nội dung và muốn làm cho thời gian đăng bài của bạn trở nên thân thiện và dễ hiểu hơn, thì hãy thêm tính năng hiển thị thời gian 'cách đây' (Time Ago) vào blog của bạn. Điều này giúp độc giả của bạn dễ dàng nhận biết được khoảng thời gian kể từ khi bài viết được đăng. Cách cài đặt Hiển Thị Thời Gian 'Cách Đây' (Time Ago) cho Blogspot.

Cách làm này áp dụng lên Tiện ích bài đăng của Blog (Tiện ích bài đăng) trên Blog.

Đầu tiên các bạn phải xác định được Class của ngày đăng là gì. Tôi ví dụ các Template họ thường đặt Class là published

Ví dụ: <time class="published" datetime="2020-07-30T13:19:00-07:00">July 30, 2020</time>

Ta thấy nó có 1 chuỗi datatime đó là định dạng ngày kiểu  ISO 8601. Cách cài đặt như sau, copy toàn bộ code bên dưới dán trước thẻ đóng </body> và lưu lại là xong.

Đây là 1 ví dụ html trong Blogger

<time class='published' expr:datetime='data:post.date.iso8601'><data:post.date/></time>

Hoặc

<span class='post-date published' expr:datetime='data:post.date.iso8601'><data:post.date/></span>

Cách hoạt động code sẽ duyệt qua tất cả các phần thẻ html có class là published và cắt chuỗi datetime để lấy ngày, rồi nó cộng trừ nhân chia đó là việc của code nó tự tính.

Nếu Blog của bạn nó không giống như trên thì các bạn tự thêm và khái báo expr:datetime='data:post.date.iso8601'

Bạn có thể xóa thẻ <data:post.date/> để cho nó khỏi hiện ngày, trước khi nó hiển thị kiểu TimeAgo.

Copy

<script>
  //<![CDATA[
  function updateRelativeTime() {
    const timeElements = document.querySelectorAll('.published');
    timeElements.forEach(timeElement => {
      const isoDateString = timeElement.getAttribute('datetime');
      const pastDate = new Date(isoDateString);
      const currentDate = new Date();
      const timeDifference = currentDate - pastDate;
      const seconds = Math.floor(timeDifference / 1000);
      const minutes = Math.floor(seconds / 60);
      const hours = Math.floor(minutes / 60);
      const days = Math.floor(hours / 24);
      const months = Math.floor(days / 30);
      const years = Math.floor(days / 365);
      let timeAgo;
      if (years > 0) {
        timeAgo = `${years} năm`;
      } else if (months > 0) {
        timeAgo = `${months} tháng`;
      } else if (days > 0) {
        timeAgo = `${days} ngày`;
      } else if (hours > 0) {
        timeAgo = `${hours} giờ`;
      } else if (minutes > 0) {
        timeAgo = `${minutes} phút`;
      } else {
        timeAgo = `${seconds} giây`;
      }
      timeElement.textContent = `Cách đây ${timeAgo}`;
    });
  }
  window.onload = updateRelativeTime;
  //]]>
</script>

Còn trong code JavaScript thì bạn có thể tham khảo code dưới

Copy

<script>
  //<![CDATA[
  function calculateTimeAgo(isoTimeString) {
    const pastDate = new Date(isoTimeString);
    const currentDate = new Date();
    const timeDifference = currentDate - pastDate;
    const seconds = Math.floor(timeDifference / 1000);
    const minutes = Math.floor(seconds / 60);
    const hours = Math.floor(minutes / 60);
    const days = Math.floor(hours / 24);
    const months = Math.floor(days / 30);
    const years = Math.floor(days / 365);
    if (years > 0) {
      return `${years} năm`;
    } else if (months > 0) {
      return `${months} tháng`;
    } else if (days > 0) {
      return `${days} ngày`;
    } else if (hours > 0) {
      return `${hours} giờ`;
    } else if (minutes > 0) {
      return `${minutes} phút`;
    } else {
      return `${seconds} giây`;
    }
  }
  // Ví dụ
  const isoTimeString = "2020-10-20T12:34:56Z";
  const timeAgo = calculateTimeAgo(isoTimeString);
  console.log(`Cách đây ${timeAgo}`);
  //]]>
</script>