内容简介：点击注册后，页面跳转如下，其中
https://github.com/settings/applications/new
-
Application name： # 应用名称，随意 -
Homepage URL： # 网站URL，如 http://blog.poetries.top -
Application description# 描述，随意 -
Authorization callback URL：# 网站URL， http://blog.poetries.top
点击注册后，页面跳转如下，其中 Client ID 和 Client Secret 在后面的配置中需要用到，到时复制粘贴即可
二、fexo配置主题
这里以我个人博客的主题来配置
themes/fexo/layout/_partial/component/ 新建一个 gitalk.ejs
<% if (page.comments && theme.gitalk.enable){ %>
<div id="gitalk-container"></div>
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
<script type="text/javascript">
var gitalk = new Gitalk({
clientID: '<%=theme.gitalk.ClientID%>',
clientSecret: '<%=theme.gitalk.ClientSecret%>',
repo: '<%=theme.gitalk.repo%>',
owner: '<%=theme.gitalk.githubID%>',
admin: ['<%=theme.gitalk.adminUser%>'],
id: location.pathname,
distractionFreeMode: '<%=theme.gitalk.distractionFreeMode%>'
})
gitalk.render('gitalk-container')
</script>
<% } %>
在 themes/fexo/layout/_partial/component/comments.ejs 中加入
<div class="fexo-comments <%= className %>">
<%- partial('disqus') %>
<%- partial('duoshuo') %>
<%- partial('gitalk') %> <!-- 加入上面新建的 -->
</div>
在 themes/fexo/layout/_partial/article.ejs 中的article文章后面加入
<!-- 使用gitalk作为评论系统 -->
<%- partial('gitalk') %>
/static/css/style.css 中加入
/**gitalk css**/
.gt-header a, .gt-comments a, .gt-popup a{
border-bottom: none;
}
.gt-container .gt-popup .gt-action.is--active:before{
top: 0.7em;
}
在主题配置文件 _config.yml 加入
# 评论配置 gitalk: enable: true githubID: poetries repo: poetries.github.io # 例：poetries.github.io owner: poetries ClientID: '' ClientSecret: '' adminUser: poetries #指定可初始化评论账户 distractionFreeMode: true
然后回到文章页面，刷新页面后授权初始化就看到了
三、next主题配置
新建 /layout/_third-party/comments/gitalk.swig 文件，并添加内容
{% if page.comments && theme.gitalk.enable %}
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
<script type="text/javascript">
var gitalk = new Gitalk({
clientID: '{{ theme.gitalk.ClientID }}',
clientSecret: '{{ theme.gitalk.ClientSecret }}',
repo: '{{ theme.gitalk.repo }}',
owner: '{{ theme.gitalk.githubID }}',
admin: ['{{ theme.gitalk.adminUser }}'],
id: location.pathname,
distractionFreeMode: '{{ theme.gitalk.distractionFreeMode }}'
})
gitalk.render('gitalk-container')
</script>
{% endif %}
修改 /layout/_partials/comments.swig ，添加内容如下，与前面的 elseif 同一级别上
{% elseif theme.gitalk.enable %}
<div id="gitalk-container"></div>
修改 layout/_third-party/comments/index.swig ，在最后一行添加内容：
{% include 'gitalk.swig' %}
新建 /source/css/_common/components/third-party/gitalk.styl 文件，添加内容：
.gt-header a, .gt-comments a, .gt-popup a border-bottom: none; .gt-container .gt-popup .gt-action.is--active:before top: 0.7em;
修改 /source/css/_common/components/third-party/third-party.styl ，在最后一行上添加内容，引入样式
@import "gitalk";
在主题配置文件 next/_config.yml 中添加如下内容
# 评论配置 gitalk: enable: true githubID: poetries repo: poetries.github.io # 例：poetries.github.io owner: poetries ClientID: '' ClientSecret: '' adminUser: poetries #指定可初始化评论账户 distractionFreeMode: true
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Hacking Growth
Sean Ellis、Morgan Brown / Crown Business / 2017-4-25 / USD 29.00
The definitive playbook by the pioneers of Growth Hacking, one of the hottest business methodologies in Silicon Valley and beyond. It seems hard to believe today, but there was a time when Airbnb w......一起来看看 《Hacking Growth》 这本书的介绍吧!
