内容简介：点击注册后，页面跳转如下，其中
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
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Web Designer Idea
梁景红 / 电子工业出版社 / 2006年 / ¥55.00
这是一本以“目的、信息、设计、创意”作为根脉的关于网页视觉的书籍，畅谈的话题从策划到编辑再到设计，从而讨论“我们要建立怎样的站点，并以何种形式完成它”的问题。 全书共分四个部分，分别是网站建设目的，网站信息内容，页面形式设计，网页创作构思。 四部分有机地结合，形成一个统一的整体。“目的”部分以建设网站的目的为主，带领设计师从建站目的的角度，探讨如何抓住首要问题；如何建立网站雏形；如何打开狭隘的、局......一起来看看 《Web Designer Idea》 这本书的介绍吧!
