Astro 加入 Cusdis 作為留言系統 • Raellen's notes

Cusdis 官方有提供語法使你可以嵌入留言板在 Astro blog裡
但是有幾個問題

CSS 很陽春
如何根據 Astro 客製化 Config

1. Astro 客製化的 Config 如何寫#

需要注意的是 data-page-id 那三個 page 相關的設定
只要照這下面填，留言就能留到各個不同文章
data-app-id請填官方給你的 id

<div id="cusdis_thread"
  data-host="https://cusdis.com"
  data-app-id="here-is-your-id"
  data-page-id={Astro.url.pathname}
  data-page-url={Astro.url.pathname}
  data-page-title={pageTitle}
></div>
<script async defer src="https://cusdis.com/js/cusdis.es.js"></script>

plaintext

2. 改 CSS#

在你嵌入 Cusdis 的頁面加入此 CSS

<script>
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.addedNodes.length == 0) return;
const iframe = mutation.addedNodes[0];
if (iframe.tagName !== 'IFRAME') return;

const additionalStyles = `
.dark {
background: black;
}
`;

iframe.srcdoc = iframe.srcdoc.replace('</style>', additionalStyles + '</style>');
});
});
observer.observe(document.getElementById("cusdis_thread"), { childList: true, subtree: true });
</script>

plaintext

additionalStyles 裡面加入需要的 CSS

但是 iframe 本身的高度跟滾動軸那些也被限制，
所以要回到嵌入留言系統的頁面 (也就是上面那頁的父頁面，通常是[slug].astro)加入以下語法

  #cusdis_thread iframe {
    border-radius: 12px;
    border: 2px solid #b6deef;
    width: 100%;
    min-height: 400px;
    transition: all 0.3s ease;
  }

plaintext

根據自己需求在此加入需要的樣式即可

參考資料：

Add and customize Cusdis with Hugo ↗