🕰️ Timeline 時光長廊 🕰️

網站建設時間軸

2024-8-19

1. 全網站串接三個贊助口：LikeCoin、BuyMeACoffee、BobaMe。
2. 側邊影片的所有 Bug 已修復完畢。最後一個問題來自於網站在頁面大量來回切換後，會導致首頁 js 沒有成功執行，造成影片只有播放一次沒有自動播下一部。在此使用立即執行函數來處理，效果良好且問題解決。修復細節如下程式碼所述：

// 使用立即執行函數來避免全局變量污染
(function() {
  // 存儲全局變量
  const videoPlayerConfig = {
    videoDom: null,
    apiUrl: "https://www.cunshao.com/666666/api/web.php",
    hasStartedPlaying: false  // 新增：追蹤是否已經開始播放
  };

  // 初始化函數
  function initVideoPlayer() {
    videoPlayerConfig.videoDom = document.getElementById("girl-video");
    
    if (videoPlayerConfig.videoDom) {
      setupEventListeners();
      loadNewVideo(false);  // 加載影片但不自動播放
    }
  }

  // 設置事件監聽器
  function setupEventListeners() {
    $(".girl_btn_fuck").on("click", togglePlayPause);
    $(".girl_btn_next").on("click", () => loadNewVideo(true));
    videoPlayerConfig.videoDom.addEventListener("ended", () => loadNewVideo(true));
  }

  // 切換播放/暫停
  function togglePlayPause() {
    if (videoPlayerConfig.videoDom.paused) {
      videoPlayerConfig.videoDom.play();
      $(this).text("暫停");
      videoPlayerConfig.hasStartedPlaying = true;  // 標記已經開始播放
    } else {
      videoPlayerConfig.videoDom.pause();
      $(this).text("播放");
    }
  }

  // 加載新影片
  function loadNewVideo(autoPlay) {
    fetch(videoPlayerConfig.apiUrl)
      .then(response => response.text())
      .then(newUrl => {
        videoPlayerConfig.videoDom.src = newUrl;
        if (autoPlay || videoPlayerConfig.hasStartedPlaying) {
          videoPlayerConfig.videoDom.play();
        }
      })
      .catch(error => {
        console.error("Error fetching new video URL:", error);
        videoPlayerConfig.videoDom.src = videoPlayerConfig.apiUrl;
        if (autoPlay || videoPlayerConfig.hasStartedPlaying) {
          videoPlayerConfig.videoDom.play();
        }
      });
  }

  // 使用 MutationObserver 來檢測 DOM 變化
  function setupMutationObserver() {
    const targetNode = document.body;
    const config = { childList: true, subtree: true };

    const callback = function(mutationsList, observer) {
      for(let mutation of mutationsList) {
        if (mutation.type === 'childList') {
          const videoDom = document.getElementById("girl-video");
          if (videoDom && videoDom !== videoPlayerConfig.videoDom) {
            videoPlayerConfig.videoDom = videoDom;
            setupEventListeners();
            loadNewVideo(false);  // 加載影片但不自動播放
          }
        }
      }
    };

    const observer = new MutationObserver(callback);
    observer.observe(targetNode, config);
  }

  // 在 DOMContentLoaded 事件觸發時初始化
  document.addEventListener('DOMContentLoaded', function() {
    initVideoPlayer();
    setupMutationObserver();
  });

  // 為了兼容性，也保留 jQuery 的方法
  $(document).ready(function() {
    initVideoPlayer();
    setupMutationObserver();
  });

  // 如果頁面已經加載完成，立即執行初始化
  if (document.readyState === "complete" || document.readyState === "interactive") {
    initVideoPlayer();
    setupMutationObserver();
  }
})();

2024-8-16-

這天是作者在大三暑假寫出人生第一篇論文(大型語言模型相關)，並投稿國際期刊與國內頂大研討會的日子，相當值得紀念一下。

2024-8-3

修正導航欄當標題過長時，標題位置未置中的問題。在 custom.css 中，添加

center#name-container {
    left: 47% !important;                    /* 將容器的左邊緣置於父元素的中心偏左一點點 */
    transform: translateX(-50%) !important;  /* 將容器向左移動自身寬度的一半,從而使其完全居中 */
}

並保持響應式設計。當螢幕寬度小於768px時，標題仍會隱藏。

@media screen and (max-width: 768px) {
  center#name-container {
    display: none;
  }
}

2024-5-26

1. 完成修復側邊影片的 bug，於跳轉頁面後再回首頁會失效的問題。在 fomal.js 中，
   藉由新增 document.getElementById("rightGirl").innerText = `:root{--rightside-girl-display: block and none}`;
   取代原本 document.querySelector(".girl.card-widget").style.display = "block and none";
   並在 custom.css 新增 .girl{display: var(--rightside-girl-display);}
   以及在 _config.butterfly.yml 中，於 inject: head: 新增上 <style id="rightGirl"></style>
2. 檢測後，本網站閱讀人數可能會被閱讀者的廣告阻擋器限制住 js 而造成無法載入閱讀人數，閱讀者主動關閉廣告阻擋器即可解決。

2024-1-22

1. 部落格改版

2023-7-28

1. 部落格滿一周年

2022-7-28

1. 部落格首次建立，網站誕生的日子