起因是再通过这篇文章引入Memos后，发现单个说说的评论无法点击。

弄了两天没解决，没学过js和css难顶o。

之后问了deepseek，改了几下就好了。

以下为部分对话内容。

Q1:

这段代码有点击单个说说无法跳出twikoo评论的问题，应该如何修改，代码中的js文件在附件中

  1. 首先确保评论按钮正确显示并绑定事件：
1
2
3
4
5
6
7
8
// 在updateHTMl函数中找到datacountDOM部分，修改为：
let datacountDOM = ""
if(bbMemo.twiEnv){
  datacountDOM = `<div class="datacount" data-twienv="${bbMemo.twiEnv}" data-id="${bbID}" onclick="loadTwikoo(this)">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-img"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
    ${data[i].count || 0}
  </div>`
}
  1. 确保loadTwikoo函数正确加载Twikoo评论：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
function loadTwikoo(e) {
  let memoEnv = e.getAttribute("data-twienv")
  let memoId = e.getAttribute("data-id")
  let twikooDom = document.querySelector('.twikoo-'+memoId)
  
  if (twikooDom.classList.contains('d-none')) {
    // 隐藏所有其他评论区域
    document.querySelectorAll('.item-twikoo').forEach((item) => {
      item.classList.add('d-none')
    })
    
    // 显示当前评论区域
    twikooDom.classList.remove('d-none')
    
    // 滚动到评论区域
    let domClass = document.getElementsByClassName('memo-'+memoId)
    window.scrollTo({
      top: domClass[0].offsetTop - 30,
      behavior: "smooth"
    })
    
    // 初始化Twikoo
    twikoo.init({
      envId: memoEnv,
      el: '#twikoo-' + memoId,
      path: bbMemo.memos+'m/'+ memoId,
    })
    
    // 更新URL
    let memoOne = location.pathname+'?memo='+bbMemo.memos+'m/'+memoId
    history.pushState({memoOne: memoOne, title: document.title}, document.title, memoOne)
  } else {
    // 如果已经显示，则隐藏评论区域
    twikooDom.classList.add('d-none')
  }
}

Q2:

如何修改使页面上显示的时间不是几天前，而是形如2025年4月13日

修改步骤：

  1. 找到updateHTMl函数中处理时间显示的部分（大约在代码中创建datatime元素的地方）
  2. 将原来的相对时间显示改为完整日期格式

具体修改：

将原来的这部分代码：

1
`<a href="${memoUrl}" target="_blank"><span class="datatime">${new Date(data[i].createdTs * 1000).toLocaleString()}</span></a>`

修改为：

1
`<a href="${memoUrl}" target="_blank"><span class="datatime">${formatDate(data[i].createdTs * 1000)}</span></a>`

然后在代码的顶部（最好是在loadCssCode(allCSS);之后）添加一个新的日期格式化函数：

1
2
3
4
5
6
7
8
9
// 添加日期格式化函数
function formatDate(timestamp) {
  const date = new Date(timestamp);
  const year = date.getFullYear();
  const month = date.getMonth() + 1; // 月份从0开始，所以要加1
  const day = date.getDate();
  
  return `${year}年${month}月${day}日`;
}

Q3:

修改完多显示了一行< a href = “https://memos.luuooo.com/m/26“ target = “_blank” >，怎么改进

你遇到的问题是因为在修改时间显示格式时，保留了原有的 <a> 链接标签结构，导致显示了两层链接。以下是改进方法：

问题原因分析

在原始代码中，时间显示部分是这样的结构：

1
`<a href="${memoUrl}" target="_blank"><span class="datatime">${时间显示}</span></a>`

当你修改时间显示格式时，可能无意中保留了这层链接结构，导致显示了两层链接。

解决方案

有两种改进方式，根据你的需求选择其中一种：

方案1：保留外部链接（推荐）

如果你希望点击日期可以跳转到单条memo页面，只需保留一层链接：

1
`<a href="${memoUrl}" target="_blank" class="datatime">${formatDate(data[i].createdTs * 1000)}</a>`

方案2：完全移除链接

如果你不需要日期可点击跳转，直接显示日期：

1
`<span class="datatime">${formatDate(data[i].createdTs * 1000)}</span>`

Q4:

在点击评论按钮后，上方网址会从http://localhost:4000/shuoshuo/变为http://localhost:4000/shuoshuo/?memo=https://memos.luuooo.com/m/26，应该如何修改，使点击评论按钮后网址不变

要解决点击评论按钮后网址变化的问题，需要修改 loadTwikoo 函数中的 history.pushState 部分。以下是修改方法：

修改步骤

  1. 找到 loadTwikoo 函数（通常在代码的评论相关部分）
  2. 移除或修改 history.pushState 调用

具体修改方案

方案1：完全移除URL修改（推荐）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
function loadTwikoo(e) {
  let memoEnv = e.getAttribute("data-twienv")
  let memoId = e.getAttribute("data-id")
  let twikooDom = document.querySelector('.twikoo-'+memoId)
  
  if (twikooDom.classList.contains('d-none')) {
    // 隐藏所有其他评论区域
    document.querySelectorAll('.item-twikoo').forEach((item) => {
      item.classList.add('d-none')
    })
    
    // 显示当前评论区域
    twikooDom.classList.remove('d-none')
    
    // 滚动到评论区域
    let domClass = document.getElementsByClassName('memo-'+memoId)
    window.scrollTo({
      top: domClass[0].offsetTop - 30,
      behavior: "smooth"
    })
    
    // 初始化Twikoo（移除URL修改部分）
    twikoo.init({
      envId: memoEnv,
      el: '#twikoo-' + memoId,
      path: bbMemo.memos+'m/'+ memoId,
    })
    
    // 移除下面这行代码
    // history.pushState({memoOne: memoOne, title: document.title}, document.title, memoOne)
  } else {
    twikooDom.classList.add('d-none')
  }
}

方案2：仅修改URL不改变路径（保持历史记录）

如果你希望保留历史记录功能但不改变URL路径：

1
2
// 替换原来的pushState
history.pushState({memoId: memoId}, document.title, window.location.pathname)