Integrating Giscus An Open-Source Commenting System for Your Jekyll Blog

Giscus

• Giscus is an open-source commenting system that can be integrated into static website (GitHub Pages)

Apply Giscus commenting

1. Prerequisite

• Install Giscus in github

  

• This Repo must be public

• check discussions

  

2. App

• Configuration in the Giscus app

3. Modify the code

• _config.yml

    comments:
        active: 'giscus'
        giscus:
            repo: 'syjoe02/syjoe02.github.io'
            repo_id: 'my_repo_id'
            category: 'General'
            category_id: 'my_category_id'
            mapping: # optional, default to 'pathname'
            input_position: # optional, default to 'bottom'
            lang: # optional, default to the value of `site.lang`
            reactions_enabled: # optional, default to the value of 
  

• _includes/comments/giscus.html

        <!-- https://giscus.app/ -->
    <script type="text/javascript">
    (function () {
        const origin = 'https://giscus.app';
        const iframe = 'iframe.giscus-frame';
        const lightTheme = 'light';
        const darkTheme = 'dark_dimmed';
  
        let initTheme = lightTheme;
        const html = document.documentElement;
  
        if (
        (html.hasAttribute('data-mode') &&
            html.getAttribute('data-mode') === 'dark') ||
        (!html.hasAttribute('data-mode') &&
            window.matchMedia('(prefers-color-scheme: dark)').matches)
        ) {
        initTheme = darkTheme;
        }
  
        let giscusAttributes = {
        src: 'https://giscus.app/client.js',
        'data-repo': '',
        'data-repo-id': '',
        'data-category': '',
        'data-category-id': '',
        'data-mapping': 'pathname',
        'data-strict': '0',
        'data-reactions-enabled': '1',
        'data-emit-metadata': '0',
        'data-theme': initTheme,
        'data-input-position': 'bottom',
        'data-lang': '',
        'data-loading': 'lazy',
        crossorigin: 'anonymous',
        async: ''
        };
  
        let giscusScript = document.createElement('script');
        Object.entries(giscusAttributes).forEach(([key, value]) =>
        giscusScript.setAttribute(key, value)
        );
        document.getElementById('tail-wrapper').appendChild(giscusScript);
  
        addEventListener('message', (event) => {
        if (
            event.source === window &&
            event.data &&
            event.data.direction === ModeToggle.ID
        ) {
            /* global theme mode changed */
            const mode = event.data.message;
            const theme = mode === ModeToggle.DARK_MODE ? darkTheme : lightTheme;
  
            const message = {
            setConfig: {
                theme: theme
            }
            };
  
            const giscus = document.querySelector(iframe).contentWindow;
            giscus.postMessage({ giscus: message }, origin);
        }
        });
    })();
    </script>