#댓글: #디스쿠스 #소통 #비공개 #쿼츠

diff --git a/quartz/components/renderPage.tsx b/quartz/components/renderPage.tsx
index 251a53f..aa1cf8b 100644
--- a/quartz/components/renderPage.tsx
+++ b/quartz/components/renderPage.tsx
@@ -8,6 +8,7 @@ import { visit } from "unist-util-visit"
 import { Root, Element, ElementContent } from "hast"
 import { GlobalConfiguration } from "../cfg"
 import { i18n } from "../i18n"
+import Disqus, { disqusScript } from "./Disqus" // custom component

 interface RenderComponents {
   head: QuartzComponent
@@ -232,6 +233,7 @@ export function renderPage(
                 </div>
               </div>
               <Content {...componentData} />
+              {componentData.fileData.frontmatter?.disqus && <Disqus slug={slug} />}
             </div>
             {RightComponent}
           </Body>
@@ -241,6 +243,9 @@ export function renderPage(
       {pageResources.js
         .filter((resource) => resource.loadTime === "afterDOMReady")
         .map((res) => JSResourceToScriptElement(res))}
+      {componentData.fileData.frontmatter?.disqus && (
+          <script data-cfasync="false" type="text/javascript" dangerouslySetInnerHTML={{ __html: disqusScript }} />
+          )}
     </html>
   )

import { FunctionComponent } from "preact"
interface DisqusProps {
  slug: string
}
const Disqus: FunctionComponent<DisqusProps> = ({ slug }) => {
  return (
    <div id="disqus_thread" data-slug={slug} style="color-scheme: normal"></div>
  )
}
export const disqusScript = `
  var disqus_config = function () {
    this.page.url = window.location.href;
    this.page.identifier = document.getElementById('disqus_thread').dataset.slug;
  };
  setTimeout(function() {
    var d = document, s = d.createElement('script');
    s.src = 'https://idencosmos.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
  }, 500);  // 0.5초 후에 로드
`

export default Disqus