blog/themes/Ying/static/js/main.js

// 判断是否为移动端
function isMobile() {
  if (window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {
    return true; // 移动端
  } else {
    return false; // PC端
  }
}

// 文章图片灯箱
window.ViewImage && ViewImage.init('.post-content img');

// 激活返回顶部插件
$(function () {
  $.scrollUp({
    animation: 'fade',
    scrollImg: true
  });
});

// loader定时器
$(document).ready(function () {
  setTimeout(function () {
    $("#loader").addClass("hide");
  }, 30000);
});
// 点击进入按钮
$("#closeloader").click(function () {
  $("#loader").addClass("hide");
});
// nav栏样式调整
$('#libabys').first().attr("style", "margin-left: -5px");

$('#libabys').eq(1).attr("style", "margin-left: -5px");
// 友链列表版样式调整
$('.itp-index:odd').attr("style", "float: right;width:48%;");

//文章图片懒加载
lazyLoadInit({
  // coverColor: "white",
  // coverDiv: "<div style='display: flex; justify-content: center; align-items: center; height: 200px; color: #000000;'><span>优世界·一个记录生活点滴的小站</span></div>",
  offsetBottom: 800,
  offsetTopm: 800,
  showTime: 1100
});

async function loadBarrager() {
  try {
    const commentsData = await initArtalkAndGetComments();
    if (commentsData) {
      await createBarragerFromArtalk(commentsData);
    }
  } catch (error) {
    console.error('加载弹幕时发生错误:', error);
  }
}

// 异步初始化 Artalk 并获取评论数据
function initArtalkAndGetComments() {
  return new Promise((resolve, reject) => {
    Artalk.use((ctx) => {
      ctx.on('list-loaded', () => {
        console.log('评论列表加载完毕');
        const commentsData = ctx.getComments();
        if (commentsData) {
          resolve(commentsData);
          // console.log(commentsData);
        } else {
          reject('获取评论数据失败');
        }
      });
    });

    Artalk.init({
      el: '#Comments',                // 绑定元素的 Selector
      server: 'https://artalk.5b2.cn',  // 后端地址
      site: '优世界',             // 你的站点名
      flatMode: true
    });
  });
}

// 异步创建弹幕
async function createBarragerFromArtalk(commentsData) {
  const looperTime = 1000;  // 每条弹幕的发送间隔，单位毫秒
  const flattenedComments = flattenComments(commentsData);
  const totalComments = flattenedComments.length;
  let currentIndex = 0;

  // 初始化弹幕插件
  let barrage = new Barrage.default({
    el: 'body',
    backColor: "#000000b5",
    fontSize: "14px",
    isLeft: true,
    speed: 0,
    height: "33px"
  });

  if (totalComments !== 0) {
    while (currentIndex < totalComments) {
      const currentComment = flattenedComments[currentIndex];
      const barragerItem = {
        headImg: "https://cravatar.cn/avatar/"+currentComment.email_encrypted + "?s=33" || 'static/default-avatar.png',
        content: stripHTML(currentComment.content_marked) || 'No comment',
        href: currentComment.link || '#',
        speed: 10
      };

      // 发送弹幕
      barrage.start(barragerItem.content, {
        speed: barragerItem.speed,
        headImg: barragerItem.headImg,
        speed: 35
      });

      currentIndex++;
      await delay(looperTime);  // 等待指定的时间再发送下一条弹幕
    }
  }
}

// 延迟函数，返回一个 Promise，用于等待指定的毫秒数
function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

// 去除 HTML 标签的函数
function stripHTML(html) {
  return html.replace(/<\/?[^>]+(>|$)/g, "");
}

// 展平评论数据结构的函数
function flattenComments(comments) {
  let result = [];
  comments.forEach(function (comment) {
    result.push(comment);
    if (comment.children && comment.children.length > 0) {
      result = result.concat(flattenComments(comment.children));
    }
  });
  return result;
}

// 调用异步的弹幕加载函数
if (document.querySelector("#Comments") && !isMobile()) {
  loadBarrager()
}

// 灯箱调用(首页顶部/Memos页面)
window.ViewImage && ViewImage.init('.content_zhengwen img, .top-img,.gallery-thumbnail img,.posts_photo a,.photo-moment a');

// 页面上滑加载动画
function animateSummaries() {
  const articles = document.querySelectorAll('.img-hide,.retu-hide'); // 包含新的类
  const shuffledArticles = Array.from(articles).sort(() => Math.random() - 0.5);

  function animate(article, delay) {
    setTimeout(() => {
      article.classList.add('visible');
    }, delay);
  }

  const options = {
    rootMargin: '0px 0px -70px 0px',
  };

  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry, index) => {
      if (entry.isIntersecting) {
        // 类名 retu-hide 延迟 100 默认 img-hide 延迟 8，实现错落效果
        const delay = entry.target.classList.contains('retu-hide') ? index * 100 : index * 8;
        animate(entry.target, delay);
        observer.unobserve(entry.target);
      }
    });
  }, options);

  shuffledArticles.forEach((article) => {
    observer.observe(article);
  });
}


function initEditor() {
  const loadEditorBtn = document.getElementById("loadEditorBtn");
  const memosEditor = document.querySelector(".memos-editor");
  const editorBody = document.querySelector('.index-laodao');

  if (loadEditorBtn) {
    loadEditorBtn.addEventListener("click", function () {
      // 切换编辑器显示状态
      getEditor != "show" ? hasMemosOpenId() : '';
      memosEditor.classList.toggle("d-none");

      // 保存编辑器显示状态到 localStorage
      if (window.localStorage) {
        const isHidden = memosEditor.classList.contains("d-none");
        window.localStorage.setItem("memos-editor-display", isHidden ? "hide" : "show");
        getEditor = window.localStorage.getItem("memos-editor-display");
      }

      // 平滑滚动到 .index-laodao
      if (editorBody && !memosEditor.classList.contains("d-none")) {
        editorBody.scrollIntoView({ behavior: 'smooth' });
      }
    });
  }
}

// 初始化编辑器逻辑
initEditor();