@@ -2,6 +2,7 @@ import * as React from 'react'
22import { Routes , Link , Route , Navigate , useLocation } from 'react-router-dom'
33import cx from 'classnames'
44import { ifDev , ifProd , ifPrerender } from 'crd-client-utils'
5+ const Giscus = require ( '@giscus/react' )
56import Menu from '../component/Menu'
67import Icon from '../component/Icon'
78import Affix from '../component/Affix'
@@ -15,7 +16,7 @@ import logo from '../crd.logo.svg'
1516import styles from './index.less'
1617import '../style/mobile.less'
1718
18- const { useState, useEffect } = React
19+ const { useState, useEffect, useMemo } = React
1920const SubMenu = Menu . SubMenu
2021
2122function BasicLayout ( {
@@ -30,8 +31,10 @@ function BasicLayout({
3031 branch = 'main' ,
3132 language = 'en' ,
3233 menuOpenKeys,
33- tags
34+ tags,
35+ comment
3436 } = DOCSCONFIG || { }
37+
3538 const [ inlineCollapsed , setInlineCollapsed ] = useState ( true )
3639 const [ selectedKey , setSelectedKey ] = useState ( '' )
3740 const curOpenKeys = getOpenSubMenuKeys ( {
@@ -150,7 +153,7 @@ function BasicLayout({
150153 )
151154 }
152155 /**
153- * this section is to show article's relevant information
156+ * This section is to show article's relevant information
154157 * such as edit in github and so on.
155158 */
156159 const renderPageHeader = ( ) => {
@@ -176,8 +179,34 @@ function BasicLayout({
176179 </ div >
177180 )
178181 }
182+
183+ /**
184+ * This section is to render comment area.
185+ * Every pathname should has its own comment module.
186+ */
187+ const renderComment = useMemo ( ( ) => {
188+ return < Giscus
189+ key = { pathname }
190+ id = "comments"
191+ repo = { `${ user } ${ repo } }
192+ category = "General"
193+ categoryId = "DIC_kwDOD_mJNs4CSd1W"
194+ mapping = "pathname"
195+ strict = "0"
196+ reactionsEnabled = "1"
197+ emitMetadata = "0"
198+ inputPosition = "top"
199+ theme = "preferred_color_scheme"
200+ lang = "en"
201+ loading = "lazy"
202+ crossorigin = "anonymous"
203+ async
204+ { ...comment ?. GiscusConfig }
205+ />
206+ } , [ pathname ] )
207+
179208 /**
180- * this section is to show article's relevant information
209+ * This section is to show article's relevant information
181210 * such as edit in created time、edited time and so on.
182211 */
183212 const renderPageFooter = ( ) => {
@@ -283,6 +312,7 @@ function BasicLayout({
283312 { /* Todo: follow up how to use Redirect to back up the rest of route. */ }
284313 { /* <Redirect path='/' to={ifAddPrefix ? `/${repo}/404` : `/404`} /> */ }
285314 </ Routes >
315+ { comment ?. GiscusConfig ? renderComment : null }
286316 { renderPageFooter ( ) }
287317 </ div >
288318 )
0 commit comments