让不同的页面有不同的评论框占位文字

众所都周知的是artalk是有修改全局评论框占位文字的功能

就在后台 设置>页面配置>评论框占位文字

但如果你想让每个页面都拥有不同的评论框占位文字该怎么办呢

虽然我翻阅了Artalk的文档之后似乎有人提了Issue建议加一个类似 Twikoo 的 onCommentLoaded 事件

但我并没有找到对应的监听事件

遂只能使用 DOMContentLoaded事件来监听并动态修改评论框占位文字

代码如下

document.addEventListener("DOMContentLoaded", () => {
  ChangePlaceholder();
});

function ChangePlaceholder() {
  //因为Artalk的评论区也是动态创建的所以要检测评论区是否创建好
  const observer = new MutationObserver(() => {
    //下面这行的前提是我给不同的路径添加了不同的container类别，比如友链页会添加一个is-link的Class
    const container = document.querySelector('.container');
    const textarea = document.querySelector('.atk-textarea');

    if (!container || !textarea) return;

    //根据不同的Class判断页面然后动态替换placeholder
    if (container.classList.contains('is-link')) {
      textarea.setAttribute('placeholder', '要加入朋友们的行列吗？');
    } else if (container.classList.contains('is-guestbook')) {
      textarea.setAttribute('placeholder', '既然来了就留个言再走？');
    }

    //替换完后停止检测
    observer.disconnect(); 
  });

  //检测页面是否有Artalk评论区
  const artalkRoot = document.querySelector('.artalk');
  if (artalkRoot) {
    observer.observe(artalkRoot, { childList: true, subtree: true });
  }
}

在有了这个基础上那么就可以

延申一下

比如把邮箱或者网站甚至评论按钮的文本都改掉

也可以实现用配置文件来修改Placeholder

比如

const artalkTextConfig = {
  "is-link": {
    textarea: '要加入朋友的行列吗？留下你的网站名称、地址和简短的简介，最后再加个头像就ok了!',
    sendBtn: '  就是这样！',
    email: '邮箱？(只是为了头像而已)',
    link: '网址写在申请里就好了'
  },
  "is-guestbook": {
    textarea: '既然来了就留个言再走？随便写什么都好',
    sendBtn: '  就说这些！',
    email: '邮箱(看上面的小字',
    link: '如果有的话就留下网址我来串门'
  }
};

function ChangePlaceholder() {
  const observer = new MutationObserver(() => {
    const container = document.querySelector('.container');
    if (!container) return;

    const pageType = Object.keys(artalkTextConfig).find(type => container.classList.contains(type));
    if (!pageType) return;

    const config = artalkTextConfig[pageType];

    const textarea = document.querySelector('.atk-textarea');
    const sendBtn = document.querySelector('.atk-send-btn');
    const emailInput = document.querySelector('.atk-email');
    const linkInput = document.querySelector('.atk-link');

    if (textarea && config.textarea) textarea.setAttribute('placeholder', config.textarea);
    if (sendBtn && config.sendBtn) sendBtn.textContent = config.sendBtn;
    if (emailInput && config.email) emailInput.setAttribute('placeholder', config.email);
    if (linkInput && config.link) linkInput.setAttribute('placeholder', config.link);

    observer.disconnect(); 
  });

  const artalkRoot = document.querySelector('.artalk');
  if (artalkRoot) {
    observer.observe(artalkRoot, { childList: true, subtree: true });
  }
}

再延伸一下

如果你还有移动端的需求

文字太多的时候移动端会超出文本框怎么办

那就再加一套屏幕宽度检测

如下

const artalkTextConfig = {
  "is-link": {
    default: {
      textarea: '要加入朋友的行列吗？留下你的网站名称、地址和简短的简介，最后再加个头像就ok了!',
      sendBtn: '  就是这样！',
      email: '邮箱？(只是为了头像而已)',
      link: '网址写在申请里就好了'
    },
    mobile: {
      textarea: '要加入朋友的行列吗？',
      sendBtn: '  是的！',
      email: '邮箱？',
      link: '网站呢？'
    }
  },
  "is-guestbook": {
    default: {
      textarea: '既然来了就留个言再走？随便写什么都好',
      sendBtn: '  就说这些！',
      email: '邮箱(看上面的小字)',
      link: '如果有的话就留下网址我来串门'
    },
    mobile: {
      textarea: '留个言再走？',
      sendBtn: '  就这样！',
      email: '邮箱',
      link: '串门的网址'
    }
  }
};

function ChangePlaceholder() {
  const observer = new MutationObserver(() => {
    const container = document.querySelector('.container');
    if (!container) return;

    const pageType = Object.keys(artalkTextConfig).find(type => container.classList.contains(type));
    if (!pageType) return;

    //屏幕宽度检测，小于768px的时候显示mobile文字
    const isMobile = window.innerWidth < 768;
    const config = artalkTextConfig[pageType][isMobile ? 'mobile' : 'default'];

    const textarea = document.querySelector('.atk-textarea');
    const sendBtn = document.querySelector('.atk-send-btn');
    const emailInput = document.querySelector('.atk-email');
    const linkInput = document.querySelector('.atk-link');

    if (textarea && config.textarea) textarea.setAttribute('placeholder', config.textarea);
    if (sendBtn && config.sendBtn) sendBtn.textContent = config.sendBtn;
    if (emailInput && config.email) emailInput.setAttribute('placeholder', config.email);
    if (linkInput && config.link) linkInput.setAttribute('placeholder', config.link);

    observer.disconnect(); 
  });

  const artalkRoot = document.querySelector('.artalk');
  if (artalkRoot) {
    observer.observe(artalkRoot, { childList: true, subtree: true });
  }
}

至此你就完成了在不同的页面拥有不同的文本输入框占位文字的功能

拓展一下

关于我网站在没有评论的页面是如何显示不同的诗句的

只需要在Artalk的 设置>页面配置>无评论显示文字 这一行里写入

<img alt="今日诗词" src="https://v2.jinrishici.com/one.svg?font-size=22&color=Silver">

就可以了

最后面的font-size=22&color=Silver参数可以按需调整

具体可以参考这篇文章https://cloud.tencent.com/developer/article/2345925

当然你也可以显示一言之类别的占位文字

这就是后话了

ok以上

学废了就给我点个赞