docsify-gitalk-with-footer

English | 中文

This is a plugin to enhance gitalk for docsify.

If you have tried gitalk plugin according to here, you'll find that several problems exists, which are:

• The gitalk is rendered to the bottom of the whole page, therefore it may look like this:

  

  There is hardly no spacing between the bottom of gitalk and the bottom of the whole page, and:

• As docsify refresh pages partly while using hash mode, gitalk won't be able to refetch the actual comments under each page. As a result, readers may comment under wrong articles.

This plugin adds a footer under gitalk, like this:

Besides, this plugin also force the browser to render gitalk each time after router change, so gitalk will show the correct comments according to different articles.

Apply for Github OAuth application

In index.html, add:

<!-- docsify-gitalk-with-footer plugin -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk/dist/gitalk.css" />

<script src="//cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/pikapikapikaori/docsify-gitalk-with-footer@latest/src/gitalkWithFooter.js"></script>

Add settings, please do not add id in gitalkConfig:

window.$docsify = {
    gitalkWithFooter: {
        footerInnerHtml: "<p>text</p>",
        gitalkConfig: {
            clientID: '', // Your Client Id
            clientSecret: '', // Your Client secret
            repo: '',
            owner: '',
            admin: [''],
            // facebook-like distraction free mode
            distractionFreeMode: false,
        }
    },
}

1. Gitalk Document:

   const gitalk = new Gitalk({
       clientID: 'GitHub Application Client ID',
       clientSecret: 'GitHub Application Client Secret',
       repo: 'GitHub repo',      // The repository of store comments,
       owner: 'GitHub repo owner',
       admin: ['GitHub repo owner and collaborators, only these guys can initialize github issues'],
       id: location.pathname,      // Ensure uniqueness and length less than 50
       distractionFreeMode: false  // Facebook-like distraction free mode
   })

Github Page

It's welcomed to make pr to this repo in order to improve this plugin.

If you like this plugin, please give a star, thanks!

For more tools I developed please refer to my blog.