@@ -258,7 +258,50 @@ <h2 class="section__title">関連記事</h2>
258258 < h2 class ="section__title "> おすすめ記事</ h2 >
259259 < div id ="recommendList " class ="recommend-grid "> </ div >
260260 </ section >
261-
261+ < section class ="section section--comments ">
262+ < h2 class ="section__title "> コメント</ h2 >
263+ < div id ="comments " class ="post-comments ">
264+ < div class ="giscus-placeholder " data-giscus-config ="{"repo":"BreadMotion/breadmotion.github.io","repoId":"R_kgDOM8I6Fg","category":"Comment","categoryId":"DIC_kwDOM8I6Fs4CzPPY","mapping":"og:title","theme":"preferred_color_scheme"} ">
265+ < p class ="giscus-loading "> コメントを読み込み中...</ p >
266+ </ div >
267+ </ div >
268+ </ section >
269+ < script >
270+ ( function ( ) {
271+ var placeholder = document . querySelector ( '.giscus-placeholder' ) ;
272+ if ( ! placeholder ) return ;
273+ var observer = new IntersectionObserver ( function ( entries ) {
274+ entries . forEach ( function ( entry ) {
275+ if ( entry . isIntersecting ) {
276+ observer . disconnect ( ) ;
277+ try {
278+ var config = JSON . parse ( placeholder . getAttribute ( 'data-giscus-config' ) ) ;
279+ var script = document . createElement ( 'script' ) ;
280+ script . src = 'https://giscus.app/client.js' ;
281+ script . setAttribute ( 'data-repo' , config . repo ) ;
282+ script . setAttribute ( 'data-repo-id' , config . repoId ) ;
283+ script . setAttribute ( 'data-category' , config . category ) ;
284+ script . setAttribute ( 'data-category-id' , config . categoryId ) ;
285+ script . setAttribute ( 'data-mapping' , config . mapping ) ;
286+ script . setAttribute ( 'data-strict' , '0' ) ;
287+ script . setAttribute ( 'data-reactions-enabled' , '1' ) ;
288+ script . setAttribute ( 'data-emit-metadata' , '0' ) ;
289+ script . setAttribute ( 'data-input-position' , 'bottom' ) ;
290+ script . setAttribute ( 'data-theme' , config . theme ) ;
291+ script . setAttribute ( 'crossorigin' , 'anonymous' ) ;
292+ script . async = true ;
293+ placeholder . innerHTML = '' ;
294+ placeholder . appendChild ( script ) ;
295+ } catch ( e ) {
296+ console . error ( 'Failed to load Giscus comments:' , e ) ;
297+ placeholder . innerHTML = '<p style="color: var(--color-text-muted); text-align: center;">Failed to load comments.</p>' ;
298+ }
299+ }
300+ } ) ;
301+ } , { rootMargin : '200px' } ) ;
302+ observer . observe ( placeholder ) ;
303+ } ) ( ) ;
304+ </ script >
262305 </ main >
263306 < div class ="toc-overlay "> </ div >
264307 < button type ="button " class ="toc-toggle " aria-label ="目次を開く ">
0 commit comments