全站点升级 - Project Titan
2020-07-19
这个网站一开始通过 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
(TODO)
如果你比较懒, 可以直接用这个库: 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
类似问题:
- We were unable to load Disqus
- Disqus 无法加载。如果您是管理员,请参阅故障排除指南
- 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" />; };
关于本文
文章标题 | 全站点升级 - Project Titan |
发布日期 | 2020-07-19 |
文章分类 | Dev |
相关标签 |
最近文章
人生第一款独立游戏开发复盘 |
留言板
PLACE_HOLDER
PLACE_HOLDER
PLACE_HOLDER
PLACE_HOLDER