Docusaurus 添加评论功能 | Alan Wang #7

2022-09-29T09:02:34Z

giscus[bot]
bot Sep 29, 2022

Docusaurus 添加评论功能 | Alan Wang

通过 Docusaurus Swizzling 为博客和文档添加 Giscus 评论功能

https://www.alanwang.site/posts/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA%E7%B3%BB%E5%88%97/docusaurus-%E8%AF%84%E8%AE%BA%E7%B3%BB%E7%BB%9F

b9348 · 2022-10-24T09:24:04Z

b9348
Oct 24, 2022 — with giscus

所有页面公用一份评论区？

6 replies

b9348 Oct 24, 2022

每篇文章都有自己的评论，不是全局的

https://b9348.gitee.io/ 用手机第一次打开以后评论区加载不出来最底下的，必须翻页一次才能加载出来。咋办啊大佬请问你知道咋整嘛0.0 用电脑的都是正常。按F12反复看有时候电脑也会，那个时候评论的网络请求是404了

3Alan Oct 24, 2022 — with giscus
Maintainer

我自己网站看着没问题，你可能哪里配置不对，你仓库地址发下我看看你代码

b9348 Oct 24, 2022

我自己网站看着没问题，你可能哪里配置不对，你仓库地址发下我看看你代码

啊这刚刚才看到。。https://gitee.com/b9348/b9348.git ，是仓库。电脑稳定复现的方法我刚刚发现了，用新标签页窗口化，窗口宽度用鼠标拖一下，伸缩到最小以后再打开https://b9348.gitee.io/ ，然后评论区无论如何都加载不出来，除非点下一页。本地跑代码是没有任何问题的。部署上去以后就有这个问题。分支是reactpress

3Alan Oct 25, 2022
Maintainer

移动端的时候 Giscus 的父元素隐藏了，解决办法：我猜你可能想让评论的宽度为100%？那就改成这样好了，或者你直接对着我文章里的复制也行（评论的宽度和文章的宽度一致）

<>
  <div className="row">
    <div className={clsx('col', !docTOC.hidden && styles.docItemCol)}>
      <DocVersionBanner />
      <div className={styles.docItemContainer}>
        <article>
          <DocBreadcrumbs />
          <DocVersionBadge />
          {docTOC.mobile}
          <DocItemContent>{children}</DocItemContent>
          <DocItemFooter />
        </article>
        <DocItemPaginator />
      </div>
    </div>
    {docTOC.desktop && <div className="col col--3">{docTOC.desktop}</div>}
  </div>
  <div className={styles.last}>
    <br />
    <div className={styles.box}>{!hideComment && <Comment />}</div>
  </div>
</>