junghanacs🧠

Backlinks

#쿼츠: #댓글 #소통 §disqus §giscus §remark42

3 min read

히스토리

  • [2025-06-14 Sat 17:47] 좋아보이네 사례를 보니까
  • [2025-01-14 Tue 17:47] giscus 그냥 사용. 기본이니까
  • [2024-09-08 Sun 16:35] 디스쿠스 검토

관련메타

BIBLIOGRAPHY

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

“Giscus - 댓글 반응 깃허브.” 2021. May 15, 2021. https://giscus.app/ko.

“Remark42 Comments - Be-Far 쿼츠.” 2024. 🌱 Projects 🌓 Privacy. April 4, 2024. https://be-far.com/Projects/Obsidian/quartz-comments.

“Remark42 – Privacy-Focused Lightweight Commenting Engine | Remark42.” n.d. Accessed June 15, 2024. https://remark42.com/.

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

[2024-09-08 Sun 16:35]

  • “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

동작 된다.

§giscus - 댓글 반응 깃허브

(“Giscus - 댓글 반응 깃허브” 2021)

A comments widget built on GitHub Discussions. GitHub Discussions로 작동하는 댓글 시스템입니다. 방문자가 GitHub를 통해 웹사이트에 댓글과 반응을 남기게 해보세요! utterances에서 큰 영감

§Remark42 – Privacy-focused lightweight commenting engine

[2025-06-14 Sat 17:47] (“Remark42 – Privacy-Focused Lightweight Commenting Engine | Remark42” n.d.)

Remark42 Comments - be-far

(“Remark42 Comments - Be-Far 쿼츠” 2024)

I recently added Remark42 for comments. It’s still a work in progress, and I plan to update quite a few things about it in future since it was pretty untested when I found the plugin for it.

Graph View

Backlinks