Disqus邮件通知打开本地主机，而不是真正的网站。

Question

我正在使用Gastbyjs和Disqus插件来实现评论功能。我按照 此处指导

我的博客里收到了评论的邮件，但是当我点击 "回复XXX "的时候，却打开了。

https:/localhost:8000blogsarticle-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

我成功地使用ReachRouter来访问位置。

我安装了reachrouter，我也更新了代码。

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

但是，当有人留言后，我点击通知邮件中的 "回复{somebody}"按钮时，仍然打开的是localhost，而不是真正的网站链接。

Answer 1

你需要通过 url 至 disqusConfig 的当前页面disqus的位置。在Gatsby中，由于使用了@reachrouter，你可以期待在每个页面上都能获得位置道具。

在你的组件中。

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个部分。

1. Localhost的url是如何潜入评论的url中的？

我在localhost开发环境下评论我的文章时，localhost的url就潜入了评论的url.所以为了防止这种情况再次发生，只能在生产环境下发布评论。如果你是在localhost环境下做的，如何解决？请看第三点。

2. localhost的url叫什么？

评论的网址叫做 讨论网址.

3. 为什么我们需要知道它？

因为这将是搜索任何相关问题和答案的关键词。如果不知道这个，我已经在Disqus中浪费了好几天的时间来搜索这个配置，所以简而言之，它为你节省了大量的时间。

4. 如何解决，在哪里解决？

如你所见，第2个博客的链接使用的是localhost，我更新到真正的网站网址后，问题就解决了。

希望我的回答对你有帮助。