基于yilia主题配置的评论区

本打算用Gitment,但发现原作者的服务器好像不能用来
由于自己懒得去注册别的网站的账号,所以就用了Gitalk。

正式开始吧

首先点这里进行注册
你会看到下面四个选项

  1. Application name:填写你的应用名称(这个随意,最好是英文,建议跟仓库名一样)
  2. Homepage URL:填写你的博客主页域名
  3. Application description:应用描述,非必填项
  4. Authorization callback URL:这个填写与Homepage URL一致
    点击注册,会获取到 Client ID/scerct 。
配置 _config.yml 文件

打开themes\yilia_config.yml ,增加如下代码:

#6、gitalk评论
gitalk:
  enable: true
  githubID: 填写你的 github 账户名即可  
  repo: 'repo 名字为可新建一个repo 或者使用博客托管的 repo 都行。'
  ClientID: '就是上步骤中注册的获取的信息'
  ClientSecret: '就是上步骤中注册的获取的信息'
  adminUser: 填写你的 github 账户名即可
  distractionFreeMode: true

注意不要去掉引号!!!!

在themes/yilia/layout/_partial/post目录下新增gitalk.ejs文件,文件内写入如下代码:
 <div id="gitalk-container" style="padding: 0px 30px 0px 30px;"></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 type="text/javascript">

if(<%=theme.gitalk.enable%>){
	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: '<%= page.date %>',
  	distractionFreeMode: '<%=theme.gitalk.distractionFreeMode%>'
})
gitalk.render('gitalk-container') 
}
</script>
修改themes/yilia/source-src/css/目录下comment.scss文件
#disqus_thread, .duoshuo, .cloud-tie-wrapper, #SOHUCS, #gitment-ctn, #gitalk-container {
	padding: 0 30px !important;
	min-height: 20px;
}

#SOHUCS {
	#SOHU_MAIN .module-cmt-list .block-cont-gw {
		border-bottom: 1px dashed #c8c8c8 !important;
	}
}
在themes/yilia/layout/_partial目录下的article.ejs文件内新增gitalk相关的配置代码:

先找到

<% if (!index && post.comments){ %>
//添加到这里
<% } %>

然后将:

<% if(theme.gitalk.enable){ %>
  <%- partial('post/gitalk', {
      key: post.slug,
      title: post.title,
      url: config.url+url_for(post.path)
    }) %>
  <% } %>

添加到上述位置处

否则添加到别处主页中间会出现评论区