stellar+twikoo配置最新评论以及配置live2d

            if (id == 'timeline' || 'memos' || 'marked') { //

            if (id == 'timeline' || 'memos' || 'marked' || 'twikoo') { 

  if (!needFancybox) {
    const els = document.getElementsByClassName('ds-twikoo');
    if (els != undefined && els.length > 0) {
      needFancybox = true;
    }
  }

utils.jq(() => {
    const el = document.querySelector('.ds-twikoo');
    utils.onLoading(el); // 加载动画
    const api = el.getAttribute('api');
    const limit = parseInt(el.getAttribute('limit')) || 10;
    const reply = el.getAttribute('hide') !== 'reply';
    if (!api) return;
    fetch(api, {
      method: "POST",
      body: JSON.stringify({
        "event": "GET_RECENT_COMMENTS",
        "envId": api,
        "pageSize": limit,
        "includeReply": reply
      }),
      headers: { 'Content-Type': 'application/json' }
    })
    .then(res => res.json())
    .then(({ data }) => {
      utils.onLoadSuccess(el); // 移除动画
      //cicada 1
      data.forEach((comment, j) => {
        //cicada 1
        // let commentText = comment.commentText;
        // //if (!commentText || commentText.trim() === '') return; // 跳过空评论 //cicada comment 1
        // // 转义字符
        // commentText = commentText.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
        // commentText = commentText.length > 50 ? commentText.substring(0, 50) + '...' : commentText;
        //cicada 0
        var cell = '<div class="timenode" index="' + j + '">';
        cell += '<div class="header">';
          // 添加用户头像
        cell += '<div class="user-info">';
        const avatarImg = `<img class="user-avatar" src="${comment.avatar}" alt="Avatar">`;
        cell += avatarImg;
        cell += '<span>' + comment.nick + '</span>';
        cell += '</div>';
        //cell += '<span>' + new Date(comment.created).toLocaleString() + '</span>';
        cell += '<span>' + new Date(comment.created).toLocaleDateString() + '</span>'; //cicada modify
        cell += '</div>';
        let commentHTML = comment.comment;
        let tempDiv = document.createElement('div');
        tempDiv.innerHTML = commentHTML;      
        //cicada comment 1
        // cell += '<a class="body" href="' + comment.url + '#' + comment.id + '">';
        // cell += commentText; //
        // cell += '</a>';
        //cicada comment 0
        // 提取文本内容
        let textContent = tempDiv.textContent || tempDiv.innerText;          
        // 创建一个变量用于存储图片HTML
        let imagesHTML = '';
        const images = tempDiv.querySelectorAll('img');
        // 遍历所有图片，构建图片HTML字符串，并设置样式属性
        images.forEach(img => {
          let imgSrc = img.src;
          // 此处应添加逻辑以确保图片URL是可接受的
          if (imgSrc) {
            let imgTag = `<img src="${imgSrc}" style="max-height: 50px; width: auto;" alt="Image from comment">`;
            imagesHTML += imgTag; // 将图片添加到imagesHTML字符串
          }
        });
        // 构建带有文本和图片的完整评论内容
        let commentContent = textContent + '<div style="clear: both;"></div>' + imagesHTML;  
        cell += '<a class="body" href="' + comment.url + '#' + comment.id + '">';
        cell += commentContent; // 将文本和图片添加到cell中
        cell += '</a>';
        cell += '</div>';  
        // 使用jQuery的append方法将cell添加到页面中的元素el中
        $(el).append(cell);
      });
    })
    .catch(() => utils.onLoadFailure(el));
  });

<style>
  .md-text.content {
    width: 100%; /* 确保父容器占满可用宽度 */
    max-width: 100%; /* 避免父容器宽度超出其父元素 */
    overflow-x: auto; /* 允许父容器在需要时显示横向滚动条 */
    overflow-y: hidden; /* 隐藏垂直滚动条 */
    box-sizing: border-box; /* 边框和内边距包含在宽度计算内 */
  }

  .MathJax_Display {
    max-width: 100%; /* 限制MathJax的最大宽度不超过其父容器 */
    overflow-x: auto; /* 允许MathJax在内容超宽时显示滚动条 */
    overflow-y: hidden; /* 隐藏垂直滚动条 */
    box-sizing: border-box; /* 边框和内边距包含在宽度计算内 */
    display: inline-block; /* 使容器能够根据内容调整大小 */
  }
</style>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    const mathDisplays = document.querySelectorAll('.MathJax_Display');
    mathDisplays.forEach(function(display) {
      display.style.overflowX = 'auto';
      display.style.maxWidth = '100%';
      display.style.boxSizing = 'border-box';
      display.style.display = 'inline-block';
    });
  
    const mdTextContents = document.querySelectorAll('.md-text.content');
    mdTextContents.forEach(function(content) {
      content.style.overflowX = 'auto';
      content.style.width = '100%';
      content.style.maxWidth = '100%';
      content.style.boxSizing = 'border-box';
    });
  });
</script>