Disqus 电子邮件通知打开本地主机而不是真实网站

Question

我正在使用 Gastbyjs 和 Disqus 插件来实现评论功能。我关注了 instruction here

我收到了有关博客评论的电子邮件，但当我单击按钮 "Reply to XXX" 时，它会打开。

https://localhost:8000/blogs/article-name

我想我为此错过了一些配置。

更新 1

这是我使用配置的代码：

export const BlogPostTemplate = ({
  content,
  contentComponent,
  description,
  tags,
  title,
  helmet,
}) => {
  const PostContent = contentComponent || Content;

  const disqusConfig = {
    shortname: process.env.GATSBY_DISQUS_NAME,
    config: { identifier: title },
  };

更新 2

我设法使用 Reach/Router 访问位置

我安装了 reach/router 并更新了我的代码：

import { Location } from "@reach/router";

export const BlogPostTemplate = ({
  content,
  contentComponent,
  description,
  tags,
  title,
  helmet,
  location
}) => {
  const PostContent = contentComponent || Content;
  console.log('--------------location---------');
  console.log(location);
  const disqusConfig = {
    url: location.href,
    shortname: process.env.GATSBY_DISQUS_NAME,
    config: { identifier: title },
  };

  return (
    <section className="section">
      {helmet || ""}
      <div className="container content">
        <div className="columns">
          <div className="column is-10 is-offset-1">
            <h1 className="title is-size-2 has-text-weight-bold is-bold-light">
              {title}
            </h1>
            <p>{description}Cool</p>
            <PostContent content={content} />
            {tags && tags.length ? (
              <div style={{ marginTop: `4rem` }}>
                <h4>Tags</h4>
                <ul className="taglist">
                  {tags.map((tag) => (
                    <li key={tag + `tag`}>
                      <Link to={`/tags/${kebabCase(tag)}/`}>{tag}</Link>
                    </li>
                  ))}
                </ul>
              </div>
            ) : null}
            <DiscussionEmbed {...disqusConfig} />
          </div>
        </div>
      </div>
    </section>
  );
};



const BlogPost = ({ data }) => {
  const { markdownRemark: post } = data;

  return (
    <Layout>
      <Location>
        {({ location }) => (
          <BlogPostTemplate
            content={post.html}
            contentComponent={HTMLContent}
            description={post.frontmatter.description}
            helmet={
              <Helmet titleTemplate="%s | Blog">
                <title>{`${post.frontmatter.title}`}</title>
                <meta
                  name="description"
                  content={`${post.frontmatter.description}`}
                />
              </Helmet>
            }
            tags={post.frontmatter.tags}
            title={post.frontmatter.title}
            location={location}
          />
        )}
      </Location>
    </Layout>
  );
};

然而，当有人发表评论并且我点击通知邮件中的 "Reply to {somebody}" 按钮时，它仍然打开本地主机，而不是真正的网站 link。

Answer 1

您需要将url传递给当前页面disqus所在的disqusConfig。在 Gatsby 中，由于使用了 @reach/router.

，您可以期望在每个页面上都可以使用 location 属性。

在你的组件中：

import {Disqus} from "gatsby-plugin-disqus";

const Article = (props) => {

  let disqusConfig = {
    url: props.location.href,
    identifier: props.your.identifier.source,
    title: props.your.title.source,
  };

  return (
    <div className="article">
      <h1>Article title</h1>
      <div>Article text</div>
      <Disqus config={disqusConfig} />
    </div>
  )
}

插件配置：

  {
    resolve: `gatsby-plugin-disqus`,
    options: {
      shortname: `your-short-name`
    }
  }

注意：您不能使用 window.location 之类的东西，因为在构建期间没有 window（没有浏览器服务器端）。

Answer 2

我终于想通了。我想把答案分成 4 个部分：

本地主机 url 是如何潜入评论的 url 的？

当我在本地主机开发环境中评论我的文章时，本地主机url 潜入了评论的url。所以为了防止这种情况再次发生，只能在生产环境中发表评论。如果您是在 localhost 环境中执行的，该如何修复？请看第3点

localhost url 叫什么？

评论url被称为Discussion Url。

为什么我们需要知道它？

因为这将是搜索任何相关内容的关键词questions/answers。在不知道这一点的情况下，我浪费了几天时间在 Disqus 中搜索此配置。所以简而言之，它可以为您节省大量时间。

如何以及在哪里解决？

如你所见，第二个博客Link使用的是localhost，我更新到真实网站url后，问题就解决了。

希望我的回答对您有所帮助。

Disqus 电子邮件通知打开本地主机而不是真实网站

Disqus email notifications open localhost instead of the real website

disqus

reactjs

gatsby

更新 1

更新 2