之前是由于各种评论服务都挂了,后来采用来必力,偶尔抽了一次风,所以当时打算用Github的Issue当评论。
在网上找了很多,大多是Gitment的,也照着网上的教程试了一遍,也装成功了,具体过程都添加在建站时候的一篇文档里了,并没有单独写一篇文章,地址在这。
但是Gitment有个问题,对于每一篇文章都得手动去初始化,很麻烦。后来看到Gitalk,样式也挺漂亮的,于是打算尝试一下移植到Next主题上。
新建Gitalk的swig文件
由于Next主题的可扩展性还算好,为了方便统一管理,尽量不修改已经存在的文件。
首先创建Gitalk的swig文件,放在next/layout/_third-party/comments
文件夹下,命名为gitalk.swig。内容如下
在主题文件layout/_third-party/comments/index.swig
中引入刚刚添加的文件。
|
|
修改主题评论代码
在layout/_partials/comments.swig
文件中找到最后一个if分支,应该是这两句:
在最后一个if分支后加一个Gitalk的分支:
在主题配置文件中引入GItalk
|
|
在其中加入:
其中githubID是你的Github用户名,repo是你用来存放评论Issue的仓库,可以不是Blog的仓库。adminUser是你的用户名,主要用来初始化评论的。clientID和client_secret是你的授权客户端ID和密钥。具体获得方法是在Github的设置界面选择Authorized Github Apps
,然后Register a new application
,将Authorization callback URL
设置为你的Blog的域名,然后就可以获得clientID和client_secret了。
基本上到这里就可以直接用了,打开页面会提示你初始化评论框。如果要设置按钮的样式,可以参照以下步骤:
新建样式文件
要设置评论框的样式,可以在source/css/_common/components/third-party/
文件夹下,新建一个gitalk.styl
文件,向其中加入如下内容:
可以根据自己的喜好添加修改样式。
引入样式文件
在主题目录下的source/css/_common/components/third-party/third-party.styl
文件中引入:
Issue重复的问题
到这里是可以用了的,但是初始化过程中发现Issue页面有两个一样的,后来发现是因为它把直接文章页面地址和点击阅读更多所跳转的带#more
的页面当成两个页面,因此重复创建Issue了。
解决方案:
由于默认的id参数是location.href
,可以将其改为location.pathname
,即可解决当前状况。
即在gitalk.swig
文件中的admin
下面加一行:
至此,大功告成。
不过配置完才发现,Gitalk也是需要一篇文章一篇文章的初始化的,并不能自动将所有的文章一次性初始化完成。
本地化
由于Gitalk是使用UNPKG来给npm的CDN加速的,但是网络延迟有时候会稍高,可以选择直接下载js和css文件到本地。
将下载的css文件放于主题目录的source/css
目录下,js放于source/js/src
目录下。
将layout/_third-party/comments/gitalk,swig
文件中的超链接两行修改一下:
然后就可以正常加载了。