Skip to main content

在文件庫的文章下方加上 Disqus 留言區

前言​

之前在使用 Jekyll 寫部落格的時候，每篇文章的下方都有掛上 Disqus 留言區。

不過目前 Docusaurus 還沒內建相關的功能，只能手動客製。

這篇就來分享一下怎麼在文章下方加掛 Disqus 留言區。

引用 disqus-react 套件​

在 Console 中輸入下列指令以安裝 disqus-react 套件：

yarn add disqus-react

Swizzle DocItemFooter​

接下來我們就要來客製化 Docusaurus 來達到我們的目的了。

註記

因為我已經有 Disqus 帳號了，這邊就不再針對註冊 Disqus 帳號多作說明。

之前我本來是透過改寫 DocItem 這個物件來在文章下方加入 Disqus 的，不過後來發現原來只要改寫 DocItemFooter 就行了。

而且，改寫 DocItemFooter 的話，只需要使用 Wrapping 的方法就好，對之後 Docusaurus 升版的影響會相對的小。

所以我們接下來就要透過下面的指令把 DocItemFooter 的原始碼抽取出來：

Docusaurus 2.0.0 正式版之後的作法​

yarn run swizzle @docusaurus/theme-classic DocItem/Footer --wrap --typescript

抽取出原始碼之後，進行下列的調整：

src/theme/DocItem/Footer/index.tsx
import React from "react";
import Footer from "@theme-original/DocItem/Footer";
import type FooterType from "@theme/DocItem/Footer";
import type { WrapperProps } from "@docusaurus/types";

{
}
import { DiscussionEmbed } from "disqus-react";
import { useDoc } from "@docusaurus/theme-common/internal";
{
}

type Props = WrapperProps<typeof FooterType>;

export default function FooterWrapper(props: Props): JSX.Element {
  {
  }
  const { metadata, frontMatter, assets } = useDoc();
  const { no_comments } = frontMatter;
  const { title, slug } = metadata;
  {
  }
  return (
    <>
      <Footer {...props} />
      {!no_comments && (
        <DiscussionEmbed
          shortname="ouch1978"
          config={{
            identifier: slug,
            title: title,
            language: "zh-TW",
          }}
        />
      )}
    </>
  );
}

Docusaurus 2.0.0 Beta 版之前的作法​

yarn swizzle @docusaurus/theme-classic DocItemFooter -- --wrap

抽取出原始碼之後，進行下列的調整：

src/theme/DocItemFooter/index.tsx
import React, { ComponentProps } from "react";
import type DocItemFooterType from "@theme/DocItemFooter";
import DocItemFooter from "@theme-original/DocItemFooter";

{
}
import { DiscussionEmbed } from "disqus-react";

type Props = ComponentProps<typeof DocItemFooterType>;

export default function DocItemFooterWrapper(props: Props): JSX.Element {
  const { content: DocContent } = props;
  const { metadata, frontMatter } = DocContent;
  {
  }
  const { no_comments } = frontMatter;
  const { title, slug } = metadata;
  return (
    <>
      <DocItemFooter {...props} />
      {!no_comments && (
        <DiscussionEmbed
          shortname="ouch1978"
          config={{
            identifier: slug,
            title: title,
            language: "zh-TW",
          }}
        />
      )}
    </>
  );
}

就這麼簡單。

小提示

可以透過文章 front matter 中的 no_comments 這個屬性來決定是否要顯示 Disqus 留言區。

後記​

雖然 Disqus 算是目前市面上市佔率不低的免費留言工具，但是它對網站的優化和體驗存在著不少致命傷。

有興趣的同學可以參考下列幾篇文章：

謎之音：這麼爛你還用!?

另外，我在掛上 Disqus 之後，也發現它在存取某些 API 的時候會拋出 CORS 錯誤。

很要求完美的同學不妨考慮先使用 Github Comments 來取代 Disqus。

不過，我目前就暫且先不解決這個問題，等 Docusaurus 官方釋出官方版的留言區套件再來把它換掉吧。

也邀請大家一起向官方敲碗，催生官方版的留言區喔!!