🧠Junghanacs

Recent Notes

#댓글 #소통 disqus giscus

Sep 08, 20242 min read

#디스쿠스 Quartz에 Disqus를 추가하는 방법 및 오류 관리.

  • "Add Disqus on Quartz"

그리고, 블로그 #디스쿠스 (“Add Disqus on Quartz” n.d.) 를 참고하여 Disqus 를 넣는다. 이게 편하겠다. 아니면 깃허브 기반으로 하면 된다. 리마크는 복잡하다.

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>
   )

component/Disqus.tsx

 
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

동작 된다.

Related-Notes

References

“Add Disqus on Quartz.” n.d. Accessed June 15, 2024. https://gurumii.com/Quartz/Add-Disqus.

Backlinks