导航
导航
文章目录
  1. 前言:
  2. 前言:开始集成
    1. step1
    2. step2
    3. step3
    4. step4

fexo主题集成gitalk评论组件

前言:

多说评论组件已经下架,琢磨了下发现gitalk不错,基于github的issue。搜索的集成教程基本上都是next主题集成,谁让这款主题用的人多呢。本文为集成fexo主题集成gitalk

前言:开始集成

step1

github创建一个代码仓库,用于存储评论数据,这里取名BlogComments,

然后个人用户->setting->Developer settings->OAuth Apps

  • Application name 填写仓库名,这里是BlogComments
  • Homepage URL 网站的地址
  • Application description 描述,随意,可不填
  • Authorization callback URL 网站的地址

填好之后,点击Register application,即可得到Client IDClient Secret。放着,后面有用

step2

打开Hexo\themes\fexo\layout_partial\component,创建gitalk.ejs

文件内容直接复制

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<% if (theme.gitalk_shortname){ %>
<!-- Gitalk评论插件通用代码 -->
<div id="git"></div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<script>
const gitalk = new Gitalk({
clientID: '填入第一步获取的clientID',
clientSecret: '填入第一步获取的clientSecret',
repo: '仓库名称本文中为BlogComments',
owner: '你的用户名',
admin: ['你的用户名'],
// facebook-like distraction free mode
distractionFreeMode: false
})
gitalk.render('git')
</script>
<!-- Gitalk代码结束 -->
<% } %>

step3

打开Hexo\themes\fexo\layout_partial\article.ejs,在文件底部找到

1
2
3
4
<% if (theme.duoshuo_shortname){ %>
<i class="icon-comment"></i>
<span class="ds-thread-count" data-thread-key="<%= page.layout %>-<%= page.slug %>"><i class="fa fa-spinner fa-spin"></i></span> 条评论
<% } %>

删除它。

article标签内添加

1
2
3
4
5
  <% if (theme.gitalk_shortname && page.comments && theme.url){ %>
<%- partial('component/gitalk') %>
<% } else { %>
<div class="git"></div>
<% } %>

保存即可

完整文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<article id="<%= post.layout %>-<%= post.slug %>" class="article article-type-<%= post.layout %>" itemprop="blogPost">
<header class="article-header">
<h1 class="post-title"><%= post.title || '(no title)' %></h1>

<div class="article-meta">
<span>
<i class="icon-calendar"></i>
<span><%= date(post.date, 'YYYY.MM.DD') %></span>
</span>

<% if (config.author){ %>
<span class="article-author">
<i class="icon-user"></i>
<span><%= config.author %></span>
</span>
<% } %>

<%- partial('component/category') %>

<% if (theme.disqus_shortname && theme.url && page.comments){ %>
<span>
<i class="icon-comment"></i>
<a href="<%= theme.url + url_for(page.path) + '#disqus_thread' %>"></a>
</span>
<% } %>

<% if (theme.busuanzi){ %>
<i class="fa fa-eye"></i>
<span id="busuanzi_container_page_pv">
&nbsp热度 <span id="busuanzi_value_page_pv">
<i class="fa fa-spinner fa-spin"></i></span>℃
</span>
<% } %>

</div>
</header>

<div class="article-content">
<% if (post.excerpt && index){ %>
<%- post.excerpt %>
<% if (theme.excerpt_link){ %>
<p class="article-more-link">
<a class="btn btn-primary" href="<%- url_for(post.path) %>#more"><%= theme.excerpt_link %></a>
</p>
<% } %>
<% } else { %>
<%- post.content %>
<% } %>
</div>

<% if (theme.gitalk_shortname && page.comments && theme.url){ %>
<%- partial('component/gitalk') %>
<% } else { %>
<div class="git"></div>
<% } %>

</article>

step4

打开 Hexo\themes\fexo_config.yml文件

注释掉disqus_shortname forsigner
添加gitalk_shortname: robinxdroid


到此,配置完成,可以git bash 输入hexo server命令,历览器输入
http://localhost:4000/测试是否正常加载gitalk模块


转载请指明出处RobinBlog:http://robinx.net/2018/01/03/fexo主题集成gitalk评论组件