Project Titan

全站点升级

这个网站一开始通过 Jekyll x JQuery x Bootstrap 构建, 由我一人设计编码并开源: szhshp/JekyllTheme-ProjectGaia.

早先设计灵感参考了 Bootstrap x Stylish Portfolio x Next 等主题.

在 2020 年 5 月, 我就有了全站重写的想法, 最终选择了 NextJS 引擎

花费 48 天, 全部站点用全新的技术重构, 当前技术栈: NextJS x React x MaterialUI

同时因为难得有这一次重构的机会, 我将依赖全部集成到了本体架构中

Github: szhshp/NextJS-BlogTemplate-ProjectTitan

Misc/Troubleshooting

Framework-NextJS

(TODO)

Components

Disqus Integration

Load Native Disqus in React

如果你比较懒, 可以直接用这个库: disqus/disqus-react

或者自定义一些设置, 这里是一个例子:

import React, {useEffect} from 'react'

const Comments = ({fullUrl, id}) => {
  useEffect(() => {
    const DISQUS_SCRIPT = 'disq_script'
    const sd = document.getElementById(DISQUS_SCRIPT)
    if (!sd) {
      var disqus_config = function() {
        this.page.url = fullUrl
        this.page.identifier = id
      }

      const d = document
      const s = d.createElement('script')
      s.src = 'https://MYDISQUS.disqus.com/embed.js' // REPLACE THIS LINE WITH YOUR DISQUS LINE
      s.id = DISQUS_SCRIPT
      s.async = true
      s.setAttribute('data-timestamp', +new Date())

      d.body.appendChild(s)
    } else {
      window.DISQUS.reset({
        reload: true,
        config: disqus_config,
      })
    }
  }, [])
  return <div id="disqus_thread"></div>
}

export default Comments

或者使用这种方法:

import React from 'react'

const Comments = ({fullUrl, id}) => {
  const html = `
  <div id="disqus_thread"></div>
  <script>
  var disqus_config = function () {
  this.page.url = '${fullUrl}';
  this.page.identifier = '${id}';
  };
  (function() {
  var d = document, s = d.createElement('script');
  s.src = 'https://MYDISQUS.disqus.com/embed.js';
  s.setAttribute('data-timestamp', +new Date());
  (d.head || d.body).appendChild(s);
  })();
  </script>
  `

  return <div dangerouslySetInnerHTML={{ __html: html}} />
}

export default Comments

Typescript/NextJS/React - Disqus Integration

类似问题:

  1. We were unable to load Disqus
  2. Disqus 无法加载。如果您是管理员，请参阅故障排除指南
  3. There was a problem with the Disqus configuration

Disqus 无法加载, 一般都是因为 identifier 设置错了或者 config 设置方式不对

An example in Typescript:

  const DisqusCommentBox = (props): JSX.Element => {
  const { identifier } = props;

  useEffect(() => {
    if (debug) {
      return;
    }

    /**
     * The config for native disqus
     * @see https://help.disqus.com/en/articles/1717084-javascript-configuration-variables
     */
    const nativeDisqusConfigScript = document.createElement("script");
    nativeDisqusConfigScript.innerHTML = `
      window.disqus_config = function () {
        this.page.url = window.location.href;
        this.page.identifier = '${identifier}';
        this.page.title  = document.title;
      };
    `;
    document.body.appendChild(nativeDisqusConfigScript);

    const s = document.createElement("script");

    /* trigger an error in debug mode */
    s.src = `http://${username}.disqus.com/embed.js`;
    s.async = true;
    s.setAttribute("data-timestamp", String(+new Date()));
    document.body.appendChild(s);
  }, []);

  return <div id="disqus_thread" />;
};

Reference